ignite-parse-auth-kit 1.0.0

package/app/screens/RegisterScreen.tsx

@@ -0,0 +1,395 @@
+import {
+  FC,
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";
+import { Alert, TextInput, TextStyle, ViewStyle } from "react-native";
+import type { AppStackScreenProps } from "@/navigators/AppNavigator";
+import {
+  Button,
+  PressableIcon,
+  Screen,
+  Text,
+  TextField,
+  TextFieldAccessoryProps,
+} from "@/components";
+import { useHeader } from "@/utils/useHeader";
+import type { ThemedStyle } from "@/theme/types";
+import { useAppTheme } from "@/theme/context";
+import { useAuth } from "@/context/AuthContext";
+
+interface RegisterScreenProps extends AppStackScreenProps<"Register"> {}
+
+// Validation functions
+const usernameValidator = (username: string): string | undefined => {
+  if (!username.length) return "Please enter a username";
+  if (username.length < 3) return "Username must be at least 3 characters";
+  return undefined;
+};
+
+const passwordConfirmValidator = (password: string): string | undefined => {
+  if (!password.length) return "Please confirm password";
+  return undefined;
+};
+
+export const RegisterScreen: FC<RegisterScreenProps> = ({ navigation }) => {
+  const authPasswordInput = useRef<TextInput>(null);
+  const authPasswordConfirmInput = useRef<TextInput>(null);
+  const usernameInput = useRef<TextInput>(null);
+
+  // Local state
+  const [username, setUsername] = useState("");
+  const [authPasswordConfirm, setAuthPasswordConfirm] = useState("");
+  const [isAuthPasswordHidden, setIsAuthPasswordHidden] = useState(true);
+  const [isPasswordConfirmHidden, setIsPasswordConfirmHidden] = useState(true);
+
+  // Individual field errors
+  const [emailError, setEmailError] = useState<string | undefined>();
+  const [passwordError, setPasswordError] = useState<string | undefined>();
+  const [passwordConfirmError, setPasswordConfirmError] = useState<string | undefined>();
+  const [usernameError, setUsernameError] = useState<string | undefined>();
+
+  // Use auth context
+  const {
+    authEmail,
+    authPassword,
+    setAuthEmail,
+    setAuthPassword,
+    isLoading,
+    error,
+    signUp,
+    resetAuthState,
+    isAuthenticated,
+    validateEmail,
+    validatePassword
+  } = useAuth();
+
+  const {
+    themed,
+    theme: { colors },
+  } = useAppTheme();
+
+  // Navigate to authenticated area if signup successful
+  useEffect(() => {
+    if (isAuthenticated) {
+      console.log('works')
+      navigation.navigate("Demo");
+    }
+  }, [isAuthenticated, navigation]);
+
+  // Password confirmation validation
+  useEffect(() => {
+    if (authPassword.length > 1 && authPasswordConfirm.length > 1) {
+      if (authPassword !== authPasswordConfirm) {
+        setPasswordConfirmError("Passwords do not match");
+      } else {
+        setPasswordConfirmError(undefined);
+      }
+    }
+  }, [authPassword, authPasswordConfirm]);
+
+  const goBack = () => {
+    navigation.goBack();
+    resetAuthState();
+    setUsername("");
+    setAuthPasswordConfirm("");
+  };
+
+  useHeader({
+    
+    leftIcon: "back",
+    onLeftPress: goBack,
+  });
+
+  const toLogin = () => {
+    navigation.goBack();
+    resetAuthState();
+    setUsername("");
+    setAuthPasswordConfirm("");
+  };
+
+  const handleRegister = async () => {
+    try {
+      // Reset error states
+      setEmailError(undefined);
+      setPasswordError(undefined);
+      setPasswordConfirmError(undefined);
+      setUsernameError(undefined);
+
+      let hasErrors = false;
+
+      // Validate all fields
+      const emailValidationError = validateEmail(authEmail);
+      if (emailValidationError) {
+        setEmailError(emailValidationError);
+        hasErrors = true;
+      }
+
+      const passwordValidationError = validatePassword(authPassword);
+      if (passwordValidationError) {
+        setPasswordError(passwordValidationError);
+        hasErrors = true;
+      }
+
+      // Validate username
+      const usernameValidationError = usernameValidator(username);
+      if (usernameValidationError) {
+        setUsernameError(usernameValidationError);
+        hasErrors = true;
+      }
+
+      // Validate password confirmation
+      const passwordConfirmValidationError = passwordConfirmValidator(authPasswordConfirm);
+      if (passwordConfirmValidationError) {
+        setPasswordConfirmError(passwordConfirmValidationError);
+        hasErrors = true;
+      }
+
+      // Check password match
+      if (authPassword !== authPasswordConfirm) {
+        setPasswordConfirmError("Passwords do not match");
+        hasErrors = true;
+      }
+
+      if (hasErrors) {
+        Alert.alert(
+          "Validation Error",
+          "Please check your input and try again",
+          [{ text: "OK", style: "cancel" }]
+        );
+        return;
+      }
+
+      console.log("All validations passed, proceeding with registration");
+
+      // Attempt registration
+      const result = await signUp(username);
+
+      if (result.success) {
+        console.log("Registration successful");
+        
+        // Reset form fields on success
+        resetAuthState();
+        setUsername("");
+        setAuthPasswordConfirm("");
+
+        Alert.alert("Success", "Registration completed successfully!", [
+          { text: "OK" },
+        ]);
+      } else {
+        // Registration failed - keep form fields populated for retry
+        const errorMessage = result.error || "Registration failed. Please try again.";
+        console.error("Registration failed:", errorMessage);
+
+        Alert.alert("Registration Failed", errorMessage, [
+          { text: "OK" },
+        ]);
+      }
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : "An unexpected error occurred during registration";
+
+      console.error("Registration error:", errorMessage);
+
+      Alert.alert("Registration Error", errorMessage, [
+        { text: "OK" },
+      ]);
+    }
+  };
+
+  // Create password toggle function
+  const createPasswordToggle = useCallback(
+    (isHidden: boolean, setIsHidden: (hidden: boolean) => void) =>
+      function PasswordToggle(props: TextFieldAccessoryProps) {
+        return (
+          <PressableIcon
+            icon={isHidden ? "view" : "hidden"}
+            color={colors.palette.neutral800}
+            containerStyle={props.style}
+            size={20}
+            onPress={() => setIsHidden(!isHidden)}
+          />
+        );
+      },
+    [colors.palette.neutral800]
+  );
+
+  // Memoized accessories for both password fields
+  const PasswordRightAccessory = useMemo(
+    () => createPasswordToggle(isAuthPasswordHidden, setIsAuthPasswordHidden),
+    [isAuthPasswordHidden, createPasswordToggle]
+  );
+
+  const PasswordConfirmRightAccessory = useMemo(
+    () => createPasswordToggle(isPasswordConfirmHidden, setIsPasswordConfirmHidden),
+    [isPasswordConfirmHidden, createPasswordToggle]
+  );
+
+  return (
+    <Screen
+      style={$root}
+      preset="auto"
+      safeAreaEdges={[ "bottom"]}
+      contentContainerStyle={themed($screenContentContainer)}
+    >
+      <Text
+        testID="register-heading"
+        preset="heading"
+        tx="signUpScreen:signUp"
+        style={themed($signUp)}
+      />
+      <Text 
+        preset="subheading" 
+        tx="signUpScreen:enterDetails"
+        style={themed($enterDetails)}
+      />
+      <Text
+        tx="signUpScreen:ToLogIn"
+        style={[themed($signUpText), { marginTop: 12 }]}
+      />
+      <Text
+        text="Login"
+        style={[themed($signUpLink), themed($signUpText)]}
+        onPress={toLogin}
+      />
+
+      {/* Show server connection errors */}
+      {error && (
+        <Text
+          text={error}
+          size="sm"
+          weight="light"
+          style={[themed($hint), { color: colors.error }]}
+        />
+      )}
+
+      <TextField
+        value={authEmail}
+        onChangeText={setAuthEmail}
+        containerStyle={themed($textField)}
+        autoCapitalize="none"
+        autoComplete="email"
+        autoCorrect={false}
+        keyboardType="email-address"
+        labelTx="loginScreen:emailFieldLabel"
+        placeholderTx="loginScreen:emailFieldPlaceholder"
+        helper={emailError}
+        status={emailError ? "error" : undefined}
+        onSubmitEditing={() => usernameInput.current?.focus()}
+        editable={!isLoading}
+      />
+
+      <TextField
+        ref={usernameInput}
+        value={username}
+        onChangeText={setUsername}
+        containerStyle={themed($textField)}
+        autoCapitalize="none"
+        autoComplete="username"
+        autoCorrect={false}
+        label="Username"
+        placeholder="Enter your username"
+        helper={usernameError}
+        status={usernameError ? "error" : undefined}
+        onSubmitEditing={() => authPasswordInput.current?.focus()}
+        editable={!isLoading}
+      /> 
+
+      <TextField
+        ref={authPasswordInput}
+        value={authPassword}
+        onChangeText={setAuthPassword}
+        containerStyle={themed($textField)}
+        autoCapitalize="none"
+        autoComplete="password"
+        autoCorrect={false}
+        secureTextEntry={isAuthPasswordHidden}
+        labelTx="loginScreen:passwordFieldLabel"
+        placeholderTx="loginScreen:passwordFieldPlaceholder"
+        helper={passwordError}
+        status={passwordError ? "error" : undefined}
+        onSubmitEditing={() => authPasswordConfirmInput.current?.focus()}
+        RightAccessory={PasswordRightAccessory}
+        editable={!isLoading}
+      />
+
+      <TextField
+        ref={authPasswordConfirmInput}
+        value={authPasswordConfirm}
+        onChangeText={setAuthPasswordConfirm}
+        containerStyle={themed($textField)}
+        autoCapitalize="none"
+        autoComplete="password"
+        autoCorrect={false}
+        secureTextEntry={isPasswordConfirmHidden}
+        labelTx="loginScreen:passwordFieldLabelConf"
+        placeholderTx="loginScreen:passwordFieldPlaceholder"
+        helper={passwordConfirmError}
+        status={passwordConfirmError ? "error" : undefined}
+        onSubmitEditing={handleRegister}
+        RightAccessory={PasswordConfirmRightAccessory}
+        editable={!isLoading}
+      />
+
+      <Button
+        testID="register-button"
+        text={isLoading ? "Creating Account..." : "Let's Go"}
+        style={themed($tapButton)}
+        preset="reversed"
+        onPress={handleRegister}
+        disabled={isLoading}
+      />
+
+      {isLoading && (
+        <Text 
+          text="Creating your account..." 
+          style={[themed($hint), { textAlign: "center" }]} 
+        />
+      )}
+    </Screen>
+  );
+};
+
+const $root: ViewStyle = {
+  flex: 1,
+};
+
+const $screenContentContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  paddingVertical: spacing.md,
+  paddingHorizontal: spacing.lg,
+});
+
+const $enterDetails: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginBottom: spacing.sm,
+});
+
+const $signUp: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginBottom: spacing.sm,
+});
+
+const $hint: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
+  color: colors.tint,
+  marginBottom: spacing.md,
+});
+
+const $signUpText: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
+  textAlign: "center",
+});
+
+const $signUpLink: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
+  color: colors.tint,
+  marginBottom: spacing.md,
+});
+
+const $textField: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginBottom: spacing.lg,
+});
+
+const $tapButton: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginTop: spacing.xs,
+});

