From 69dcd53b9f1b81457ae6daa0df04e5a7d7fb1e02 Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Fri, 3 Nov 2023 09:27:25 -0400
Subject: [PATCH] Tidy

---
 src/components/Login/Login.tsx  | 21 ++++++++--------
 src/components/Login/Signup.tsx | 43 ++++++++++++---------------------
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index f40da23f77..7de3530dc4 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -6,6 +6,7 @@ import {
   Grid,
   Link,
   TextField,
+  TextFieldProps,
   Typography,
 } from "@mui/material";
 import {
@@ -84,6 +85,14 @@ export default function Login(): ReactElement {
     }
   };
 
+  const defaultTextFieldProps: TextFieldProps = {
+    inputProps: { maxLength: 100 },
+    margin: "normal",
+    required: true,
+    style: { width: "100%" },
+    variant: "outlined",
+  };
+
   return (
     <Grid container justifyContent="center">
       <Card style={{ width: 450 }}>
@@ -96,36 +105,28 @@ export default function Login(): ReactElement {
 
             {/* Username field */}
             <TextField
+              {...defaultTextFieldProps}
               autoComplete="username"
               autoFocus
               error={usernameError}
               helperText={usernameError ? t("login.required") : undefined}
               id={LoginId.FieldUsername}
-              inputProps={{ maxLength: 100 }}
               label={t("login.username")}
-              margin="normal"
               onChange={handleUpdateUsername}
-              required
-              style={{ width: "100%" }}
               value={username}
-              variant="outlined"
             />
 
             {/* Password field */}
             <TextField
+              {...defaultTextFieldProps}
               autoComplete="current-password"
               error={passwordError}
               helperText={passwordError ? t("login.required") : undefined}
               id={LoginId.FieldPassword}
-              inputProps={{ maxLength: 100 }}
               label={t("login.password")}
-              margin="normal"
               onChange={handleUpdatePassword}
-              required
-              style={{ width: "100%" }}
               type="password"
               value={password}
-              variant="outlined"
             />
 
             {/* "Forgot password?" link to reset password */}
diff --git a/src/components/Login/Signup.tsx b/src/components/Login/Signup.tsx
index 1db29ebff0..46dc3d582a 100644
--- a/src/components/Login/Signup.tsx
+++ b/src/components/Login/Signup.tsx
@@ -4,6 +4,7 @@ import {
   CardContent,
   Grid,
   TextField,
+  TextFieldProps,
   Typography,
 } from "@mui/material";
 import {
@@ -115,8 +116,7 @@ export default function Signup(props: SignupProps): ReactElement {
     e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
     field: SignupField
   ): void => {
-    const partialRecord = { [field]: e.target.value };
-    setFieldText((prev) => ({ ...prev, ...partialRecord }));
+    setFieldText((prev) => ({ ...prev, [field]: e.target.value }));
   };
 
   const signUp = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
@@ -132,10 +132,10 @@ export default function Signup(props: SignupProps): ReactElement {
     // Check for bad field values.
     const err: SignupError = {
       [SignupField.Name]: !name,
+      [SignupField.Username]: !meetsUsernameRequirements(username),
       [SignupField.Email]: !email,
       [SignupField.Password1]: !meetsPasswordRequirements(password1),
       [SignupField.Password2]: password1 !== password2!,
-      [SignupField.Username]: !meetsUsernameRequirements(username),
     };
 
     if (Object.values(err).some((e) => e)) {
@@ -147,6 +147,14 @@ export default function Signup(props: SignupProps): ReactElement {
     }
   };
 
+  const defaultTextFieldProps: TextFieldProps = {
+    inputProps: { maxLength: 100 },
+    margin: "normal",
+    required: true,
+    style: { width: "100%" },
+    variant: "outlined",
+  };
+
   return (
     <Grid container justifyContent="center">
       <Card style={{ width: 450 }}>
@@ -159,6 +167,7 @@ export default function Signup(props: SignupProps): ReactElement {
 
             {/* Name field */}
             <TextField
+              {...defaultTextFieldProps}
               autoComplete="name"
               autoFocus
               error={fieldError[SignupField.Name]}
@@ -166,68 +175,52 @@ export default function Signup(props: SignupProps): ReactElement {
                 fieldError[SignupField.Name] ? t("login.required") : undefined
               }
               id={SignupId.FieldName}
-              inputProps={{ maxLength: 100 }}
               label={t("login.name")}
-              margin="normal"
               onChange={(e) => updateField(e, SignupField.Name)}
-              required
-              style={{ width: "100%" }}
               value={fieldText[SignupField.Name]}
-              variant="outlined"
             />
 
             {/* Username field */}
             <TextField
+              {...defaultTextFieldProps}
               autoComplete="username"
               error={fieldError[SignupField.Username]}
               helperText={t("login.usernameRequirements")}
               id={SignupId.FieldUsername}
-              inputProps={{ maxLength: 100 }}
               label={t("login.username")}
-              margin="normal"
               onBlur={() => checkUsername()}
               onChange={(e) => updateField(e, SignupField.Username)}
-              required
-              style={{ width: "100%" }}
               value={fieldText[SignupField.Username]}
-              variant="outlined"
             />
 
             {/* Email field */}
             <TextField
+              {...defaultTextFieldProps}
               autoComplete="email"
               error={fieldError[SignupField.Email]}
               id={SignupId.FieldEmail}
-              inputProps={{ maxLength: 100 }}
               label={t("login.email")}
-              margin="normal"
               onChange={(e) => updateField(e, SignupField.Email)}
-              required
-              style={{ width: "100%" }}
               type="email"
               value={fieldText[SignupField.Email]}
-              variant="outlined"
             />
 
             {/* Password field */}
             <TextField
+              {...defaultTextFieldProps}
               autoComplete="new-password"
               error={fieldError[SignupField.Password1]}
               helperText={t("login.passwordRequirements")}
               id={SignupId.FieldPassword1}
-              inputProps={{ maxLength: 100 }}
               label={t("login.password")}
-              margin="normal"
               onChange={(e) => updateField(e, SignupField.Password1)}
-              required
-              style={{ width: "100%" }}
               type="password"
               value={fieldText[SignupField.Password1]}
-              variant="outlined"
             />
 
             {/* Confirm Password field */}
             <TextField
+              {...defaultTextFieldProps}
               autoComplete="new-password"
               error={fieldError[SignupField.Password2]}
               helperText={
@@ -236,14 +229,10 @@ export default function Signup(props: SignupProps): ReactElement {
                   : undefined
               }
               id={SignupId.FieldPassword2}
-              inputProps={{ maxLength: 100 }}
               label={t("login.confirmPassword")}
-              margin="normal"
               onChange={(e) => updateField(e, SignupField.Password2)}
-              style={{ width: "100%" }}
               type="password"
               value={fieldText[SignupField.Password2]}
-              variant="outlined"
             />
 
             {/* "Failed to sign up" */}