Add edit rider modal to student page

Author: anika-4444

frontend/src/components/Modal/RiderModal.tsx

@@ -71,7 +71,13 @@ const RiderModal = ({
   return (
     <>
       <Modal
-        title={!existingRider ? 'Add a Student' : 'Edit a Student'}
+        title={
+          !existingRider
+            ? 'Add a Student'
+            : isRiderWeb
+              ? 'Edit Profile'
+              : 'Edit a Student'
+        }
         isOpen={isOpen}
         currentPage={0}
         onClose={closeModal}

frontend/src/components/Modal/RiderModalInfo.tsx

@@ -251,23 +251,24 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
           )}
         </div>
 
-        <div className={cn(styles.gridR1, styles.gridCSmall3)}>
-          <Label className={styles.label} htmlFor="netid">
-            NetID:{' '}
-          </Label>
-          <Input
-            id="netid"
-            {...register('netid', {
-              required: true,
-              pattern: /^[a-zA-Z]+[0-9]+$/,
-            })}
-            type="text"
-            disabled={isStudentEditing}
-            className={styles.firstRow}
-            aria-required="true"
-          />
-          {errors.netid && <p className={styles.error}>Invalid NetID</p>}
-        </div>
+        {!isStudentEditing && (
+          <div className={cn(styles.gridR1, styles.gridCSmall3)}>
+            <Label className={styles.label} htmlFor="netid">
+              NetID:{' '}
+            </Label>
+            <Input
+              id="netid"
+              {...register('netid', {
+                required: true,
+                pattern: /^[a-zA-Z]+[0-9]+$/,
+              })}
+              type="text"
+              className={styles.firstRow}
+              aria-required="true"
+            />
+            {errors.netid && <p className={styles.error}>Invalid NetID</p>}
+          </div>
+        )}
 
         <div className={cn(styles.gridR2, styles.gridCBig1)}>
           <Label className={styles.label} htmlFor="phoneNumber">
@@ -354,55 +355,55 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
           </div>
         </div>
 
-        <div className={cn(styles.gridR3, styles.gridCAll)}>
-          <p>Duration</p>
-          <div className={styles.lastRow}>
-            <div>
-              <Label className={styles.label} htmlFor="joinDate">
-                Join Date:{' '}
-              </Label>
-              <Input
-                id="joinDate"
-                {...register('joinDate', { required: true })}
-                type="date"
-                aria-required="true"
-                disabled={isStudentEditing}
-                className={styles.riderDate}
-              />
-              {errors.joinDate && (
-                <p className={styles.error}>Please enter a join date</p>
-              )}
-            </div>
-            <div className={styles.to}>
-              <p>→</p>
-            </div>
-            <div>
-              <Label className={styles.label} htmlFor="endDate">
-                End Date:{' '}
-              </Label>
-              <Input
-                id="endDate"
-                {...register('endDate', {
-                  required: true,
-                  validate: (endDate) => {
-                    const joinDate = getValues('joinDate');
-                    return joinDate < endDate;
-                  },
-                })}
-                type="date"
-                aria-required="true"
-                disabled={isStudentEditing}
-                className={styles.riderDate}
-              />
-              {errors.endDate?.type === 'required' && (
-                <p className={styles.error}>Please enter an end date</p>
-              )}
-              {errors.endDate?.type === 'validate' && (
-                <p className={styles.error}>Invalid end time</p>
-              )}
+        {!isStudentEditing && (
+          <div className={cn(styles.gridR3, styles.gridCAll)}>
+            <p>Duration</p>
+            <div className={styles.lastRow}>
+              <div>
+                <Label className={styles.label} htmlFor="joinDate">
+                  Join Date:{' '}
+                </Label>
+                <Input
+                  id="joinDate"
+                  {...register('joinDate', { required: true })}
+                  type="date"
+                  aria-required="true"
+                  className={styles.riderDate}
+                />
+                {errors.joinDate && (
+                  <p className={styles.error}>Please enter a join date</p>
+                )}
+              </div>
+              <div className={styles.to}>
+                <p>→</p>
+              </div>
+              <div>
+                <Label className={styles.label} htmlFor="endDate">
+                  End Date:{' '}
+                </Label>
+                <Input
+                  id="endDate"
+                  {...register('endDate', {
+                    required: true,
+                    validate: (endDate) => {
+                      const joinDate = getValues('joinDate');
+                      return joinDate < endDate;
+                    },
+                  })}
+                  type="date"
+                  aria-required="true"
+                  className={styles.riderDate}
+                />
+                {errors.endDate?.type === 'required' && (
+                  <p className={styles.error}>Please enter an end date</p>
+                )}
+                {errors.endDate?.type === 'validate' && (
+                  <p className={styles.error}>Invalid end time</p>
+                )}
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </div>
 
       <div className={styles.buttonContainer}>
@@ -415,7 +416,11 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
           Cancel
         </Button>
         <Button type="submit" className={styles.submit}>
-          {isEditing ? 'Edit a Student' : 'Add a Student'}
+          {isStudentEditing
+            ? 'Save Changes'
+            : isEditing
+              ? 'Edit a Student'
+              : 'Add a Student'}
         </Button>
       </div>
     </form>

frontend/src/pages/Rider/Settings.tsx

@@ -1,15 +1,18 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import UserDetail, {
   UserContactInfo,
 } from '../../components/UserDetail/legacy/UserDetail';
 import { phone, mail } from '../../icons/userInfo/index';
 import AuthContext from '../../context/auth';
 import pageStyles from '../Admin/page.module.css';
 import { RiderType } from '@carriage-web/shared/types/rider';
+import RiderModal from '../../components/Modal/RiderModal';
+import { Button } from '../../components/FormElements/FormElements';
 
 const Settings = () => {
   const { user } = useContext(AuthContext);
   const netId = user?.email.split('@')[0] || '';
+  const [isEditOpen, setIsEditOpen] = useState(false);
 
   useEffect(() => {
     document.title = 'Settings - Carriage';
@@ -19,7 +22,9 @@ const Settings = () => {
     <main id="main">
       <div className={pageStyles.pageTitle}>
         <h1 className={pageStyles.header}>Settings</h1>
-        <div className={pageStyles.rightSection}></div>
+        <div className={pageStyles.rightSection}>
+          <Button onClick={() => setIsEditOpen(true)}>Edit Profile</Button>
+        </div>
       </div>
       <UserDetail
         firstName={user?.firstName || ''}
@@ -36,6 +41,12 @@ const Settings = () => {
         />
         <UserContactInfo icon={mail} alt="Email" text={user?.email || ''} />
       </UserDetail>
+      <RiderModal
+        existingRider={user as RiderType}
+        isRiderWeb={true}
+        isOpen={isEditOpen}
+        setIsOpen={setIsEditOpen}
+      />
     </main>
   );
 };