css changes on login && fix on account-delete

diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index 9ac51a0df01c68f611a6a2605dfa6e1363ef5419..fdda7db852f1a5e0620e2063f2d7daf8f46cab3b 100644 (file)
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -270,6 +270,7 @@
                { id: 'templates', labelKey: 'settings.templates' },
                { id: 'data', labelKey: 'settings.data' },
                { id: 'security', labelKey: 'settings.security' },
+               { id: 'account', labelKey: 'settings.account' },
                { id: 'about', labelKey: 'settings.about' }
        ];
 
@@ -2207,7 +2208,11 @@
                                                                                </p>
                                                                                <form
                                                                                        onsubmit={() => {
-                                                                                               showConfirmDeleteAccount = true;
+                                                                                               if (deleteAccountPassword.trim() === '') {
+                                                                                                       return;
+                                                                                               } else {
+                                                                                                       showConfirmDeleteAccount = true;
+                                                                                               }
                                                                                        }}
                                                                                >
                                                                                        <div class="form-floating mb-3">
@@ -2223,9 +2228,15 @@
                                                                                                >
                                                                                        </div>
                                                                                        <button
-                                                                                               class="btn btn-danger"
+                                                                                               class="btn btn-danger {deleteAccountPassword.trim() === ''
+                                                                                                       ? 'disabled'
+                                                                                                       : ''}"
                                                                                                onclick={() => {
-                                                                                                       showConfirmDeleteAccount = true;
+                                                                                                       if (deleteAccountPassword.trim() === '') {
+                                                                                                               return;
+                                                                                                       } else {
+                                                                                                               showConfirmDeleteAccount = true;
+                                                                                                       }
                                                                                                }}
                                                                                                data-sveltekit-noscroll
                                                                                        >

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index b139a9f0b3e28ca23e688e895dfefad18e2d0774..ec3d8391ba6072316d1d0ab3dd64a6cbc8efa059 100644 (file)
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -147,10 +147,6 @@
                z-index: 9999;
        }
 
-       :global(body[data-bs-theme='light'] button) {
-               color: black;
-       }
-
        :global(body[data-bs-theme='dark'] button) {
                color: #fbfbfe;
        }

diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 06ba004061e2ad73283b263bb3b0c4914553b680..d4c03ae25ebfb3840c87a3a0af4d693cab13c63f 100644 (file)
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -228,19 +228,33 @@
                                is_registering = false;
                        });
        }
+
+       let secondButtonCollapsed = $state(true);
+       onMount(() => {
+               const el = document.getElementById('collapseTwo');
+               if (el) {
+                       el.addEventListener('show.bs.collapse', () => {
+                               secondButtonCollapsed = false;
+                       });
+                       el.addEventListener('hide.bs.collapse', () => {
+                               secondButtonCollapsed = true;
+                       });
+               }
+       });
 </script>
 
 <div class="logo-login-flex d-flex justify-content-center align-items-center flex-row h-100">
        <div class="logo-wrapper d-flex flex-column align-items-center">
                <img id="largeLogo" src={img} alt="locked heart with keyhole" />
                <span class="dailytxt">DailyTxT</span>
+               <span>{secondButtonCollapsed ? 'h' : 'b'}</span>
        </div>
        <div class="login-wrapper">
-               <div class="accordion" id="loginAccordion">
-                       <div class="accordion-item">
-                               <h2 class="accordion-header">
+               <div class="accordion shadow rounded-4" id="loginAccordion">
+                       <div class="accordion-item rounded-4 rounded-bottom-0">
+                               <h2 class="accordion-header rounded-4 rounded-bottom-0">
                                        <button
-                                               class="accordion-button"
+                                               class="accordion-button rounded-4 rounded-bottom-0"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#collapseOne"
@@ -410,11 +424,15 @@
                                        </div>
                                </div>
                        </div>
-                       <div class="accordion-item">
-                               <h2 class="accordion-header">
+                       <div class="accordion-item rounded-4 rounded-top-0">
+                               <h2 class="accordion-header rounded-4 rounded-top-0">
+                                       <!--  -->
                                        <button
-                                               class="accordion-button collapsed"
+                                               class="accordion-button rounded-top-0 {secondButtonCollapsed
+                                                       ? 'collapsed rounded-4'
+                                                       : ''}"
                                                type="button"
+                                               id="secondAccordionButton"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#collapseTwo"
                                                aria-expanded="false"