create-nala 3.0.0

package/template/src/views/auth/ConfirmEmailView.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { MailCheck, CheckCircle2, ArrowRight, ArrowLeft, RotateCw } from '@lucide/vue'
+
+const digits = ref<string[]>(['', '', '', '', '', ''])
+const inputRefs = ref<HTMLInputElement[]>([])
+const isVerifying = ref(false)
+const isVerified = ref(false)
+const errorMessage = ref('')
+const countdown = ref(45)
+const isResending = ref(false)
+let timer: ReturnType<typeof setInterval> | null = null
+
+const email = 'alex.smith@example.com'
+
+const isCodeComplete = computed(() => digits.value.every((d) => d.length === 1))
+
+const startCountdown = () => {
+  countdown.value = 45
+  if (timer) clearInterval(timer)
+  timer = setInterval(() => {
+    if (countdown.value > 0) {
+      countdown.value--
+    } else {
+      if (timer) clearInterval(timer)
+    }
+  }, 1000)
+}
+
+onMounted(() => {
+  startCountdown()
+  // Focus first input on mount
+  setTimeout(() => {
+    inputRefs.value[0]?.focus()
+  }, 100)
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+
+const handleInput = (index: number, event: Event) => {
+  errorMessage.value = ''
+  const target = event.target as HTMLInputElement
+  const value = target.value.replace(/\D/g, '')
+
+  // Only take the last entered character if multiple typed
+  digits.value[index] = value ? value.slice(-1) : ''
+
+  if (value && index < 5) {
+    inputRefs.value[index + 1]?.focus()
+  }
+}
+
+const handleKeyDown = (index: number, event: KeyboardEvent) => {
+  if (event.key === 'Backspace' && !digits.value[index] && index > 0) {
+    inputRefs.value[index - 1]?.focus()
+  }
+}
+
+const handlePaste = (event: ClipboardEvent) => {
+  event.preventDefault()
+  const pastedData = event.clipboardData?.getData('text') || ''
+  const numbers = pastedData.replace(/\D/g, '').slice(0, 6)
+
+  if (numbers.length > 0) {
+    for (let i = 0; i < 6; i++) {
+      digits.value[i] = numbers[i] || ''
+    }
+    const nextIndex = Math.min(numbers.length, 5)
+    inputRefs.value[nextIndex]?.focus()
+  }
+}
+
+const handleVerify = () => {
+  if (!isCodeComplete.value) return
+  isVerifying.value = true
+  errorMessage.value = ''
+
+  setTimeout(() => {
+    isVerifying.value = false
+    const enteredCode = digits.value.join('')
+    // Simulate verification
+    if (enteredCode === '000000') {
+      errorMessage.value = 'Invalid verification code. Please try again.'
+    } else {
+      isVerified.value = true
+    }
+  }, 1000)
+}
+
+const handleResend = () => {
+  if (countdown.value > 0 || isResending.value) return
+  isResending.value = true
+  errorMessage.value = ''
+
+  setTimeout(() => {
+    isResending.value = false
+    digits.value = ['', '', '', '', '', '']
+    inputRefs.value[0]?.focus()
+    startCountdown()
+  }, 800)
+}
+</script>
+
+<template>
+  <Card flush class="w-full max-w-md shadow-xl border-border/80 bg-card">
+    <!-- Success State -->
+    <template v-if="isVerified">
+      <CardHeader class="pt-8 pb-6 px-6 sm:px-8 space-y-2 text-center">
+        <div class="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+          <CheckCircle2 class="h-6 w-6" />
+        </div>
+        <CardTitle class="text-2xl font-bold tracking-tight">Email verified!</CardTitle>
+        <CardDescription class="text-sm">
+          Your email address has been successfully verified. Welcome to Nala Admin.
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="px-6 sm:px-8 pb-8">
+        <Button as-child class="w-full font-medium cursor-pointer">
+          <router-link to="/" class="flex items-center justify-center gap-2">
+            Go to Dashboard
+            <ArrowRight class="h-4 w-4" />
+          </router-link>
+        </Button>
+      </CardContent>
+    </template>
+
+    <!-- Verification Code Form State -->
+    <template v-else>
+      <CardHeader class="pt-8 pb-6 px-6 sm:px-8 space-y-1.5 text-center">
+        <div class="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
+          <MailCheck class="h-6 w-6" />
+        </div>
+        <CardTitle class="text-2xl font-bold tracking-tight">Verify your email</CardTitle>
+        <CardDescription class="text-sm">
+          We've sent a 6-digit confirmation code to
+          <span class="font-medium text-foreground block mt-0.5">{{ email }}</span>
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="px-6 sm:px-8 pb-6 space-y-5">
+        <!-- 6-digit OTP Inputs -->
+        <div class="flex items-center justify-center gap-2 sm:gap-3" @paste="handlePaste">
+          <input
+            v-for="(_, index) in digits"
+            :key="index"
+            ref="inputRefs"
+            type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            maxlength="1"
+            :value="digits[index]"
+            class="h-12 w-11 sm:h-13 sm:w-12 rounded-lg border border-input bg-background text-center text-lg font-semibold shadow-xs outline-none transition-all focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50"
+            @input="handleInput(index, $event)"
+            @keydown="handleKeyDown(index, $event)"
+          />
+        </div>
+
+        <!-- Error Message -->
+        <p v-if="errorMessage" class="text-xs font-medium text-destructive text-center">
+          {{ errorMessage }}
+        </p>
+
+        <!-- Submit Button -->
+        <Button
+          type="button"
+          class="w-full font-medium cursor-pointer"
+          :disabled="!isCodeComplete || isVerifying"
+          @click="handleVerify"
+        >
+          <span v-if="isVerifying">Verifying code...</span>
+          <span v-else class="flex items-center justify-center gap-2">
+            Confirm Email
+            <ArrowRight class="h-4 w-4" />
+          </span>
+        </Button>
+
+        <!-- Resend Code section -->
+        <div class="text-center text-xs text-muted-foreground">
+          <span>Didn't receive the code? </span>
+          <button
+            type="button"
+            class="font-medium text-primary hover:underline transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:no-underline inline-flex items-center gap-1"
+            :disabled="countdown > 0 || isResending"
+            @click="handleResend"
+          >
+            <RotateCw v-if="isResending" class="h-3 w-3 animate-spin" />
+            <span v-if="countdown > 0">Resend code in {{ countdown }}s</span>
+            <span v-else>Resend code</span>
+          </button>
+        </div>
+      </CardContent>
+
+      <CardFooter class="border-t border-border/60 bg-muted/30 px-6 py-4 flex flex-col items-center justify-center text-center">
+        <router-link
+          to="/auth/login"
+          class="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft class="h-3.5 w-3.5" />
+          Back to sign in
+        </router-link>
+      </CardFooter>
+    </template>
+  </Card>
+</template>

package/template/src/views/auth/ForgotPasswordView.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Mail, KeyRound, ArrowLeft, CheckCircle2, RotateCw } from '@lucide/vue'
+
+const isSubmitting = ref(false)
+const isSubmitted = ref(false)
+const submittedEmail = ref('')
+
+const forgotPasswordSchema = z.object({
+  email: z
+    .string()
+    .min(1, 'Email address is required')
+    .email('Please enter a valid email address'),
+})
+
+const form = useForm({
+  validationSchema: toTypedSchema(forgotPasswordSchema),
+  initialValues: {
+    email: '',
+  },
+})
+
+const onSubmit = form.handleSubmit((values) => {
+  isSubmitting.value = true
+  submittedEmail.value = values.email
+
+  // Simulate API request to send reset link
+  setTimeout(() => {
+    isSubmitting.value = false
+    isSubmitted.value = true
+  }, 1000)
+})
+
+const handleResend = () => {
+  isSubmitting.value = true
+  setTimeout(() => {
+    isSubmitting.value = false
+  }, 800)
+}
+</script>
+
+<template>
+  <Card flush class="w-full max-w-md shadow-xl border-border/80 bg-card">
+    <!-- Success State -->
+    <template v-if="isSubmitted">
+      <CardHeader class="pt-8 pb-6 px-6 sm:px-8 space-y-2 text-center">
+        <div class="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+          <CheckCircle2 class="h-6 w-6" />
+        </div>
+        <CardTitle class="text-2xl font-bold tracking-tight">Check your email</CardTitle>
+        <CardDescription class="text-sm">
+          We have sent a password reset link to
+          <span class="font-medium text-foreground block mt-1">{{ submittedEmail }}</span>
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="px-6 sm:px-8 pb-6 space-y-4">
+        <p class="text-xs text-center text-muted-foreground leading-relaxed">
+          Please check your inbox and spam folder. If you don't receive an email within a few minutes, you can request a new link.
+        </p>
+
+        <Button
+          type="button"
+          variant="outline"
+          class="w-full gap-2 cursor-pointer"
+          :disabled="isSubmitting"
+          @click="handleResend"
+        >
+          <RotateCw class="h-4 w-4" :class="{ 'animate-spin': isSubmitting }" />
+          {{ isSubmitting ? 'Resending...' : 'Click to resend' }}
+        </Button>
+      </CardContent>
+
+      <CardFooter class="border-t border-border/60 bg-muted/30 px-6 py-4 flex flex-col items-center justify-center text-center">
+        <router-link
+          to="/auth/login"
+          class="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft class="h-3.5 w-3.5" />
+          Back to sign in
+        </router-link>
+      </CardFooter>
+    </template>
+
+    <!-- Request Form State -->
+    <template v-else>
+      <CardHeader class="pt-8 pb-6 px-6 sm:px-8 space-y-1.5 text-center">
+        <div class="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
+          <KeyRound class="h-6 w-6" />
+        </div>
+        <CardTitle class="text-2xl font-bold tracking-tight">Forgot password?</CardTitle>
+        <CardDescription class="text-sm">
+          No worries, enter your registered email and we'll send you reset instructions.
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="px-6 sm:px-8 pb-6">
+        <form @submit.prevent="onSubmit" class="space-y-4" novalidate>
+          <FormField v-slot="{ componentField }" name="email">
+            <FormItem class="space-y-1.5">
+              <FormLabel class="text-xs font-semibold">Email address</FormLabel>
+              <FormControl>
+                <InputGroup>
+                  <InputIcon>
+                    <Mail />
+                  </InputIcon>
+                  <Input
+                    type="email"
+                    placeholder="name@example.com"
+                    autocomplete="email"
+                    class="pl-9"
+                    v-bind="componentField"
+                  />
+                </InputGroup>
+              </FormControl>
+              <FormMessage class="text-xs" />
+            </FormItem>
+          </FormField>
+
+          <Button type="submit" class="w-full mt-2 font-medium cursor-pointer" :disabled="isSubmitting">
+            <span v-if="isSubmitting">Sending reset link...</span>
+            <span v-else>Send Reset Link</span>
+          </Button>
+        </form>
+      </CardContent>
+
+      <CardFooter class="border-t border-border/60 bg-muted/30 px-6 py-4 flex flex-col items-center justify-center text-center">
+        <router-link
+          to="/auth/login"
+          class="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft class="h-3.5 w-3.5" />
+          Back to sign in
+        </router-link>
+      </CardFooter>
+    </template>
+  </Card>
+</template>

package/template/src/views/auth/LockScreenView.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  Lock,
+  Unlock,
+  Eye,
+  EyeOff,
+  ArrowRight,
+  UserCheck,
+  Sparkles,
+} from '@lucide/vue'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import AppLogo from '@/components/AppLogo.vue'
+import { toast } from '@/components/ui/sonner'
+
+const router = useRouter()
+
+const password = ref('')
+const showPassword = ref(false)
+const isUnlocking = ref(false)
+const lockedAt = ref('')
+
+// Mock Locked User Profile
+const userProfile = {
+  name: 'Alex Morgan',
+  role: 'Lead Administrator',
+  email: 'alex.morgan@nala.dev',
+  avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80',
+  initials: 'AM',
+}
+
+onMounted(() => {
+  const now = new Date()
+  lockedAt.value = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+})
+
+async function handleUnlock() {
+  if (!password.value) {
+    toast.error('Please enter your password to unlock the session.')
+    return
+  }
+
+  isUnlocking.value = true
+
+  // Simulate verification delay
+  setTimeout(() => {
+    isUnlocking.value = false
+    toast.success(`Welcome back, ${userProfile.name}! Session unlocked.`)
+    router.push('/')
+  }, 650)
+}
+
+function fillDemoPassword() {
+  password.value = 'password123'
+  toast.info('Demo password autofilled. Click Unlock to proceed.')
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md space-y-6">
+    <!-- Brand Logo Header -->
+    <div class="flex flex-col items-center justify-center text-center pb-1">
+      <router-link
+        to="/"
+        class="inline-flex items-center gap-2.5 hover:opacity-90 transition-opacity"
+        aria-label="Nala Home"
+      >
+        <AppLogo class="h-10 w-10" withBackground withText textClass="text-2xl font-bold tracking-tight" />
+      </router-link>
+    </div>
+
+    <!-- Lock Screen Card -->
+    <Card class="border-border/80 shadow-lg bg-card/95 backdrop-blur-xs relative overflow-hidden">
+      <!-- Glow Accent Line -->
+      <div class="absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-primary/50 via-primary to-primary/50" />
+
+      <CardHeader class="pb-4 text-center">
+        <!-- Avatar with Lock Pip -->
+        <div class="relative mx-auto mb-2">
+          <Avatar class="h-20 w-20 border-2 border-primary/40 ring-4 ring-primary/10 shadow-md">
+            <AvatarImage :src="userProfile.avatar" :alt="userProfile.name" />
+            <AvatarFallback class="bg-primary/10 text-primary text-lg font-bold">
+              {{ userProfile.initials }}
+            </AvatarFallback>
+          </Avatar>
+          <div
+            class="absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm ring-2 ring-background"
+            title="Session Locked"
+          >
+            <Lock class="h-3.5 w-3.5" />
+          </div>
+        </div>
+
+        <CardTitle class="text-xl font-bold tracking-tight text-foreground">
+          {{ userProfile.name }}
+        </CardTitle>
+        <CardDescription class="text-xs text-muted-foreground flex items-center justify-center gap-1.5 pt-1">
+          <Badge variant="secondary" shape="pill" class="text-[10px] py-0 px-2 font-medium">
+            {{ userProfile.role }}
+          </Badge>
+          <span>•</span>
+          <span>Locked at {{ lockedAt || 'just now' }}</span>
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="space-y-4">
+        <form @submit.prevent="handleUnlock" class="space-y-4">
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <Label for="unlock-password" class="text-xs font-medium text-foreground">
+                Password
+              </Label>
+              <button
+                type="button"
+                class="text-[11px] text-primary hover:underline cursor-pointer flex items-center gap-1"
+                @click="fillDemoPassword"
+              >
+                <Sparkles class="h-3 w-3" />
+                <span>Auto-fill Demo</span>
+              </button>
+            </div>
+
+            <div class="relative">
+              <Input
+                id="unlock-password"
+                v-model="password"
+                :type="showPassword ? 'text' : 'password'"
+                placeholder="Enter password to unlock"
+                class="h-10 text-sm pr-10 bg-background"
+                autofocus
+              />
+              <button
+                type="button"
+                class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground cursor-pointer"
+                @click="showPassword = !showPassword"
+                :aria-label="showPassword ? 'Hide password' : 'Show password'"
+              >
+                <component :is="showPassword ? EyeOff : Eye" class="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+
+          <Button
+            type="submit"
+            class="w-full h-10 gap-2 font-medium cursor-pointer shadow-xs"
+            :disabled="isUnlocking"
+          >
+            <component :is="isUnlocking ? Unlock : Lock" class="h-4 w-4" :class="{ 'animate-bounce': isUnlocking }" />
+            <span>{{ isUnlocking ? 'Unlocking Session...' : 'Unlock Dashboard' }}</span>
+            <ArrowRight v-if="!isUnlocking" class="h-3.5 w-3.5" />
+          </Button>
+        </form>
+      </CardContent>
+
+      <CardFooter class="flex flex-col items-center justify-center border-t border-border/50 py-4 bg-muted/20 text-xs text-muted-foreground">
+        <div class="flex items-center gap-1.5">
+          <span>Not {{ userProfile.name }}?</span>
+          <router-link
+            to="/auth/login"
+            class="font-semibold text-primary hover:underline transition-colors cursor-pointer inline-flex items-center gap-1"
+          >
+            <UserCheck class="h-3.5 w-3.5" />
+            <span>Switch Account</span>
+          </router-link>
+        </div>
+      </CardFooter>
+    </Card>
+  </div>
+</template>

package/template/src/views/auth/LoginView.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function handleLogin() {
+  router.push('/')
+}
+</script>
+
+<template>
+  <Card flush class="w-full max-w-md shadow-xl border-border/80 bg-card">
+    <CardHeader class="pt-8 pb-6 px-6 sm:px-8 space-y-1.5 text-center">
+      <CardTitle class="text-2xl font-bold tracking-tight">Sign in</CardTitle>
+      <CardDescription class="text-sm">Enter your credentials to access Nala Admin panel</CardDescription>
+    </CardHeader>
+    <CardContent class="px-6 sm:px-8 pb-6">
+      <form @submit.prevent="handleLogin" class="space-y-4">
+        <div class="space-y-2">
+          <Label for="email">Email</Label>
+          <Input id="email" type="email" placeholder="admin@example.com" required />
+        </div>
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <Label for="password">Password</Label>
+            <router-link
+              to="/auth/forgot-password"
+              class="text-xs font-medium text-primary hover:underline transition-colors"
+            >
+              Forgot password?
+            </router-link>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" class="w-full font-medium cursor-pointer">Sign In</Button>
+      </form>
+    </CardContent>
+    <CardFooter class="border-t border-border/60 bg-muted/30 px-6 py-4 flex flex-col items-center justify-center text-center">
+      <p class="text-xs text-muted-foreground">
+        Don't have an account?
+        <router-link
+          to="/auth/register"
+          class="font-medium text-primary hover:underline transition-colors ml-1"
+        >
+          Sign up
+        </router-link>
+      </p>
+    </CardFooter>
+  </Card>
+</template>