[FE/BE] Log In and Create Account

[parkerra]

Overview

Create the Log In screen and Sign Up pages so that users can sign in and create accounts. The previous Log In page was implemented in /login, but the designs need to be updated and made mobile-friendly, so feel free to start over if you think that'd be best! There are backend endpoints in /db/actions/Login.ts and /db/actions/SignUp.ts for everything except Sign Up with Google, which you should create.

Link to Figma: https://www.figma.com/design/1eq6iy7h2Cd7rYTxPB4s5P/Motherhood-Beyond-Bars-%2F-Spr2022-(Copy)?node-id=6212-1439&node-type=CANVAS&t=IzQT02xW96dasVs1-0

Requirements

• Create two branches: one for the ticket and one for shared components. For shared components, created as many PRs as needed so that components can be merged into main for other devs to use
• Create frontend components to be used in these pages and throughout the codebase (see below)
• Add error checking for /db/actions/Login.ts and /db/actions/SignUp.ts, currently they don't return anything but they should return a status to be used by the frontend to show error messages to the end user.
  • The Firebase functions will throw an error that can be caught when the Promise resolves using .catch(() => {})
  • Throw errors and use inline Debuggers to check what the Firebase functions are returning
• Implement backend for Sign Up with Google using signInWithPopup, Firebase does not have a function for only creating a user account, so this function will create an account if it does not already exist. If a user hits Log In with Google, check if a new account was created when they sign in, then route them to Sign Up page 2 where they input their name and phone number
• After a user Creates an Account, use auth.auth.currentUser to get information about the current user for the second Sign In page
• Create Log In and Sign Up pages
  • Pages should be stateful and have error checking, and call the endpoints in db/actions/Login.ts and db/actions/SignUp.ts on success to update the database with the user account or Sign In

Components

Create the following components on your dedicated component branch in the directory web/components, these components are used throughout this ticket, along with #122 and #123, and will be merged into frontend branches as they are completed. Remember, components should be mobile friendly! See components/atoms/Button.tsx and components/atoms/TextInput.tsx for examples

• Full-Page loading screen (create components/logos/Loading.tsx)
• Logo - half page on Desktop and top of screen on Mobile (create components/logos/HalfScreen.tsx)
• Sign In/Sign Up with Google button - add to or extend existing Button component (edit components/atoms/Button.tsx)
• Error states - add to Textbox component (edit components/atoms/TextInput.tsx)
• Error banners - users should be able to close them (create components/molecules/Banner.tsx)
  • Use Button component with icon for X symbol

Important Information

• Make pages for mobile first, then extend them to Desktop
  • Use Tailwind's reactive design breakpoints to style for both mobile and web: https://tailwindcss.com/docs/responsive-design
• Use DevTools to resize the screen for different screen sizes including tablets both vertically and horizontally
• Test this on your phone, it's important for making sure the keyboard doesn't cover anything and native components look alright!

Testing on Phone

Run the program on your computer using npm run dev, then on your phone on different common browsers (Google Chrome, Firefox, and Safari if iPhone), go to https://[your IP address]:[port (probably 3000)]/page. Example: https://123.45.67.89:3000/login. Make sure both your phone and laptop are connected to the same WiFi.

How to find your computer's IP Address:

• Windows: ipconfig then scroll to Wireless LAN adapter Wi-Fi -> IPv4 Address
• Mac: ipconfig getifaddr en0

Don't hesitate to Slack me if you need any help or have any questions :D We can message or jump into a Huddle meeting as needed!