@ramonclaudio/create-vexpo 0.1.0 → 0.1.2

package/dist/templates/default/{app/(auth) → src/app/(app)/auth}/sign-in.tsx

@@ -3,17 +3,29 @@ import * as AppleAuthentication from "expo-apple-authentication";
 import { Image as ExpoImage } from "expo-image";
 import { router } from "expo-router";
 import { useQuery } from "convex/react";
-import { Host, ScrollView, VStack, TextField, Button, Text, RNHostView } from "@expo/ui/swift-ui";
+import {
+  Host,
+  ScrollView,
+  VStack,
+  TextField,
+  Button,
+  Text,
+  RNHostView,
+  useNativeState,
+} from "@expo/ui/swift-ui";
+import { runOnJS } from "react-native-worklets";
 import {
   autocorrectionDisabled,
   foregroundStyle,
   buttonStyle,
   background,
   clipShape,
+  defaultScrollAnchorForRole,
   disabled,
   keyboardType,
   onSubmit as onSubmitModifier,
   submitLabel,
+  textContentType,
   textFieldStyle,
   textInputAutocapitalization,
   padding,
@@ -30,6 +42,7 @@ import { api } from "@/convex/_generated/api";
 import { authClient } from "@/lib/auth-client";
 import { assets } from "@/lib/assets";
 import { haptics } from "@/lib/haptics";
+import { maskUsername } from "@/lib/masks";
 import {
   firstError,
   forgotPasswordSchema,
@@ -42,7 +55,8 @@ import { SegmentedToggle } from "@/components/auth/segmented-toggle";
 import { ProminentButton } from "@/components/ui/prominent-button";
 import { ErrorText } from "@/components/ui/status-text";
 import { announce } from "@/lib/a11y";
-import { useColorScheme, useColors, useThemedAsset } from "@/hooks/use-theme";
+import { useColors, useThemedAsset } from "@/hooks/use-theme";
+import { AppleButton } from "@/components/auth/apple-button";
 
 type SignInState = { error?: string; ok?: boolean };
 const initialState: SignInState = {};
@@ -51,12 +65,12 @@ type SignInMethod = "email" | "username" | "otp";
 
 export default function SignInScreen() {
   const dfont = useDynamicFont();
-  const colorScheme = useColorScheme();
   const colors = useColors();
   const brandIcon = useThemedAsset(assets.brandIconLight, assets.brandIconDark);
 
   const [signInMethod, setSignInMethod] = useState<SignInMethod>("email");
   const [emailValue, setEmailValue] = useState("");
+  const usernameFieldState = useNativeState("");
   const [usernameValue, setUsernameValue] = useState("");
   const [password, setPassword] = useState("");
   const [otpEmail, setOtpEmail] = useState("");
@@ -65,7 +79,7 @@ export default function SignInScreen() {
   const providers = useQuery(api.auth.getEnabledProviders);
   const showApple = appleAvailable && providers?.apple === true;
   // Email features (OTP sign-in, password reset) require the Convex env to
-  // have `REQUIRE_EMAIL_VERIFICATION=true` (set by `bunx vexpo full`).
+  // have `REQUIRE_EMAIL_VERIFICATION=true` (set by `npx vexpo full`).
   // Until then, hide them so users don't hit a code-was-logged-to-console
   // dead end. Email + password sign-up/sign-in remains available.
   const emailFeatures = providers?.emailFeatures === true;
@@ -234,16 +248,24 @@ export default function SignInScreen() {
   const inputModifiers = [
     textFieldStyle("plain"),
     padding({ horizontal: 16 }),
-    frame({ maxWidth: Infinity, height: ButtonTokens.height }),
+    frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
     background(colors.muted as string),
     clipShape("capsule"),
     dfont({ size: 16 }),
   ];
 
   return (
-    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+    <Host testID="sign-in-screen" style={{ flex: 1, backgroundColor: colors.background }}>
       <ScrollView
-        modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
+        modifiers={[
+          scrollDismissesKeyboard("interactively"),
+          tint(colors.primary as string),
+          // Swapping the method toggle hides or shows a whole field group, the
+          // biggest single-tap size change on this screen. Pin the visible
+          // center so the user does not lose the field they were aiming for.
+          // No-op below iOS 18. Ships via upstream expo/expo#43923.
+          defaultScrollAnchorForRole("center", "sizeChanges"),
+        ]}
       >
         <VStack
           spacing={20}
@@ -260,7 +282,9 @@ export default function SignInScreen() {
           </RNHostView>
 
           <VStack spacing={6} alignment="leading">
-            <Text modifiers={[dfont({ size: 28, weight: "bold" })]}>Sign in</Text>
+            <Text testID="sign-in-title" modifiers={[dfont({ size: 28, weight: "bold" })]}>
+              Sign in
+            </Text>
             <Text
               modifiers={[dfont({ size: 16 }), foregroundStyle(colors.mutedForeground as string)]}
             >
@@ -271,17 +295,21 @@ export default function SignInScreen() {
           </VStack>
 
           <SegmentedToggle
+            testID="sign-in-auth-mode"
+            accessibilityLabel="Sign in or sign up"
             value="sign-in"
             options={[
               { value: "sign-in", label: "Sign in" },
               { value: "sign-up", label: "Sign up" },
             ]}
             onChange={(v) => {
-              if (v === "sign-up") router.replace("/sign-up");
+              if (v === "sign-up") router.replace("/auth/sign-up");
             }}
           />
 
           <SegmentedToggle
+            testID="sign-in-method"
+            accessibilityLabel="Sign-in method"
             value={signInMethod}
             options={
               emailFeatures
@@ -298,20 +326,23 @@ export default function SignInScreen() {
             onChange={(value) => setSignInMethod(value as SignInMethod)}
           />
 
-          {error && <ErrorText>{error}</ErrorText>}
+          {error && <ErrorText testID="sign-in-error">{error}</ErrorText>}
 
           {signInMethod === "email" && (
             <>
               <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
                 <Text modifiers={labelModifiers}>Email</Text>
                 <TextField
+                  testID="sign-in-email"
                   placeholder="you@example.com"
                   onTextChange={setEmailValue}
                   modifiers={[
                     ...inputModifiers,
                     keyboardType("email-address"),
                     autocorrectionDisabled(),
+                    // upstream expo/expo#44547 + #44548: keyboard shift + autofill semantics
                     textInputAutocapitalization("never"),
+                    textContentType("username"),
                     disabled(isLoading),
                     submitLabel("next"),
                     accessibilityLabel("Email address"),
@@ -322,6 +353,7 @@ export default function SignInScreen() {
               <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
                 <Text modifiers={labelModifiers}>Password</Text>
                 <PasswordField
+                  testID="sign-in-email-password"
                   onTextChange={setPassword}
                   onSubmit={() => startTransition(() => signInWithEmail())}
                   disabled={isLoading}
@@ -331,6 +363,7 @@ export default function SignInScreen() {
               </VStack>
               {emailFeatures && (
                 <Button
+                  testID="sign-in-email-forgot-password"
                   label="Forgot password?"
                   modifiers={[
                     buttonStyle("plain"),
@@ -339,7 +372,7 @@ export default function SignInScreen() {
                   ]}
                   onPress={() => {
                     haptics.light();
-                    router.push("/forgot-password");
+                    router.push("/auth/forgot-password");
                   }}
                 />
               )}
@@ -351,13 +384,21 @@ export default function SignInScreen() {
               <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
                 <Text modifiers={labelModifiers}>Username</Text>
                 <TextField
+                  testID="sign-in-username"
+                  text={usernameFieldState}
                   placeholder="johndoe"
-                  onTextChange={setUsernameValue}
+                  onTextChange={(text) => {
+                    "worklet";
+                    const next = maskUsername(text);
+                    usernameFieldState.value = next;
+                    runOnJS(setUsernameValue)(next);
+                  }}
                   modifiers={[
                     ...inputModifiers,
                     keyboardType("ascii-capable"),
                     autocorrectionDisabled(),
                     textInputAutocapitalization("never"),
+                    textContentType("username"),
                     disabled(isLoading),
                     submitLabel("next"),
                     accessibilityLabel("Username"),
@@ -368,6 +409,7 @@ export default function SignInScreen() {
               <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
                 <Text modifiers={labelModifiers}>Password</Text>
                 <PasswordField
+                  testID="sign-in-username-password"
                   onTextChange={setPassword}
                   onSubmit={() => startTransition(() => signInWithUsername())}
                   disabled={isLoading}
@@ -377,6 +419,7 @@ export default function SignInScreen() {
               </VStack>
               {emailFeatures && (
                 <Button
+                  testID="sign-in-username-forgot-password"
                   label="Forgot password?"
                   modifiers={[
                     buttonStyle("plain"),
@@ -385,7 +428,7 @@ export default function SignInScreen() {
                   ]}
                   onPress={() => {
                     haptics.light();
-                    router.push("/forgot-password");
+                    router.push("/auth/forgot-password");
                   }}
                 />
               )}
@@ -396,6 +439,7 @@ export default function SignInScreen() {
             <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
               <Text modifiers={labelModifiers}>Email</Text>
               <TextField
+                testID="sign-in-otp-email"
                 placeholder="you@example.com"
                 onTextChange={setOtpEmail}
                 modifiers={[
@@ -403,6 +447,7 @@ export default function SignInScreen() {
                   keyboardType("email-address"),
                   autocorrectionDisabled(),
                   textInputAutocapitalization("never"),
+                  textContentType("username"),
                   onSubmitModifier(() => startTransition(() => sendSignInOtp())),
                   disabled(isLoading),
                   submitLabel("send"),
@@ -417,34 +462,19 @@ export default function SignInScreen() {
           )}
 
           <ProminentButton
+            testID="sign-in-submit"
             label={primaryLabel}
             onPress={() => startTransition(onSubmit)}
             disabled={isLoading}
           />
 
           {!isOtp && showApple && (
-            <VStack
-              alignment="center"
-              modifiers={[frame({ maxWidth: Infinity, height: ButtonTokens.height })]}
-            >
-              <RNHostView>
-                <AppleAuthentication.AppleAuthenticationButton
-                  buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
-                  buttonStyle={
-                    colorScheme === "dark"
-                      ? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
-                      : AppleAuthentication.AppleAuthenticationButtonStyle.BLACK
-                  }
-                  cornerRadius={ButtonTokens.cornerRadius}
-                  style={{
-                    width: "100%",
-                    height: "100%",
-                    opacity: isLoading ? 0.5 : 1,
-                  }}
-                  onPress={() => startTransition(() => signInWithApple())}
-                />
-              </RNHostView>
-            </VStack>
+            <AppleButton
+              testID="sign-in-apple"
+              type={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
+              onPress={() => startTransition(() => signInWithApple())}
+              disabled={isLoading}
+            />
           )}
         </VStack>
       </ScrollView>