package/app/screens/WelcomeScreen.tsx

@@ -0,0 +1,114 @@
+import { FC } from "react"
+import { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native"
+
+import { Button } from "@/components/Button" // @demo remove-current-line
+import { Screen } from "@/components/Screen"
+import { Text } from "@/components/Text"
+import { useAuth } from "@/context/AuthContext" // @demo remove-current-line
+import { isRTL } from "@/i18n"
+import type { AppStackScreenProps } from "@/navigators/AppNavigator" // @demo remove-current-line
+import type { ThemedStyle } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+import { useHeader } from "@/utils/useHeader" // @demo remove-current-line
+import { useSafeAreaInsetsStyle } from "@/utils/useSafeAreaInsetsStyle"
+
+const welcomeLogo = require("@assets/images/logo.png")
+const welcomeFace = require("@assets/images/welcome-face.png")
+
+interface WelcomeScreenProps extends AppStackScreenProps<"Welcome"> {} // @demo remove-current-line
+
+// @demo replace-next-line export const WelcomeScreen: FC = function WelcomeScreen(
+export const WelcomeScreen: FC<WelcomeScreenProps> = function WelcomeScreen(
+  _props, // @demo remove-current-line
+) {
+  const { themed, theme } = useAppTheme()
+  // @demo remove-block-start
+  const { navigation } = _props
+  const { logout } = useAuth()
+
+  function goNext() {
+    navigation.navigate("ChooseAuth")
+  }
+
+  useHeader(
+    {
+      
+    },
+    [logout],
+  )
+  // @demo remove-block-end
+
+  const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"])
+
+  return (
+    <Screen preset="fixed" contentContainerStyle={$styles.flex1}>
+      <View style={themed($topContainer)}>
+        <Image style={themed($welcomeLogo)} source={welcomeLogo} resizeMode="contain" />
+        <Text
+          testID="welcome-heading"
+          style={themed($welcomeHeading)}
+          tx="welcomeScreen:readyForLaunch"
+          preset="heading"
+        />
+        <Text tx="welcomeScreen:exciting" preset="subheading" />
+        <Image
+          style={$welcomeFace}
+          source={welcomeFace}
+          resizeMode="contain"
+          tintColor={theme.colors.palette.neutral900}
+        />
+      </View>
+
+      <View style={themed([$bottomContainer, $bottomContainerInsets])}>
+        <Text tx="welcomeScreen:postscript" size="md" />
+        {/* @demo remove-block-start */}
+        <Button
+          testID="next-screen-button"
+          preset="reversed"
+          tx="welcomeScreen:letsGo"
+          onPress={goNext}
+        />
+        {/* @demo remove-block-end */}
+      </View>
+    </Screen>
+  )
+}
+
+const $topContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  flexShrink: 1,
+  flexGrow: 1,
+  flexBasis: "57%",
+  justifyContent: "center",
+  paddingHorizontal: spacing.lg,
+})
+
+const $bottomContainer: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
+  flexShrink: 1,
+  flexGrow: 0,
+  flexBasis: "43%",
+  backgroundColor: colors.palette.neutral100,
+  borderTopLeftRadius: 16,
+  borderTopRightRadius: 16,
+  paddingHorizontal: spacing.lg,
+  justifyContent: "space-around",
+})
+
+const $welcomeLogo: ThemedStyle<ImageStyle> = ({ spacing }) => ({
+  height: 88,
+  width: "100%",
+  marginBottom: spacing.xxl,
+})
+
+const $welcomeFace: ImageStyle = {
+  height: 169,
+  width: 269,
+  position: "absolute",
+  bottom: -47,
+  right: -80,
+  transform: [{ scaleX: isRTL ? -1 : 1 }],
+}
+
+const $welcomeHeading: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginBottom: spacing.md,
+})

