Feat/yixuan+william/auth

[yxli001]

Tracking Info

Resolves #4

Changes

Main Changes

• Created landing page, login page, and a temporary home/loading page
• Login page handles both input validation errors and Firebase errors and passes them onto the inputs to be displayed
• Home/loading page redirects to landing page if not logged in, and all auth-related pages redirect to loading page if already logged in
• New Components:
  • Button: button with base styles that can handle page navigation with the href prop and/or press events with the onPress prop
    • All additional props and stylings will be passed on to the internal TouchableCapacity component
  • Inputbox: combines input label, input box, error messages, and various password-related components (visibility toggle, forgot password button)
    • label, placeholder, and errorMessage props, self-explanatory, errorMessage and validation state should be handled by the parent component
    • value and onChangeText props handle state of the input
    • containerStyle prop passes styles onto the container View (containing all the components)
    • labelStyle prop passes styles onto the label Text component
    • style prop passes styles onto the TextInput component
    • isPassword and onForgotPassword props toggle and define password input functionalities
    • All additional props passed down to the TextInput component (NOT the container)
• Firebase auth-related functions in src/lib/auth.ts
  • Response and error types defined and documented in this file
  • Sample usage in src/app/(auth)/login.tsx
• UserContext and UserContextProvider available in src/contexts/userContext.ts
  • Should be wrapped around everything in the root layout, as used in src/app/_layout.tsx
  • onAuthStateChanged listener is set up in this file - initial call to our API's whoami route should probably happen here

Additional Changes

• react-native-svg-transformer set up to render svg files, sample usage with the Mascots import in src/app/index.ts
• zod set up for validation, sample usage in src/app/(auth)/login.tsx

Testing

• Manual testing on both iOS and Android

Confirmation of Change

• NOTE: remember to npm install, and the android folder may need to be deleted and rebuilt for changes to take affect

Landing page

Login page

Login page with errors

Temp home/loading page

[yotzkim]

Pulled and tested locally, lgtm!

[JordanJunaidi]

Tested locally on ios and android. Login page looks good but I don't see the landing page (not sure if that's intentional)

[yxli001]

Tested locally on ios and android. Login page looks good but I don't see the landing page (not sure if that's intentional)

Harsh and Joanne ended up deciding to remove the landing page because it makes more sense logistically to start on the login page.