create-stackr 0.2.0 → 0.3.0

package/templates/features/mobile/tabs/app/(tabs)/index.tsx.ejs

@@ -0,0 +1,264 @@
+import React, { useState, useMemo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  Modal,
+  Pressable,
+  Alert,
+} from 'react-native';
+<% if (features.authentication.enabled) { %>import { useRouter } from 'expo-router';
+<% } %>import { LinearGradient } from 'expo-linear-gradient';
+<% if (features.authentication.enabled) { %>import { useAuth } from '@/hooks/auth';
+<% } %>import { IconSymbol } from '@/components/ui/icon-symbol';
+<% if (features.authentication.enabled) { %>import { formatDisplayName } from '@/utils/formatters';
+<% } %>import { useAppTheme, AppTheme } from '@/context/theme-context';
+
+export default function HomeScreen() {
+<% if (features.authentication.enabled) { %>  const router = useRouter();
+<% } %>  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+<% if (features.authentication.enabled) { %>  const { user, signOut } = useAuth();
+  const [showProfileModal, setShowProfileModal] = useState(false);
+<% } %>
+  // Gradient colors based on theme
+  const gradientColors = theme.mode === 'dark'
+    ? [theme.colors.card, 'transparent'] as const
+    : ['#ffffff', '#f8fafc'] as const;
+
+<% if (features.authentication.enabled) { %>  const handleLogout = async () => {
+    const result = await signOut();
+    if (!result.success) {
+      Alert.alert('Error', 'Failed to sign out. Please try again.');
+    }
+    setShowProfileModal(false);
+  };
+
+  const navigateToAccount = () => {
+    setShowProfileModal(false);
+    router.push('/account');
+  };
+
+<% } %>  const features = [
+    'Authentication system',
+    'Zustand state management',
+    'Error handling',
+    'Form validation',
+    'API integration',
+  ];
+
+  return (
+    <SafeAreaView style={styles.container}>
+<% if (features.authentication.enabled) { %>      {/* Custom Header */}
+      <View style={styles.header}>
+        <View>
+          <Text style={styles.headerGreeting}>Hello,</Text>
+          <Text style={styles.headerName}>{formatDisplayName(user?.name)}</Text>
+        </View>
+        <Pressable
+          style={styles.profileButton}
+          onPress={() => setShowProfileModal(true)}
+          hitSlop={8}
+        >
+          <IconSymbol
+            name="person.circle.fill"
+            size={40}
+            color={theme.colors.primary}
+          />
+        </Pressable>
+      </View>
+
+<% } %>      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <View style={styles.content}>
+          <LinearGradient
+            colors={gradientColors}
+            style={styles.heroSection}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 0, y: 1 }}
+          >
+            <Text style={styles.heroTitle}>Getting Started</Text>
+            <Text style={styles.heroText}>
+              Welcome to your new app. Here are the core features ready for you to build upon.
+            </Text>
+
+            <View style={styles.featureList}>
+              {features.map((feature, index) => (
+                <View key={index} style={styles.featureRow}>
+                  <View style={styles.featureIcon}>
+                    <IconSymbol
+                      name="checkmark.circle.fill"
+                      size={20}
+                      color={theme.colors.success}
+                    />
+                  </View>
+                  <Text style={styles.featureText}>{feature}</Text>
+                </View>
+              ))}
+            </View>
+          </LinearGradient>
+        </View>
+      </ScrollView>
+
+<% if (features.authentication.enabled) { %>      {/* Profile Dropdown Modal */}
+      <Modal
+        visible={showProfileModal}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setShowProfileModal(false)}
+      >
+        <Pressable
+          style={styles.modalOverlay}
+          onPress={() => setShowProfileModal(false)}
+        >
+          <View style={styles.menuContainer}>
+            {/* Pointing arrow indicator */}
+            <View style={styles.menuArrow} />
+
+            <Pressable style={styles.menuItem} onPress={navigateToAccount}>
+              <IconSymbol name="person.fill" size={20} color={theme.colors.text} />
+              <Text style={styles.menuText}>Account</Text>
+            </Pressable>
+
+            <View style={styles.menuDivider} />
+
+            <Pressable style={styles.menuItem} onPress={handleLogout}>
+              <IconSymbol name="rectangle.portrait.and.arrow.right" size={20} color={theme.colors.error} />
+              <Text style={[styles.menuText, { color: theme.colors.error }]}>Sign Out</Text>
+            </Pressable>
+          </View>
+        </Pressable>
+      </Modal>
+<% } %>    </SafeAreaView>
+  );
+}
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+<% if (features.authentication.enabled) { %>  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: theme.spacing[5],
+    paddingTop: theme.spacing[4],
+    paddingBottom: theme.spacing[4],
+  },
+  headerGreeting: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.textSecondary,
+    fontWeight: '500',
+  },
+  headerName: {
+    fontSize: theme.typography.fontSize['2xl'],
+    fontWeight: '800',
+    color: theme.colors.text,
+    letterSpacing: -0.5,
+  },
+  profileButton: {
+    shadowColor: theme.colors.text,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+    backgroundColor: theme.colors.background,
+    borderRadius: 20, // Half of size 40
+  },
+<% } %>  scrollContent: {
+    padding: theme.spacing[5],
+  },
+  content: {
+    gap: theme.spacing[6],
+  },
+  heroSection: {
+    padding: theme.spacing[6],
+    borderRadius: theme.borderRadius['2xl'],
+    borderWidth: 1,
+    borderColor: theme.colors.borderLight,
+  },
+  heroTitle: {
+    fontSize: theme.typography.fontSize['xl'],
+    fontWeight: '700',
+    color: theme.colors.text,
+    marginBottom: theme.spacing[2],
+  },
+  heroText: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.textSecondary,
+    lineHeight: 24,
+    marginBottom: theme.spacing[6],
+  },
+  featureList: {
+    gap: theme.spacing[4],
+  },
+  featureRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing[3],
+    backgroundColor: theme.mode === 'dark' ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)',
+    padding: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
+  },
+  featureIcon: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: theme.mode === 'dark' ? 'rgba(34, 197, 94, 0.1)' : 'rgba(16, 185, 129, 0.1)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  featureText: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.text,
+    fontWeight: '500',
+  },
+<% if (features.authentication.enabled) { %>  // Modal/Menu Styles
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.2)', // Dim background slightly
+  },
+  menuContainer: {
+    position: 'absolute',
+    top: 128, // Adjusted to be closer to the header
+    right: 20,
+    width: 200,
+    backgroundColor: theme.colors.background,
+    borderRadius: theme.borderRadius.xl,
+    paddingVertical: theme.spacing[2],
+    borderWidth: 1,
+    borderColor: theme.colors.borderLight,
+    ...theme.shadows.medium,
+  },
+  menuArrow: {
+    position: 'absolute',
+    top: -6,
+    right: 14, // Aligns with the center of the profile button
+    width: 12,
+    height: 12,
+    backgroundColor: theme.colors.background,
+    transform: [{ rotate: '45deg' }],
+    borderLeftWidth: 1,
+    borderTopWidth: 1,
+    borderColor: theme.colors.borderLight,
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: theme.spacing[3],
+    paddingHorizontal: theme.spacing[4],
+    gap: theme.spacing[3],
+  },
+  menuText: {
+    fontSize: theme.typography.fontSize.base,
+    fontWeight: '500',
+    color: theme.colors.text,
+  },
+  menuDivider: {
+    height: 1,
+    backgroundColor: theme.colors.borderLight,
+    marginHorizontal: theme.spacing[2],
+  },
+<% } %>});

