@ramonclaudio/create-vexpo 0.1.0 → 0.1.2

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

@@ -1,7 +1,6 @@
 import { startTransition, useActionState, useCallback, useEffect, useRef, useState } from "react";
 import * as AppleAuthentication from "expo-apple-authentication";
 import { Image as ExpoImage } from "expo-image";
-import * as ImagePicker from "expo-image-picker";
 import { router, useNavigation } from "expo-router";
 import { useQuery } from "convex/react";
 import {
@@ -16,54 +15,64 @@ import {
   Spacer,
   RNHostView,
   ConfirmationDialog,
+  useNativeState,
 } from "@expo/ui/swift-ui";
 import {
   autocorrectionDisabled,
   foregroundStyle,
+  defaultScrollAnchorForRole,
   disabled,
   keyboardType,
   submitLabel,
+  textContentType,
   textFieldStyle,
   textInputAutocapitalization,
   padding,
   frame,
   scrollDismissesKeyboard,
+  accessibilityHidden,
   accessibilityLabel,
   accessibilityHint,
-  onTapGesture,
   tint,
   background,
-  border,
   clipShape,
+  id,
+  scrollPosition,
+  scrollTargetLayout,
 } from "@expo/ui/swift-ui/modifiers";
 import { useDynamicFont } from "@/lib/dynamic-font";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
 import { Button as ButtonTokens } from "@/constants/layout";
 
 import { api } from "@/convex/_generated/api";
 import { isReservedUsername, isValidUsernameFormat } from "@/convex/constants";
+import { runOnJS } from "react-native-worklets";
+
 import { authClient } from "@/lib/auth-client";
 import { assets } from "@/lib/assets";
 import { haptics } from "@/lib/haptics";
-import { OtpVerification, type PendingAvatar } from "@/components/auth/otp-verification";
+import { maskUsername } from "@/lib/masks";
+import { setNativeValue } from "@/lib/native-state";
+import { OtpVerification } from "@/components/auth/otp-verification";
 import { PasswordField } from "@/components/auth/password-field";
 import { SegmentedToggle } from "@/components/auth/segmented-toggle";
 import { ProminentButton } from "@/components/ui/prominent-button";
-import { firstError, signUpSchema } from "@/lib/schemas";
+import { firstError, firstErrorField, signUpSchema } from "@/lib/schemas";
 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 SignUpState = { error?: string; verify?: boolean };
 const initialState: SignUpState = {};
 
-const AVATAR_SIZE = 56;
-
 export default function SignUpScreen() {
   const dfont = useDynamicFont();
-  const colorScheme = useColorScheme();
+  const symbolSize = useSymbolSize();
   const colors = useColors();
   const brandIcon = useThemedAsset(assets.brandIconLight, assets.brandIconDark);
   const [name, setName] = useState("");
+  const usernameState = useNativeState("");
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -73,19 +82,14 @@ export default function SignUpScreen() {
   const showApple = appleAvailable && providers?.apple === true;
   // When `emailFeatures` is false (minimal-tier setup, no Resend), the
   // server auto-verifies on sign-up and the user is signed in immediately
-  //. no OTP step. When true (testflight tier+), the OTP verification
+  // no OTP step. When true (testflight tier+), the OTP verification
   // screen renders after sign-up.
   const emailFeatures = providers?.emailFeatures === true;
 
-  // Avatar picked at sign-up. Held until verifyEmail mints the session, then
-  // OtpVerification uploads it via generateAvatarUploadUrl + updateAvatar.
-  const [pendingAvatar, setPendingAvatar] = useState<PendingAvatar | null>(null);
-  const [avatarPicker, setAvatarPicker] = useState(false);
-  const [avatarError, setAvatarError] = useState<string | null>(null);
+  // Bound to ScrollView via `scrollPosition`. Writing a field id scrolls the
+  // form so that field aligns with the top of the viewport.
+  const activeField = useNativeState<string | null>(null);
 
-  // Live username availability via the better-auth `username` plugin. Status
-  // is null while idle, true when the server says the handle is free, false
-  // when reserved or already taken. Format errors are left to the schema.
   const [usernameAvailable, setUsernameAvailable] = useState<boolean | null>(null);
   const [isCheckingUsername, setIsCheckingUsername] = useState(false);
   const usernameCheckRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -104,13 +108,13 @@ export default function SignUpScreen() {
 
   const handleUsernameChange = useCallback(
     (value: string) => {
-      // Force lowercase so the field reads what the schema stores. iOS would
-      // otherwise autocapitalize the first letter on `ascii-capable`.
-      const lower = value.toLowerCase();
-      setUsername(lower);
+      // `value` arrives already masked (lowercase, `[a-z0-9._]`) from the
+      // field's worklet, so this only mirrors it and drives the availability
+      // check off the JS thread.
+      setUsername(value);
       setUsernameAvailable(null);
       if (usernameCheckRef.current) clearTimeout(usernameCheckRef.current);
-      const trimmed = lower.trim();
+      const trimmed = value.trim();
       if (!trimmed || !isValidUsernameFormat(trimmed)) return;
       if (isReservedUsername(trimmed)) {
         setUsernameAvailable(false);
@@ -130,45 +134,6 @@ export default function SignUpScreen() {
     [],
   );
 
-  const pickAvatar = useCallback(async (source: "library" | "camera") => {
-    setAvatarPicker(false);
-    // Wait for the action sheet to finish dismissing before opening the
-    // picker. iOS refuses to present a second view controller while one is
-    // still animating away.
-    await new Promise((r) => setTimeout(r, 350));
-    const perm =
-      source === "camera"
-        ? await ImagePicker.requestCameraPermissionsAsync()
-        : await ImagePicker.requestMediaLibraryPermissionsAsync();
-    if (!perm.granted) {
-      setAvatarError(source === "camera" ? "Camera access denied" : "Photos access denied");
-      return;
-    }
-    haptics.light();
-    const options: ImagePicker.ImagePickerOptions = {
-      mediaTypes: ["images"],
-      allowsEditing: true,
-      aspect: [1, 1],
-      quality: 0.8,
-    };
-    const result =
-      source === "camera"
-        ? await ImagePicker.launchCameraAsync(options)
-        : await ImagePicker.launchImageLibraryAsync(options);
-    if (result.canceled) return;
-    const asset = result.assets[0];
-    if (!asset) return;
-    setAvatarError(null);
-    setPendingAvatar({ uri: asset.uri, mimeType: asset.mimeType ?? "image/jpeg" });
-  }, []);
-
-  const removeAvatar = useCallback(() => {
-    setAvatarPicker(false);
-    haptics.medium();
-    setPendingAvatar(null);
-    setAvatarError(null);
-  }, []);
-
   useEffect(() => {
     AppleAuthentication.isAvailableAsync().then(setAppleAvailable);
   }, []);
@@ -176,8 +141,6 @@ export default function SignUpScreen() {
   const navigation = useNavigation();
   const hasInput =
     name.length > 0 || username.length > 0 || email.length > 0 || password.length > 0;
-  // Hold the pending navigation action while we show the discard-changes
-  // ConfirmationDialog. Cleared on Discard (after dispatch) or Cancel.
   const [pendingNavAction, setPendingNavAction] = useState<
     Parameters<typeof navigation.dispatch>[0] | null
   >(null);
@@ -195,6 +158,8 @@ export default function SignUpScreen() {
     const parsed = signUpSchema.safeParse({ name, username, email, password });
     if (!parsed.success) {
       haptics.error();
+      const field = firstErrorField(parsed);
+      if (field) setNativeValue(activeField, `field-${field}`);
       return { error: firstError(parsed)! };
     }
 
@@ -268,29 +233,41 @@ export default function SignUpScreen() {
   );
 
   const isLoading = isPending || isApplePending;
-  const error = state.error ?? appleState.error ?? avatarError;
-  const usernameStatus: { text: string; color: string } | null = (() => {
+  const error = state.error ?? appleState.error;
+  // HIG: pair color with a non-color signal. The status row carries text +
+  // color + an SF Symbol so a colorblind user gets the same answer.
+  const usernameStatus: {
+    text: string;
+    color: string;
+    icon: "ellipsis.circle" | "checkmark.circle.fill" | "exclamationmark.circle.fill";
+  } | null = (() => {
     if (!username || !isValidUsernameFormat(username.trim().toLowerCase())) return null;
     if (isCheckingUsername) {
-      return { text: "Checking availability...", color: colors.mutedForeground as string };
+      return {
+        text: "Checking availability...",
+        color: colors.mutedForeground as string,
+        icon: "ellipsis.circle",
+      };
     }
     if (usernameAvailable === true) {
-      return { text: "Username is available", color: colors.success as string };
+      return {
+        text: "Username is available",
+        color: colors.success as string,
+        icon: "checkmark.circle.fill",
+      };
     }
     if (usernameAvailable === false) {
-      return { text: "This username is not available", color: colors.destructive as string };
+      return {
+        text: "This username is not available",
+        color: colors.destructive as string,
+        icon: "exclamationmark.circle.fill",
+      };
     }
     return null;
   })();
 
   if (showVerification) {
-    return (
-      <OtpVerification
-        email={email}
-        pendingAvatar={pendingAvatar}
-        onBack={() => setShowVerification(false)}
-      />
-    );
+    return <OtpVerification email={email} onBack={() => setShowVerification(false)} />;
   }
 
   const labelModifiers = [dfont({ size: 17, weight: "semibold" })];
@@ -298,21 +275,29 @@ export default function SignUpScreen() {
   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-up-screen" style={{ flex: 1, backgroundColor: colors.background }}>
       <ScrollView
-        modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
+        modifiers={[
+          scrollDismissesKeyboard("interactively"),
+          tint(colors.primary as string),
+          scrollPosition(activeField, { anchor: "top" }),
+          // Anchor the visible center on size changes so a username-availability
+          // line appearing or a dynamic-type bump doesn't shift the field the
+          // user is reading. No-op below iOS 18.
+          defaultScrollAnchorForRole("center", "sizeChanges"),
+        ]}
       >
         <VStack
           spacing={20}
           alignment="leading"
-          modifiers={[padding({ horizontal: 24, top: 60, bottom: 40 })]}
+          modifiers={[padding({ horizontal: 24, top: 60, bottom: 40 }), scrollTargetLayout()]}
         >
           <RNHostView matchContents>
             <ExpoImage
@@ -324,7 +309,9 @@ export default function SignUpScreen() {
           </RNHostView>
 
           <VStack spacing={6} alignment="leading">
-            <Text modifiers={[dfont({ size: 28, weight: "bold" })]}>Create your account</Text>
+            <Text testID="sign-up-title" modifiers={[dfont({ size: 28, weight: "bold" })]}>
+              Create your account
+            </Text>
             <Text
               modifiers={[dfont({ size: 16 }), foregroundStyle(colors.mutedForeground as string)]}
             >
@@ -333,106 +320,34 @@ export default function SignUpScreen() {
           </VStack>
 
           <SegmentedToggle
+            testID="sign-up-auth-mode"
+            accessibilityLabel="Sign in or sign up"
             value="sign-up"
             options={[
               { value: "sign-in", label: "Sign in" },
               { value: "sign-up", label: "Sign up" },
             ]}
             onChange={(v) => {
-              if (v === "sign-in") router.replace("/sign-in");
+              if (v === "sign-in") router.replace("/auth/sign-in");
             }}
           />
 
-          {error && <ErrorText>{error}</ErrorText>}
+          {error && <ErrorText testID="sign-up-error">{error}</ErrorText>}
 
-          <VStack spacing={10} alignment="leading" modifiers={[frame({ maxWidth: 10000 })]}>
-            <Text modifiers={labelModifiers}>Profile photo (optional)</Text>
-            <ConfirmationDialog
-              title="Profile photo"
-              isPresented={avatarPicker}
-              onIsPresentedChange={setAvatarPicker}
-              titleVisibility="visible"
-            >
-              <ConfirmationDialog.Trigger>
-                <HStack
-                  spacing={16}
-                  alignment="center"
-                  modifiers={[
-                    frame({ maxWidth: 10000 }),
-                    onTapGesture(() => {
-                      haptics.light();
-                      setAvatarPicker(true);
-                    }),
-                    accessibilityLabel(
-                      pendingAvatar ? "Change profile photo" : "Add profile photo",
-                    ),
-                  ]}
-                >
-                  {pendingAvatar ? (
-                    <RNHostView matchContents>
-                      <ExpoImage
-                        source={{ uri: pendingAvatar.uri }}
-                        style={
-                          {
-                            width: AVATAR_SIZE,
-                            height: AVATAR_SIZE,
-                            borderRadius: AVATAR_SIZE / 2,
-                          } as never
-                        }
-                        contentFit="cover"
-                        accessibilityLabel="Selected profile photo"
-                      />
-                    </RNHostView>
-                  ) : (
-                    <VStack
-                      alignment="center"
-                      modifiers={[
-                        frame({ width: AVATAR_SIZE, height: AVATAR_SIZE }),
-                        background(colors.muted as string),
-                        border({ color: colors.border as string, width: 2 }),
-                        clipShape("circle"),
-                      ]}
-                    >
-                      <Image
-                        systemName="camera"
-                        size={20}
-                        color={colors.mutedForeground as string}
-                      />
-                    </VStack>
-                  )}
-                  <Text modifiers={helperModifiers}>
-                    {pendingAvatar ? "Photo selected" : "Click to upload"}
-                  </Text>
-                  <Spacer />
-                </HStack>
-              </ConfirmationDialog.Trigger>
-              <ConfirmationDialog.Actions>
-                <Button
-                  label="Choose Photo"
-                  systemImage="photo.on.rectangle"
-                  onPress={() => pickAvatar("library")}
-                />
-                <Button
-                  label="Take Photo"
-                  systemImage="camera"
-                  onPress={() => pickAvatar("camera")}
-                />
-                {pendingAvatar ? (
-                  <Button label="Remove Photo" role="destructive" onPress={removeAvatar} />
-                ) : null}
-                <Button label="Cancel" role="cancel" />
-              </ConfirmationDialog.Actions>
-            </ConfirmationDialog>
-          </VStack>
-
-          <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+          <VStack
+            spacing={6}
+            alignment="leading"
+            modifiers={[frame({ maxWidth: Infinity }), id("field-name")]}
+          >
             <Text modifiers={labelModifiers}>Name</Text>
             <TextField
+              testID="sign-up-name"
               placeholder="Your name"
               onTextChange={setName}
               modifiers={[
                 ...inputModifiers,
                 textInputAutocapitalization("words"),
+                textContentType("name"),
                 disabled(isLoading),
                 submitLabel("next"),
                 accessibilityLabel("Full name"),
@@ -441,16 +356,28 @@ export default function SignUpScreen() {
             />
           </VStack>
 
-          <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+          <VStack
+            spacing={6}
+            alignment="leading"
+            modifiers={[frame({ maxWidth: Infinity }), id("field-username")]}
+          >
             <Text modifiers={labelModifiers}>Username (optional)</Text>
             <TextField
+              testID="sign-up-username"
+              text={usernameState}
               placeholder="johndoe"
-              onTextChange={handleUsernameChange}
+              onTextChange={(text) => {
+                "worklet";
+                const next = maskUsername(text);
+                usernameState.value = next;
+                runOnJS(handleUsernameChange)(next);
+              }}
               modifiers={[
                 ...inputModifiers,
                 keyboardType("ascii-capable"),
                 autocorrectionDisabled(),
                 textInputAutocapitalization("never"),
+                textContentType("username"),
                 disabled(isLoading),
                 submitLabel("next"),
                 accessibilityLabel("Username"),
@@ -458,19 +385,33 @@ export default function SignUpScreen() {
               ]}
             />
             {usernameStatus ? (
-              <Text
-                modifiers={[dfont({ size: 13 }), foregroundStyle(usernameStatus.color as string)]}
-              >
-                {usernameStatus.text}
-              </Text>
+              <HStack spacing={6} alignment="center">
+                <Image
+                  systemName={usernameStatus.icon}
+                  size={symbolSize(13)}
+                  color={usernameStatus.color}
+                  modifiers={[accessibilityHidden(true)]}
+                />
+                <Text
+                  testID="sign-up-username-status"
+                  modifiers={[dfont({ size: 13 }), foregroundStyle(usernameStatus.color as string)]}
+                >
+                  {usernameStatus.text}
+                </Text>
+              </HStack>
             ) : (
               <Text modifiers={helperModifiers}>A unique handle others can use to find you.</Text>
             )}
           </VStack>
 
-          <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+          <VStack
+            spacing={6}
+            alignment="leading"
+            modifiers={[frame({ maxWidth: Infinity }), id("field-email")]}
+          >
             <Text modifiers={labelModifiers}>Email</Text>
             <TextField
+              testID="sign-up-email"
               placeholder="you@example.com"
               onTextChange={setEmail}
               modifiers={[
@@ -478,6 +419,7 @@ export default function SignUpScreen() {
                 keyboardType("email-address"),
                 autocorrectionDisabled(),
                 textInputAutocapitalization("never"),
+                textContentType("emailAddress"),
                 disabled(isLoading),
                 submitLabel("next"),
                 accessibilityLabel("Email address"),
@@ -486,11 +428,17 @@ export default function SignUpScreen() {
             />
           </VStack>
 
-          <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+          <VStack
+            spacing={6}
+            alignment="leading"
+            modifiers={[frame({ maxWidth: Infinity }), id("field-password")]}
+          >
             <Text modifiers={labelModifiers}>Password</Text>
             <PasswordField
+              testID="sign-up-password"
               onTextChange={setPassword}
               onSubmit={() => startTransition(() => signUp())}
+              contentType="newPassword"
               disabled={isLoading}
               accessibilityLabel="Password"
               accessibilityHint="Enter a password with at least 10 characters"
@@ -499,34 +447,19 @@ export default function SignUpScreen() {
           </VStack>
 
           <ProminentButton
+            testID="sign-up-submit"
             label={isPending ? "Creating account..." : "Create account"}
             onPress={() => startTransition(() => signUp())}
             disabled={isLoading}
           />
 
           {showApple && (
-            <VStack
-              alignment="center"
-              modifiers={[frame({ maxWidth: Infinity, height: ButtonTokens.height })]}
-            >
-              <RNHostView>
-                <AppleAuthentication.AppleAuthenticationButton
-                  buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_UP}
-                  buttonStyle={
-                    colorScheme === "dark"
-                      ? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
-                      : AppleAuthentication.AppleAuthenticationButtonStyle.BLACK
-                  }
-                  cornerRadius={ButtonTokens.cornerRadius}
-                  style={{
-                    width: "100%",
-                    height: "100%",
-                    opacity: isLoading ? 0.5 : 1,
-                  }}
-                  onPress={() => startTransition(() => signUpWithApple())}
-                />
-              </RNHostView>
-            </VStack>
+            <AppleButton
+              testID="sign-up-apple"
+              type={AppleAuthentication.AppleAuthenticationButtonType.SIGN_UP}
+              onPress={() => startTransition(() => signUpWithApple())}
+              disabled={isLoading}
+            />
           )}
         </VStack>
       </ScrollView>
@@ -544,15 +477,17 @@ export default function SignUpScreen() {
         </ConfirmationDialog.Trigger>
         <ConfirmationDialog.Actions>
           <Button
+            testID="sign-up-discard"
             label="Discard"
             role="destructive"
             onPress={() => {
+              haptics.warning();
               const action = pendingNavAction;
               setPendingNavAction(null);
               if (action) navigation.dispatch(action);
             }}
           />
-          <Button label="Keep Editing" role="cancel" />
+          <Button testID="sign-up-keep-editing" label="Keep Editing" role="cancel" />
         </ConfirmationDialog.Actions>
         <ConfirmationDialog.Message>
           <Text modifiers={[dfont({ size: 16 })]}>You have unsaved input that will be lost.</Text>