fix: add 'handle' to RegisterNewUser form+type+etc

Nerdware-LLC · Dec 22, 2022 · 18bf2f8 · 18bf2f8
1 parent c15c9b3
commit 18bf2f8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 20 deletions.
diff --git 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<typeof registerNewUser>[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}
     >
+      <TextInput
+        id="handle"
+        InputProps={{
+          startAdornment: <InputAdornment position="start">@</InputAdornment>
+        }}
+      />
       <TextInput id="phone" />
       <TextInput id="email" />
       <PasswordInput id="password" />
@@ -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
@@ -24,26 +24,23 @@ export const RegisterPage = () => (
         <TitleLogo
           styles={{
             logo: { width: "8vw", marginRight: "1rem" },
+            title: { fontSize: "3.5rem" },
             container: { justifyContent: "center" }
           }}
         />
         <h1>User Registration</h1>
       </div>
-      <div>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-evenly",
-            justifyItems: "space-evenly",
-            placeSelf: "center",
-            height: "35vh",
-            width: "25vw",
-            margin: "auto"
-          }}
-        >
-          <RegisterForm />
-        </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-evenly",
+          placeSelf: "center",
+          width: "25vw",
+          margin: "auto"
+        }}
+      >
+        <RegisterForm />
       </div>
     </div>
   </FetchStateContextWrapper>

diff --git a/src/services/authService.ts b/src/services/authService.ts
@@ -33,7 +33,7 @@ type AuthServiceCredentials = {
   googleAccessToken?: string;
 };
 
-type RegisterNewUserArgs = Required<Pick<User, "email" | "phone" | "profile">> &
+type RegisterNewUserArgs = Required<Pick<User, "handle" | "email" | "phone" | "profile">> &
   AuthServiceCredentials;
 
 type RegisterNewUserReturnValue = {