package/templates/features/web/auth/app/(app)/layout.tsx.ejs

@@ -1,33 +1,19 @@
 import Link from "next/link";
 import { ThemeToggle } from "@/components/theme-toggle";
 
+/**
+ * Layout for regular (non-protected) app routes.
+ * For protected routes, use the (protected) route group instead.
+ */
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-screen flex flex-col bg-background">
-      {/* App Header - matching landing page style */}
+      {/* App Header */}
       <header className="w-full border-b bg-background/80 backdrop-blur-sm sticky top-0 z-50">
         <div className="max-w-4xl mx-auto px-6 h-16 flex items-center justify-between">
-          <div className="flex items-center gap-8">
-            <Link href="/dashboard" className="text-xl font-semibold tracking-tight">
-              <%= projectName %>
-            </Link>
-            <nav className="hidden sm:flex items-center gap-6">
-              <Link
-                href="/dashboard"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                Dashboard
-              </Link>
-<% if (features.sessionManagement) { %>
-              <Link
-                href="/settings/sessions"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                Sessions
-              </Link>
-<% } %>
-            </nav>
-          </div>
+          <Link href="/" className="text-xl font-semibold tracking-tight">
+            <%= projectName %>
+          </Link>
           <ThemeToggle />
         </div>
       </header>