package/app/services/api/apiProblem.test.ts

@@ -0,0 +1,73 @@
+import { ApiErrorResponse } from "apisauce"
+
+import { getGeneralApiProblem } from "./apiProblem"
+
+test("handles connection errors", () => {
+  expect(getGeneralApiProblem({ problem: "CONNECTION_ERROR" } as ApiErrorResponse<null>)).toEqual({
+    kind: "cannot-connect",
+    temporary: true,
+  })
+})
+
+test("handles network errors", () => {
+  expect(getGeneralApiProblem({ problem: "NETWORK_ERROR" } as ApiErrorResponse<null>)).toEqual({
+    kind: "cannot-connect",
+    temporary: true,
+  })
+})
+
+test("handles timeouts", () => {
+  expect(getGeneralApiProblem({ problem: "TIMEOUT_ERROR" } as ApiErrorResponse<null>)).toEqual({
+    kind: "timeout",
+    temporary: true,
+  })
+})
+
+test("handles server errors", () => {
+  expect(getGeneralApiProblem({ problem: "SERVER_ERROR" } as ApiErrorResponse<null>)).toEqual({
+    kind: "server",
+  })
+})
+
+test("handles unknown errors", () => {
+  expect(getGeneralApiProblem({ problem: "UNKNOWN_ERROR" } as ApiErrorResponse<null>)).toEqual({
+    kind: "unknown",
+    temporary: true,
+  })
+})
+
+test("handles unauthorized errors", () => {
+  expect(
+    getGeneralApiProblem({ problem: "CLIENT_ERROR", status: 401 } as ApiErrorResponse<null>),
+  ).toEqual({
+    kind: "unauthorized",
+  })
+})
+
+test("handles forbidden errors", () => {
+  expect(
+    getGeneralApiProblem({ problem: "CLIENT_ERROR", status: 403 } as ApiErrorResponse<null>),
+  ).toEqual({
+    kind: "forbidden",
+  })
+})
+
+test("handles not-found errors", () => {
+  expect(
+    getGeneralApiProblem({ problem: "CLIENT_ERROR", status: 404 } as ApiErrorResponse<null>),
+  ).toEqual({
+    kind: "not-found",
+  })
+})
+
+test("handles other client errors", () => {
+  expect(
+    getGeneralApiProblem({ problem: "CLIENT_ERROR", status: 418 } as ApiErrorResponse<null>),
+  ).toEqual({
+    kind: "rejected",
+  })
+})
+
+test("handles cancellation errors", () => {
+  expect(getGeneralApiProblem({ problem: "CANCEL_ERROR" } as ApiErrorResponse<null>)).toBeNull()
+})

