Refactor account-related views and tests

- Updated FormRegister.test.ts to use TypeScript and improved test structure.
- Replaced PageEmailVerificationRequest.test.js with PageEmailVerificationRequest.test.ts, enhancing test coverage and structure.
- Created PageForgotPassword.test.ts to replace the previous JavaScript test file, adding comprehensive tests for the forgot password flow.
- Converted PageRegister.test.js to PageRegister.test.ts, ensuring TypeScript usage and improved test clarity.
- Refactored PageEmailVerificationRequest.vue to streamline the email verification process and improve code readability.
- Enhanced PageForgotPassword.vue to include a multi-step process for password recovery, improving user experience.
- Updated PageLogin.vue to utilize router links instead of emitted events for navigation, simplifying the component logic.
- Refactored PageRegister.vue to include a redirect if registration is disabled, improving user flow.

Author: lcharette

packages/skeleton/app/assets/components/NavBar.vue

@@ -1,8 +1,6 @@
 <script setup>
-import { useRouter } from 'vue-router'
 import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
 import { useConfigStore } from '@userfrosting/sprinkle-core/stores'
-const router = useRouter()
 const config = useConfigStore()
 
 // Logout API variables
@@ -15,11 +13,8 @@ const auth = useAuthStore()
         <UFNavBarItem
             :to="{ name: 'account.register' }"
             :label="$t('REGISTER')"
-            v-if="!auth.isAuthenticated" />
-        <UFNavBarLogin
-            v-if="!auth.isAuthenticated"
-            @goto-login="router.push({ name: 'account.login' })"
-            @goto-registration="router.push({ name: 'account.register' })" />
+            v-if="!auth.isAuthenticated && useConfigStore().get('site.registration.enabled')" />
+        <UFNavBarLogin v-if="!auth.isAuthenticated" />
         <UFNavBarUserCard
             v-if="auth.isAuthenticated"
             :username="auth.user.full_name"

packages/sprinkle-account/app/assets/composables/forgotPassword.ts

@@ -1,7 +1,7 @@
-export { forgotPassword } from './forgotPassword'
 export { useRegisterApi } from './useRegisterApi'
 export { useUserProfileEditApi } from './useUserProfileEditApi'
 export { useUserPasswordEditApi } from './useUserPasswordEditApi'
 export { useUserEmailEditApi } from './useUserEmailEditApi'
 export { useEmailVerificationApi } from './useEmailVerificationApi'
+export { useForgotPasswordApi } from './useForgotPasswordApi'
 export { useAuthorizationManager } from './useAuthorizationManager'

packages/sprinkle-account/app/assets/composables/index.ts

