Add unit tests for LoginButton component with comprehensive coverage

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

@@ -1,12 +1,7 @@
 <template>
   <div class="layout">
-    <div class="edit-view">
-      <form
-        v-if="!signupSuccess"
-        @submit.prevent="submitForm"
-        class="signup-form child-edit-view"
-        novalidate
-      >
+    <div class="view">
+      <form v-if="!signupSuccess" @submit.prevent="submitForm" class="signup-form view" novalidate>
         <h2>Sign up</h2>
         <div class="form-group">
           <label for="firstName">First name</label>
@@ -17,9 +12,10 @@
             autofocus
             autocomplete="given-name"
             required
-            :class="{ 'input-error': submitAttempted && !firstName }"
+            @blur="firstNameTouched = true"
+            :class="{ 'input-error': firstNameTouched && !firstName }"
           />
-          <small v-if="submitAttempted && !firstName" class="error-message" aria-live="polite"
+          <small v-if="firstNameTouched && !firstName" class="error-message" aria-live="polite"
             >First name is required.</small
           >
         </div>
@@ -32,9 +28,10 @@
             autocomplete="family-name"
             type="text"
             required
-            :class="{ 'input-error': submitAttempted && !lastName }"
+            @blur="lastNameTouched = true"
+            :class="{ 'input-error': lastNameTouched && !lastName }"
           />
-          <small v-if="submitAttempted && !lastName" class="error-message" aria-live="polite"
+          <small v-if="lastNameTouched && !lastName" class="error-message" aria-live="polite"
             >Last name is required.</small
           >
         </div>
@@ -47,12 +44,13 @@
             autocomplete="email"
             type="email"
             required
-            :class="{ 'input-error': submitAttempted && (!email || !isEmailValid) }"
+            @blur="emailTouched = true"
+            :class="{ 'input-error': emailTouched && (!email || !isEmailValidRef) }"
           />
-          <small v-if="submitAttempted && !email" class="error-message" aria-live="polite"
+          <small v-if="emailTouched && !email" class="error-message" aria-live="polite"
             >Email is required.</small
           >
-          <small v-else-if="submitAttempted && !isEmailValid" class="error-message"
+          <small v-else-if="emailTouched && !isEmailValidRef" class="error-message"
             >Please enter a valid email address.</small
           >
         </div>
@@ -66,10 +64,10 @@
             type="password"
             required
             @input="checkPasswordStrength"
-            :class="{ 'input-error': (submitAttempted || passwordTouched) && !isPasswordStrong }"
+            :class="{ 'input-error': passwordTouched && !isPasswordStrongRef }"
           />
           <small
-            v-if="(submitAttempted || passwordTouched) && !isPasswordStrong"
+            v-if="passwordTouched && !isPasswordStrongRef"
             class="error-message"
             aria-live="polite"
             >Password must be at least 8 characters, include a number and a letter.</small
@@ -84,19 +82,18 @@
             autocomplete="new-password"
             type="password"
             required
-            :class="{ 'input-error': (submitAttempted || confirmTouched) && !passwordsMatch }"
+            :class="{ 'input-error': confirmTouched && !passwordsMatch }"
             @blur="confirmTouched = true"
           />
-          <small
-            v-if="(submitAttempted || confirmTouched) && !passwordsMatch"
-            class="error-message"
-            aria-live="polite"
+          <small v-if="confirmTouched && !passwordsMatch" class="error-message" aria-live="polite"
             >Passwords do not match.</small
           >
         </div>
 
-        <div class="form-group" style="margin-top: 0.4rem">
-          <button type="submit" class="form-btn" :disabled="!formValid || loading">Sign up</button>
+        <div class="form-group actions" style="margin-top: 0.4rem">
+          <button type="submit" class="btn btn-primary" :disabled="!formValid || loading">
+            Sign up
+          </button>
         </div>
       </form>
 
@@ -153,17 +150,16 @@ import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { isEmailValid, isPasswordStrong } from '@/common/api'
 import { EMAIL_EXISTS, MISSING_FIELDS } from '@/common/errorCodes'
-import '@/assets/view-shared.css'
-import '@/assets/actions-shared.css'
-import '@/assets/button-shared.css'
-import '@/assets/colors.css'
-import '@/assets/edit-forms.css'
+import '@/assets/styles.css'
 
 const router = useRouter()
 
 const firstName = ref('')
 const lastName = ref('')
 const email = ref('')
+const firstNameTouched = ref(false)
+const lastNameTouched = ref(false)
+const emailTouched = ref(false)
 const password = ref('')
 const confirmPassword = ref('')
 const passwordTouched = ref(false)
@@ -272,17 +268,28 @@ function clearFields() {
   confirmTouched.value = false
   submitAttempted.value = false
   signupError.value = ''
+  firstNameTouched.value = false
+  lastNameTouched.value = false
+  emailTouched.value = false
 }
 </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);
 }
 
 .signup-form {
-  /* keep the edit-view / child-edit-view look from edit-forms.css,
-     only adjust inputs for email/password types */
   background: transparent;
   box-shadow: none;
   padding: 0;
@@ -324,10 +331,13 @@ function clearFields() {
   justify-content: center;
 }
 
-/* Reuse existing input / label styles */
+/* 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;
 }
@@ -344,26 +354,17 @@ function clearFields() {
   background: var(--form-input-bg, #fff);
   box-sizing: border-box;
 }
-
-/* Modal styles */
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.35);
+.actions {
   display: flex;
-  align-items: center;
+  gap: 3rem;
   justify-content: center;
-  z-index: 1000;
+  margin-top: 0.5rem;
+  margin-bottom: 0.4rem;
 }
-.modal-dialog {
-  background: #fff;
-  padding: 2rem;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
-  max-width: 340px;
-  text-align: center;
+.actions .btn {
+  padding: 1rem 2.2rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  min-width: 120px;
 }
 </style>