Add unit tests for LoginButton component with comprehensive coverage

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

@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <div class="edit-view">
+    <div class="view">
       <form class="login-form" @submit.prevent="submitForm" novalidate>
         <h2>Sign in</h2>
 
@@ -36,9 +36,6 @@
             :class="{ 'input-error': submitAttempted && !password }"
             required
           />
-          <small v-if="submitAttempted && !password" class="error-message" aria-live="polite"
-            >Password is required.</small
-          >
         </div>
 
         <!-- show server error message -->
@@ -73,8 +70,8 @@
           {{ resendError }}
         </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 ? 'Signing in…' : 'Sign in' }}
           </button>
         </div>
@@ -139,11 +136,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
-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'
 import {
   MISSING_EMAIL_OR_PASSWORD,
   INVALID_CREDENTIALS,
@@ -193,12 +186,14 @@ async function submitForm() {
       const { msg, code } = await parseErrorResponse(res)
       showResend.value = false
       let displayMsg = msg
+      let shouldClearPassword = false
       switch (code) {
         case MISSING_EMAIL_OR_PASSWORD:
           displayMsg = 'Email and password are required.'
           break
         case INVALID_CREDENTIALS:
           displayMsg = 'The email and password combination is incorrect. Please try again.'
+          shouldClearPassword = true
           break
         case NOT_VERIFIED:
           displayMsg =
@@ -209,6 +204,9 @@ async function submitForm() {
           displayMsg = msg || `Login failed with status ${res.status}.`
       }
       loginError.value = displayMsg
+      if (shouldClearPassword) {
+        password.value = ''
+      }
       return
     }
 
@@ -278,10 +276,19 @@ async function goToForgotPassword() {
 </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);
 }
-
 .login-form {
   background: transparent;
   box-shadow: none;
@@ -290,9 +297,12 @@ async function goToForgotPassword() {
 }
 
 /* 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;
 }
@@ -310,17 +320,23 @@ async function goToForgotPassword() {
   box-sizing: border-box;
 }
 
-/* also ensure disabled button doesn't show underline in browsers that style disabled anchors/buttons */
-.btn-link:disabled {
-  text-decoration: none;
-  cursor: default;
-  opacity: 0.75;
-}
-
 @media (max-width: 520px) {
   .login-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>