@@ -3,6 +3,7 @@ import axios from 'axios'
 import { Severity } from '@userfrosting/sprinkle-core/interfaces'
 import type { AlertInterface } from '@userfrosting/sprinkle-core/interfaces'
 import type {
+    ResendVerificationRequest,
     ResendVerificationResponse,
     ValidateCodeRequest,
     ValidateCodeResponse
@@ -27,11 +28,15 @@ export function useEmailVerificationApi() {
      * @return {Promise} - The request success message given by the API. Throws an error
      * (AlertInterface) if the request failed.
      */
-    async function resendVerification(email: string): Promise<string> {
+    async function requestVerificationCode(email: string): Promise<string> {
         apiLoading.value = true
         apiError.value = null
+        const data: ResendVerificationRequest = {
+            email: email
+        }
+
         return axios
-            .post<ResendVerificationResponse>('/account/verify/request', { email: email })
+            .post<ResendVerificationResponse>('/account/verify/request', data)
             .then((response): string => {
                 return response.data.message
             })
@@ -97,5 +102,5 @@ export function useEmailVerificationApi() {
             })
     }
 
-    return { resendVerification, submitVerificationCode, apiLoading, apiError }
+    return { requestVerificationCode, submitVerificationCode, apiLoading, apiError }
 }

packages/sprinkle-account/app/assets/composables/useEmailVerificationApi.ts

@@ -0,0 +1,97 @@
+import { ref } from 'vue'
+import axios from 'axios'
+import { Severity } from '@userfrosting/sprinkle-core/interfaces'
+import type { AlertInterface } from '@userfrosting/sprinkle-core/interfaces'
+import type {
+    ForgotPasswordCodeRequest,
+    ForgotPasswordCodeResponse,
+    ForgotPasswordSetPasswordRequest,
+    ForgotPasswordSetPasswordResponse
+} from '../interfaces'
+
+/**
+ * API Composable
+ */
+export function useForgotPasswordApi() {
+    const apiLoading = ref<Boolean>(false)
+    const apiError = ref<AlertInterface | null>(null)
+
+    /**
+     * First step of the process. Ask the server to send a one time code to the
+     * user by email.
+     *
+     * @param email The user email to send the one time code to.
+     *
+     * @return {Promise} - The request success message given by the API. Throws an error
+     * (AlertInterface) if the request failed.
+     */
+    async function requestCode(email: string): Promise<string> {
+        apiLoading.value = true
+        apiError.value = null
+        const data: ForgotPasswordCodeRequest = {
+            email: email
+        }
+        return axios
+            .post<ForgotPasswordCodeResponse>('/account/forgot-password/request', data)
+            .then((response): string => {
+                return response.data.message
+            })
+            .catch((err) => {
+                apiError.value = {
+                    ...{
+                        description: 'An error as occurred',
+                        style: Severity.Danger,
+                        closeBtn: true
+                    },
+                    ...err.response.data
+                }
+
+                throw apiError.value
+            })
+            .finally(() => {
+                apiLoading.value = false
+            })
+    }
+
+    /**
+     * Second step of the password reset process. Ask the server to
+     * verify the code entered by the user.
+     *
+     * @param email string - The email to validate.
+     * @param code string - The verification code to validate.
+     *
+     * @return {Promise} - A success message returned by the API. Throws an error
+     * (AlertInterface) if the request failed.
+     */
+    async function setPassword(
+        data: ForgotPasswordSetPasswordRequest
+    ): Promise<ForgotPasswordSetPasswordResponse> {
+        apiLoading.value = true
+        apiError.value = null
+
+        return axios
+            .post<ForgotPasswordSetPasswordResponse>('/account/forgot-password/set-password', data)
+            .then((response): ForgotPasswordSetPasswordResponse => {
+                return {
+                    message: response.data.message
+                }
+            })
+            .catch((err) => {
+                apiError.value = {
+                    ...{
+                        description: 'An error as occurred',
+                        style: Severity.Danger,
+                        closeBtn: true
+                    },
+                    ...err.response.data
+                }
+
+                throw apiError.value
+            })
+            .finally(() => {
+                apiLoading.value = false
+            })
+    }
+
+    return { requestCode, setPassword, apiLoading, apiError }
+}

packages/sprinkle-account/app/assets/composables/useForgotPasswordApi.ts

@@ -0,0 +1,21 @@
+import type { ApiResponse } from '@userfrosting/sprinkle-core/interfaces'
+
+/**
+ * API Interfaces - Defines the expected requests and responses for the API.
+ *
+ * These interfaces are associated with the `ForgetPasswordRequestAction`
+ * and `ForgetPasswordSetPasswordAction` APIs, which are accessed via the
+ * POST `/account/forgot-password/request` and POST `/account/forgot-password/
+ * set-password` endpoints.
+ */
+export interface ForgotPasswordCodeRequest {
+    email: string
+}
+export interface ForgotPasswordSetPasswordRequest {
+    email: string
+    password: string
+    passwordc: string
+    code: string
+}
+export interface ForgotPasswordCodeResponse extends ApiResponse {}
+export interface ForgotPasswordSetPasswordResponse extends ApiResponse {}

packages/sprinkle-account/app/assets/interfaces/ForgotPasswordApi.ts

@@ -9,10 +9,16 @@ export type { PasswordEditRequest } from './PasswordEditApi'
 export type { EmailEditRequest } from './EmailEditApi'
 export type { RegisterRequest, RegisterResponse } from './RegisterApi'
 export type { LoginRequest, LoginResponse } from './LoginApi'
+export type { UserDataInterface } from './UserDataInterface'
 export type {
     ResendVerificationRequest,
     ResendVerificationResponse,
     ValidateCodeRequest,
     ValidateCodeResponse
 } from './UserVerificationApi'
-export type { UserDataInterface } from './UserDataInterface'
+export type {
+    ForgotPasswordCodeRequest,
+    ForgotPasswordSetPasswordRequest,
+    ForgotPasswordCodeResponse,
+    ForgotPasswordSetPasswordResponse
+} from './ForgotPasswordApi'

packages/sprinkle-account/app/assets/interfaces/index.ts

@@ -5,7 +5,9 @@ export default [
         meta: {
             guest: {
                 redirect: { name: 'home' }
-            }
+            },
+            title: 'LOGIN',
+            description: 'LOGIN.PAGE'
         },
         component: () => import('../views/LoginView.vue')
     },
