fix(nuxt-auth): move app config to component props

gitsindonesia · Feb 2, 2023 · ae48f0b · ae48f0b
1 parent 3861a83
commit ae48f0b
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 193 deletions.
diff --git a/starter/nuxt-auth/app.config.ts b/starter/nuxt-auth/app.config.ts
diff --git a/starter/nuxt-auth/components/auth/AuthForgotPassword.vue b/starter/nuxt-auth/components/auth/AuthForgotPassword.vue
@@ -2,10 +2,35 @@
 import {useForm} from 'vee-validate';
 import {object, string} from 'yup';
 
-const router = useRouter();
-const appConfig = useAppConfig();
-
-useHead(appConfig.auth.head.forgotPassword);
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    description: string;
+    buttonText: string;
+    loginButtonText: string;
+    successMessage: string;
+    inputProps: Record<string, any>;
+    buttonProps: Record<string, any>;
+  }>(),
+  {
+    title: 'Forgot Password',
+    description: 'Enter your email address to reset your password.',
+    buttonText: 'Reset Password',
+    loginButtonText: 'Login',
+    successMessage: 'Password reset email sent.',
+    inputProps: () => ({
+      name: 'email',
+      label: 'Email',
+      placeholder: 'Email',
+      type: 'email',
+    }),
+    buttonProps: () => ({
+      type: 'submit',
+      color: 'primary',
+      block: true,
+    }),
+  },
+);
 
 const loading = ref(false);
 const error = ref();
