Skip to content

Commit

Permalink
add profile dark mode + enhance flash
Browse files Browse the repository at this point in the history
  • Loading branch information
@syrk4web
syrk4web committed Jan 2, 2024
1 parent 48ea94f commit a21ab3c
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 92 deletions.
2 changes: 1 addition & 1 deletion src/ui/static/css/dashboard.css
View file

Large diffs are not rendered by default.

49 changes: 23 additions & 26 deletions src/ui/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-->
Expand Down
11 changes: 8 additions & 3 deletions src/ui/templates/flashs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down Expand Up @@ -82,7 +87,7 @@ <h5 class="mt-4 mb-1 dark:text-white font-bold">MESSAGES</h5>
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' %}
Expand Down
88 changes: 26 additions & 62 deletions src/ui/templates/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
>
<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>
Expand All @@ -191,11 +191,7 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
<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"
Expand All @@ -214,11 +210,7 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
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"
Expand All @@ -233,15 +225,15 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
/>
<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 dark:fill-blue-500 hover:brightness-75 transition-all"
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"
>
Expand Down Expand Up @@ -294,7 +286,7 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
>
<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>
Expand All @@ -310,11 +302,7 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
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"
Expand All @@ -329,15 +317,15 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
/>
<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 dark:fill-blue-500 hover:brightness-75 transition-all"
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"
>
Expand Down Expand Up @@ -369,11 +357,7 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
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"
Expand All @@ -387,11 +371,11 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
/>
<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
Expand Down Expand Up @@ -427,11 +411,7 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
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>
Expand All @@ -447,11 +427,11 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
/>
<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
Expand Down Expand Up @@ -508,13 +488,13 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
>
<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 %}
Expand All @@ -531,12 +511,8 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
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"
Expand All @@ -550,11 +526,7 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
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"
Expand All @@ -567,11 +539,11 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
/>
<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
Expand Down Expand Up @@ -607,11 +579,7 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
<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"
Expand All @@ -630,11 +598,7 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
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"
Expand All @@ -649,15 +613,15 @@ <h5 class="my-2 font-bold dark:text-white/90 mx-2">SETTINGS</h5>
/>
<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 dark:fill-blue-500 hover:brightness-75 transition-all"
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"
>
Expand Down

0 comments on commit a21ab3c

Please sign in to comment.