Refactor Account Sprinkle Build

.gitignore

@@ -32,6 +32,7 @@ node_modules/
 
 # Ignore compiled assets
 public/assets/
+dist/
 
 # Ignore dev utils cache
 .phpunit.cache

app/assets/composables/forgotPassword.ts

@@ -1,18 +1,27 @@
+/**
+ * Forgot password API
+ *
+ * Fetch the forgot password API. This will send an email to the user with
+ * instructions to reset their password.
+ *
+ * @param {String} email - The email of the user to send the email to.
+ *
+ * @return {Promise} - The response of the API. Throw an error (AlertInterface)
+ * if the request failed. Return a success message (AlertInterface) if the
+ * request is a success.
+ */
 import axios from 'axios'
-import { Severity, type AlertInterface } from '@userfrosting/sprinkle-core/types'
+import { Severity, type AlertInterface } from '@userfrosting/sprinkle-core/interfaces'
 
-// Actions
-async function forgotPassword(email: String) {
+export async function forgotPassword(email: String) {
     return axios
         .post<{ message: string }>('/account/forgot-password', { email: email })
-        .then((response) => {
-            const error: AlertInterface = {
+        .then((response): AlertInterface => {
+            return {
                 description: response.data.message,
                 style: Severity.Success,
                 closeBtn: true
             }
-
-            return error
         })
         .catch((err) => {
             const error: AlertInterface = {
@@ -27,5 +36,3 @@ async function forgotPassword(email: String) {
             throw error
         })
 }
-
-export default forgotPassword

app/assets/composables/index.ts

@@ -1,5 +1,3 @@
-import * as Register from './register'
-import forgotPassword from './forgotPassword'
-import resendVerification from './resendVerification'
-
-export { Register, forgotPassword, resendVerification }
+export * as Register from './register'
+export { forgotPassword } from './forgotPassword'
+export { resendVerification } from './resendVerification'

app/assets/composables/register.ts

@@ -1,20 +1,9 @@
 import axios from 'axios'
-import { Severity, type AlertInterface } from '@userfrosting/sprinkle-core/types'
+import { Severity, type AlertInterface } from '@userfrosting/sprinkle-core/interfaces'
 import { useConfigStore } from '@userfrosting/sprinkle-core/stores'
-import type { UserInterface } from '../interfaces'
+import type { UserInterface, RegisterForm } from '../interfaces'
 
-// Interfaces
-interface RegisterForm {
-    first_name: string
-    last_name: string
-    email: string
-    user_name: string
-    password: string
-    passwordc: string
-    locale: string
-    captcha: string
-    spiderbro: string
-}
+// TODO : Refactor as a true composable
 
 // Variables
 function getDefaultForm(): RegisterForm {
@@ -61,5 +50,4 @@ async function doRegister(form: RegisterForm) {
         })
 }
 
-export type { RegisterForm }
 export { getDefaultForm, getAvailableLocales, getCaptchaUrl, doRegister }

app/assets/composables/resendVerification.ts

@@ -1,18 +1,27 @@
+/**
+ * Resend Verification API
+ *
+ * Fetch the resend verification API. This will send an email to the user with
+ * instructions to verify their email.
+ *
+ * @param {String} email - The email of the user to send the email to.
+ *
+ * @return {Promise} - The response of the API. Throw an error (AlertInterface)
+ * if the request failed. Return a success message (AlertInterface) if the
+ * request is a success.
+ */
 import axios from 'axios'
-import { Severity, type AlertInterface } from '@userfrosting/sprinkle-core/types'
+import { Severity, type AlertInterface } from '@userfrosting/sprinkle-core/interfaces'
 
-// Actions
-async function resendVerification(email: String) {
+export async function resendVerification(email: String) {
     return axios
         .post<{ message: string }>('/account/resend-verification', { email: email })
-        .then((response) => {
-            const error: AlertInterface = {
+        .then((response): AlertInterface => {
+            return {
                 description: response.data.message,
                 style: Severity.Success,
                 closeBtn: true
             }
-
-            return error
         })
         .catch((err) => {
             const error: AlertInterface = {
@@ -27,5 +36,3 @@ async function resendVerification(email: String) {
             throw error
         })
 }
-
-export default resendVerification

app/assets/guards/index.ts

@@ -0,0 +1 @@
+export { useAuthGuard } from './authGuard'

app/assets/plugin.ts → app/assets/index.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue'
+import type { Router } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import { useAuthGuard } from './guards/authGuard'
-import type { Router } from 'vue-router'
 
 /* Install plugins */
 export default {

app/assets/interfaces/forms/loginForm.ts

@@ -0,0 +1,10 @@
+/**
+ * Interface for login form
+ *
+ * This interface is used to define what the composable used to communicate with
+ * the API expects as argument.
+ */
+export interface LoginForm {
+    user_name: string
+    password: string
+}

app/assets/interfaces/forms/registerForm.ts

@@ -0,0 +1,17 @@
+/**
+ * Interface for registration form
+ *
+ * This interface is used to define what the composable used to communicate with
+ * the API expects as argument.
+ */
+export interface RegisterForm {
+    first_name: string
+    last_name: string
+    email: string
+    user_name: string
+    password: string
+    passwordc: string
+    locale: string
+    captcha: string
+    spiderbro: string
+}

app/assets/interfaces/index.ts

@@ -1,15 +1,7 @@
-import type { LoginForm } from './loginForm'
-import type { UserInterface } from './userInterface'
-import type { GroupInterface } from './groupInterface'
-import type { RoleInterface } from './roleInterface'
-import type { PermissionInterface } from './permissionInterface'
-import type { RouteGuard } from './routes'
-
-export type {
-    GroupInterface,
-    LoginForm,
-    PermissionInterface,
-    RoleInterface,
-    RouteGuard,
-    UserInterface
-}
+export type { LoginForm } from './forms/loginForm'
+export type { RegisterForm } from './forms/registerForm'
+export type { UserInterface } from './models/userInterface'
+export type { GroupInterface } from './models/groupInterface'
+export type { RoleInterface } from './models/roleInterface'
+export type { PermissionInterface } from './models/permissionInterface'
+export type { RouteGuard } from './routes'

app/assets/interfaces/groupInterface.ts → app/assets/interfaces/models/groupInterface.ts

@@ -1,4 +1,6 @@
 /**
+ * Group Model
+ *
  * By default, the frontend group object will have the same interface as the PHP user.
  * Note that any Sprinkle can (and should!) extend this interface.
  *

app/assets/interfaces/permissionInterface.ts → app/assets/interfaces/models/permissionInterface.ts

@@ -1,4 +1,6 @@
 /**
+ * Permission Model
+ *
  * By default, the frontend role object will have the same interface as the PHP user.
  * Note that any Sprinkle can (and should!) extend this interface.
  *

app/assets/interfaces/roleInterface.ts → app/assets/interfaces/models/roleInterface.ts

@@ -1,4 +1,6 @@
 /**
+ * Role Model
+ *
  * By default, the frontend role object will have the same interface as the PHP user.
  * Note that any Sprinkle can (and should!) extend this interface.
  *

app/assets/interfaces/userInterface.ts → app/assets/interfaces/models/userInterface.ts

@@ -1,4 +1,6 @@
 /**
+ * User Model
+ *
  * By default, the frontend user will have the same interface as the PHP user.
  * Note that any Sprinkle can (and should!) extend this interface.
  *

app/assets/interfaces/routes.ts

@@ -1,3 +1,12 @@
+/**
+ * Interface for custom routes meta fields.
+ *
+ * Meta Fields Added :
+ * - auth: RouteGuard - Guard for authenticated users
+ * - guest: RouteGuard - Guard for not authenticated users
+ *
+ * @see https://router.vuejs.org/guide/advanced/meta.html#TypeScript
+ */
 import 'vue-router'
 
 export interface RouteGuard {

app/assets/router/routes.ts → app/assets/routes/index.ts

@@ -1,4 +1,4 @@
-const routes = [
+export default [
     {
         path: '/account/sign-in',
         name: 'account.login',
@@ -40,5 +40,3 @@ const routes = [
         component: () => import('../views/ResendVerificationView.vue')
     }
 ]
-
-export default routes

app/assets/stores/auth.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import axios from 'axios'
 import type { UserInterface, LoginForm } from '../interfaces'
-import { type AlertInterface, Severity } from '@userfrosting/sprinkle-core/types'
+import { type AlertInterface, Severity } from '@userfrosting/sprinkle-core/interfaces'
 
 interface AuthCheckApi {
     auth: boolean

app/assets/stores/index.ts

@@ -0,0 +1 @@
+export { useAuthStore } from './auth'

app/assets/tests/composables/forgotPassword.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test, vi } from 'vitest'
 import axios from 'axios'
-import { Severity } from '@userfrosting/sprinkle-core/types'
+import { Severity } from '@userfrosting/sprinkle-core/interfaces'
 import { forgotPassword } from '../../composables'
 
 const email: String = '[email protected]'

app/assets/tests/composables/register.test.ts

@@ -1,8 +1,9 @@
 import { afterEach, describe, expect, test, vi } from 'vitest'
 import axios from 'axios'
 import type { UserInterface } from 'app/assets/interfaces'
-import { Severity } from '@userfrosting/sprinkle-core/types'
+import { Severity } from '@userfrosting/sprinkle-core/interfaces'
 import { useConfigStore } from '@userfrosting/sprinkle-core/stores'
+import type { RegisterForm } from '../../interfaces'
 import { Register } from '../../composables'
 
 const { getDefaultForm, doRegister, getAvailableLocales, getCaptchaUrl } = Register
@@ -24,7 +25,7 @@ const testUser: UserInterface = {
     deleted_at: null
 }
 
-const form: Register.RegisterForm = {
+const form: RegisterForm = {
     first_name: 'John',
     last_name: 'Doe',
     email: '[email protected]',

app/assets/tests/composables/resendVerification.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test, vi } from 'vitest'
 import axios from 'axios'
-import { Severity } from '@userfrosting/sprinkle-core/types'
+import { Severity } from '@userfrosting/sprinkle-core/interfaces'
 import { resendVerification } from '../../composables'
 
 const email: String = '[email protected]'

app/assets/tests/plugin.test.ts

@@ -3,7 +3,7 @@ import { createApp } from 'vue'
 import { useAuthStore } from '../stores/auth'
 import { useAuthGuard } from '../guards/authGuard'
 import { useRouter } from 'vue-router'
-import plugin from '../plugin'
+import plugin from '../'
 import * as Auth from '../stores/auth'
 import * as AuthGuard from '../guards/authGuard'
 

app/assets/tests/stores/auth.test.ts

@@ -1,9 +1,9 @@
 import { setActivePinia, createPinia } from 'pinia'
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { useAuthStore } from '../../stores/auth'
 import axios from 'axios'
 import type { LoginForm, UserInterface } from 'app/assets/interfaces'
-import { Severity } from '@userfrosting/sprinkle-core/types'
+import { Severity } from '@userfrosting/sprinkle-core/interfaces'
 
 const testUser: UserInterface = {
     id: 1,

app/assets/views/index.ts

@@ -0,0 +1,6 @@
+import ForgotPasswordView from './ForgotPasswordView.vue'
+import LoginView from './LoginView.vue'
+import RegisterView from './RegisterView.vue'
+import ResendVerificationView from './ResendVerificationView.vue'
+
+export { ForgotPasswordView, LoginView, RegisterView, ResendVerificationView }