create-m5kdev 0.33.0 → 0.35.0

package/templates/minimal-app/apps/expo/src/app/login.tsx.tpl

@@ -1,71 +1,71 @@
-import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { Link, useRouter } from "expo-router";
-import { Button } from "heroui-native";
-import { useState } from "react";
-import { Text, View } from "react-native";
-import { AuthScaffold } from "../components/AuthScaffold";
-import { FormTextField } from "../components/FormTextField";
-import { StatusText } from "../components/StatusText";
-
-export default function LoginScreen() {
-  const authClient = useAuthClient();
-  const { registerSession } = useSession();
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [status, setStatus] = useState<string | null>(null);
-  const [isBusy, setIsBusy] = useState(false);
-
-  const submit = async () => {
-    setIsBusy(true);
-    setStatus(null);
-    try {
-      const result = await authClient.signIn.email({ email, password });
-      if (result.error || !result.data?.user) {
-        setStatus(result.error?.message ?? "Authentication failed");
-        return;
-      }
-      registerSession(() => router.replace("/posts"));
-    } catch (error) {
-      setStatus(error instanceof Error ? error.message : "Authentication failed");
-    } finally {
-      setIsBusy(false);
-    }
-  };
-
-  return (
-    <AuthScaffold title="Login" description="Sign in to the protected Expo test app.">
-      <View className="gap-4">
-        <FormTextField
-          label="Email"
-          testID="login-email"
-          value={email}
-          onChangeText={setEmail}
-          keyboardType="email-address"
-        />
-        <FormTextField
-          label="Password"
-          testID="login-password"
-          value={password}
-          onChangeText={setPassword}
-          secureTextEntry
-        />
-        <StatusText testID="auth-error" tone="error">
-          {status}
-        </StatusText>
-        <Button testID="login-submit" onPress={submit} isDisabled={isBusy}>
-          Login
-        </Button>
-        <View className="flex-row justify-between">
-          <Link href="/signup" asChild>
-            <Text className="text-primary underline">Sign up</Text>
-          </Link>
-          <Link href="/forgot-password" asChild>
-            <Text className="text-primary underline">Forgot password</Text>
-          </Link>
-        </View>
-      </View>
-    </AuthScaffold>
-  );
-}
+import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { Link, useRouter } from "expo-router";
+import { Button } from "heroui-native";
+import { useState } from "react";
+import { Text, View } from "react-native";
+import { AuthScaffold } from "../components/AuthScaffold";
+import { FormTextField } from "../components/FormTextField";
+import { StatusText } from "../components/StatusText";
+
+export default function LoginScreen() {
+  const authClient = useAuthClient();
+  const { registerSession } = useSession();
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [isBusy, setIsBusy] = useState(false);
+
+  const submit = async () => {
+    setIsBusy(true);
+    setStatus(null);
+    try {
+      const result = await authClient.signIn.email({ email, password });
+      if (result.error || !result.data?.user) {
+        setStatus(result.error?.message ?? "Authentication failed");
+        return;
+      }
+      registerSession(() => router.replace("/posts"));
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "Authentication failed");
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  return (
+    <AuthScaffold title="Login" description="Sign in to the protected Expo test app.">
+      <View className="gap-4">
+        <FormTextField
+          label="Email"
+          testID="login-email"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+        />
+        <FormTextField
+          label="Password"
+          testID="login-password"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+        />
+        <StatusText testID="auth-error" tone="error">
+          {status}
+        </StatusText>
+        <Button testID="login-submit" onPress={submit} isDisabled={isBusy}>
+          Login
+        </Button>
+        <View className="flex-row justify-between">
+          <Link href="/signup" asChild>
+            <Text className="text-primary underline">Sign up</Text>
+          </Link>
+          <Link href="/forgot-password" asChild>
+            <Text className="text-primary underline">Forgot password</Text>
+          </Link>
+        </View>
+      </View>
+    </AuthScaffold>
+  );
+}

package/templates/minimal-app/apps/expo/src/app/logout.tsx.tpl

@@ -1,19 +1,19 @@
-import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
-import { Redirect } from "expo-router";
-import { useEffect, useState } from "react";
-import { LoadingScreen } from "../components/LoadingScreen";
-
-export default function LogoutScreen() {
-  const authClient = useAuthClient();
-  const [done, setDone] = useState(false);
-
-  useEffect(() => {
-    authClient.signOut().finally(() => setDone(true));
-  }, [authClient]);
-
-  if (!done) {
-    return <LoadingScreen />;
-  }
-
-  return <Redirect href="/login" />;
-}
+import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
+import { Redirect } from "expo-router";
+import { useEffect, useState } from "react";
+import { LoadingScreen } from "../components/LoadingScreen";
+
+export default function LogoutScreen() {
+  const authClient = useAuthClient();
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    authClient.signOut().finally(() => setDone(true));
+  }, [authClient]);
+
+  if (!done) {
+    return <LoadingScreen />;
+  }
+
+  return <Redirect href="/login" />;
+}

