✨ feat (layout): add auth layout

2025-08-07 14:50:15 +07:00
parent 1f72497ab4
commit 8854f017b8
6 changed files with 134 additions and 4 deletions
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// import PasswordInput from '~/components/PasswordInput.vue'
+import { Loader2 } from 'lucide-vue-next'
+
+const email = ref('[email protected]')
+const password = ref('password')
+const isLoading = ref(false)
+
+function onSubmit(event: Event) {
+  event.preventDefault()
+  if (!email.value || !password.value) return
+
+  isLoading.value = true
+
+  setTimeout(() => {
+    if (email.value === '[email protected]' && password.value === 'password') navigateTo('/')
+
+    isLoading.value = false
+  }, 3000)
+}
+</script>
+
+<template>
+  <form class="grid gap-6" @submit="onSubmit">
+    <div class="grid gap-2">
+      <Label for="email"> Email </Label>
+      <Input
+        id="email"
+        v-model="email"
+        type="email"
+        placeholder="[email protected]"
+        :disabled="isLoading"
+        auto-capitalize="none"
+        auto-complete="email"
+        auto-correct="off"
+      />
+    </div>
+    <div class="grid gap-2">
+      <div class="flex items-center">
+        <Label for="password"> Password </Label>
+        <NuxtLink to="/forgot-password" class="ml-auto inline-block text-sm underline">
+          Forgot your password?
+        </NuxtLink>
+      </div>
+      <!-- <PasswordInput id="password" v-model="password" /> -->
+    </div>
+    <Button type="submit" class="w-full" :disabled="isLoading">
+      <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+      Login
+    </Button>
+  </form>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  reverse?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="relative flex h-dvh items-center justify-center px-4 lg:max-w-none lg:px-0"
+    :class="{ 'flex-row-reverse': reverse }"
+  >
+    <!-- <div class="bg-muted relative hidden h-full flex-1 flex-col p-10 text-white lg:flex dark:border-r"> -->
+    <!--   <div class="absolute inset-0 bg-zinc-900" /> -->
+    <!--   <div class="relative z-20 mt-auto"> -->
+    <!--     <blockquote class="space-y-2"> -->
+    <!--       <p class="text-lg"> -->
+    <!--         &ldquo;This library has saved me countless hours of work and helped me deliver stunning designs to my -->
+    <!--         clients faster than ever before.&rdquo; -->
+    <!--       </p> -->
+    <!--       <footer class="text-sm">Sofia Davis</footer> -->
+    <!--     </blockquote> -->
+    <!--   </div> -->
+    <!-- </div> -->
+    <div class="mx-auto flex-1 lg:p-8">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>