feat(starter/nuxt-auth): configurable auth login page

gitsindonesia · Jan 23, 2023 · b9d2bed · b9d2bed
1 parent ab1d20a
commit b9d2bed
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/starter/nuxt-auth/app.config.ts b/starter/nuxt-auth/app.config.ts
@@ -17,6 +17,30 @@ export default defineAppConfig({
         title: 'Forgot Password',
       },
     },
+    login: {
+      title: 'Login',
+      description: 'Enter your username and password to login.',
+      usernameProps: {
+        label: 'Username',
+        placeholder: 'Username',
+      },
+      passwordProps: {
+        label: 'Password',
+        placeholder: 'Password',
+      },
+      rememberMe: {
+        enable: true,
+        label: 'Remember Me',
+      },
+      buttonText: 'Login',
+      buttonProps: {
+        color: 'primary',
+        block: true,
+      },
+      forgotPasswordLinkText: 'Forgot Password?',
+      registerLinkText: 'Register',
+      registerText: "Don't have an account?",
+    },
     forgotPassword: {
       title: 'Forgot Password',
       description:

diff --git a/...er/nuxt-auth/components/auth/AuthForm.vue → ...r/nuxt-auth/components/auth/AuthLogin.vue b/...er/nuxt-auth/components/auth/AuthForm.vue → ...r/nuxt-auth/components/auth/AuthLogin.vue
@@ -45,38 +45,48 @@ const onSubmit = handleSubmit(async (values) => {
     <form class="md:w-[400px]" @submit="onSubmit">
       <VLogo img-class="mb-6" />
       <div class="space-y-2 mb-4">
-        <h1 class="text-2xl font-semibold text-gray-900">Masuk</h1>
+        <h1 class="text-2xl font-semibold text-gray-900">
+          {{ appConfig.auth.login.title }}
+        </h1>
         <p class="text-sm text-gray-700">
-          Silahkan login untuk mengakses semua fitur!
+          {{ appConfig.auth.login.description }}
         </p>
       </div>
       <VAlert v-if="error" color="error" class="mb-4"> {{ error }} </VAlert>
       <VInput
         wrapper-class="mb-4"
-        label="Username"
-        placeholder="Username"
         name="username"
+        v-bind="appConfig.auth.login.usernameProps"
       />
       <VInput
         wrapper-class="mb-4"
-        label="Password"
-        placeholder="Password"
         name="password"
         type="password"
+        v-bind="appConfig.auth.login.passwordProps"
       />
       <div class="mb-4 flex gap-4 justify-between">
-        <VCheckbox label="Ingat saya" name="remember" />
+        <VCheckbox
+          v-if="appConfig.auth.login.rememberMe.enable"
+          :label="appConfig.auth.login.rememberMe.label"
+          name="rememberMe"
+        />
         <VBtn to="/auth/forgot-password" color="primary" text flush>
-          Forgot Password?
+          {{ appConfig.auth.login.forgotPasswordLinkText }}
         </VBtn>
       </div>
-      <VBtn :loading="status === 'loading'" type="submit" color="primary" block>
-        Login
+      <VBtn
+        :loading="status === 'loading'"
+        type="submit"
+        v-bind="appConfig.auth.login.buttonProps"
+      >
+        {{ appConfig.auth.login.buttonText }}
       </VBtn>
 
       <p class="text-sm text-gray-700 text-center mt-5">
-        Don't have an account yet?
-        <VBtn to="/auth/register" color="primary" text flush> Register </VBtn>
+        {{ appConfig.auth.login.registerText }}
+        <VBtn to="/auth/register" color="primary" text flush>
+          {{ appConfig.auth.login.registerLinkText }}
+        </VBtn>
       </p>
     </form>
   </div>

diff --git a/starter/nuxt-auth/pages/auth/login.vue b/starter/nuxt-auth/pages/auth/login.vue
@@ -1,6 +1,6 @@
 <template>
   <AuthShell>
     <AuthSidebar />
-    <AuthForm />
+    <AuthLogin />
   </AuthShell>
 </template>