package/templates/minimal-app/apps/expo/src/app/organization/accept-invitation.tsx.tpl

@@ -1,85 +1,85 @@
-import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { type Href, Redirect, useLocalSearchParams, useRouter } from "expo-router";
-import { useEffect, useMemo, useState } from "react";
-import { LoadingScreen } from "../../components/LoadingScreen";
-import { trpcClient } from "../../lib/trpc";
-
-function singleParam(value: string | string[] | undefined) {
-  return Array.isArray(value) ? value[0] : value;
-}
-
-export default function AcceptInvitationScreen() {
-  const authClient = useAuthClient();
-  const { data: session, registerSession } = useSession();
-  const router = useRouter();
-  const params = useLocalSearchParams<{ id?: string | string[] }>();
-  const invitationId = singleParam(params.id);
-  const [errorPath, setErrorPath] = useState<string | null>(null);
-
-  const signupPath = useMemo(() => {
-    if (!invitationId) return null;
-    return trpcClient.auth.readInvitation
-      .query({ id: invitationId })
-      .then((invitation) => {
-        const search = new URLSearchParams({
-          invitation: invitationId,
-          email: invitation.email,
-        });
-        return `/signup?${search.toString()}`;
-      })
-      .catch(() => "/signup");
-  }, [invitationId]);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    if (!invitationId) {
-      setErrorPath("/signup");
-      return;
-    }
-
-    if (!session) {
-      signupPath?.then((path) => {
-        if (!cancelled) router.replace(path as Href);
-      });
-      return;
-    }
-
-    authClient.organization
-      .acceptInvitation({ invitationId })
-      .then(async ({ data, error }) => {
-        if (error) {
-          throw new Error(error.message ?? "Unable to accept invitation");
-        }
-
-        const organizationId =
-          (data as { invitation?: { organizationId?: string } | null } | null)?.invitation
-            ?.organizationId ?? null;
-
-        if (organizationId) {
-          const activeResult = await authClient.organization.setActive({ organizationId });
-          if (activeResult.error) {
-            throw new Error(activeResult.error.message ?? "Unable to activate organization");
-          }
-        }
-
-        if (!cancelled) {
-          registerSession(() => router.replace("/posts"));
-        }
-      })
-      .catch(() => {
-        if (!cancelled) setErrorPath("/signup");
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [authClient, invitationId, registerSession, router, session, signupPath]);
-
-  if (errorPath) {
-    return <Redirect href={errorPath as Href} />;
-  }
-
-  return <LoadingScreen />;
-}
+import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { type Href, Redirect, useLocalSearchParams, useRouter } from "expo-router";
+import { useEffect, useMemo, useState } from "react";
+import { LoadingScreen } from "../../components/LoadingScreen";
+import { trpcClient } from "../../lib/trpc";
+
+function singleParam(value: string | string[] | undefined) {
+  return Array.isArray(value) ? value[0] : value;
+}
+
+export default function AcceptInvitationScreen() {
+  const authClient = useAuthClient();
+  const { data: session, registerSession } = useSession();
+  const router = useRouter();
+  const params = useLocalSearchParams<{ id?: string | string[] }>();
+  const invitationId = singleParam(params.id);
+  const [errorPath, setErrorPath] = useState<string | null>(null);
+
+  const signupPath = useMemo(() => {
+    if (!invitationId) return null;
+    return trpcClient.auth.readInvitation
+      .query({ id: invitationId })
+      .then((invitation) => {
+        const search = new URLSearchParams({
+          invitation: invitationId,
+          email: invitation.email,
+        });
+        return `/signup?${search.toString()}`;
+      })
+      .catch(() => "/signup");
+  }, [invitationId]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    if (!invitationId) {
+      setErrorPath("/signup");
+      return;
+    }
+
+    if (!session) {
+      signupPath?.then((path) => {
+        if (!cancelled) router.replace(path as Href);
+      });
+      return;
+    }
+
+    authClient.organization
+      .acceptInvitation({ invitationId })
+      .then(async ({ data, error }) => {
+        if (error) {
+          throw new Error(error.message ?? "Unable to accept invitation");
+        }
+
+        const organizationId =
+          (data as { invitation?: { organizationId?: string } | null } | null)?.invitation
+            ?.organizationId ?? null;
+
+        if (organizationId) {
+          const activeResult = await authClient.organization.setActive({ organizationId });
+          if (activeResult.error) {
+            throw new Error(activeResult.error.message ?? "Unable to activate organization");
+          }
+        }
+
+        if (!cancelled) {
+          registerSession(() => router.replace("/posts"));
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setErrorPath("/signup");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [authClient, invitationId, registerSession, router, session, signupPath]);
+
+  if (errorPath) {
+    return <Redirect href={errorPath as Href} />;
+  }
+
+  return <LoadingScreen />;
+}

package/templates/minimal-app/apps/expo/src/app/posts.tsx.tpl

@@ -1,40 +1,40 @@
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { Link, Redirect } from "expo-router";
-import { Button, Card, Typography } from "heroui-native";
-import { ScrollView, Text, View } from "react-native";
-
-export default function PostsScreen() {
-  const { data: session } = useSession();
-
-  if (!session) {
-    return <Redirect href="/login" />;
-  }
-
-  return (
-    <ScrollView className="flex-1 bg-background" contentContainerClassName="px-5 py-8">
-      <View className="gap-5">
-        <View className="gap-2">
-          <Text className="text-3xl font-semibold text-foreground">Editorial posts</Text>
-          <Typography.Paragraph className="text-default-600">
-            A small blog that protects auth changes across web and Expo.
-          </Typography.Paragraph>
-          <Text testID="session-email" className="text-sm text-default-600">
-            {session.user.email}
-          </Text>
-        </View>
-        <Card className="gap-2 p-5">
-          <Text className="text-lg font-semibold text-foreground">Native fixture post</Text>
-          <Typography.Paragraph>
-            This protected screen is rendered by Expo Router and authenticated through
-            @m5kdev/frontend.
-          </Typography.Paragraph>
-        </Card>
-        <Link href="/logout" asChild>
-          <Button testID="logout-submit" variant="outline">
-            Logout
-          </Button>
-        </Link>
-      </View>
-    </ScrollView>
-  );
-}
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { Link, Redirect } from "expo-router";
+import { Button, Card, Typography } from "heroui-native";
+import { ScrollView, Text, View } from "react-native";
+
+export default function PostsScreen() {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return <Redirect href="/login" />;
+  }
+
+  return (
+    <ScrollView className="flex-1 bg-background" contentContainerClassName="px-5 py-8">
+      <View className="gap-5">
+        <View className="gap-2">
+          <Text className="text-3xl font-semibold text-foreground">Editorial posts</Text>
+          <Typography.Paragraph className="text-default-600">
+            A small blog that protects auth changes across web and Expo.
+          </Typography.Paragraph>
+          <Text testID="session-email" className="text-sm text-default-600">
+            {session.user.email}
+          </Text>
+        </View>
+        <Card className="gap-2 p-5">
+          <Text className="text-lg font-semibold text-foreground">Native fixture post</Text>
+          <Typography.Paragraph>
+            This protected screen is rendered by Expo Router and authenticated through
+            @m5kdev/frontend.
+          </Typography.Paragraph>
+        </Card>
+        <Link href="/logout" asChild>
+          <Button testID="logout-submit" variant="outline">
+            Logout
+          </Button>
+        </Link>
+      </View>
+    </ScrollView>
+  );
+}

package/templates/minimal-app/apps/expo/src/app/reset-password.tsx.tpl

@@ -1,75 +1,75 @@
-import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
-import { useLocalSearchParams } from "expo-router";
-import { Button } from "heroui-native";
-import { useState } from "react";
-import { View } from "react-native";
-import { AuthScaffold } from "../components/AuthScaffold";
-import { FormTextField } from "../components/FormTextField";
-import { StatusText } from "../components/StatusText";
-
-function singleParam(value: string | string[] | undefined) {
-  return Array.isArray(value) ? value[0] : value;
-}
-
-export default function ResetPasswordScreen() {
-  const authClient = useAuthClient();
-  const params = useLocalSearchParams<{ token?: string | string[] }>();
-  const token = singleParam(params.token);
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [status, setStatus] = useState<string | null>(null);
-  const [tone, setTone] = useState<"error" | "success">("success");
-  const [isBusy, setIsBusy] = useState(false);
-
-  const submit = async () => {
-    setStatus(null);
-    if (!token) {
-      setTone("error");
-      setStatus("Reset token is required");
-      return;
-    }
-    if (newPassword !== confirmPassword) {
-      setTone("error");
-      setStatus("Passwords do not match");
-      return;
-    }
-    setIsBusy(true);
-    try {
-      await authClient.resetPassword({ newPassword, token });
-      setTone("success");
-      setStatus("Password reset successfully");
-    } catch (error) {
-      setTone("error");
-      setStatus(error instanceof Error ? error.message : "Password reset failed");
-    } finally {
-      setIsBusy(false);
-    }
-  };
-
-  return (
-    <AuthScaffold title="Set a new password">
-      <View className="gap-4">
-        <FormTextField
-          label="New password"
-          testID="reset-password-new"
-          value={newPassword}
-          onChangeText={setNewPassword}
-          secureTextEntry
-        />
-        <FormTextField
-          label="Confirm password"
-          testID="reset-password-confirm"
-          value={confirmPassword}
-          onChangeText={setConfirmPassword}
-          secureTextEntry
-        />
-        <StatusText testID="auth-status" tone={tone}>
-          {status}
-        </StatusText>
-        <Button testID="reset-password-submit" onPress={submit} isDisabled={isBusy}>
-          Reset password
-        </Button>
-      </View>
-    </AuthScaffold>
-  );
-}
+import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
+import { useLocalSearchParams } from "expo-router";
+import { Button } from "heroui-native";
+import { useState } from "react";
+import { View } from "react-native";
+import { AuthScaffold } from "../components/AuthScaffold";
+import { FormTextField } from "../components/FormTextField";
+import { StatusText } from "../components/StatusText";
+
+function singleParam(value: string | string[] | undefined) {
+  return Array.isArray(value) ? value[0] : value;
+}
+
+export default function ResetPasswordScreen() {
+  const authClient = useAuthClient();
+  const params = useLocalSearchParams<{ token?: string | string[] }>();
+  const token = singleParam(params.token);
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [tone, setTone] = useState<"error" | "success">("success");
+  const [isBusy, setIsBusy] = useState(false);
+
+  const submit = async () => {
+    setStatus(null);
+    if (!token) {
+      setTone("error");
+      setStatus("Reset token is required");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setTone("error");
+      setStatus("Passwords do not match");
+      return;
+    }
+    setIsBusy(true);
+    try {
+      await authClient.resetPassword({ newPassword, token });
+      setTone("success");
+      setStatus("Password reset successfully");
+    } catch (error) {
+      setTone("error");
+      setStatus(error instanceof Error ? error.message : "Password reset failed");
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  return (
+    <AuthScaffold title="Set a new password">
+      <View className="gap-4">
+        <FormTextField
+          label="New password"
+          testID="reset-password-new"
+          value={newPassword}
+          onChangeText={setNewPassword}
+          secureTextEntry
+        />
+        <FormTextField
+          label="Confirm password"
+          testID="reset-password-confirm"
+          value={confirmPassword}
+          onChangeText={setConfirmPassword}
+          secureTextEntry
+        />
+        <StatusText testID="auth-status" tone={tone}>
+          {status}
+        </StatusText>
+        <Button testID="reset-password-submit" onPress={submit} isDisabled={isBusy}>
+          Reset password
+        </Button>
+      </View>
+    </AuthScaffold>
+  );
+}