package/templates/features/web/auth/app/(auth)/login/page.tsx.ejs

@@ -8,10 +8,22 @@ interface LoginPageProps {
   }>;
 }
 
+// Map error codes to user-friendly messages
+const errorMessages: Record<string, string> = {
+  session_expired: 'Your session has expired. Please sign in again.',
+  two_factor_expired: 'Two-factor verification timed out. Please sign in again.',
+  oauth_error: 'OAuth authentication failed. Please try again.',
+};
+
 export default async function LoginPage({ searchParams }: LoginPageProps) {
   const params = await searchParams;
   const { redirect, error } = params;
 
+  // Get error message from mapping or decode the error
+  const errorMessage = error
+    ? (errorMessages[error] || decodeURIComponent(error))
+    : null;
+
   return (
     <div className="space-y-6">
       <div className="space-y-2 text-center">
@@ -21,9 +33,13 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
         </p>
       </div>
 
-      {error && (
-        <div className="p-3 text-sm text-red-500 bg-red-50 dark:bg-red-950/20 rounded-md">
-          {decodeURIComponent(error)}
+      {errorMessage && (
+        <div className={`p-3 text-sm rounded-md ${
+          error === 'session_expired' || error === 'two_factor_expired'
+            ? 'text-amber-600 bg-amber-50 dark:text-amber-400 dark:bg-amber-950/20'
+            : 'text-red-500 bg-red-50 dark:bg-red-950/20'
+        }`}>
+          {errorMessage}
         </div>
       )}
 

package/templates/features/web/auth/app/(auth)/login/two-factor/page.tsx.ejs

@@ -0,0 +1,24 @@
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { TwoFactorVerify } from '@/components/auth/two-factor-verify';
+import { COOKIE_NAMES } from '@/lib/auth/config';
+
+export default async function TwoFactorPage() {
+  const cookieStore = await cookies();
+  const twoFactorToken = cookieStore.get(COOKIE_NAMES.TWO_FACTOR)?.value;
+  const expiresAtStr = cookieStore.get(COOKIE_NAMES.TWO_FACTOR_EXPIRES_AT)?.value;
+  const expiresAt = expiresAtStr ? parseInt(expiresAtStr, 10) : null;
+
+  // Redirect to expiration handler if no 2FA token
+  if (!twoFactorToken) {
+    redirect('/auth/two-factor-expired');
+  }
+
+  // Redirect if already expired
+  const now = Math.floor(Date.now() / 1000);
+  if (expiresAt && expiresAt <= now) {
+    redirect('/auth/two-factor-expired');
+  }
+
+  return <TwoFactorVerify expiresAt={expiresAt} />;
+}

package/templates/features/web/auth/app/(auth)/verify-email/page.tsx.ejs

@@ -4,194 +4,159 @@ import { useEffect, useState } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { verifyEmail } from "@/lib/auth/actions";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from "@/components/ui/input-otp";
+import { verifyEmailOtp, sendVerificationOtp } from "@/lib/auth/actions";
+import { useAuthStore } from "@/store/auth.store";
 
 export default function VerifyEmailPage() {
   const searchParams = useSearchParams();
   const router = useRouter();
-  const token = searchParams.get("token");
   const email = searchParams.get("email");
 
-  const [status, setStatus] = useState<"idle" | "verifying" | "success" | "error">(
-    token ? "verifying" : "idle"
-  );
+  const [otp, setOtp] = useState("");
+  const [status, setStatus] = useState<"idle" | "verifying" | "success" | "error">("idle");
   const [error, setError] = useState<string | null>(null);
+  const [resendDisabled, setResendDisabled] = useState(false);
+  const [resendCountdown, setResendCountdown] = useState(0);
 
+  // Auto-verify when all 6 digits entered
   useEffect(() => {
-    if (token && status === "verifying") {
-      handleVerify(token);
+    if (otp.length === 6 && email && status === "idle") {
+      handleVerify(otp);
     }
-  }, [token, status]);
+  }, [otp, email, status]);
+
+  // Countdown timer with proper cleanup
+  useEffect(() => {
+    if (resendCountdown <= 0) return;
+
+    const timer = setTimeout(() => {
+      setResendCountdown((prev) => {
+        if (prev <= 1) {
+          setResendDisabled(false);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [resendCountdown]);
+
+  const handleVerify = async (code: string) => {
+    if (!email) return;
+    setStatus("verifying");
+    setError(null);
 
-  const handleVerify = async (verificationToken: string) => {
-    try {
-      const result = await verifyEmail(verificationToken);
+    const result = await verifyEmailOtp(email, code);
 
-      if (!result.success) {
-        setStatus("error");
-        setError(result.error || "Failed to verify email");
-        return;
-      }
+    if (!result.success) {
+      setStatus("error");
+      setError(result.error || "Invalid code");
+      setOtp("");
+      return;
+    }
 
+    if (result.session) {
       setStatus("success");
-      // Redirect to login after 3 seconds
-      setTimeout(() => {
-        router.push("/login?message=Email+verified+successfully");
-      }, 3000);
-    } catch (err) {
+      useAuthStore.getState().setSession(result.session);
+      router.push("/dashboard");
+    } else {
       setStatus("error");
-      setError("An unexpected error occurred");
-      console.error("Email verification error:", err);
+      setError("Verification succeeded but sign-in failed. Please sign in manually.");
     }
   };
 
-  // Waiting for user to check their email
-  if (status === "idle" && email) {
-    return (
-      <div className="space-y-6">
-        <div className="space-y-2 text-center">
-          <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-950/20 rounded-full flex items-center justify-center">
-            <svg
-              className="w-6 h-6 text-blue-600 dark:text-blue-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-              />
-            </svg>
-          </div>
-          <h2 className="text-2xl font-bold">Check your email</h2>
-          <p className="text-muted-foreground">
-            We&apos;ve sent a verification link to <strong>{email}</strong>
-          </p>
-        </div>
+  const handleResend = async () => {
+    if (!email || resendDisabled) return;
 
-        <div className="text-sm text-muted-foreground text-center space-y-2">
-          <p>Click the link in the email to verify your account.</p>
-          <p>
-            Didn&apos;t receive the email? Check your spam folder.
-          </p>
-        </div>
+    setResendDisabled(true);
+    setResendCountdown(60);
+    setError(null);
 
-        <Link href="/login">
-          <Button variant="outline" className="w-full">
-            Back to sign in
-          </Button>
-        </Link>
-      </div>
-    );
-  }
-
-  // Verifying token
-  if (status === "verifying") {
-    return (
-      <div className="space-y-6">
-        <div className="space-y-2 text-center">
-          <div className="mx-auto w-12 h-12 flex items-center justify-center">
-            <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
-          </div>
-          <h2 className="text-2xl font-bold">Verifying your email</h2>
-          <p className="text-muted-foreground">
-            Please wait while we verify your email address...
-          </p>
-        </div>
-      </div>
-    );
-  }
+    const result = await sendVerificationOtp(email);
+    if (!result.success) {
+      setError(result.error || "Failed to resend code");
+    }
+  };
 
-  // Verification successful
-  if (status === "success") {
+  if (!email) {
     return (
-      <div className="space-y-6">
-        <div className="space-y-2 text-center">
-          <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-950/20 rounded-full flex items-center justify-center">
-            <svg
-              className="w-6 h-6 text-green-600 dark:text-green-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          </div>
-          <h2 className="text-2xl font-bold">Email verified!</h2>
-          <p className="text-muted-foreground">
-            Your email has been verified. Redirecting you to sign in...
-          </p>
-        </div>
-
+      <div className="space-y-6 text-center">
+        <h2 className="text-2xl font-bold">Verify your email</h2>
+        <p className="text-muted-foreground">No email address provided.</p>
         <Link href="/login">
-          <Button className="w-full">Continue to sign in</Button>
+          <Button variant="outline" className="w-full">Back to sign in</Button>
         </Link>
       </div>
     );
   }
 
-  // Verification error
-  if (status === "error") {
-    return (
-      <div className="space-y-6">
-        <div className="space-y-2 text-center">
-          <div className="mx-auto w-12 h-12 bg-red-100 dark:bg-red-950/20 rounded-full flex items-center justify-center">
-            <svg
-              className="w-6 h-6 text-red-600 dark:text-red-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </div>
-          <h2 className="text-2xl font-bold">Verification failed</h2>
-          <p className="text-muted-foreground">
-            {error || "Unable to verify your email address"}
-          </p>
-        </div>
-
-        <div className="space-y-3">
-          <p className="text-sm text-muted-foreground text-center">
-            The verification link may have expired or already been used.
-          </p>
-
-          <Link href="/login">
-            <Button variant="outline" className="w-full">
-              Back to sign in
-            </Button>
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  // No token or email - generic page
   return (
     <div className="space-y-6">
       <div className="space-y-2 text-center">
-        <h2 className="text-2xl font-bold">Verify your email</h2>
+        <h2 className="text-2xl font-bold">Enter verification code</h2>
         <p className="text-muted-foreground">
-          Please check your email for a verification link.
+          We sent a 6-digit code to <strong>{email}</strong>
         </p>
       </div>
 
+      {/* OTP Input using shadcn InputOTP */}
+      <div className="flex justify-center">
+        <InputOTP
+          maxLength={6}
+          value={otp}
+          onChange={setOtp}
+          disabled={status === "verifying"}
+        >
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+
+      {error && (
+        <p className="text-sm text-red-500 text-center">{error}</p>
+      )}
+
+      {status === "verifying" && (
+        <div className="flex justify-center">
+          <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        </div>
+      )}
+
+      {status === "success" && (
+        <div className="text-center">
+          <p className="text-sm text-green-600">Email verified! Redirecting...</p>
+        </div>
+      )}
+
+      <div className="text-center text-sm text-muted-foreground">
+        Didn&apos;t receive the code?{" "}
+        <button
+          onClick={handleResend}
+          disabled={resendDisabled}
+          className="text-primary hover:underline disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {resendDisabled ? `Resend in ${resendCountdown}s` : "Resend"}
+        </button>
+      </div>
+
       <Link href="/login">
-        <Button variant="outline" className="w-full">
-          Back to sign in
-        </Button>
+        <Button variant="outline" className="w-full">Back to sign in</Button>
       </Link>
     </div>
   );