Membership Application: Creating a UI For New Members of RPRC

[ZackHoang]

Purpose

New individuals and organizations will need a section for creating a new account (sign up) and filling in their necessary credentials for RPRC. The assignee for this issue will be responsible for creating the UI and the logic needed to route between pages, validating form fields as well as confirming users when an application has been submitted. See Dec 21 Crit page on our Figma design file for details, specifically these frames as attached

Acceptence Criteria

• On the top bar, clicking on Join Us will lead users to the Desktop 94 frame.
• On Desktop 94 frame, The Existing Member box's button should be called Log In rather than Sign In. This is because Sign In and Sign Up typically means account creation and users should already have created an account if they are an existing member.
• On Application 1 frame, users should only be able to ONLY sign up and not log in. On this same frame, include another field called Confirm Password.

• For every form field on these frames, mark them as red if users click submit without filling in anything or include invalid data. If data is valid, highlight them as green. Use RegExp to check.
• All UI elements are developed to behave and look the same as the design as much as possible with responsiveness in mind (at minium 320px)

Additional Comments

• When making the UI, don't worry about making HTTP requests to our back-end yet, make a some mock API calls when developing and testing. Also don't worry about the specific styling yet, make use of Shadcn's default components and have the correct layout across different screen sizes.

NICE TO HAVE(s)

• On Application 2 frame, in the Address Information section, we could look for any API that supports Canadian address autofilling (ex: as a user type out 123 ABC Street, a list of possible address can appear under the Mailing Address field), which help speed things up a little bit. Then, City and Province fields can be dropdown of all possible cities and provinces in Canada. This feature is assuming RPRC will only working with Canadian clients. One possible API to facilitate this feature is Canada Post's Address