feat: modernize login page UI and add password toggle

assets/css/easyadmin-theme/pages.css

@@ -5,84 +5,3 @@ body {
     block-size: 100%;
     margin: 0;
 }
-body.page-login {
-    background: var(--body-bg);
-}
-@media (min-width: 576px) {
-    body.page-login {
-        background: var(--page-login-bg);
-        min-block-size: 100vh;
-        display: grid;
-        place-items: center;
-    }
-}
-body.page-login #flash-messages {
-    position: absolute;
-    inset-inline-start: 0;
-    inset-block-start: 0;
-    inline-size: 100%;
-}
-
-@media (min-width: 576px) {
-    .login-wrapper {
-        margin: 0 auto;
-        inline-size: 25rem;
-    }
-}
-.login-wrapper .main-header {
-    display: block;
-    padding-inline-end: 0;
-}
-.login-wrapper .main-header #header-logo {
-    border-block-end: var(--border-width) var(--border-style) var(--border-secondary-color);
-    margin: 1.5rem 0 1rem;
-    padding-block-end: 1rem;
-}
-@media (min-width: 576px) {
-    .login-wrapper .main-header #header-logo {
-        border-block-end: none;
-    }
-}
-.login-wrapper .main-header #header-logo a {
-    font-size: var(--font-size-lg);
-    text-align: center;
-    margin: 0;
-    padding: 0;
-}
-@media (min-width: 576px) {
-    .login-wrapper .main-header #header-logo a {
-        font-size: var(--font-size-xl);
-    }
-}
-.login-wrapper .content {
-    background-color: var(--body-bg);
-    padding: 15px 30px;
-    inline-size: 100%;
-}
-@media (min-width: 576px) {
-    .login-wrapper .content {
-        background: var(--page-login-form-bg);
-        border-radius: var(--border-radius-lg);
-        box-shadow: var(--shadow-lg);
-        padding: 2.5rem 3rem;
-    }
-}
-.login-wrapper .form-widget input {
-    background-color: var(--page-login-form-control-bg);
-    border-color: var(--page-login-form-control-border-color);
-    font-size: var(--font-size-lg);
-    block-size: 38px;
-    line-height: 38px;
-}
-.login-wrapper .form-group label.required:after {
-    display: none;
-}
-.login-wrapper .btn-primary {
-    background-color: var(--page-login-form-control-button-bg);
-    font-size: var(--font-size-base);
-    margin-block-start: 1rem;
-}
-.login-wrapper .form-text {
-    font-size: inherit;
-    margin-block-start: 5px;
-}

assets/css/easyadmin-theme/variables-theme.css

@@ -383,12 +383,6 @@
     --code-editor-deletion-bg: #ffeef0;
     --code-editor-selection-bg: #d7d7d7;
 
-    --page-login-bg: var(--gray-100);
-    --page-login-form-bg: var(--white);
-    --page-login-form-control-bg: var(--form-control-bg);
-    --page-login-form-control-border-color: var(--form-input-border-color);
-    --page-login-form-control-button-bg: var(--button-primary-bg);
-
     --zindex-700: 777;
     --zindex-800: 888;
     --zindex-900: 999;
@@ -754,12 +748,6 @@
     --code-editor-deletion-bg: rgba(218, 54, 51, 0.3);
     --code-editor-selection-bg: #203e6f;
 
-    --page-login-bg: var(--true-gray-800);
-    --page-login-form-bg: var(--true-gray-700);
-    --page-login-form-control-bg: var(--true-gray-800);
-    --page-login-form-control-border-color: var(--true-gray-600);
-    --page-login-form-control-button-bg: var(--blue-700);
-
     --text-blue-600: hsl(206, 91%, 30%);
     --text-green-600: hsl(159, 75%, 21%);
     --text-indigo-600: hsl(231, 48%, 45%);

assets/js/login.js

@@ -1,8 +1,26 @@
-const loginForm = document.querySelector('form');
-loginForm.addEventListener(
-    'submit',
-    () => {
-        loginForm.querySelector('button[type="submit"]').setAttribute('disabled', 'disabled');
-    },
-    false
-);
+document.addEventListener('DOMContentLoaded', () => {
+    const loginForm = document.querySelector('form');
+    loginForm?.addEventListener('submit', () => {
+        const submitButton = loginForm.querySelector('button[type="submit"]');
+        if (submitButton) {
+            submitButton.disabled = true;
+            const spinner = document.createElement('span');
+            spinner.className = 'spinner-border spinner-border-sm ms-2';
+            submitButton.appendChild(spinner);
+        }
+    });
+
+    const toggleBtn = document.getElementById('password-toggle-btn');
+    toggleBtn?.addEventListener('click', (e) => {
+        e.preventDefault();
+        const input = document.getElementById('password');
+        const icon = toggleBtn.querySelector('i');
+
+        if (input && icon) {
+            const isPassword = input.type === 'password';
+            input.type = isPassword ? 'text' : 'password';
+            icon.classList.toggle('fa-eye', !isPassword);
+            icon.classList.toggle('fa-eye-slash', isPassword);
+        }
+    });
+});

public/entrypoints.json

@@ -2,15 +2,15 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.98533a09.css"
+        "/app.b745af73.css"
       ],
       "js": [
-        "/app.e8e4fe24.js"
+        "/app.908c54d7.js"
       ]
     },
     "form": {
       "js": [
-        "/form.5bccac01.js"
+        "/form.24a30a5a.js"
       ]
     },
     "page-layout": {
@@ -20,58 +20,58 @@
     },
     "page-color-scheme": {
       "js": [
-        "/page-color-scheme.e3fe1a0a.js"
+        "/page-color-scheme.75224563.js"
       ]
     },
     "field-boolean": {
       "js": [
-        "/field-boolean.adeeab81.js"
+        "/field-boolean.6eb3e3a7.js"
       ]
     },
     "field-code-editor": {
       "css": [
         "/field-code-editor.cdcf15eb.css"
       ],
       "js": [
-        "/field-code-editor.877c61fa.js"
+        "/field-code-editor.a0cd3c60.js"
       ]
     },
     "field-collection": {
       "js": [
-        "/field-collection.b4d3688b.js"
+        "/field-collection.8354cae4.js"
       ]
     },
     "field-file-upload": {
       "js": [
-        "/field-file-upload.5c32db38.js"
+        "/field-file-upload.35a9e188.js"
       ]
     },
     "field-image": {
       "js": [
-        "/field-image.c338d2ad.js"
+        "/field-image.eaff40fe.js"
       ]
     },
     "field-slug": {
       "js": [
-        "/field-slug.ba7fb8e5.js"
+        "/field-slug.037a5045.js"
       ]
     },
     "field-textarea": {
       "js": [
-        "/field-textarea.98322d83.js"
+        "/field-textarea.485f5ae6.js"
       ]
     },
     "field-text-editor": {
       "css": [
         "/field-text-editor.d426785c.css"
       ],
       "js": [
-        "/field-text-editor.3e768b9b.js"
+        "/field-text-editor.d10f197a.js"
       ]
     },
     "login": {
       "js": [
-        "/login.7259f5de.js"
+        "/login.fae7b522.js"
       ]
     }
   }