create-nala 3.1.0 → 3.1.2

package/template/src/layouts/AuthSplitLayout.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { RouterView } from 'vue-router'
+import { useColorMode } from '@vueuse/core'
+import {
+  Sun,
+  Moon,
+  Sparkles,
+  ShieldCheck,
+  Zap,
+} from '@lucide/vue'
+import AppLogo from '@/components/AppLogo.vue'
+
+const colorMode = useColorMode()
+
+const toggleColorMode = () => {
+  colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
+}
+
+// Testimonial Carousel
+interface Testimonial {
+  quote: string
+  author: string
+  role: string
+  company: string
+  avatar: string
+}
+
+const testimonials: Testimonial[] = [
+  {
+    quote: 'Nala reduced our frontend delivery cycles by over 70%. The architecture, real API adapters, and UI primitives are exceptionally well-crafted.',
+    author: 'Sarah Jenkins',
+    role: 'VP of Product',
+    company: 'Horizon SaaS',
+    avatar: 'SJ',
+  },
+  {
+    quote: 'The strict TypeScript hygiene, Tailwind v4 design tokens, and zero-boilerplate auto-imports make pairing with AI agents effortless.',
+    author: 'David Chen',
+    role: 'Lead Architect',
+    company: 'CloudScale Technologies',
+    avatar: 'DC',
+  },
+  {
+    quote: 'By far the cleanest, fastest, and most comprehensive Vue 3 enterprise admin dashboard available. Exceptional attention to detail.',
+    author: 'Elena Rostova',
+    role: 'Chief Technology Officer',
+    company: 'Synapse AI',
+    avatar: 'ER',
+  },
+]
+
+const activeIndex = ref(0)
+let carouselTimer: ReturnType<typeof setInterval> | null = null
+
+onMounted(() => {
+  carouselTimer = setInterval(() => {
+    activeIndex.value = (activeIndex.value + 1) % testimonials.length
+  }, 6000)
+})
+
+onUnmounted(() => {
+  if (carouselTimer) clearInterval(carouselTimer)
+})
+</script>
+
+<template>
+  <div class="min-h-dvh lg:h-screen w-full flex flex-col lg:grid lg:grid-cols-12 bg-background text-foreground transition-colors duration-200 lg:overflow-hidden">
+    <!-- Left Column: Authentication Form Container (5 Cols / 7 Cols responsive) -->
+    <div class="flex-1 flex flex-col justify-between p-6 sm:p-8 lg:p-8 xl:p-10 lg:col-span-6 xl:col-span-5 relative overflow-y-auto lg:h-full">
+      <!-- Top Brand Navigation Header -->
+      <header class="flex items-center justify-between w-full shrink-0">
+        <router-link to="/" class="inline-flex items-center gap-2.5 group focus:outline-none">
+          <AppLogo size="md" :withText="true" />
+        </router-link>
+
+        <div class="flex items-center gap-2">
+          <!-- Theme Toggle -->
+          <button
+            type="button"
+            class="h-8 w-8 rounded-lg border border-border/80 flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors cursor-pointer"
+            title="Toggle theme"
+            @click="toggleColorMode"
+          >
+            <Sun v-if="colorMode === 'dark'" class="h-4 w-4" />
+            <Moon v-else class="h-4 w-4" />
+          </button>
+        </div>
+      </header>
+
+      <!-- Center Auth Content Area -->
+      <main class="my-auto py-6 w-full max-w-md mx-auto flex flex-col justify-center">
+        <RouterView v-slot="{ Component }">
+          <Transition name="page" mode="out-in">
+            <component :is="Component" />
+          </Transition>
+        </RouterView>
+      </main>
+
+      <!-- Bottom Footer -->
+      <footer class="pt-4 flex flex-col sm:flex-row items-center justify-between text-xs text-muted-foreground gap-2 border-t border-border/40 shrink-0">
+        <p>&copy; {{ new Date().getFullYear() }} Nala Dashboard. All rights reserved.</p>
+        <div class="flex items-center gap-4">
+          <a href="#" class="hover:text-foreground transition-colors">Privacy Policy</a>
+          <a href="#" class="hover:text-foreground transition-colors">Terms of Service</a>
+          <a href="#" class="hover:text-foreground transition-colors">Security</a>
+        </div>
+      </footer>
+    </div>
+
+    <!-- Right Column: Hero Side-Banner Panel (7 Cols / 8 Cols on desktop) -->
+    <aside class="hidden lg:flex lg:col-span-6 xl:col-span-7 relative flex-col justify-between p-8 xl:p-10 overflow-hidden bg-muted/30 border-l border-border/60 lg:h-full">
+      <!-- Ambient Gradient Backdrops -->
+      <div class="absolute inset-0 bg-linear-to-br from-primary/10 via-primary/5 to-transparent pointer-events-none" />
+      <div class="absolute -top-24 -right-24 h-96 w-96 rounded-full bg-primary/15 blur-3xl pointer-events-none" />
+      <div class="absolute -bottom-24 -left-24 h-96 w-96 rounded-full bg-primary/10 blur-3xl pointer-events-none" />
+
+      <!-- Top Badge / Header info -->
+      <div class="relative z-10 flex items-center justify-between shrink-0">
+        <div class="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-medium text-primary backdrop-blur-xs">
+          <Sparkles class="h-3.5 w-3.5" />
+          Enterprise Admin Platform
+        </div>
+
+        <div class="flex items-center gap-4 text-xs text-muted-foreground">
+          <span class="inline-flex items-center gap-1.5">
+            <span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
+            v3.1.1 Production Ready
+          </span>
+        </div>
+      </div>
+
+      <!-- Center Hero Graphic & Value Proposition -->
+      <div class="relative z-10 my-auto py-4 xl:py-6 space-y-5 xl:space-y-6 max-w-xl">
+        <div class="space-y-2">
+          <h2 class="text-2xl xl:text-3xl font-bold tracking-tight text-foreground">
+            The Enterprise Architecture for High-Velocity Teams.
+          </h2>
+          <p class="text-xs xl:text-sm text-muted-foreground leading-relaxed">
+            Built with Vue 3 Composition API, Tailwind CSS v4 OKLCH tokens, Reka UI primitives, and real API adapters with safe offline fallbacks.
+          </p>
+        </div>
+
+        <!-- Key Capability Badges -->
+        <div class="grid grid-cols-2 gap-3 pt-1">
+          <div class="flex items-start gap-2.5 rounded-xl border border-border/70 bg-card/60 p-3 backdrop-blur-xs shadow-2xs">
+            <ShieldCheck class="h-4 w-4 text-primary mt-0.5 shrink-0" />
+            <div>
+              <h4 class="text-xs font-semibold text-foreground">Enterprise Security</h4>
+              <p class="text-[11px] text-muted-foreground mt-0.5">2FA TOTP & SAML Single Sign-On</p>
+            </div>
+          </div>
+
+          <div class="flex items-start gap-2.5 rounded-xl border border-border/70 bg-card/60 p-3 backdrop-blur-xs shadow-2xs">
+            <Zap class="h-4 w-4 text-amber-500 mt-0.5 shrink-0" />
+            <div>
+              <h4 class="text-xs font-semibold text-foreground">Sub-Second HMR</h4>
+              <p class="text-[11px] text-muted-foreground mt-0.5">Vite 8 bundler with zero-import</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Dynamic Testimonial Card with Transition -->
+        <div class="rounded-2xl border border-border/80 bg-card/80 p-5 backdrop-blur-md shadow-xs relative overflow-hidden transition-all duration-300">
+          <div class="space-y-3">
+            <p class="text-xs xl:text-sm text-foreground/90 italic leading-relaxed min-h-12 xl:min-h-14">
+              "{{ testimonials[activeIndex].quote }}"
+            </p>
+
+            <div class="flex items-center justify-between pt-2 border-t border-border/50">
+              <div class="flex items-center gap-3">
+                <div class="h-8 w-8 rounded-full bg-primary/15 text-primary font-semibold text-xs flex items-center justify-center border border-primary/20 shrink-0">
+                  {{ testimonials[activeIndex].avatar }}
+                </div>
+                <div>
+                  <div class="text-xs font-semibold text-foreground">{{ testimonials[activeIndex].author }}</div>
+                  <div class="text-[11px] text-muted-foreground">{{ testimonials[activeIndex].role }} &middot; {{ testimonials[activeIndex].company }}</div>
+                </div>
+              </div>
+
+              <!-- Carousel Dots -->
+              <div class="flex items-center gap-1.5">
+                <button
+                  v-for="(_, index) in testimonials"
+                  :key="index"
+                  type="button"
+                  :class="[
+                    'h-1.5 rounded-full transition-all cursor-pointer',
+                    activeIndex === index ? 'w-5 bg-primary' : 'w-1.5 bg-muted-foreground/30 hover:bg-muted-foreground/50'
+                  ]"
+                  @click="activeIndex = index"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bottom Platform Metrics Strip -->
+      <div class="relative z-10 grid grid-cols-3 gap-4 pt-4 border-t border-border/50 shrink-0">
+        <div>
+          <div class="text-xl xl:text-2xl font-bold tracking-tight text-foreground">46+</div>
+          <div class="text-xs text-muted-foreground mt-0.5">UI Primitives</div>
+        </div>
+        <div>
+          <div class="text-xl xl:text-2xl font-bold tracking-tight text-foreground">99.9%</div>
+          <div class="text-xs text-muted-foreground mt-0.5">SLA Availability</div>
+        </div>
+        <div>
+          <div class="text-xl xl:text-2xl font-bold tracking-tight text-foreground">&lt;100ms</div>
+          <div class="text-xs text-muted-foreground mt-0.5">API Latency</div>
+        </div>
+      </div>
+    </aside>
+  </div>
+</template>

