Add unit tests for LoginButton component with comprehensive coverage

frontend/vue-app/src/components/auth/ResetPassword.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <div class="edit-view">
+    <div class="view">
       <form
         v-if="tokenChecked && tokenValid"
         class="reset-form"
@@ -16,17 +16,10 @@
             type="password"
             autocomplete="new-password"
             v-model="password"
-            :class="{ 'input-error': submitAttempted && !isPasswordStrong }"
+            :class="{ 'input-error': password && (!isPasswordStrongRef || !passwordsMatch) }"
             required
           />
-          <small v-if="submitAttempted && !password" class="error-message" aria-live="polite">
-            Password is required.
-          </small>
-          <small
-            v-else-if="submitAttempted && !isPasswordStrong"
-            class="error-message"
-            aria-live="polite"
-          >
+          <small v-if="password && !isPasswordStrongRef" class="error-message" aria-live="polite">
             Password must be at least 8 characters and contain a letter and a number.
           </small>
         </div>
@@ -38,21 +31,10 @@
             type="password"
             autocomplete="new-password"
             v-model="confirmPassword"
-            :class="{ 'input-error': submitAttempted && !passwordsMatch }"
+            :class="{ 'input-error': confirmPassword && !passwordsMatch }"
             required
           />
-          <small
-            v-if="submitAttempted && !confirmPassword"
-            class="error-message"
-            aria-live="polite"
-          >
-            Please confirm your password.
-          </small>
-          <small
-            v-else-if="submitAttempted && !passwordsMatch"
-            class="error-message"
-            aria-live="polite"
-          >
+          <small v-if="confirmPassword && !passwordsMatch" class="error-message" aria-live="polite">
             Passwords do not match.
           </small>
         </div>
@@ -69,8 +51,8 @@
           {{ successMsg }}
         </div>
 
-        <div class="form-group" style="margin-top: 0.4rem">
-          <button type="submit" class="form-btn" :disabled="loading || !formValid">
+        <div class="form-group actions" style="margin-top: 0.4rem">
+          <button type="submit" class="btn btn-primary" :disabled="loading || !formValid">
             {{ loading ? 'Resetting…' : 'Reset password' }}
           </button>
         </div>
@@ -137,11 +119,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { isPasswordStrong } from '@/common/api'
-import '@/assets/view-shared.css'
-import '@/assets/colors.css'
-import '@/assets/edit-forms.css'
-import '@/assets/actions-shared.css'
-import '@/assets/button-shared.css'
+import '@/assets/styles.css'
 
 const router = useRouter()
 const route = useRoute()
@@ -241,8 +219,18 @@ async function goToLogin() {
 </script>
 
 <style scoped>
-:deep(.edit-view) {
-  width: 400px;
+.view {
+  max-width: 420px;
+  margin: 0 auto;
+  background: var(--edit-view-bg, #fff);
+  border-radius: 14px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  padding: 2.2rem 2.2rem 1.5rem 2.2rem;
+}
+.view h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--form-heading);
 }
 
 .reset-form {
@@ -252,13 +240,18 @@ async function goToLogin() {
   border: none;
 }
 
+/* reuse edit-forms form-group styles */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
 .form-group label {
   display: block;
-  margin-bottom: 0.45rem;
   color: var(--form-label, #444);
   font-weight: 600;
 }
 .form-group input,
+.form-group input[type='email'],
 .form-group input[type='password'] {
   display: block;
   width: 100%;
@@ -271,16 +264,24 @@ async function goToLogin() {
   box-sizing: border-box;
 }
 
-.btn-link:disabled {
-  text-decoration: none;
-  cursor: default;
-  opacity: 0.75;
-}
-
 @media (max-width: 520px) {
   .reset-form {
     padding: 1rem;
     border-radius: 10px;
   }
 }
+
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+.actions .btn {
+  padding: 1rem 2.2rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  min-width: 120px;
+}
 </style>