@imksh/create 1.0.25 → 1.0.27

package/templates/production-fullstack/mobile/src/app/(auth)/login.tsx

@@ -0,0 +1,253 @@
+import React, { useState, useCallback } from "react";
+import { View } from "react-native";
+import { useAuthStore } from "../../features/auth/store/useAuthStore";
+import { Txt } from "../../components/common/Typography";
+import { Redirect, router, useFocusEffect } from "expo-router";
+import ScrollContainer from "../../components/ui/layout/ScrollContainer";
+import Input from "../../components/ui/inputs/Input";
+import Button from "../../components/ui/buttons/Button";
+import Tabs from "../../components/ui/navigation/Tabs";
+import Image from "@/components/ui/data-display/Image";
+import logo from "../../../assets/images/logo/logo.png";
+
+export default function LoginScreen() {
+  const {
+    login,
+    signup,
+    sendOtp,
+    loading,
+    error,
+    user,
+    isCheckingAuth,
+    clearError,
+    demoLogin,
+  } = useAuthStore();
+
+  useFocusEffect(
+    useCallback(() => {
+      return () => clearError();
+    }, [clearError]),
+  );
+
+  const [mode, setMode] = useState("login");
+  const [showPassword, setShowPassword] = useState(false);
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    password: "",
+    otp: "",
+  });
+  const [otpSent, setOtpSent] = useState(false);
+  const [timer, setTimer] = useState(0);
+
+  React.useEffect(() => {
+    let interval: ReturnType<typeof setInterval>;
+    if (timer > 0) {
+      interval = setInterval(() => {
+        setTimer((prev) => prev - 1);
+      }, 1000);
+    }
+    return () => clearInterval(interval);
+  }, [timer]);
+
+  const handleChange = (name: string, value: string) => {
+    setForm((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async () => {
+    let ok;
+    if (mode === "login") {
+      ok = await login(form.email, form.password);
+    } else {
+      if (!otpSent) {
+        ok = await sendOtp(form.email);
+        if (ok) {
+          setOtpSent(true);
+          setTimer(60);
+        }
+      } else {
+        ok = await signup(form.name, form.email, form.password, form.otp);
+      }
+    }
+  };
+
+  if (!isCheckingAuth && user) {
+    return <Redirect href="/(tabs)" />;
+  }
+
+  return (
+    <ScrollContainer
+      contentContainerStyle={{
+        flexGrow: 1,
+        justifyContent: "center",
+        padding: 16,
+      }}
+      className="bg-base-100"
+    >
+      <View className="w-full p-6 ">
+        {/* Header */}
+        <View className="items-center mb-8 w-full">
+          <View className="w-16 h-16 rounded-2xl bg-primary/10 border border-primary/20 items-center justify-center mb-4">
+            <Image src={logo} height={40} width={40} />
+          </View>
+          <Txt
+            variant="xl"
+            className="text-2xl mb-1 text-center"
+            numberOfLines={1}
+          >
+            {mode === "login" ? "Welcome back" : "Create account"}
+          </Txt>
+          <Txt
+            variant="sm"
+            className="text-xs text-base-content/50 text-center px-2"
+          >
+            {mode === "login"
+              ? "Sign in to continue your journey"
+              : "Enter your information to create a new account"}
+          </Txt>
+        </View>
+
+        {/* Tab Switcher */}
+        <View className="mb-6">
+          <Tabs
+            variant="button"
+            activeTab={mode}
+            onChange={(id) => {
+              setMode(id);
+              setOtpSent(false);
+            }}
+            tabs={[
+              { id: "login", label: "Sign in" },
+              { id: "signup", label: "Sign Up" },
+            ]}
+          />
+        </View>
+
+        {/* Error */}
+        {error ? (
+          <View className="bg-error/10 border border-error/20 rounded-2xl p-3 mb-4">
+            <Txt variant="md" className="text-error text-xs text-center">
+              ⚠️ {error}
+            </Txt>
+          </View>
+        ) : null}
+
+        {/* Form */}
+        <View className="gap-2">
+          {mode === "signup" && (
+            <Input
+              leftIcon="person"
+              placeholder="Full name"
+              value={form.name}
+              onChangeText={(val) => handleChange("name", val)}
+            />
+          )}
+
+          <Input
+            leftIcon="mail"
+            placeholder="Email address"
+            value={form.email}
+            onChangeText={(val) => handleChange("email", val)}
+            autoCapitalize="none"
+            keyboardType="email-address"
+          />
+
+          <Input
+            leftIcon="lock-closed"
+            rightIcon={showPassword ? "eye-off" : "eye"}
+            onRightIconPress={() => setShowPassword(!showPassword)}
+            placeholder="Password"
+            value={form.password}
+            onChangeText={(val) => handleChange("password", val)}
+            secureTextEntry={!showPassword}
+          />
+
+          {mode === "login" && (
+            <View className="items-end mt-1 mb-2">
+              <Txt
+                variant="md"
+                className="text-primary text-xs"
+                onPress={() => router.push("/(auth)/forgot-password")}
+              >
+                Forgot Password?
+              </Txt>
+            </View>
+          )}
+
+          {mode === "signup" && otpSent && (
+            <Input
+              leftIcon="key"
+              placeholder="Enter OTP"
+              value={form.otp}
+              onChangeText={(val) => handleChange("otp", val)}
+              keyboardType="numeric"
+            />
+          )}
+
+          <View className="mt-2">
+            <Button
+              label={
+                mode === "login"
+                  ? "Sign In →"
+                  : otpSent
+                    ? "Verify & Create Account →"
+                    : "Send OTP →"
+              }
+              onPress={handleSubmit}
+              isLoading={loading}
+              variant="primary"
+              isFullWidth
+            />
+          </View>
+
+          {mode === "login" && (
+            <View className="mt-2">
+              <Button
+                label="Demo Login"
+                onPress={() => demoLogin()}
+                isLoading={loading}
+                variant="outline"
+                isFullWidth
+              />
+            </View>
+          )}
+
+          {mode === "signup" && otpSent && (
+            <View className="mt-2">
+              <Button
+                label={timer > 0 ? `Resend OTP in ${timer}s` : "Resend OTP"}
+                onPress={async () => {
+                  const ok = await sendOtp(form.email);
+                  if (ok) setTimer(60);
+                }}
+                disabled={timer > 0 || loading}
+                variant="outline"
+                isFullWidth
+              />
+            </View>
+          )}
+        </View>
+
+        {/* Footer */}
+        <View className="mt-8">
+          <Txt
+            variant="sm"
+            className="text-sm text-base-content/50 text-center"
+          >
+            {mode === "login" ? "New here? " : "Already have an account? "}
+            <Txt
+              variant="md"
+              className="text-primary text-sm"
+              onPress={() => {
+                setMode(mode === "login" ? "signup" : "login");
+                setOtpSent(false);
+              }}
+            >
+              {mode === "login" ? "Create an account" : "Sign in"}
+            </Txt>
+          </Txt>
+        </View>
+      </View>
+    </ScrollContainer>
+  );
+}

package/templates/production-fullstack/mobile/src/app/_layout.tsx

@@ -0,0 +1,102 @@
+import { useEffect } from "react";
+import { Stack, useRouter, useSegments } from "expo-router";
+import Toast from "react-native-toast-message";
+import { useAuthStore } from "../features/auth/store/useAuthStore";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../constants/Colors";
+import "./global.css";
+import Loading from "@/components/common/Loading";
+
+import { PaperProvider } from "react-native-paper";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useFonts } from "expo-font";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import * as SplashScreen from "expo-splash-screen";
+import { StatusBar } from "expo-status-bar";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "../lib/query-client";
+
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const [fontsLoaded, fontError] = useFonts({
+    InterRegular: require("../../assets/fonts/Inter_Regular.ttf"),
+    InterMedium: require("../../assets/fonts/Inter_Medium.ttf"),
+    InterSemiBold: require("../../assets/fonts/Inter_SemiBold.ttf"),
+    InterBold: require("../../assets/fonts/Inter_Bold.ttf"),
+    InterExtraBold: require("../../assets/fonts/Inter_ExtraBold.ttf"),
+  });
+
+  const { getMe, isCheckingAuth, loadCachedUser, user } = useAuthStore();
+  const { colorScheme, setColorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? "light"];
+  
+  const segments = useSegments();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (fontsLoaded || fontError) {
+      SplashScreen.hideAsync();
+    }
+  }, [fontsLoaded, fontError]);
+
+  useEffect(() => {
+    // Load cached user quickly, then fetch fresh in background
+    loadCachedUser().then(() => {
+      getMe();
+    });
+
+    // Load saved theme
+    AsyncStorage.getItem("theme").then((savedTheme) => {
+      if (savedTheme === "light" || savedTheme === "dark") {
+        setColorScheme(savedTheme);
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (isCheckingAuth) return;
+
+    const inAuthGroup = segments[0] === "(auth)";
+
+    if (!user && !inAuthGroup) {
+      // Redirect to the auth group
+      router.replace("/(auth)/login");
+    } else if (user && inAuthGroup) {
+      // Redirect away from auth
+      router.replace("/(tabs)");
+    }
+  }, [user, isCheckingAuth, segments]);
+
+  if (!fontsLoaded && !fontError) {
+    return null;
+  }
+
+  if (isCheckingAuth) {
+    return <Loading />;
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <PaperProvider>
+          <StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
+          <Stack
+            screenOptions={{
+              headerShown: false,
+              contentStyle: { backgroundColor: colors.base100 },
+            }}
+          >
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen
+              name="(auth)"
+              options={{ headerShown: false, animation: "fade" }}
+            />
+          </Stack>
+          <Toast />
+        </PaperProvider>
+      </GestureHandlerRootView>
+    </QueryClientProvider>
+  );
+}

package/templates/production-fullstack/mobile/src/app/global.css

@@ -0,0 +1,82 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Surface */
+    --color-base-100: 255 255 255;      /* #FFFFFF */
+    --color-base-200: 248 250 252;      /* #F8FAFC */
+    --color-base-300: 226 232 240;      /* #E2E8F0 */
+    --color-base-content: 15 23 42;     /* #0F172A */
+
+    /* Brand */
+    --color-primary: 59 130 246;        /* #3B82F6 */
+    --color-primary-content: 255 255 255;
+
+    --color-secondary: 100 116 139;     /* #64748B */
+    --color-secondary-content: 255 255 255;
+
+    --color-accent: 20 184 166;         /* #14B8A6 */
+    --color-accent-content: 255 255 255;
+
+    /* Neutral */
+    --color-neutral: 30 41 59;          /* #1E293B */
+    --color-neutral-content: 255 255 255;
+
+    /* Semantic */
+    --color-info: 14 165 233;           /* #0EA5E9 */
+    --color-info-content: 255 255 255;
+
+    --color-success: 34 197 94;         /* #22C55E */
+    --color-success-content: 255 255 255;
+
+    --color-warning: 245 158 11;        /* #F59E0B */
+    --color-warning-content: 255 255 255;
+
+    --color-error: 239 68 68;           /* #EF4444 */
+    --color-error-content: 255 255 255;
+
+    /* Radius */
+    --rounded-box: 12px;
+    --rounded-btn: 10px;
+    --rounded-badge: 8px;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      /* Surface */
+      --color-base-100: 17 24 39;       /* #111827 */
+      --color-base-200: 27 36 51;       /* #1B2433 */
+      --color-base-300: 42 52 69;       /* #2A3445 */
+      --color-base-content: 248 250 252;/* #F8FAFC */
+
+      /* Brand */
+      --color-primary: 96 165 250;      /* #60A5FA */
+      --color-primary-content: 255 255 255;
+
+      --color-secondary: 148 163 184;   /* #94A3B8 */
+      --color-secondary-content: 17 24 39;
+
+      --color-accent: 45 212 191;       /* #2DD4BF */
+      --color-accent-content: 17 24 39;
+
+      /* Neutral */
+      --color-neutral: 248 250 252;     /* #F8FAFC */
+      --color-neutral-content: 17 24 39;
+
+      /* Semantic */
+      --color-info: 56 189 248;         /* #38BDF8 */
+      --color-info-content: 17 24 39;
+
+      --color-success: 74 222 128;      /* #4ADE80 */
+      --color-success-content: 17 24 39;
+
+      --color-warning: 251 191 36;      /* #FBBF24 */
+      --color-warning-content: 17 24 39;
+
+      --color-error: 248 113 113;       /* #F87171 */
+      --color-error-content: 255 255 255;
+    }
+  }
+}