mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
add profile dark mode + enhance flash
This commit is contained in:
Jordan Blasenhauer
parent
48ea94f115
commit
a21ab3ca75
4 changed files with 58 additions and 92 deletions
File diff suppressed because one or more lines are too long
49
src/ui/templates/base.html
vendored
49
src/ui/templates/base.html
vendored
|
|
@ -49,34 +49,31 @@
|
|||
role="alert"
|
||||
aria-description="login message alert"
|
||||
data-flash-message
|
||||
class="p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-[300px] min-h-20 bg-white rounded-lg dark:brightness-110 hover:scale-102 transition shadow-md break-words dark:bg-slate-850 dark:shadow-dark-xl bg-clip-border"
|
||||
class="{% if category == 'error' %} bg-red-500 {%else%} bg-green-500 {%endif %} p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-[300px] min-h-20 my-2 border rounded-lg hover:scale-102 transition shadow-md break-words dark:brightness-90"
|
||||
>
|
||||
<button
|
||||
data-close-flash-message
|
||||
role="close alert message"
|
||||
class="absolute right-7 top-1.5"
|
||||
>
|
||||
<svg
|
||||
class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
<div class="flex justify-between align-top items-start">
|
||||
{% if category == 'error' %}
|
||||
<h5 class="text-lg mb-0 text-white">Error</h5>
|
||||
{%else%}
|
||||
<h5 class="text-lg mb-0 text-white">Success</h5>
|
||||
{%endif%}
|
||||
<button
|
||||
aria-label="close flash message"
|
||||
data-close-flash-message
|
||||
class="absolute right-8 top-2"
|
||||
>
|
||||
<path
|
||||
d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
{% if category == 'error' or (message|safe).startswith("Please log in") %}
|
||||
<h5 class="text-lg mb-0 text-red-500">Error</h5>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-0 text-sm">
|
||||
{{ message|safe }}
|
||||
</p>
|
||||
{% else %}
|
||||
<h5 class="text-lg mb-0 text-green-500">Success</h5>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-0 text-sm">
|
||||
{{ message|safe }}
|
||||
</p>
|
||||
{% endif %}
|
||||
<svg
|
||||
class="cursor-pointer fill-white dark:opacity-80 absolute h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
<path
|
||||
d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-white mt-2 mb-0 text-sm">{{ message|safe }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<!-- end flash message-->
|
||||
|
|
|
|||
11
src/ui/templates/flashs.html
vendored
11
src/ui/templates/flashs.html
vendored
|
|
@ -39,9 +39,14 @@
|
|||
class="translate-x-90 -right-0 transition z-sticky dark:bg-slate-850 dark:brightness-110 shadow-3xl max-w-full w-90 ease fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white bg-clip-border px-0.5"
|
||||
>
|
||||
<!-- close btn-->
|
||||
<button aria-controls="sidebar-flash" aria-expanded="false" aria-label="close flash sidebar" data-flash-sidebar-close>
|
||||
<button
|
||||
aria-controls="sidebar-flash"
|
||||
aria-expanded="false"
|
||||
aria-label="close flash sidebar"
|
||||
data-flash-sidebar-close
|
||||
>
|
||||
<svg
|
||||
class=" fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
|
||||
class="fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
|
|
@ -82,7 +87,7 @@
|
|||
role="alert"
|
||||
aria-description="flash feedback message"
|
||||
data-flash-message
|
||||
class="{% if category == 'error' %}bg-red-500 {%else%} bg-green-500 {%endif %} my-2 border relative p-4 w-11/12 min-h-20 rounded-lg hover:scale-102 transition shadow-md break-words dark:brightness-90"
|
||||
class="{% if category == 'error' %} bg-red-500 {%else%} bg-green-500 {%endif %} my-2 border relative p-4 w-11/12 min-h-20 rounded-lg hover:scale-102 transition shadow-md break-words dark:brightness-90"
|
||||
>
|
||||
<div class="flex justify-between align-top items-start">
|
||||
{% if category == 'error' %}
|
||||
|
|
|
|||
88
src/ui/templates/profile.html
vendored
88
src/ui/templates/profile.html
vendored
|
|
@ -168,7 +168,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
>
|
||||
<div class="col-span-12">
|
||||
<h5
|
||||
class="text-xl my-1 transition duration-300 ease-in-out font-bold m-0 mb-4"
|
||||
class="text-xl my-1 transition duration-300 ease-in-out font-bold m-0 mb-4 dark:text-gray-200"
|
||||
>
|
||||
USERNAME
|
||||
</h5>
|
||||
|
|
@ -191,11 +191,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
<div
|
||||
class="flex flex-col relative col-span-12 px-4 my-2 md:px-6 md:my-3 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
Username
|
||||
</h5>
|
||||
<h5 class="input-title">Username</h5>
|
||||
<label class="sr-only" for="admin_username">New username</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -214,11 +210,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
data-input-group
|
||||
class="flex flex-col relative col-span-12 px-4 my-2 md:px-6 md:my-3 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
Password
|
||||
</h5>
|
||||
<h5 class="input-title">Password</h5>
|
||||
<label class="sr-only" for="curr_password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
|
|
@ -233,7 +225,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
/>
|
||||
<div
|
||||
data-setting-password-container
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[59%]"
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[55%]"
|
||||
>
|
||||
<button
|
||||
data-setting-password="visible"
|
||||
|
|
@ -241,7 +233,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none"
|
||||
class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
|
|
@ -294,7 +286,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
>
|
||||
<div class="col-span-12">
|
||||
<h5
|
||||
class="text-xl my-1 transition duration-300 ease-in-out font-bold m-0 mb-4"
|
||||
class="text-xl my-1 transition duration-300 ease-in-out font-bold m-0 mb-4 dark:text-gray-200"
|
||||
>
|
||||
PASSWORD
|
||||
</h5>
|
||||
|
|
@ -310,11 +302,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
data-input-group
|
||||
class="flex flex-col relative col-span-12 px-4 my-2 md:px-6 md:my-3 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
Password
|
||||
</h5>
|
||||
<h5 class="input-title">Password</h5>
|
||||
<label class="sr-only" for="curr_password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
|
|
@ -329,7 +317,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
/>
|
||||
<div
|
||||
data-setting-password-container
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[59%]"
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[55%]"
|
||||
>
|
||||
<button
|
||||
data-setting-password="visible"
|
||||
|
|
@ -337,7 +325,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none"
|
||||
class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
|
|
@ -369,11 +357,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
data-input-group
|
||||
class="flex flex-col relative col-span-12 px-4 my-2 md:px-6 md:my-3 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
New password
|
||||
</h5>
|
||||
<h5 class="input-title">New password</h5>
|
||||
<label class="sr-only" for="admin_password">New password</label>
|
||||
<input
|
||||
type="password"
|
||||
|
|
@ -387,11 +371,11 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
/>
|
||||
<div
|
||||
data-setting-password-container
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[59%] md:top-[58%]"
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[55%]"
|
||||
>
|
||||
<button
|
||||
data-setting-password="visible"
|
||||
class="h-5 w-5 flex items-center align-middle"
|
||||
class="h-5 w-5 flex items-center align-middle dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -427,11 +411,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
data-input-group
|
||||
class="flex flex-col relative col-span-12 px-4 my-2 md:px-6 md:my-3 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
Confirm new password
|
||||
</h5>
|
||||
<h5 class="input-title">Confirm new password</h5>
|
||||
<label class="sr-only" for="admin_password_check"
|
||||
>Confirm new password
|
||||
</label>
|
||||
|
|
@ -447,11 +427,11 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
/>
|
||||
<div
|
||||
data-setting-password-container
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[43%] md:top-[44%]"
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[38%] md:top-[40%]"
|
||||
>
|
||||
<button
|
||||
data-setting-password="visible"
|
||||
class="h-5 w-5 flex items-center align-middle"
|
||||
class="h-5 w-5 flex items-center align-middle dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -508,13 +488,13 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
>
|
||||
<div class="col-span-12">
|
||||
<h5
|
||||
class="text-xl my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
class="text-xl my-1 transition duration-300 ease-in-out text-md font-bold m-0 dark:text-gray-200"
|
||||
>
|
||||
TOTP
|
||||
</h5>
|
||||
</div>
|
||||
<h5
|
||||
class="{% if not is_totp %} text-red-500 {% else %} text-green-500 {% endif %} uppercase col-span-12 text-sm my-2 font-bold dark:text-white/90 mx-2"
|
||||
class="{% if not is_totp %} text-red-500 {% else %} text-green-500 {% endif %} uppercase col-span-12 text-sm my-2 font-bold mx-2"
|
||||
>
|
||||
{% if not is_totp %} TOTP is currently off {% else %} TOTP is currently on
|
||||
{% endif %}
|
||||
|
|
@ -531,12 +511,8 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
data-input-group
|
||||
class="flex flex-col relative col-span-12 px-4 my-2 md:px-6 md:my-3 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
2FA QR CODE
|
||||
</h5>
|
||||
<div class="flex justify-center">
|
||||
<h5 class="input-title text-center">2FA QR CODE</h5>
|
||||
<div class="flex justify-center mt-2">
|
||||
<img
|
||||
src="data:image/png;base64, {{ totp_qr_image }}"
|
||||
alt="Secret Token"
|
||||
|
|
@ -550,11 +526,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
data-input-group
|
||||
class="flex flex-col relative col-span-12 px-4 my-2 md:px-6 md:my-3 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
Secret token
|
||||
</h5>
|
||||
<h5 class="input-title">Secret token</h5>
|
||||
<label class="sr-only" for="secret_token">secret token</label>
|
||||
<input
|
||||
type="password"
|
||||
|
|
@ -567,11 +539,11 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
/>
|
||||
<div
|
||||
data-setting-password-container
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[59%]"
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[55%]"
|
||||
>
|
||||
<button
|
||||
data-setting-password="visible"
|
||||
class="h-5 w-5 flex items-center align-middle"
|
||||
class="h-5 w-5 flex items-center align-middle dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -607,11 +579,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
<div
|
||||
class="flex flex-col relative col-span-12 px-4 my-2 md:px-6 md:my-3 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
2FA code
|
||||
</h5>
|
||||
<h5 class="input-title">2FA code</h5>
|
||||
<label class="sr-only" for="totp_token">totp code</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -630,11 +598,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
data-input-group
|
||||
class="flex flex-col relative col-span-12 px-4 my-2 md:px-6 md:my-3 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
Password
|
||||
</h5>
|
||||
<h5 class="input-title">Password</h5>
|
||||
<label class="sr-only" for="totp_password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
|
|
@ -649,7 +613,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
/>
|
||||
<div
|
||||
data-setting-password-container
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[59%]"
|
||||
class="absolute flex right-6 md:right-8 h-5 w-5 top-[55%]"
|
||||
>
|
||||
<button
|
||||
data-setting-password="visible"
|
||||
|
|
@ -657,7 +621,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none"
|
||||
class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue