@lucifer91299/create-portal-app 1.1.26 → 1.1.28

package/dist/cli/index.js

@@ -232,16 +232,57 @@ export function Providers({ children }: { children: ReactNode }) {
 }
 function genLoginPage(o) {
   const isAnimated = o.loginStyle !== "simple";
-  const component = isAnimated ? "LoginPage" : "LoginPageSimple";
-  const credField = isAnimated ? "identifier" : "email";
-  const poweredByProp = isAnimated ? `      poweredBy={{
-        logoSrc: "/brand/powered-by-logo.svg",
-        text: "Powered by",
-        href: "#",
-      }}` : "";
+  if (!isAnimated) {
+    return `'use client'
+
+import { LoginPageSimple } from '@lucifer91299/ui'
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function Login() {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError]         = useState<string | null>(null)
+  const router = useRouter()
+
+  const handleSubmit = async (creds: { email: string; password: string }) => {
+    setError(null)
+    setIsLoading(true)
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: creds.email, password: creds.password }),
+        credentials: 'include',
+      })
+      const data = await res.json()
+      if (!res.ok) { setError(data.error ?? 'Invalid credentials'); return }
+      router.replace('/dashboard')
+    } catch {
+      setError('Login failed. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <LoginPageSimple
+      projectName="${o.projectName}"
+      projectSubtitle="Sign in to your account"
+      logoSrc="/brand/logo.svg"
+      onSubmit={handleSubmit}
+      isLoading={isLoading}
+      error={error}
+      registerLinks={[
+        { label: 'Create account', href: '/register' },
+      ]}
+    />
+  )
+}
+`;
+  }
   return `'use client'
 
-import { ${component} } from '@lucifer91299/ui'
+import { LoginPage } from '@lucifer91299/ui'
 import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
 
@@ -250,14 +291,15 @@ export default function Login() {
   const [error, setError]         = useState<string | null>(null)
   const router = useRouter()
 
-  const handleSubmit = async (creds: { ${credField}: string; password: string }) => {
+  // \u2500\u2500 Submit handler \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  const handleSubmit = async (creds: { identifier: string; password: string }) => {
     setError(null)
     setIsLoading(true)
     try {
       const res = await fetch('/api/auth/login', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: creds.${credField}, password: creds.password }),
+        body: JSON.stringify({ email: creds.identifier, password: creds.password }),
         credentials: 'include',
       })
       const data = await res.json()
@@ -271,19 +313,485 @@ export default function Login() {
   }
 
   return (
-    <${component}
+    <LoginPage
+      // \u2500\u2500 Identity \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
       projectName="${o.projectName}"
       projectSubtitle="Sign in to continue"
       logoSrc="/brand/logo.svg"
+      logoAlt="${o.projectName} logo"
+      logoSize={56}
+
+      // \u2500\u2500 Auth \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      onSubmit={handleSubmit}
+      isLoading={isLoading}
+      error={error}
+
+      // \u2500\u2500 Field labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      identifierLabel="Email address"
+      identifierType="email"
+      identifierPlaceholder="you@example.com"
+      passwordPlaceholder="Enter your password"
+
+      // \u2500\u2500 Forgot password \u2014 links to /forgot-password \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      onForgotPassword={() => router.push('/forgot-password')}
+      forgotPasswordLabel="Forgot Password?"
+
+      // \u2500\u2500 Registration links (set isOpen: false to lock a link) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      registrationLinks={[
+        { label: 'Create account', href: '/register', isOpen: true },
+      ]}
+
+      // \u2500\u2500 Social connect links \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      // socialLinks={[
+      //   { label: 'WhatsApp', href: '#', brand: '#25D366', icon: <WhatsAppIcon /> },
+      //   { label: 'Facebook', href: '#', brand: '#1877F2', icon: <FacebookIcon /> },
+      // ]}
+      // socialLinksLabel="Connect with us"
+
+      // \u2500\u2500 Powered-by badge (bottom-right corner) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      poweredBy={{
+        logoSrc: "/brand/powered-by-logo.svg",
+        text: "Powered by",
+        href: "#",
+      }}
+
+      // \u2500\u2500 Background \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      // backgroundGradient="linear-gradient(150deg, #f7f6f3 0%, #f1efe9 55%, #f5f2ed 100%)"
+      // ambientColors={[[255,153,51],[19,136,8],[0,0,128]]}
+    />
+  )
+}
+`;
+}
+function genForgotPasswordPage(o) {
+  return `'use client'
+
+import { ForgotPasswordPage } from '@lucifer91299/ui'
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function ForgotPassword() {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError]         = useState<string | null>(null)
+  const [isSuccess, setIsSuccess] = useState(false)
+  const router = useRouter()
+
+  const handleSubmit = async (email: string) => {
+    setError(null)
+    setIsLoading(true)
+    try {
+      const res = await fetch('/api/auth/forgot-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      })
+      const data = await res.json()
+      if (!res.ok) { setError(data.error ?? 'Could not send reset link'); return }
+      setIsSuccess(true)
+    } catch {
+      setError('Something went wrong. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <ForgotPasswordPage
+      // \u2500\u2500 Identity \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      projectName="${o.projectName}"
+      projectSubtitle="Reset your password"
+      logoSrc="/brand/logo.svg"
+      logoAlt="${o.projectName} logo"
+      logoSize={56}
+
+      // \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
       onSubmit={handleSubmit}
       isLoading={isLoading}
       error={error}
-${poweredByProp}
+      isSuccess={isSuccess}
+
+      // \u2500\u2500 Success screen text \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      successMessage="Check your email"
+      successSubMessage="We've sent a password reset link to your email address. Follow the link to create a new password."
+
+      // \u2500\u2500 Navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      onBackToLogin={() => router.push('/login')}
+      backToLoginHref="/login"
+
+      // \u2500\u2500 Powered-by badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      poweredBy={{
+        logoSrc: "/brand/powered-by-logo.svg",
+        text: "Powered by",
+        href: "#",
+      }}
+
+      // \u2500\u2500 Background \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      // backgroundGradient="linear-gradient(150deg, #f7f6f3 0%, #f1efe9 55%, #f5f2ed 100%)"
+      // ambientColors={[[255,153,51],[19,136,8],[0,0,128]]}
+      // socialLinks={[...]}
     />
   )
 }
 `;
 }
+function genResetPasswordPage(o) {
+  return `'use client'
+
+import { ResetPasswordPage } from '@lucifer91299/ui'
+import React, { useState, useEffect, Suspense } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+function ResetPasswordContent() {
+  const router       = useRouter()
+  const searchParams = useSearchParams()
+  const token        = searchParams.get('token') ?? ''
+
+  const [isValidating, setIsValidating] = useState(true)
+  const [isValid, setIsValid]           = useState(false)
+  const [isLoading, setIsLoading]       = useState(false)
+  const [error, setError]               = useState<string | null>(null)
+  const [isSuccess, setIsSuccess]       = useState(false)
+
+  // Validate token on mount
+  useEffect(() => {
+    if (!token) { setIsValidating(false); return }
+    fetch(\`/api/auth/reset-password/validate?token=\${encodeURIComponent(token)}\`)
+      .then(r => r.json())
+      .then(d => setIsValid(d.valid === true))
+      .catch(() => setIsValid(false))
+      .finally(() => setIsValidating(false))
+  }, [token])
+
+  const handleSubmit = async (password: string) => {
+    setError(null)
+    setIsLoading(true)
+    try {
+      const res = await fetch('/api/auth/reset-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      })
+      const data = await res.json()
+      if (!res.ok) { setError(data.error ?? 'Could not reset password'); return }
+      setIsSuccess(true)
+    } catch {
+      setError('Something went wrong. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <ResetPasswordPage
+      // \u2500\u2500 Identity \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      projectName="${o.projectName}"
+      projectSubtitle="Set a new password"
+      logoSrc="/brand/logo.svg"
+      logoAlt="${o.projectName} logo"
+      logoSize={56}
+
+      // \u2500\u2500 Token validation state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      isValidating={isValidating}
+      isValid={isValid}
+
+      // \u2500\u2500 Form state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      onSubmit={handleSubmit}
+      isLoading={isLoading}
+      error={error}
+      isSuccess={isSuccess}
+
+      // \u2500\u2500 Password rules \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      minPasswordLength={6}
+
+      // \u2500\u2500 Custom messages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      validatingMessage="Checking reset link\u2026"
+      invalidMessage="Reset link expired"
+      invalidSubMessage="This reset link is invalid, expired, or has already been used. Please request a new one."
+      successMessage="Password updated"
+      successSubMessage="Your password has been changed. You can now sign in with your new password."
+
+      // \u2500\u2500 Navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      onBackToLogin={() => router.push('/login')}
+      backToLoginHref="/login"
+
+      // \u2500\u2500 Powered-by badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      poweredBy={{
+        logoSrc: "/brand/powered-by-logo.svg",
+        text: "Powered by",
+        href: "#",
+      }}
+
+      // \u2500\u2500 Background \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      // backgroundGradient="linear-gradient(150deg, #f7f6f3 0%, #f1efe9 55%, #f5f2ed 100%)"
+      // ambientColors={[[255,153,51],[19,136,8],[0,0,128]]}
+    />
+  )
+}
+
+export default function ResetPassword() {
+  return (
+    <Suspense>
+      <ResetPasswordContent />
+    </Suspense>
+  )
+}
+`;
+}
+function genRegisterPage(o) {
+  return `'use client'
+
+import { RegisterPage } from '@lucifer91299/ui'
+import { Input, Select, PhoneInput } from '@lucifer91299/ui'
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+const STEPS = [
+  { label: 'Account',  description: 'Email and password' },
+  { label: 'Profile',  description: 'Personal details' },
+  { label: 'Review',   description: 'Confirm and submit' },
+]
+
+export default function Register() {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(0)
+  const [isLoading, setIsLoading]     = useState(false)
+  const [error, setError]             = useState<string | null>(null)
+
+  // Form state
+  const [email, setEmail]       = useState('')
+  const [password, setPassword] = useState('')
+  const [name, setName]         = useState('')
+  const [phone, setPhone]       = useState('')
+  const [role, setRole]         = useState('')
+
+  const handleNext = () => {
+    setError(null)
+    // Add your step validation here
+    if (currentStep === 0 && !email) { setError('Email is required'); return }
+    if (currentStep === 0 && !password) { setError('Password is required'); return }
+    if (currentStep === 1 && !name) { setError('Name is required'); return }
+    setCurrentStep(s => s + 1)
+  }
+
+  const handleSubmit = async () => {
+    setError(null)
+    setIsLoading(true)
+    try {
+      const res = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, name, phone, role }),
+      })
+      const data = await res.json()
+      if (!res.ok) { setError(data.error ?? 'Registration failed'); return }
+      router.replace('/login')
+    } catch {
+      setError('Something went wrong. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <RegisterPage
+      // \u2500\u2500 Identity \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      projectName="${o.projectName}"
+      projectSubtitle="Create your account"
+      logoSrc="/brand/logo.svg"
+      logoAlt="${o.projectName} logo"
+      logoSize={40}
+
+      // \u2500\u2500 Steps \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      steps={STEPS}
+      currentStep={currentStep}
+
+      // \u2500\u2500 Navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      onNext={handleNext}
+      onBack={() => { setError(null); setCurrentStep(s => s - 1) }}
+      onSubmit={handleSubmit}
+      nextLabel="Continue"
+      backLabel="Back"
+      submitLabel="Create Account"
+      isLoading={isLoading}
+      error={error}
+
+      // \u2500\u2500 Login link \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      onLoginLink={() => router.push('/login')}
+      loginLabel="Already have an account? Sign in"
+
+      // \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      maxWidth="max-w-2xl"
+
+      // \u2500\u2500 Powered-by badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      poweredBy={{
+        logoSrc: "/brand/powered-by-logo.svg",
+        text: "Powered by",
+        href: "#",
+      }}
+
+      // \u2500\u2500 Background \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      // backgroundGradient="linear-gradient(150deg, #f7f6f3 0%, #f1efe9 55%, #f5f2ed 100%)"
+      // ambientColors={[[255,153,51],[19,136,8],[0,0,128]]}
+      // socialLinks={[...]}
+    >
+      {/* \u2500\u2500 Step 1: Account \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */}
+      {currentStep === 0 && (
+        <>
+          <Input
+            label="Email address"
+            type="email"
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            placeholder="you@example.com"
+            autoComplete="email"
+          />
+          <Input
+            label="Password"
+            type="password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            placeholder="Minimum 6 characters"
+            autoComplete="new-password"
+          />
+        </>
+      )}
+
+      {/* \u2500\u2500 Step 2: Profile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */}
+      {currentStep === 1 && (
+        <>
+          <Input
+            label="Full name"
+            value={name}
+            onChange={e => setName(e.target.value)}
+            placeholder="Priya Mehta"
+          />
+          <PhoneInput
+            label="Phone number"
+            value={phone}
+            onChange={setPhone}
+          />
+          <Select
+            label="Role"
+            value={role}
+            onChange={setRole}
+            options={[
+              { value: 'member',  label: 'Member'  },
+              { value: 'manager', label: 'Manager' },
+            ]}
+          />
+        </>
+      )}
+
+      {/* \u2500\u2500 Step 3: Review \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */}
+      {currentStep === 2 && (
+        <div className="space-y-3">
+          <div className="bg-surface-secondary rounded-xl p-4 text-sm space-y-2">
+            <div className="flex justify-between">
+              <span className="text-label-tertiary">Email</span>
+              <span className="font-medium text-label-primary">{email}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-label-tertiary">Name</span>
+              <span className="font-medium text-label-primary">{name || '\u2014'}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-label-tertiary">Phone</span>
+              <span className="font-medium text-label-primary">{phone || '\u2014'}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-label-tertiary">Role</span>
+              <span className="font-medium text-label-primary">{role || '\u2014'}</span>
+            </div>
+          </div>
+          <p className="text-xs text-label-tertiary text-center">
+            Review your details above and click Create Account to proceed.
+          </p>
+        </div>
+      )}
+    </RegisterPage>
+  )
+}
+`;
+}
+function genForgotPasswordRoute() {
+  return `import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+  const { email } = (await request.json()) as { email?: string }
+
+  if (!email) {
+    return NextResponse.json({ error: 'Email is required' }, { status: 400 })
+  }
+
+  // TODO: implement your forgot-password logic here.
+  // 1. Look up the user by email.
+  // 2. Generate a secure reset token and store it (with expiry).
+  // 3. Send a reset email containing: /reset-password?token=<token>
+  //
+  // Example with a backend API:
+  // const res = await fetch(\`\${process.env.API_URL}/auth/forgot-password\`, {
+  //   method: 'POST',
+  //   headers: { 'Content-Type': 'application/json' },
+  //   body: JSON.stringify({ email }),
+  // })
+  // if (!res.ok) return NextResponse.json({ error: 'User not found' }, { status: 404 })
+
+  // Always return 200 to avoid leaking whether the email exists.
+  return NextResponse.json({ ok: true })
+}
+`;
+}
+function genResetPasswordRoutes() {
+  return `import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+  const { token, password } = (await request.json()) as { token?: string; password?: string }
+
+  if (!token || !password) {
+    return NextResponse.json({ error: 'Token and password are required' }, { status: 400 })
+  }
+
+  // TODO: implement your reset-password logic here.
+  // 1. Look up the token in your store and check it hasn't expired.
+  // 2. Hash the new password and update the user record.
+  // 3. Invalidate / delete the token.
+  //
+  // Example with a backend API:
+  // const res = await fetch(\`\${process.env.API_URL}/auth/reset-password\`, {
+  //   method: 'POST',
+  //   headers: { 'Content-Type': 'application/json' },
+  //   body: JSON.stringify({ token, password }),
+  // })
+  // if (!res.ok) return NextResponse.json({ error: 'Invalid or expired token' }, { status: 400 })
+
+  return NextResponse.json({ ok: true })
+}
+`;
+}
+function genResetPasswordValidateRoute() {
+  return `import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const token = searchParams.get('token')
+
+  if (!token) {
+    return NextResponse.json({ valid: false })
+  }
+
+  // TODO: validate the reset token.
+  // Check that it exists in your store and hasn't expired.
+  //
+  // Example with a backend API:
+  // const res = await fetch(\`\${process.env.API_URL}/auth/reset-password/validate?token=\${token}\`)
+  // const data = await res.json()
+  // return NextResponse.json({ valid: res.ok && data.valid })
+
+  // Demo: treat any non-empty token as valid
+  return NextResponse.json({ valid: token.length > 0 })
+}
+`;
+}
 function genLoginRoute(o) {
   const cookieName = o.jwtCookieName ?? "access_token";
   return `import { SignJWT } from 'jose'
@@ -3086,6 +3594,9 @@ function scaffold(opts) {
   w(f("src/app/layout.tsx"), genRootLayout(opts));
   w(f("src/app/page.tsx"), genRootPage());
   w(f("src/app/login/page.tsx"), genLoginPage(opts));
+  w(f("src/app/forgot-password/page.tsx"), genForgotPasswordPage(opts));
+  w(f("src/app/reset-password/page.tsx"), genResetPasswordPage(opts));
+  w(f("src/app/register/page.tsx"), genRegisterPage(opts));
   w(f("src/app/dashboard/layout.tsx"), genDashboardLayout(opts));
   w(f("src/app/dashboard/page.tsx"), genDashboardHomePage(opts));
   w(f("src/app/dashboard/users/page.tsx"), genUsersPage(opts));
@@ -3097,6 +3608,9 @@ function scaffold(opts) {
   w(f("src/app/api/auth/user/route.ts"), genUserRoute(opts));
   w(f("src/app/api/auth/session/route.ts"), genSessionRoute(opts));
   w(f("src/app/api/auth/logout/route.ts"), genLogoutRoute(opts));
+  w(f("src/app/api/auth/forgot-password/route.ts"), genForgotPasswordRoute());
+  w(f("src/app/api/auth/reset-password/route.ts"), genResetPasswordRoutes());
+  w(f("src/app/api/auth/reset-password/validate/route.ts"), genResetPasswordValidateRoute());
   w(f("src/providers/index.tsx"), genProviders(opts));
   w(f("src/lib/api.ts"), genApiClient(opts));
   w(f("src/components/layout/nav-config.tsx"), genNavConfig(opts));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucifer91299/create-portal-app",
-  "version": "1.1.26",
+  "version": "1.1.28",
   "description": "Scaffold a Next.js authenticated portal with full design system in one command",
   "license": "MIT",
   "author": "Aakash Kanojiya",