style(all): update email templates and frontend components for consistency

Author: Lasim

services/backend/src/email/templates/layouts/base.pug

@@ -79,15 +79,18 @@ html(lang="en")
         margin: 0.6666667em 0;
       }
       a {
-        color: #2563eb;
+        color: #0f766e;
         text-decoration: underline;
       }
+      a:hover {
+        color: #115e59;
+      }
 
       /* Buttons */
       .button {
         display: inline-block;
         padding: 14px 28px;
-        background-color: #2563eb;
+        background-color: #0f766e;
         color: #ffffff !important;
         text-decoration: none;
         border-radius: 6px;
@@ -96,14 +99,20 @@ html(lang="en")
         text-align: center;
       }
       .button:hover {
-        background-color: #1d4ed8;
+        background-color: #115e59;
       }
       .button-secondary {
         background-color: #6b7280;
       }
       .button-secondary:hover {
         background-color: #4b5563;
       }
+      .button-destructive {
+        background-color: #dc2626;
+      }
+      .button-destructive:hover {
+        background-color: #b91c1c;
+      }
 
       /* Footer - now table-based */
 

services/backend/src/email/templates/password-changed.pug

@@ -42,7 +42,7 @@ block content
       li Contact our support team if you need assistance
 
     .text-center(style="margin-top: 16px;")
-      a.button(href="#{loginUrl || 'https://app.deploystack.com/login'}" style="background-color: #dc2626; color: white;") Secure My Account
+      a.button.button-destructive(href="#{loginUrl || 'https://app.deploystack.com/login'}") Secure My Account
 
   p
     | For your security, we recommend:

services/backend/src/routes/auth/forgotPassword.ts