package/template/src/router/index.ts

@@ -115,6 +115,106 @@ const router = createRouter({
           name: 'lock-screen',
           component: () => import('@/views/auth/LockScreenView.vue'),
         },
+        {
+          path: '2fa',
+          name: 'two-factor',
+          component: () => import('@/views/auth/TwoFactorChallengeView.vue'),
+        },
+        {
+          path: 'two-factor',
+          redirect: '/auth/2fa',
+        },
+        {
+          path: 'sso',
+          name: 'sso-login',
+          component: () => import('@/views/auth/SsoLoginView.vue'),
+        },
+        {
+          path: 'magic-link',
+          name: 'magic-link',
+          component: () => import('@/views/auth/MagicLinkView.vue'),
+        },
+        {
+          path: 'select-tenant',
+          name: 'select-tenant',
+          component: () => import('@/views/auth/SelectTenantView.vue'),
+        },
+        {
+          path: 'select-workspace',
+          redirect: '/auth/select-tenant',
+        },
+        {
+          path: 'suspended',
+          name: 'suspended',
+          component: () => import('@/views/auth/SuspendedView.vue'),
+        },
+        {
+          path: 'deactivated',
+          redirect: '/auth/suspended',
+        },
+        {
+          path: 'frozen',
+          redirect: '/auth/suspended',
+        },
+      ],
+    },
+    {
+      path: '/auth-split',
+      component: () => import('@/layouts/AuthSplitLayout.vue'),
+      children: [
+        {
+          path: '',
+          redirect: '/auth-split/login',
+        },
+        {
+          path: 'login',
+          name: 'split-login',
+          component: () => import('@/views/auth/LoginView.vue'),
+        },
+        {
+          path: 'register',
+          name: 'split-register',
+          component: () => import('@/views/auth/RegisterView.vue'),
+        },
+        {
+          path: '2fa',
+          name: 'split-2fa',
+          component: () => import('@/views/auth/TwoFactorChallengeView.vue'),
+        },
+        {
+          path: 'sso',
+          name: 'split-sso',
+          component: () => import('@/views/auth/SsoLoginView.vue'),
+        },
+        {
+          path: 'magic-link',
+          name: 'split-magic-link',
+          component: () => import('@/views/auth/MagicLinkView.vue'),
+        },
+        {
+          path: 'select-tenant',
+          name: 'split-select-tenant',
+          component: () => import('@/views/auth/SelectTenantView.vue'),
+        },
+        {
+          path: 'select-workspace',
+          redirect: '/auth-split/select-tenant',
+        },
+        {
+          path: 'forgot-password',
+          name: 'split-forgot-password',
+          component: () => import('@/views/auth/ForgotPasswordView.vue'),
+        },
+        {
+          path: 'reset-password',
+          name: 'split-reset-password',
+          component: () => import('@/views/auth/ResetPasswordView.vue'),
+        },
+        {
+          path: 'suspended',
+          name: 'split-suspended',
+          component: () => import('@/views/auth/SuspendedView.vue'),
+        },
       ],
     },
     {

package/template/src/style.css

@@ -1,6 +1,4 @@
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
 @font-face {
   font-family: 'Inter';
   src: url('./assets/fonts/InterVariable.woff2') format('woff2-variations');

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

@@ -109,7 +109,7 @@ function fillDemoPassword() {
         </CardDescription>
       </CardHeader>
 
-      <CardContent class="space-y-4">
+      <CardContent class="px-6 sm:px-8 pb-6 space-y-4">
         <form @submit.prevent="handleUnlock" class="space-y-4">
           <div class="space-y-2">
             <div class="flex items-center justify-between">

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

@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+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 { Alert, AlertDescription } from '@/components/ui/alert'
+import { toast } from '@/components/ui/sonner'
+import {
+  Sparkles,
+  Mail,
+  ArrowRight,
+  ArrowLeft,
+  Loader2,
+  CheckCircle2,
+  ExternalLink,
+  RotateCw,
+  AlertCircle,
+  Clock,
+  Shield,
+} from '@lucide/vue'
+
+const router = useRouter()
+
+const email = ref('')
+const isSubmitted = ref(false)
+const isSending = ref(false)
+const isResending = ref(false)
+const errorMessage = ref('')
+const countdown = ref(60)
+let timer: ReturnType<typeof setInterval> | null = null
+
+const startCountdown = () => {
+  countdown.value = 60
+  if (timer) clearInterval(timer)
+  timer = setInterval(() => {
+    if (countdown.value > 0) {
+      countdown.value--
+    } else {
+      if (timer) clearInterval(timer)
+    }
+  }, 1000)
+}
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+
+const handleSendMagicLink = () => {
+  const trimmed = email.value.trim()
+  if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
+    errorMessage.value = 'Please enter a valid email address.'
+    return
+  }
+
+  isSending.value = true
+  errorMessage.value = ''
+
+  setTimeout(() => {
+    isSending.value = false
+    isSubmitted.value = true
+    startCountdown()
+    toast.success('Magic link has been dispatched to your inbox!')
+  }, 1000)
+}
+
+const handleResend = () => {
+  if (countdown.value > 0 || isResending.value) return
+  isResending.value = true
+  errorMessage.value = ''
+
+  setTimeout(() => {
+    isResending.value = false
+    startCountdown()
+    toast.info('A fresh magic link has been sent!')
+  }, 900)
+}
+
+const openEmailClient = (provider: 'gmail' | 'outlook') => {
+  if (provider === 'gmail') {
+    window.open('https://mail.google.com', '_blank', 'noopener,noreferrer')
+  } else {
+    window.open('https://outlook.live.com', '_blank', 'noopener,noreferrer')
+  }
+}
+
+const simulateInstantLogin = () => {
+  toast.success('Simulated magic link clicked from email client!')
+  router.push('/')
+}
+</script>
+
+<template>
+  <Card flush class="w-full max-w-md shadow-xl border-border/80 bg-card">
+    <!-- State 2: Magic Link Dispatched (Awaiting Email Click) -->
+    <template v-if="isSubmitted">
+      <CardHeader class="pt-8 pb-6 px-6 sm:px-8 space-y-2 text-center">
+        <div class="relative mx-auto mb-2 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+          <Mail class="h-7 w-7 animate-pulse" />
+          <div class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-emerald-500 text-white shadow-xs">
+            <CheckCircle2 class="h-3.5 w-3.5" />
+          </div>
+        </div>
+        <CardTitle class="text-2xl font-bold tracking-tight">Check your email</CardTitle>
+        <CardDescription class="text-sm">
+          We've sent a passwordless sign-in link to
+          <span class="font-semibold text-foreground">{{ email }}</span>.
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="px-6 sm:px-8 pb-6 space-y-4">
+        <!-- Explanatory note -->
+        <div class="rounded-lg border border-border/70 bg-muted/20 p-3.5 text-xs text-muted-foreground space-y-1.5">
+          <div class="flex items-center gap-1.5 font-medium text-foreground">
+            <Shield class="h-3.5 w-3.5 text-primary" />
+            <span>Secure Passwordless Authentication</span>
+          </div>
+          <p>
+            Click the button inside the email to sign in instantly. The link expires in 15 minutes and can only be used once.
+          </p>
+        </div>
+
+        <!-- Direct Email Providers Launcher -->
+        <div class="space-y-2 pt-1">
+          <span class="text-[11px] font-medium text-muted-foreground">Quick open mailbox:</span>
+          <div class="grid grid-cols-2 gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              class="h-9 text-xs justify-center cursor-pointer"
+              @click="openEmailClient('gmail')"
+            >
+              Open Gmail
+              <ExternalLink class="h-3.5 w-3.5 ml-1.5 opacity-70" />
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              class="h-9 text-xs justify-center cursor-pointer"
+              @click="openEmailClient('outlook')"
+            >
+              Open Outlook
+              <ExternalLink class="h-3.5 w-3.5 ml-1.5 opacity-70" />
+            </Button>
+          </div>
+        </div>
+
+        <!-- Simulated One-Click Callback Demo -->
+        <div class="rounded-lg border border-primary/20 bg-primary/5 p-3 text-xs space-y-2">
+          <div class="flex items-center justify-between text-[11px] text-primary font-medium">
+            <span>Developer Sandbox Demo</span>
+            <Sparkles class="h-3.5 w-3.5" />
+          </div>
+          <p class="text-[11px] text-muted-foreground">
+            Testing locally without access to an actual mail inbox? Simulate clicking the magic link callback below:
+          </p>
+          <Button
+            type="button"
+            class="w-full h-8 text-xs font-medium cursor-pointer"
+            @click="simulateInstantLogin"
+          >
+            Simulate Email Link Click
+            <ArrowRight class="h-3.5 w-3.5 ml-1.5" />
+          </Button>
+        </div>
+
+        <!-- Resend Countdown -->
+        <div class="pt-2 text-center">
+          <p class="text-xs text-muted-foreground">
+            Didn't receive the email?
+            <button
+              v-if="countdown === 0"
+              type="button"
+              class="text-primary hover:underline font-medium ml-1 inline-flex items-center gap-1 cursor-pointer"
+              :disabled="isResending"
+              @click="handleResend"
+            >
+              <RotateCw v-if="isResending" class="h-3 w-3 animate-spin" />
+              Resend magic link
+            </button>
+            <span v-else class="text-foreground/70 font-mono ml-1 inline-flex items-center gap-1">
+              <Clock class="h-3 w-3 text-muted-foreground" />
+              Resend in {{ countdown }}s
+            </span>
+          </p>
+        </div>
+      </CardContent>
+
+      <CardFooter class="flex justify-center border-t border-border/60 py-4 bg-muted/10">
+        <button
+          type="button"
+          class="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+          @click="isSubmitted = false"
+        >
+          <ArrowLeft class="h-3.5 w-3.5" />
+          Use a different email address
+        </button>
+      </CardFooter>
+    </template>
+
+    <!-- State 1: Magic Link Request Form -->
+    <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">
+          <Sparkles class="h-6 w-6" />
+        </div>
+        <CardTitle class="text-2xl font-bold tracking-tight">Passwordless Sign In</CardTitle>
+        <CardDescription class="text-sm">
+          Enter your email address and we'll send you a secure magic link to sign in instantly without a password.
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="px-6 sm:px-8 pb-6 space-y-4">
+        <!-- Error Alert Banner -->
+        <Alert v-if="errorMessage" variant="destructive" class="py-2.5 px-3.5">
+          <AlertCircle class="h-4 w-4" />
+          <AlertDescription class="text-xs font-medium ml-2">
+            {{ errorMessage }}
+          </AlertDescription>
+        </Alert>
+
+        <form @submit.prevent="handleSendMagicLink" class="space-y-4">
+          <div class="space-y-1.5">
+            <Label for="magic-email" class="text-xs font-medium">Email address</Label>
+            <div class="relative flex items-center">
+              <Mail class="absolute left-3 h-4 w-4 text-muted-foreground pointer-events-none" />
+              <Input
+                id="magic-email"
+                v-model="email"
+                type="email"
+                placeholder="name@example.com"
+                class="pl-9 h-10 text-sm"
+                :disabled="isSending"
+                autofocus
+              />
+            </div>
+          </div>
+
+          <Button
+            type="submit"
+            class="w-full font-medium h-10 cursor-pointer"
+            :disabled="!email.trim() || isSending"
+          >
+            <Loader2 v-if="isSending" class="h-4 w-4 animate-spin mr-2" />
+            <span v-else class="flex items-center justify-center gap-1.5">
+              Send Magic Link
+              <ArrowRight class="h-3.5 w-3.5" />
+            </span>
+          </Button>
+        </form>
+
+        <!-- Demo auto-fill hint -->
+        <div class="pt-1 text-center">
+          <button
+            type="button"
+            class="text-[11px] text-muted-foreground hover:text-primary transition-colors cursor-pointer"
+            @click="email = 'alex.morgan@example.com'"
+          >
+            Click to fill demo: <span class="font-mono text-foreground">alex.morgan@example.com</span>
+          </button>
+        </div>
+      </CardContent>
+
+      <CardFooter class="flex justify-center border-t border-border/60 py-4 bg-muted/10">
+        <router-link
+          to="/auth/login"
+          class="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft class="h-3.5 w-3.5" />
+          Return to password sign in
+        </router-link>
+      </CardFooter>
+    </template>
+  </Card>
+</template>