feat: add forgot password and reset password functionality with corresponding routes and localization

Author: Lasim

services/frontend/src/i18n/locales/en/forgotPassword.ts

@@ -0,0 +1,31 @@
+// @/i18n/locales/en/forgotPassword.ts
+export default {
+  forgotPassword: {
+    title: 'Reset Password',
+    subtitle: 'Enter your email address and we\'ll send you a link to reset your password.',
+    form: {
+      email: {
+        label: 'Email Address',
+        placeholder: 'Enter your email address'
+      }
+    },
+    buttons: {
+      submit: 'Send Reset Link',
+      loading: 'Sending...',
+      backToLogin: 'Back to Login'
+    },
+    success: {
+      title: 'Check Your Email',
+      message: 'If an account with that email exists, we\'ve sent you a password reset link.',
+      instruction: 'Please check your email and follow the instructions to reset your password.'
+    },
+    errors: {
+      title: 'Error',
+      networkError: 'Network error. Please check your connection and try again.',
+      serverError: 'Server error. Please try again later.',
+      invalidEmail: 'Please enter a valid email address.',
+      serviceUnavailable: 'Password reset service is currently unavailable.',
+      unknownError: 'An unexpected error occurred. Please try again.'
+    }
+  }
+}

services/frontend/src/i18n/locales/en/index.ts

@@ -8,6 +8,8 @@ import notFoundMessages from './notFound'
 import adminUsersMessages from './adminUsers'
 import sidebarMessages from './sidebar'
 import verifyEmailMessages from './verifyEmail'
+import forgotPasswordMessages from './forgotPassword'
+import resetPasswordMessages from './resetPassword'
 
 export default {
   ...commonMessages,
@@ -19,6 +21,8 @@ export default {
   ...adminUsersMessages,
   ...sidebarMessages,
   ...verifyEmailMessages,
+  ...forgotPasswordMessages,
+  ...resetPasswordMessages,
   // If there are any top-level keys directly under 'en', they can be added here.
   // For example, if you had a global 'appName': 'My Application'
   // appName: 'DeployStack Application',

services/frontend/src/i18n/locales/en/resetPassword.ts

@@ -0,0 +1,38 @@
+// @/i18n/locales/en/resetPassword.ts
+export default {
+  resetPassword: {
+    title: 'Set New Password',
+    subtitle: 'Enter your new password below.',
+    form: {
+      password: {
+        label: 'New Password',
+        placeholder: 'Enter your new password'
+      },
+      confirmPassword: {
+        label: 'Confirm Password',
+        placeholder: 'Confirm your new password'
+      }
+    },
+    buttons: {
+      submit: 'Reset Password',
+      loading: 'Resetting...',
+      backToLogin: 'Back to Login'
+    },
+    success: {
+      title: 'Password Reset Successful',
+      message: 'Your password has been successfully reset.',
+      instruction: 'You can now log in with your new password.'
+    },
+    errors: {
+      title: 'Error',
+      invalidToken: 'This password reset link is invalid or has expired.',
+      expiredToken: 'This password reset link has expired. Please request a new one.',
+      weakPassword: 'Password must be at least 8 characters long.',
+      passwordMismatch: 'Passwords do not match.',
+      networkError: 'Network error. Please check your connection and try again.',
+      serverError: 'Server error. Please try again later.',
+      serviceUnavailable: 'Password reset service is currently unavailable.',
+      unknownError: 'An unexpected error occurred. Please try again.'
+    }
+  }
+}

services/frontend/src/router/index.ts

@@ -31,6 +31,18 @@ const routes = [
     component: () => import('../views/VerifyEmail.vue'),
     meta: { requiresSetup: true },
   },
+  {
+    path: '/forgot-password',
+    name: 'ForgotPassword',
+    component: () => import('../views/ForgotPassword.vue'),
+    meta: { requiresSetup: true },
+  },
+  {
+    path: '/reset-password',
+    name: 'ResetPassword',
+    component: () => import('../views/ResetPassword.vue'),
+    meta: { requiresSetup: true },
+  },
   {
     path: '/logout',
     name: 'Logout',
@@ -113,7 +125,7 @@ router.beforeEach(async (to, from, next) => {
   const databaseStore = useDatabaseStore()
 
   // Define public routes that don't need user authentication checks
-  const publicRoutes = ['Setup', 'Login', 'Register', 'VerifyEmail']
+  const publicRoutes = ['Setup', 'Login', 'Register', 'VerifyEmail', 'ForgotPassword', 'ResetPassword']
   const isPublicRoute = publicRoutes.includes(to.name as string)
 
   // Attempt to get current user status early

services/frontend/src/services/userService.ts

@@ -174,4 +174,76 @@ export class UserService {
       this.clearCache();
     }
   }
+
+  /**
+   * Request password reset for email users
+   */
+  static async requestPasswordReset(email: string): Promise<{ success: boolean; message: string }> {
+    try {
+      const apiUrl = this.getApiUrl();
+      const response = await fetch(`${apiUrl}/api/auth/email/forgot-password`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        return data;
+      }
+
+      // Handle different error status codes
+      if (response.status === 503) {
+        throw new Error('SERVICE_UNAVAILABLE');
+      }
+
+      throw new Error(`Password reset request failed with status: ${response.status}`);
+    } catch (error) {
+      console.error('Password reset request error:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Reset password using token
+   */
+  static async resetPassword(token: string, newPassword: string): Promise<{ success: boolean; message: string }> {
+    try {
+      const apiUrl = this.getApiUrl();
+      const response = await fetch(`${apiUrl}/api/auth/email/reset-password`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({ token, new_password: newPassword }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        return data;
+      }
+
+      // Handle different error status codes
+      if (response.status === 400) {
+        throw new Error('INVALID_TOKEN');
+      }
+      if (response.status === 403) {
+        throw new Error('FORBIDDEN');
+      }
+      if (response.status === 503) {
+        throw new Error('SERVICE_UNAVAILABLE');
+      }
+
+      throw new Error(`Password reset failed with status: ${response.status}`);
+    } catch (error) {
+      console.error('Password reset error:', error);
+      throw error;
+    }
+  }
 }