@@ -15,7 +17,9 @@ export default [
         meta: {
             guest: {
                 redirect: { name: 'home' }
-            }
+            },
+            title: 'REGISTER',
+            description: 'REGISTER.PAGE'
         },
         component: () => import('../views/RegisterView.vue')
     },
@@ -25,17 +29,21 @@ export default [
         meta: {
             guest: {
                 redirect: { name: 'home' }
-            }
+            },
+            title: 'PASSWORD.FORGOT', // Get a new password / Obtenir un nouveau mot de passe
+            description: 'PASSWORD.FORGOT.PAGE'
         },
-        component: () => import('../views/ForgotPasswordView.vue')
+        component: () => import('../views/ForgotPassword.vue')
     },
     {
         path: '/account/verification',
         name: 'account.verification',
         meta: {
             guest: {
                 redirect: { name: 'home' }
-            }
+            },
+            title: 'ACCOUNT.VERIFICATION',
+            description: 'ACCOUNT.VERIFICATION.EXPLAIN'
         },
         component: () => import('../views/ResendVerificationView.vue')
     },

packages/sprinkle-account/app/assets/routes/index.ts

@@ -10,15 +10,15 @@ describe('useEmailVerificationApi', () => {
     })
 
     test('should successfully resend verification email', async () => {
-        const { resendVerification, apiLoading, apiError } = useEmailVerificationApi()
+        const { requestVerificationCode, apiLoading, apiError } = useEmailVerificationApi()
         const email = 'test@example.com'
         const successMessage = 'Verification email sent successfully'
 
         // Set axios mock
         vi.spyOn(axios, 'post').mockResolvedValueOnce({ data: { message: successMessage } })
 
         // Act
-        const result = await resendVerification(email)
+        const result = await requestVerificationCode(email)
 
         // Assert
         expect(result).toBe(successMessage)
@@ -28,7 +28,7 @@ describe('useEmailVerificationApi', () => {
     })
 
     test('should handle error when resending verification email fails', async () => {
-        const { resendVerification, apiLoading, apiError } = useEmailVerificationApi()
+        const { requestVerificationCode, apiLoading, apiError } = useEmailVerificationApi()
         const email = 'test@example.com'
         const errorResponse = {
             response: {
@@ -52,7 +52,7 @@ describe('useEmailVerificationApi', () => {
         vi.spyOn(axios, 'post').mockRejectedValueOnce(errorResponse)
 
         // Act & Assert
-        await expect(resendVerification(email)).rejects.toEqual(expectedError)
+        await expect(requestVerificationCode(email)).rejects.toEqual(expectedError)
         expect(apiLoading.value).toBe(false)
         expect(apiError.value).toEqual(expectedError)
     })