diff --git a/src/pages/RegisterPage/RegisterForm.tsx b/src/pages/RegisterPage/RegisterForm.tsx index 8da2f6a7..31441ca1 100644 --- a/src/pages/RegisterPage/RegisterForm.tsx +++ b/src/pages/RegisterPage/RegisterForm.tsx @@ -1,5 +1,6 @@ import * as Yup from "yup"; import { useNavigate, useLocation } from "react-router-dom"; +import InputAdornment from "@mui/material/InputAdornment"; import { Form, TextInput, PasswordInput } from "@components"; import { useAuthService } from "@hooks"; @@ -9,7 +10,8 @@ export const RegisterForm = () => { const nav = useNavigate(); const handleSubmit = async (values: Parameters[0]) => { - const { success } = await registerNewUser(values); + // Add "@" prefix to "handle" + const { success } = await registerNewUser({ ...values, handle: `@${values.handle}` }); if (success) { /* If the user registered AFTER selecting a subscription from the /products page, @@ -31,6 +33,12 @@ export const RegisterForm = () => { validationSchema={REGISTER_FORM.SCHEMA} onSubmit={handleSubmit} > + @ + }} + /> @@ -41,6 +49,7 @@ export const RegisterForm = () => { const REGISTER_FORM = { INITIAL_VALUES: { + handle: "", phone: "", email: "", password: "", @@ -55,11 +64,15 @@ const REGISTER_FORM = { }, SCHEMA: Yup.object().shape( { + handle: Yup.string() + .matches( + /^[a-zA-Z0-9_]{3,50}$/, + "Must be between 3-50 characters, and only contain letters, numbers, and underscores." + ) + .required("Please choose a handle (this is how other users will identify you)"), phone: Yup.string() .matches(/^\d{10}$/, "Must be a valid phone number.") - .required( - "Please provide a phone number (this will help your contacts connect with you on Fixit)" - ), + .required("Please provide a phone number"), email: Yup.string() .email("Invalid email") .max(50, "Email must be fewer than 50 characters.") diff --git a/src/pages/RegisterPage/RegisterPage.tsx b/src/pages/RegisterPage/RegisterPage.tsx index 35fd0175..0c764eca 100644 --- a/src/pages/RegisterPage/RegisterPage.tsx +++ b/src/pages/RegisterPage/RegisterPage.tsx @@ -24,26 +24,23 @@ export const RegisterPage = () => (

User Registration

-
-
- -
+
+
diff --git a/src/services/authService.ts b/src/services/authService.ts index 132dd0c4..fcd0596d 100644 --- a/src/services/authService.ts +++ b/src/services/authService.ts @@ -33,7 +33,7 @@ type AuthServiceCredentials = { googleAccessToken?: string; }; -type RegisterNewUserArgs = Required> & +type RegisterNewUserArgs = Required> & AuthServiceCredentials; type RegisterNewUserReturnValue = {