@imksh/create 1.0.23 → 1.0.25

package/templates/mern-react-native/mobile/src/app/{login.tsx → (auth)/login.tsx}

@@ -1,28 +1,34 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import { View } from "react-native";
-import { useAuthStore } from "../store/useAuthStore";
-import { Txt } from "../components/common/Typography";
-import { Redirect } 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 { useAuthStore } from "../../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";
+import logo from "../../../assets/images/logo/logo.png";
 
 export default function LoginScreen() {
   const {
     login,
-    demoLogin,
     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({
@@ -32,6 +38,17 @@ export default function LoginScreen() {
     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 }));
@@ -44,7 +61,10 @@ export default function LoginScreen() {
     } else {
       if (!otpSent) {
         ok = await sendOtp(form.email);
-        if (ok) setOtpSent(true);
+        if (ok) {
+          setOtpSent(true);
+          setTimer(60);
+        }
       } else {
         ok = await signup(form.name, form.email, form.password, form.otp);
       }
@@ -62,22 +82,23 @@ export default function LoginScreen() {
         justifyContent: "center",
         padding: 16,
       }}
+      className="bg-base-100"
     >
-      <View className="w-full p-6">
+      <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="h1"
+            variant="xl"
             className="text-2xl mb-1 text-center"
             numberOfLines={1}
           >
             {mode === "login" ? "Welcome back" : "Create account"}
           </Txt>
           <Txt
-            variant="regular"
+            variant="sm"
             className="text-xs text-base-content/50 text-center px-2"
           >
             {mode === "login"
@@ -105,7 +126,7 @@ export default function LoginScreen() {
         {/* Error */}
         {error ? (
           <View className="bg-error/10 border border-error/20 rounded-2xl p-3 mb-4">
-            <Txt variant="mid" className="text-error text-xs text-center">
+            <Txt variant="md" className="text-error text-xs text-center">
               ⚠️ {error}
             </Txt>
           </View>
@@ -141,6 +162,18 @@ export default function LoginScreen() {
             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"
@@ -170,9 +203,24 @@ export default function LoginScreen() {
           {mode === "login" && (
             <View className="mt-2">
               <Button
-                label="Use Demo Account"
-                onPress={demoLogin}
-                disabled={loading}
+                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
               />
@@ -183,12 +231,12 @@ export default function LoginScreen() {
         {/* Footer */}
         <View className="mt-8">
           <Txt
-            variant="regular"
+            variant="sm"
             className="text-sm text-base-content/50 text-center"
           >
             {mode === "login" ? "New here? " : "Already have an account? "}
             <Txt
-              variant="mid"
+              variant="md"
               className="text-primary text-sm"
               onPress={() => {
                 setMode(mode === "login" ? "signup" : "login");

package/templates/mern-react-native/mobile/src/app/(tabs)/index.tsx

@@ -9,6 +9,7 @@ import { toast } from "@/utils/toast";
 import ScrollContainer from "@/components/ui/layout/ScrollContainer";
 import Container from "@/components/ui/layout/Container";
 import Section from "@/components/ui/layout/Section";
+import Divider from "@/components/ui/layout/Divider";
 import { HStack, VStack } from "@/components/ui/layout/Stack";
 
 import Button from "@/components/ui/buttons/Button";
@@ -79,7 +80,7 @@ const Index = () => {
         >
           <HStack justify="space-between" align="center">
             <VStack>
-              <Txt variant="h2" className="font-extrabold tracking-tight">
+              <Txt variant="3xl" className="font-extrabold tracking-tight">
                 imksh-create
               </Txt>
               <Txt
@@ -115,12 +116,12 @@ const Index = () => {
                 <Badge label="SOFT" variant="primary" soft={true} />
               </HStack>
               <Txt
-                variant="h1"
+                variant="4xl"
                 className="text-primary font-black leading-tight"
               >
                 Stop configuring. Start building.
               </Txt>
-              <Txt variant="body" className="text-primary/70 font-medium">
+              <Txt variant="base" className="text-primary/70 font-medium">
                 Skip the setup. Build your product. A complete boilerplate with auth, state management, navigation, and beautiful prebuilt components.
               </Txt>
             </VStack>
@@ -197,7 +198,7 @@ const Index = () => {
                         size={50}
                       />
                       <VStack style={{ flex: 1 }}>
-                        <Txt variant="mid" className="font-bold">
+                        <Txt variant="md" className="font-bold">
                           Swipe me left!
                         </Txt>
                         <Txt
@@ -234,7 +235,7 @@ const Index = () => {
                       color={colors.accent}
                       style={{ marginBottom: 12 }}
                     />
-                    <Txt variant="h3" className="text-accent text-center">
+                    <Txt variant="2xl" className="text-accent text-center">
                       Double Tap or Swipe Up
                     </Txt>
                     <Txt
@@ -258,11 +259,11 @@ const Index = () => {
                     placeholder="Search components..."
                   />
 
-                  <View className="h-px w-full bg-base-300/50" />
+                  <Divider />
 
                   <HStack justify="space-between" align="center">
                     <VStack>
-                      <Txt variant="mid" className="font-bold">
+                      <Txt variant="md" className="font-bold">
                         Biometric Login
                       </Txt>
                       <Txt
@@ -275,11 +276,11 @@ const Index = () => {
                     <Switch checked={isEnabled} onChange={setIsEnabled} />
                   </HStack>
 
-                  <View className="h-px w-full bg-base-300/50" />
+                  <Divider />
 
                   <VStack spacing={12}>
                     <HStack justify="space-between" align="center">
-                      <Txt variant="mid" className="font-bold">
+                      <Txt variant="md" className="font-bold">
                         Intensity
                       </Txt>
                       <Badge label={`${sliderVal}%`} variant="secondary" />
@@ -292,7 +293,7 @@ const Index = () => {
                     />
                   </VStack>
 
-                  <View className="h-px w-full bg-base-300/50 mt-2" />
+                  <Divider style={{ marginTop: 8 }} />
 
                   {/* Text Input */}
                   <Input
@@ -301,7 +302,7 @@ const Index = () => {
                     leftIcon="mail-outline"
                   />
 
-                  <View className="h-px w-full bg-base-300/50" />
+                  <Divider />
 
                   {/* Selection Controls */}
                   <VStack spacing={16}>
@@ -341,7 +342,7 @@ const Index = () => {
                   ]}
                 />
                 <View className="py-6 items-center justify-center">
-                  <Txt variant="body" className="text-base-content/60 italic">
+                  <Txt variant="base" className="text-base-content/60 italic">
                     Currently viewing {activeTab} content.
                   </Txt>
                 </View>
@@ -380,7 +381,7 @@ const Index = () => {
 
               <Card elevation={1} className="rounded-3xl p-6 mt-4">
                 <HStack justify="space-between" align="center" className="mb-4">
-                  <Txt variant="mid" className="font-bold">
+                  <Txt variant="md" className="font-bold">
                     Background Sync
                   </Txt>
                   <Spinner size={24} />
@@ -399,14 +400,14 @@ const Index = () => {
             <Section title="Information & FAQs" className="pb-20">
               <VStack spacing={12}>
                 <Accordion title="How to use this library?">
-                  <Txt variant="body">
+                  <Txt variant="base">
                     Simply import the components from the `@/components/ui`
                     directory. They are fully typed, gesture-driven, and styled
                     with NativeWind.
                   </Txt>
                 </Accordion>
                 <Accordion title="Does it support dark mode?">
-                  <Txt variant="body">
+                  <Txt variant="base">
                     Yes! All components automatically respond to the device&apos;s
                     color scheme, utilizing the custom CSS variables defined in
                     global.css.
@@ -437,11 +438,11 @@ const Index = () => {
               color={colors.primary}
             />
           </View>
-          <Txt variant="h2" className="text-center font-black">
+          <Txt variant="3xl" className="text-center font-black">
             Premium Modal
           </Txt>
           <Txt
-            variant="body"
+            variant="base"
             className="text-center text-base-content/70 leading-relaxed px-4"
           >
             This highly responsive bottom sheet is gesture-driven. You can

package/templates/mern-react-native/mobile/src/app/(tabs)/profile.tsx

@@ -3,10 +3,10 @@ import { useAuthStore } from "../../store/useAuthStore";
 import { useColorScheme } from "nativewind";
 import { Ionicons } from "@expo/vector-icons";
 import { Txt } from "../../components/common/Typography";
-import SettingsOptions from "../../components/settings/SettingsOptions";
-import SettingToggle from "../../components/settings/SettingToggle";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import Avatar from "@/components/ui/data-display/Avatar";
+import Button from "@/components/ui/buttons/Button";
+import Switch from "@/components/ui/inputs/Switch";
 
 const Profile = () => {
   const { user, logout } = useAuthStore();
@@ -22,10 +22,6 @@ const Profile = () => {
     await logout();
   };
 
-  const handleEditProfile = () => {
-    console.log("Edit profile clicked");
-  };
-
   return (
     <View className="flex-1 bg-base-100">
       <View className="pt-16 pb-8 px-6 bg-primary/10 rounded-b-[40px] items-center border-b border-primary/20">
@@ -50,63 +46,30 @@ const Profile = () => {
           </Txt>
         </View>
       </View>
-      <ScrollView className="flex-1 bg-base-100">
-        {/* Settings Section */}
-        <View className="px-6 py-8 pb-20">
-          <Txt
-            variant="h3"
-            className="mb-6 text-base-content/80 uppercase tracking-widest text-xs"
-          >
-            Account Settings
-          </Txt>
 
-          <SettingsOptions
-            name="Edit Profile"
-            icon="person-outline"
-            message="Are you sure you want to edit your profile?"
-            fun={handleEditProfile}
-            check={false}
-          />
-
-          <SettingsOptions
-            name="Change Password"
-            icon="lock-closed-outline"
-            message="Do you want to update your password?"
-            fun={() => {}}
-            check={false}
-          />
-
-          <Txt
-            variant="h3"
-            className="mt-6 mb-6 text-base-content/80 uppercase tracking-widest text-xs"
-          >
-            Preferences
-          </Txt>
-
-          <SettingToggle
-            name="Dark Theme"
-            icon="moon-outline"
-            check={colorScheme === "dark"}
-            fun={handleToggleTheme}
-          />
-
-          <SettingToggle
-            name="Push Notifications"
-            icon="notifications-outline"
-            check={true}
-            fun={() => {}}
-          />
-
-          <View className="mt-8 mb-12">
-            <SettingsOptions
-              name="Log Out"
-              icon="log-out-outline"
-              message="Are you sure you want to log out from this device?"
-              fun={handleLogout}
-              check={false}
-            />
+      <ScrollView className="flex-1 px-6 pt-6">
+        <View className="bg-base-200 rounded-2xl p-4 mb-6">
+          <View className="flex-row items-center justify-between py-2">
+            <View className="flex-row items-center">
+              <Ionicons 
+                name={colorScheme === "dark" ? "moon" : "sunny"} 
+                size={22} 
+                color={colorScheme === "dark" ? "#fff" : "#000"} 
+              />
+              <Txt variant="base" className="ml-3 font-semibold">Dark Mode</Txt>
+            </View>
+            <Switch checked={colorScheme === "dark"} onChange={handleToggleTheme} />
           </View>
         </View>
+
+        <Button
+          label="Logout"
+          variant="error"
+          isFullWidth
+          leftIcon="log-out-outline"
+          onPress={handleLogout}
+          style={{ marginTop: 20, marginBottom: 40 }}
+        />
       </ScrollView>
     </View>
   );

package/templates/mern-react-native/mobile/src/app/_layout.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Stack } from "expo-router";
+import { Stack, useRouter, useSegments } from "expo-router";
 import Toast from "react-native-toast-message";
 import { useAuthStore } from "../store/useAuthStore";
 import { useColorScheme } from "nativewind";
@@ -25,9 +25,12 @@ export default function RootLayout() {
     InterExtraBold: require("../../assets/fonts/Inter_ExtraBold.ttf"),
   });
 
-  const { getMe, isCheckingAuth } = useAuthStore();
+  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) {
@@ -36,7 +39,10 @@ export default function RootLayout() {
   }, [fontsLoaded, fontError]);
 
   useEffect(() => {
-    getMe();
+    // Load cached user quickly, then fetch fresh in background
+    loadCachedUser().then(() => {
+      getMe();
+    });
 
     // Load saved theme
     AsyncStorage.getItem("theme").then((savedTheme) => {
@@ -47,7 +53,19 @@ export default function RootLayout() {
     // 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;
@@ -69,7 +87,7 @@ export default function RootLayout() {
         >
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
           <Stack.Screen
-            name="login"
+            name="(auth)"
             options={{ headerShown: false, animation: "fade" }}
           />
         </Stack>