package/app/services/api/apiProblem.ts

@@ -0,0 +1,74 @@
+import { ApiResponse } from "apisauce"
+
+export type GeneralApiProblem =
+  /**
+   * Times up.
+   */
+  | { kind: "timeout"; temporary: true }
+  /**
+   * Cannot connect to the server for some reason.
+   */
+  | { kind: "cannot-connect"; temporary: true }
+  /**
+   * The server experienced a problem. Any 5xx error.
+   */
+  | { kind: "server" }
+  /**
+   * We're not allowed because we haven't identified ourself. This is 401.
+   */
+  | { kind: "unauthorized" }
+  /**
+   * We don't have access to perform that request. This is 403.
+   */
+  | { kind: "forbidden" }
+  /**
+   * Unable to find that resource.  This is a 404.
+   */
+  | { kind: "not-found" }
+  /**
+   * All other 4xx series errors.
+   */
+  | { kind: "rejected" }
+  /**
+   * Something truly unexpected happened. Most likely can try again. This is a catch all.
+   */
+  | { kind: "unknown"; temporary: true }
+  /**
+   * The data we received is not in the expected format.
+   */
+  | { kind: "bad-data" }
+
+/**
+ * Attempts to get a common cause of problems from an api response.
+ *
+ * @param response The api response.
+ */
+export function getGeneralApiProblem(response: ApiResponse<any>): GeneralApiProblem | null {
+  switch (response.problem) {
+    case "CONNECTION_ERROR":
+      return { kind: "cannot-connect", temporary: true }
+    case "NETWORK_ERROR":
+      return { kind: "cannot-connect", temporary: true }
+    case "TIMEOUT_ERROR":
+      return { kind: "timeout", temporary: true }
+    case "SERVER_ERROR":
+      return { kind: "server" }
+    case "UNKNOWN_ERROR":
+      return { kind: "unknown", temporary: true }
+    case "CLIENT_ERROR":
+      switch (response.status) {
+        case 401:
+          return { kind: "unauthorized" }
+        case 403:
+          return { kind: "forbidden" }
+        case 404:
+          return { kind: "not-found" }
+        default:
+          return { kind: "rejected" }
+      }
+    case "CANCEL_ERROR":
+      return null
+  }
+
+  return null
+}