feat(nuxt-auth): add new AuthLogo component

- new component: `AuthLogo` - configurable via `app.config.ts`
gitsindonesia · Mar 2, 2023 · 77cebf5 · 77cebf5
1 parent 0f7ed6e
commit 77cebf5
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 28 deletions.
diff --git a/starter/nuxt-auth/app.config.ts b/starter/nuxt-auth/app.config.ts
@@ -2,7 +2,14 @@ import {string, boolean, ref as YupRef} from 'yup';
 
 export default defineAppConfig({
   auth: {
-    logo: true,
+    logo: {
+      enable: true,
+      light: '/logo-type.svg',
+      dark: '/logo-type-white.svg',
+      alt: 'Logo',
+      width: 80,
+      height: 36,
+    },
     redirect: {
       home: '/', // redirect to home page after login
     },

diff --git a/starter/nuxt-auth/components/auth/AuthForgotPassword.vue b/starter/nuxt-auth/components/auth/AuthForgotPassword.vue
@@ -35,15 +35,7 @@ const onSubmit = handleSubmit(async (values) => {
   <div class="p-6 grid items-center justify-center">
     <div class="md:w-[400px]">
       <slot name="logo">
-        <VLogo
-          v-if="appConfig.auth.logo || appConfig.auth.forgotPassword.logo"
-          img-class="mb-6 dark:hidden block"
-        />
-        <VLogo
-          v-if="appConfig.auth.logo || appConfig.auth.forgotPassword.logo"
-          img-class="mb-6 dark:block hidden"
-          white
-        />
+        <AuthLogo />
       </slot>
       <div class="space-y-2 mb-4">
         <h1 class="text-2xl font-semibold text-gray-900 dark:text-neutral-200">

diff --git a/starter/nuxt-auth/components/auth/AuthLogin.vue b/starter/nuxt-auth/components/auth/AuthLogin.vue
@@ -58,15 +58,7 @@ const socialProviders = computed(() => {
   <div class="p-6 grid items-center justify-center">
     <form class="md:w-[400px]" @submit="onSubmit">
       <slot name="logo">
-        <VLogo
-          v-if="appConfig.auth.logo || appConfig.auth.login.logo"
-          img-class="mb-6 dark:hidden block"
-        />
-        <VLogo
-          v-if="appConfig.auth.logo || appConfig.auth.login.logo"
-          img-class="mb-6 dark:block hidden"
-          white
-        />
+        <AuthLogo />
       </slot>
       <div class="space-y-2 mb-4">
         <h1 class="text-2xl font-semibold text-gray-900 dark:text-neutral-200">

diff --git a/starter/nuxt-auth/components/auth/AuthLogo.vue b/starter/nuxt-auth/components/auth/AuthLogo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const appConfig = useAppConfig();
+</script>
+
+<template>
+  <img
+    v-if="appConfig.auth.logo.enable"
+    :src="appConfig.auth.logo.light"
+    class="mb-6 dark:hidden block"
+    :width="appConfig.auth.logo.width"
+    :height="appConfig.auth.logo.height"
+  />
+  <img
+    v-if="appConfig.auth.logo.enable"
+    :src="appConfig.auth.logo.dark"
+    class="mb-6 dark:block hidden"
+    :width="appConfig.auth.logo.width"
+    :height="appConfig.auth.logo.height"
+  />
+</template>
diff --git a/starter/nuxt-auth/components/auth/AuthRegister.vue b/starter/nuxt-auth/components/auth/AuthRegister.vue
@@ -49,15 +49,7 @@ const inputComponent = (component: any) => {
   <div class="p-6 grid items-center justify-center">
     <div class="md:w-[400px]">
       <slot name="logo">
-        <VLogo
-          v-if="appConfig.auth.logo || appConfig.auth.register.logo"
-          img-class="mb-6 dark:hidden block"
-        />
-        <VLogo
-          v-if="appConfig.auth.logo || appConfig.auth.register.logo"
-          img-class="mb-6 dark:block hidden"
-          white
-        />
+        <AuthLogo />
       </slot>
       <div class="space-y-2 mb-4">
         <h1 class="text-2xl font-semibold text-gray-900 dark:text-neutral-200">

diff --git a/starter/nuxt-auth/public/logo-type-white.svg b/starter/nuxt-auth/public/logo-type-white.svg
diff --git a/starter/nuxt-auth/public/logo-type.svg b/starter/nuxt-auth/public/logo-type.svg