@@ -57,7 +57,7 @@ export default async function forgotPasswordRoute(fastify: FastifyInstance) {
         fastify.log.info(`Password reset requested for email: ${email}`);
 
         // Send reset email (always returns success for security)
-        const result = await PasswordResetService.sendResetEmail(email);
+        const result = await PasswordResetService.sendResetEmail(email, fastify.log);
 
         if (!result.success && result.error) {
           // Only log actual errors, not security responses

services/frontend/src/services/userService.ts

@@ -158,7 +158,22 @@ export class UserService {
         return await response.json();
       }
 
-      throw new Error(`Login failed with status: ${response.status}`);
+      // Parse error response to get the actual error message
+      let errorMessage = `Login failed with status: ${response.status}`;
+      try {
+        const errorData = await response.json();
+        if (errorData && errorData.error) {
+          errorMessage = errorData.error;
+        }
+      } catch (parseError) {
+        // If we can't parse the response, use the default message
+        console.warn('Could not parse error response:', parseError);
+      }
+
+      // Create an error object with status property for proper handling
+      const error = new Error(errorMessage) as Error & { status: number };
+      error.status = response.status;
+      throw error;
     } catch (error) {
       console.error('Login error:', error);
       throw error;

services/frontend/src/views/ForgotPassword.vue

@@ -4,21 +4,16 @@ import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { Mail, AlertTriangle, CheckCircle } from 'lucide-vue-next'
+import { Mail } from 'lucide-vue-next'
 import { useI18n } from 'vue-i18n'
+import { toast } from 'vue-sonner'
 import { UserService } from '@/services/userService'
 
 import {
   Card,
   CardContent,
 } from '@/components/ui/card'
 
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from '@/components/ui/alert'
-
 import { Button } from '@/components/ui/button'
 import {
   FormControl,
@@ -31,8 +26,6 @@ import { Input } from '@/components/ui/input'
 
 const router = useRouter()
 const isLoading = ref(false)
-const errorMessage = ref('')
-const showSuccess = ref(false)
 const { t } = useI18n()
 
 // Define validation schema using Zod
@@ -52,79 +45,27 @@ const form = useForm({
   },
 })
 
-// Clear error when user starts typing
-const clearError = () => {
-  errorMessage.value = ''
-}
-
-interface ForgotPasswordError {
-  name?: string;
-  message?: string;
-  status?: number;
-}
 
-interface PotentialError {
-  name?: unknown;
-  message?: unknown;
-  status?: unknown;
-}
-
-// Handle different types of errors
-const handleError = (error: ForgotPasswordError) => {
-  if (error.name === 'TypeError' && error.message && error.message.includes('fetch')) {
-    // Network error - backend is down
-    errorMessage.value = t('forgotPassword.errors.networkError')
-  } else if (error.message === 'SERVICE_UNAVAILABLE') {
-    // Service unavailable
-    errorMessage.value = t('forgotPassword.errors.serviceUnavailable')
-  } else if (error.status && error.status >= 500) {
-    // Server error
-    errorMessage.value = t('forgotPassword.errors.serverError')
-  } else if (error.name === 'AbortError') {
-    // Request timeout
-    errorMessage.value = t('forgotPassword.errors.networkError')
-  } else {
-    // Unknown error
-    errorMessage.value = t('forgotPassword.errors.unknownError')
-  }
-}
 
 const onSubmit = form.handleSubmit(async (values) => {
   isLoading.value = true
-  errorMessage.value = ''
 
   try {
     await UserService.requestPasswordReset(values.email)
 
-    // Always show success message for security (don't reveal if email exists)
-    showSuccess.value = true
-
-  } catch (e) {
-    console.error('Password reset request error:', e);
-    const errorToHandle: ForgotPasswordError = { message: t('forgotPassword.errors.unknownError') };
-    const potentialError = e as PotentialError;
-
-    if (typeof potentialError.name === 'string') {
-      errorToHandle.name = potentialError.name;
-    }
-    if (typeof potentialError.message === 'string') {
-      errorToHandle.message = potentialError.message;
-    }
-    if (typeof potentialError.status === 'number') {
-      errorToHandle.status = potentialError.status;
-    }
-
-    // If it's a standard Error instance, prefer its properties
-    if (e instanceof Error) {
-      errorToHandle.name = e.name;
-      errorToHandle.message = e.message;
-    }
-
-    // Ensure message is always set if not already by previous checks
-    if (!errorToHandle.message) {
-        errorToHandle.message = t('forgotPassword.errors.unknownError');
-    }
-    handleError(errorToHandle);
+    // Show success toast and redirect to login
+    toast.success('Check your mailbox to reset password')
+
+    // Redirect to login page
+    router.push('/login')
+
+  } catch (error) {
+    console.error('Password reset request error:', error)
+    
+    // Show error toast
+    toast.error(t('forgotPassword.errors.title'), {
+      description: t('forgotPassword.errors.unknownError')
+    })
   } finally {
     isLoading.value = false
   }
@@ -152,28 +93,7 @@ const navigateToLogin = () => {
     </div>
 
     <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-      <!-- Success Alert -->
-      <Alert v-if="showSuccess" class="mb-6">
-        <CheckCircle class="h-4 w-4" />
-        <AlertTitle>{{ $t('forgotPassword.success.title') }}</AlertTitle>
-        <AlertDescription>
-          <div class="space-y-2">
-            <p>{{ $t('forgotPassword.success.message') }}</p>
-            <p class="text-sm">{{ $t('forgotPassword.success.instruction') }}</p>
-          </div>
-        </AlertDescription>
-      </Alert>
-
-      <!-- Error Alert -->
-      <Alert v-if="errorMessage" variant="destructive" class="mb-6">
-        <AlertTriangle class="h-4 w-4" />
-        <AlertTitle>{{ $t('forgotPassword.errors.title') }}</AlertTitle>
-        <AlertDescription>
-          {{ errorMessage }}
-        </AlertDescription>
-      </Alert>
-
-      <Card v-if="!showSuccess">
+      <Card>
         <CardContent class="pt-6">
           <form @submit="onSubmit" class="space-y-6">
             <FormField v-slot="{ componentField }" name="email">
@@ -188,7 +108,6 @@ const navigateToLogin = () => {
                       v-bind="componentField"
                       class="pl-10"
                       autocomplete="email"
-                      @input="clearError"
                     />
                   </div>
                 </FormControl>

services/frontend/src/views/Login.vue

@@ -84,8 +84,14 @@ const handleError = (error: LoginError) => {
     // Network error - backend is down
     errorMessage.value = t('login.errors.networkError')
   } else if (error.status && (error.status === 400 || error.status === 401)) {
-    // Bad Request or Unauthorized - invalid credentials
-    errorMessage.value = t('login.errors.invalidCredentials')
+    // Bad Request or Unauthorized - use backend error message if available, fallback to translation
+    if (error.message && error.message !== `Login failed with status: ${error.status}`) {
+      // Use the actual backend error message
+      errorMessage.value = error.message
+    } else {
+      // Fallback to translation
+      errorMessage.value = t('login.errors.invalidCredentials')
+    }
   } else if (error.status && error.status >= 500) {
     // Server error
     errorMessage.value = t('login.errors.serverError')
@@ -126,6 +132,10 @@ const onSubmit = form.handleSubmit(async (values) => {
     if (e instanceof Error) {
       errorToHandle.name = e.name;
       errorToHandle.message = e.message;
+      // Check if the error has a status property (from our updated UserService)
+      if ('status' in e && typeof (e as any).status === 'number') {
+        errorToHandle.status = (e as any).status;
+      }
     }
 
     // Ensure message is always set if not already by previous checks