@@ -40,33 +65,25 @@ const onSubmit = handleSubmit(async (values) => {
       <VLogo img-class="mb-6" />
       <div class="space-y-2 mb-4">
         <h1 class="text-2xl font-semibold text-gray-900">
-          {{ appConfig.auth.forgotPassword.title }}
+          {{ title }}
         </h1>
         <p class="text-sm text-gray-700">
-          {{ appConfig.auth.forgotPassword.description }}
+          {{ description }}
         </p>
       </div>
       <template v-if="success">
         <VAlert color="success" solid class="mb-4">
-          {{ appConfig.auth.forgotPassword.successMessage }}
+          {{ successMessage }}
         </VAlert>
         <VBtn to="/auth/login" block>
-          {{ appConfig.auth.forgotPassword.loginButtonText }}
+          {{ loginButtonText }}
         </VBtn>
       </template>
       <form v-else @submit="onSubmit">
         <VAlert v-if="error" color="error" class="mb-4"> {{ error }} </VAlert>
-        <VInput
-          wrapper-class="mb-4"
-          name="email"
-          v-bind="appConfig.auth.forgotPassword.inputProps"
-        />
-        <VBtn
-          :loading="loading"
-          type="submit"
-          v-bind="appConfig.auth.forgotPassword.buttonProps"
-        >
-          {{ appConfig.auth.forgotPassword.buttonText }}
+        <VInput wrapper-class="mb-4" name="email" v-bind="inputProps" />
+        <VBtn :loading="loading" type="submit" v-bind="buttonProps">
+          {{ buttonText }}
         </VBtn>
       </form>
     </div>

diff --git a/starter/nuxt-auth/components/auth/AuthLogin.vue b/starter/nuxt-auth/components/auth/AuthLogin.vue
@@ -2,14 +2,62 @@
 import {useForm} from 'vee-validate';
 import {object, string} from 'yup';
 
-const appConfig = useAppConfig();
+const props = withDefaults(
+  defineProps<{
+    redirect?: string;
+    title?: string;
+    description?: string;
+    usernameProps?: Record<string, any>;
+    passwordProps?: Record<string, any>;
+    rememberMe?: boolean;
+    rememberMeLabel?: string;
+    submitText?: string;
+    submitProps?: Record<string, any>;
+    forgotPasswordLinkText?: string;
+    registerLinkText?: string;
+    registerText?: string;
+    loginWithText?: string;
+    orText?: string;
+    providerButtonColors?: Record<string, string>;
+  }>(),
+  {
+    redirect: '/',
+    title: 'Login',
+    description: 'Enter your username and password to login.',
+    usernameProps: () => ({
+      label: 'Username',
+      placeholder: 'Username',
+    }),
+    passwordProps: () => ({
+      label: 'Password',
+      placeholder: 'Password',
+    }),
+    rememberMe: true,
+    rememberMeLabel: 'Remember Me',
+    submitText: 'Login',
+    submitProps: () => ({
+      color: 'primary',
+      block: true,
+    }),
+    forgotPasswordLinkText: 'Forgot Password?',
+    registerLinkText: 'Register',
+    registerText: "Don't have an account?",
+    loginWithText: 'Login with',
+    orText: 'or',
+    providerButtonColors: () => ({
+      google: 'danger',
+      facebook: 'primary',
+      twitter: 'info',
+      github: 'dark',
+    }),
+  },
+);
+
 const router = useRouter();
 const route = useRoute();
 const {signIn, status, getProviders} = useSession();
 const providers = await getProviders();
 
-useHead(appConfig.auth.head.login);
-
 const error = ref();
 
 const {handleSubmit} = useForm({
@@ -35,9 +83,7 @@ const onSubmit = handleSubmit(async (values) => {
   // get path name from callback url
   const callbackUrl = new URL(String(route.query.callbackUrl)).pathname;
 
-  router.push(
-    String(route.query.next || callbackUrl || appConfig.auth.redirect.home),
-  );
+  router.push(String(route.query.next || callbackUrl || props.redirect));
 });
 </script>
 
@@ -47,53 +93,45 @@ const onSubmit = handleSubmit(async (values) => {
       <VLogo img-class="mb-6" />
       <div class="space-y-2 mb-4">
         <h1 class="text-2xl font-semibold text-gray-900">
-          {{ appConfig.auth.login.title }}
+          {{ title }}
         </h1>
         <p class="text-sm text-gray-700">
-          {{ appConfig.auth.login.description }}
+          {{ description }}
         </p>
       </div>
       <VAlert v-if="error" color="error" class="mb-4"> {{ error }} </VAlert>
-      <VInput
-        wrapper-class="mb-4"
-        name="username"
-        v-bind="appConfig.auth.login.usernameProps"
-      />
+      <VInput wrapper-class="mb-4" name="username" v-bind="usernameProps" />
       <VInput
         wrapper-class="mb-4"
         name="password"
         type="password"
-        v-bind="appConfig.auth.login.passwordProps"
+        v-bind="passwordProps"
       />
       <div class="mb-4 flex gap-4 justify-between">
         <VCheckbox
-          v-if="appConfig.auth.login.rememberMe.enable"
-          :label="appConfig.auth.login.rememberMe.label"
+          v-if="rememberMe"
+          :label="rememberMeLabel"
           name="rememberMe"
         />
         <VBtn to="/auth/forgot-password" color="primary" text flush>
-          {{ appConfig.auth.login.forgotPasswordLinkText }}
+          {{ forgotPasswordLinkText }}
         </VBtn>
       </div>
-      <VBtn
-        :loading="status === 'loading'"
-        type="submit"
-        v-bind="appConfig.auth.login.buttonProps"
-      >
-        {{ appConfig.auth.login.buttonText }}
+      <VBtn :loading="status === 'loading'" type="submit" v-bind="submitProps">
+        {{ submitText }}
       </VBtn>
 
       <p class="text-sm text-gray-700 text-center mt-5">
-        {{ appConfig.auth.login.registerText }}
+        {{ registerText }}
         <VBtn to="/auth/register" color="primary" text flush>
-          {{ appConfig.auth.login.registerLinkText }}
+          {{ registerLinkText }}
         </VBtn>
       </p>
 
       <div class="flex gap-4 items-center mt-5 mb-4">
         <div class="border-t flex-1"></div>
         <span class="text-sm text-gray-600">
-          {{ appConfig.auth.login.orText }}
+          {{ orText }}
         </span>
         <div class="border-t flex-1"></div>
       </div>
@@ -102,10 +140,10 @@ const onSubmit = handleSubmit(async (values) => {
         <VBtn
           v-if="provider?.id !== 'credentials'"
           block
-          :color="appConfig.auth.providerButtonColors[String(provider?.id)]"
+          :color="providerButtonColors[String(provider?.id)]"
           @click="signIn(provider?.id)"
         >
-          {{ appConfig.auth.login.loginWithText }} {{ provider?.name }}
+          {{ loginWithText }} {{ provider?.name }}
         </VBtn>
       </template>
     </form>