Console warns: My Account

Author: jacbn

src/app/components/elements/inputs/GenderInput.tsx

@@ -33,13 +33,13 @@ export const GenderInput = ({className, userToUpdate, setUserToUpdate, submissio
         </p>
         <StyledDropdown 
             id={`${idPrefix}-gender-select`}
-            value={userToUpdate && userToUpdate.gender}
+            value={userToUpdate && userToUpdate.gender || "UNKNOWN"}
             invalid={submissionAttempted && required && !validateUserGender(userToUpdate)}
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 setUserToUpdate(Object.assign({}, userToUpdate, {gender: e.target.value}))
             }
         >
-            <option value="UNKNOWN" selected disabled hidden></option>
+            <option value="UNKNOWN" disabled hidden></option>
             <option value="FEMALE">Female</option>
             <option value="MALE">Male</option>
             <option value="OTHER">Other gender identity</option>

src/app/components/elements/inputs/StyledCheckbox.tsx

@@ -10,7 +10,7 @@ import classNames from "classnames";
 
 export const StyledCheckbox = (props: InputProps & {partial?: boolean}) => {
 
-    const {label, ignoreLabelHover, className, bsSize, partial, ...rest} = props;
+    const {label, ignoreLabelHover, className, bsSize, partial, invalid, ...rest} = props;
 
     const [checked, setChecked] = useState(props.checked ?? false);
     const id = useMemo(() => {return (props.id ?? "") + "-" + v4();}, [props.id]);
@@ -24,7 +24,7 @@ export const StyledCheckbox = (props: InputProps & {partial?: boolean}) => {
         setChecked(props.checked ?? false);
     }, [props.checked]);
 
-    return <div className={classNames("styled-checkbox-wrapper", {"is-invalid": props.invalid, "checkbox-small": bsSize === "sm"})}>
+    return <div className={classNames("styled-checkbox-wrapper", {"is-invalid": invalid, "checkbox-small": bsSize === "sm"})}>
         <div className={classNames({"me-2 my-2": label})}>
             {isAda && checked && <div className="tick"/>}
             <input {...rest} id={id} type="checkbox" className={classNames(className ?? "", "d-block", {"checked": checked, "icon-checkbox-off": !partial && !checked, "icon-checkbox-selected": !partial && checked})}

src/app/components/elements/inputs/TogglablePasswordInput.tsx

@@ -8,16 +8,18 @@ interface TogglablePasswordInputProps extends InputProps {
 export const TogglablePasswordInput = (props: TogglablePasswordInputProps) => {
     const [showPassword, setShowPassword] = useState(false);
 
+    const {feedbackText, ...rest} = props;
+
     return <InputGroup>
         <Input
-            {...props}
+            {...rest}
             type={showPassword ? "text" : "password"}
         />
         <button type="button" tabIndex={-1} className="inline-form-input-btn" onClick={() => {setShowPassword(!showPassword);}}>
             {showPassword ? "Hide" : "Show"}
         </button>
         <FormFeedback>
-            {props.feedbackText ?? "Please enter a valid password."}
+            {feedbackText ?? "Please enter a valid password."}
         </FormFeedback>
     </InputGroup>;
 };

src/app/components/elements/layout/SidebarLayout.tsx

@@ -1013,8 +1013,8 @@ interface MyAccountSidebarProps extends SidebarProps {
 }
 
 export const MyAccountSidebar = (props: MyAccountSidebarProps) => {
-    const { editingOtherUser, activeTab, setActiveTab } = props;
-    return <ContentSidebar buttonTitle="Account settings" {...props}>
+    const { editingOtherUser, activeTab, setActiveTab, ...rest } = props;
+    return <ContentSidebar buttonTitle="Account settings" {...rest}>
         <div className="section-divider mt-0"/>
         <h5>Account settings</h5>
         {ACCOUNT_TABS.filter(tab => !tab.hidden && !(editingOtherUser && tab.hiddenIfEditingOtherUser)).map(({tab, title}) => 

src/app/components/elements/panels/TeacherConnections.tsx

@@ -188,7 +188,7 @@ export const TeacherConnections = ({user, authToken, editingOtherUser, userToEdi
             </h3>
             <p>Enter the code given by your teacher to create a teacher connection and join a group.</p>
             {/* TODO Need to handle nested form complaint */}
-            <Form onSubmit={processToken} data-testid="teacher-connect-form">
+            <div data-testid="teacher-connect-form">
                 <InputGroup className={"separate-input-group mb-4 d-flex flex-row justify-content-center"}>
                     <Input
                         type="text" placeholder="Enter your code in here" value={authToken || undefined} className="py-4"
@@ -202,7 +202,7 @@ export const TeacherConnections = ({user, authToken, editingOtherUser, userToEdi
                         Connect
                     </Button>
                 </InputGroup>
-            </Form>
+            </div>
 
             <div className="connect-list" data-testid="teacher-connections">
                 <ConnectionsHeader

src/app/components/elements/panels/UserPassword.tsx

@@ -174,15 +174,15 @@ export const UserPassword = (
                     <h4>Linked {siteSpecific("Accounts", "accounts")}</h4>
                     <Col>
                         {connectedAccounts.map((provider) => {
-                            return authButtonsMap[provider](true);
+                            return <React.Fragment key={provider}>{authButtonsMap[provider](true)}</React.Fragment>;
                         })}
                     </Col>
                 </FormGroup>}
                 {unconnectedAccounts.length > 0 && <FormGroup className="form-group">
                     <h4>Link other accounts</h4>
                     <Col>
                         {unconnectedAccounts.map((provider) => {
-                            return authButtonsMap[provider](false);
+                            return <React.Fragment key={provider}>{authButtonsMap[provider](false)}</React.Fragment>;
                         })}
                     </Col>
                 </FormGroup>}