mirror of
https://github.com/wizarrrr/wizarr.git
synced 2025-12-23 23:59:23 -05:00
style: improve HTML formatting and indentation across multiple templates
This commit is contained in:
Matthieu B
@@ -257,7 +257,9 @@
|
||||
max="100"
|
||||
placeholder="0 = unlimited"
|
||||
class="mt-1 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary dark:focus:border-primary">
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ _("Number of devices that can stream simultaneously. Set to 0 for unlimited.") }}</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ _("Number of devices that can stream simultaneously. Set to 0 for unlimited.") }}
|
||||
</p>
|
||||
</div>
|
||||
{% elif s.server_type == "emby" %}
|
||||
<label class="flex items-center cursor-pointer">
|
||||
|
||||
@@ -29,7 +29,6 @@
|
||||
<span class="sr-only">{{ _("Close modal") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal body -->
|
||||
<div class="space-y-4 md:space-y-6">
|
||||
{% if error %}
|
||||
@@ -39,13 +38,13 @@
|
||||
<svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-2"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd">
|
||||
</path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-red-800 dark:text-red-200">{{ error }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if has_token %}
|
||||
<!-- Success message -->
|
||||
<div class="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
|
||||
@@ -53,17 +52,15 @@
|
||||
<svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd">
|
||||
</path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-green-800 dark:text-green-200">
|
||||
{{ _("Password reset link for") }} <strong>{{ username }}</strong>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-sm text-green-700 dark:text-green-300">
|
||||
{{ _("Link expires:") }} {{ expires_at }}
|
||||
</p>
|
||||
<p class="text-sm text-green-700 dark:text-green-300">{{ _("Link expires:") }} {{ expires_at }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Reset link input with copy button -->
|
||||
<div>
|
||||
<label for="reset-link-input"
|
||||
@@ -88,22 +85,16 @@
|
||||
{{ _("Send this link to the user. They can use it once to reset their password.") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Reset code display -->
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ _("Reset Code") }}
|
||||
</label>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ _("Reset Code") }}</label>
|
||||
<code class="block bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-2 rounded font-mono text-sm">
|
||||
{{ code }}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<!-- Security notes -->
|
||||
<div class="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||
<p class="text-sm font-medium text-blue-800 dark:text-blue-400">
|
||||
{{ _("Security Notes:") }}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-blue-800 dark:text-blue-400">{{ _("Security Notes:") }}</p>
|
||||
<ul class="text-xs mt-2 space-y-1 list-disc list-inside text-blue-700 dark:text-blue-300">
|
||||
<li>{{ _("This link can only be used once") }}</li>
|
||||
<li>{{ _("It expires in 24 hours") }}</li>
|
||||
@@ -125,7 +116,8 @@
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
|
||||
</path>
|
||||
</svg>
|
||||
{{ _("Generate Reset Link") }}
|
||||
</button>
|
||||
@@ -136,7 +128,6 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal footer -->
|
||||
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 dark:bg-gray-800">
|
||||
{% if has_token %}
|
||||
@@ -156,9 +147,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if has_token %}
|
||||
<script>
|
||||
<script>
|
||||
// Copy reset link to clipboard
|
||||
function copyResetLink() {
|
||||
const input = document.getElementById('reset-link-input');
|
||||
@@ -197,5 +187,5 @@
|
||||
alert('{{ _("Please manually copy the link") }}');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
@@ -6,25 +6,26 @@
|
||||
<section class="bg-gray-50 dark:bg-gray-900">
|
||||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
|
||||
<a href="#"
|
||||
class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
|
||||
{{ _("Wizarr") }}
|
||||
</a>
|
||||
class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">{{ _("Wizarr") }}</a>
|
||||
<div class="w-full bg-white rounded-lg shadow-sm dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
|
||||
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
|
||||
<!-- Error icon -->
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center justify-center w-16 h-16 bg-red-100 rounded-full dark:bg-red-900">
|
||||
<svg class="w-10 h-10 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
<svg class="w-10 h-10 text-red-600 dark:text-red-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-xl font-bold leading-tight tracking-tight text-center text-gray-900 md:text-2xl dark:text-white">
|
||||
{{ _("Password Reset Error") }}
|
||||
</h1>
|
||||
|
||||
<div class="p-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
|
||||
<div class="p-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
|
||||
role="alert">
|
||||
<span class="font-medium">{{ _("Error:") }}</span>
|
||||
<p class="mt-2">
|
||||
{% if error == "Invalid reset code" %}
|
||||
@@ -40,16 +41,12 @@
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-sm text-gray-600 dark:text-gray-400">
|
||||
<p>{{ _("Please contact your server administrator to request a new password reset link.") }}</p>
|
||||
{% if code %}
|
||||
<p class="mt-2 text-xs font-mono text-gray-500 dark:text-gray-500">
|
||||
{{ _("Code:") }} {{ code }}
|
||||
</p>
|
||||
<p class="mt-2 text-xs font-mono text-gray-500 dark:text-gray-500">{{ _("Code:") }} {{ code }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mt-4 p-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400">
|
||||
<p class="font-medium">{{ _("Common reasons for this error:") }}</p>
|
||||
<ul class="mt-2 list-disc list-inside">
|
||||
|
||||
@@ -19,17 +19,16 @@
|
||||
</p>
|
||||
{% if expires_at %}
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-500">
|
||||
{{ _("This link expires on") }} {{ expires_at.strftime('%Y-%m-%d %H:%M UTC') if expires_at.strftime else expires_at }}
|
||||
{{ _("This link expires on") }} {{ expires_at.strftime("%Y-%m-%d %H:%M UTC") if expires_at.strftime else expires_at }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if error %}
|
||||
<div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
|
||||
<div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
|
||||
role="alert">
|
||||
<span class="font-medium">{{ _("Error:") }}</span> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form class="space-y-4 md:space-y-6" method="post">
|
||||
<div>
|
||||
<label for="new_password"
|
||||
@@ -45,7 +44,6 @@
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
|
||||
required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="confirm_password"
|
||||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
@@ -60,7 +58,6 @@
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
|
||||
required>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||||
<p>{{ _("Password must be:") }}</p>
|
||||
<ul class="list-disc list-inside mt-1">
|
||||
@@ -68,7 +65,6 @@
|
||||
<li>{{ _("Match the confirmation") }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="w-full text-white bg-primary hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary dark:hover:bg-primary-dark dark:focus:ring-primary-800">
|
||||
{{ _("Reset Password") }}
|
||||
@@ -79,4 +75,3 @@
|
||||
</div>
|
||||
</section>
|
||||
{% endblock main %}
|
||||
|
||||
|
||||
@@ -6,24 +6,23 @@
|
||||
<section class="bg-gray-50 dark:bg-gray-900">
|
||||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
|
||||
<a href="#"
|
||||
class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
|
||||
{{ _("Wizarr") }}
|
||||
</a>
|
||||
class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">{{ _("Wizarr") }}</a>
|
||||
<div class="w-full bg-white rounded-lg shadow-sm dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
|
||||
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
|
||||
<!-- Success icon -->
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center justify-center w-16 h-16 bg-green-100 rounded-full dark:bg-green-900">
|
||||
<svg class="w-10 h-10 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-10 h-10 text-green-600 dark:text-green-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-xl font-bold leading-tight tracking-tight text-center text-gray-900 md:text-2xl dark:text-white">
|
||||
{{ _("Password Reset Successful!") }}
|
||||
</h1>
|
||||
|
||||
<div class="text-center">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ _("The password for") }} <span class="font-semibold text-gray-900 dark:text-white">{{ username }}</span> {{ _("has been successfully reset.") }}
|
||||
@@ -32,8 +31,8 @@
|
||||
{{ _("You can now use your new password to log in to your media server.") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4 mt-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400" role="alert">
|
||||
<div class="p-4 mt-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400"
|
||||
role="alert">
|
||||
<p class="font-medium">{{ _("What's next?") }}</p>
|
||||
<p class="mt-1">{{ _("Log in to your media server with your username and new password.") }}</p>
|
||||
</div>
|
||||
@@ -42,4 +41,3 @@
|
||||
</div>
|
||||
</section>
|
||||
{% endblock main %}
|
||||
|
||||
|
||||
@@ -177,12 +177,20 @@
|
||||
hx-indicator="#clean-expired-indicator"
|
||||
hx-confirm="{{ _('Are you sure you want to clean all expired users? This action cannot be undone.') }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 text-sm font-medium shadow-xs transition-colors">
|
||||
<svg id="clean-expired-indicator" class="htmx-indicator w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<svg id="clean-expired-indicator"
|
||||
class="htmx-indicator w-4 h-4 mr-2 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg class="w-4 h-4 mr-2 [.htmx-request_&]:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
||||
<svg class="w-4 h-4 mr-2 [.htmx-request_&]:hidden"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
|
||||
</path>
|
||||
</svg>
|
||||
{{ _("Clean Expired Users") }}
|
||||
</button>
|
||||
|
||||
@@ -227,7 +227,8 @@
|
||||
stroke-linejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user