Add visual indicators to required form fields across the application to

improve UX. Updated Label component to support `required` prop and added
indicators to employee, location, ride, and rider forms. MUI components
use `required` prop; DatePicker/TimePicker use asterisks in label strings.

Author: eicyer

frontend/src/components/EmployeeModal/EmployeeInfo.tsx

@@ -27,7 +27,7 @@ const EmployeeInfo = ({
   return (
     <div className={styles.inputContainer}>
       <div className={styles.col1}>
-        <Label htmlFor="firstName">First Name</Label>
+        <Label htmlFor="firstName" required>First Name</Label>
         <Input
           id="firstName"
           type="text"
@@ -41,7 +41,7 @@ const EmployeeInfo = ({
         )}
       </div>
       <div className={styles.col2}>
-        <Label htmlFor="lastName">Last Name</Label>
+        <Label htmlFor="lastName" required>Last Name</Label>
         <Input
           id="lastName"
           type="text"
@@ -55,7 +55,7 @@ const EmployeeInfo = ({
         )}
       </div>
       <div className={styles.col1}>
-        <Label htmlFor="netid">NetID</Label>
+        <Label htmlFor="netid" required>NetID</Label>
         <Input
           id="netid"
           type="text"
@@ -69,7 +69,7 @@ const EmployeeInfo = ({
         )}
       </div>
       <div className={styles.col2}>
-        <Label htmlFor="phoneNumber">Phone Number</Label>
+        <Label htmlFor="phoneNumber" required>Phone Number</Label>
         <Input
           id="phoneNumber"
           type="tel"

frontend/src/components/EmployeeModal/StartDate.tsx

@@ -14,7 +14,7 @@ const StartDate = ({ existingDate }: StartDateProps) => {
 
   return (
     <div className={cn(styles.col1, styles.workingHours)}>
-      <Label htmlFor="startDate">Start Date:</Label>
+      <Label htmlFor="startDate" required>Start Date:</Label>
       <Input
         id="startDate"
         type="date"

frontend/src/components/FormElements/FormElements.tsx

@@ -13,13 +13,19 @@ import {
 type LabelType = React.DetailedHTMLProps<
   React.LabelHTMLAttributes<HTMLLabelElement>,
   HTMLLabelElement
->;
+> & {
+  required?: boolean;
+};
 
-export const Label = ({ className, children, ...props }: LabelType) => (
-  <label {...props} className={cn(styles.label, className)}>
-    {children}
-  </label>
-);
+export const Label = ({ className, children, required, ...props }: LabelType) => {
+  console.log('Label required:', required); // Debug line
+  return (
+    <label {...props} className={cn(styles.label, className)}>
+      {children}
+      {required && <span className={styles.requiredIndicator}> *</span>}
+    </label>
+  );
+};
 
 // This should only be used when you don't want a label to visually appear on screen
 // Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
@@ -78,7 +84,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         onClick={disabled ? undefined : onClick} // Disable click handler if disabled
         disabled={disabled}
-        // onClick={onClick}
+      // onClick={onClick}
       >
         {children}
       </button>

frontend/src/components/FormElements/formelements.module.css

@@ -53,21 +53,25 @@
   border: 0.063rem solid #000000;
   box-sizing: border-box;
 }
+
 .primaryBtn:focus {
   box-shadow: 0 0 0 3px #0075db;
 }
+
 .secondaryBtn {
   background-color: white;
   border: 0.063rem solid #000000;
   box-sizing: border-box;
 }
+
 .secondaryBtn:focus {
   box-shadow: 0 0 0 3px #0075db;
 }
 
 .srlabel {
   border: 0;
-  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px 1px 1px 1px);
+  /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   margin: -1px;
@@ -76,6 +80,7 @@
   position: absolute;
   width: 1px;
 }
+
 ::-webkit-input-placeholder {
   color: #767676;
   opacity: 1;
@@ -97,3 +102,12 @@
   color: #767676;
   opacity: 1;
 }
+
+.requiredIndicator {
+  color: #eb0023 !important;
+  /* Force red color */
+  font-weight: bold;
+  font-size: 1.1em;
+  margin-left: 3px;
+  display: inline-block;
+}

frontend/src/components/LocationModal/LocationModal.tsx

@@ -115,7 +115,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
           aria-labelledby="location-modal"
         >
           <div className={styles.inputContainer}>
-            <Label htmlFor="name">Name</Label>
+            <Label htmlFor="name" required>Name</Label>
             <Input
               {...register('name', { required: true })}
               type="text"
@@ -128,7 +128,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
               <p className={styles.errorMsg}>Please enter a name</p>
             )}
 
-            <Label htmlFor="address">Address</Label>
+            <Label htmlFor="address" required>Address</Label>
             <Input
               {...register('address', { required: true, validate: isAddress })}
               type="text"
@@ -141,7 +141,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
               <p className={styles.errorMsg}>{errors.address.message}</p>
             )}
 
-            <Label htmlFor="info">Pickup/Dropoff Info</Label>
+            <Label htmlFor="info" required>Pickup/Dropoff Info</Label>
             <Input
               {...register('info', { required: true })}
               type="text"
@@ -156,7 +156,7 @@ const LocationModal: React.FC<LocationModalProps> = ({
               </p>
             )}
 
-            <Label htmlFor="tag">Tag</Label>
+            <Label htmlFor="tag" required>Tag</Label>
             <select
               {...register('tag', { required: true })}
               id="tag"

frontend/src/components/Modal/RiderModalInfo.tsx

@@ -180,7 +180,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
     <form onSubmit={handleSubmit(beforeSubmit)} className={styles.form}>
       <div className={cn(styles.inputContainer, styles.rideTime)}>
         <div className={cn(styles.gridR1, styles.gridCSmall1)}>
-          <Label className={styles.label} htmlFor="name">
+          <Label className={styles.label} htmlFor="name" required>
             Name:{' '}
           </Label>
           <Input
@@ -196,7 +196,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
         </div>
 
         <div className={cn(styles.gridR1, styles.gridCSmall2)}>
-          <Label className={styles.label} htmlFor="netid">
+          <Label className={styles.label} htmlFor="netid" required>
             NetID:{' '}
           </Label>
           <Input
@@ -216,7 +216,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
         </div>
 
         <div className={cn(styles.gridR1, styles.gridCSmall3)}>
-          <Label className={styles.label} htmlFor="phoneNumber">
+          <Label className={styles.label} htmlFor="phoneNumber" required>
             Phone Number:{' '}
           </Label>
           <Input
@@ -235,7 +235,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
         </div>
 
         <div className={cn(styles.gridR2, styles.gridCBig1)}>
-          <Label className={styles.label} htmlFor="needs">
+          <Label className={styles.label} htmlFor="needs" required>
             Needs:{' '}
           </Label>
           <div className={styles.needsContainer}>
@@ -300,7 +300,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
         </div>
 
         <div className={cn(styles.gridR2, styles.gridCBig2)}>
-          <Label className={styles.label} htmlFor="address">
+          <Label className={styles.label} htmlFor="address" required>
             Address:{' '}
           </Label>
           <Input
@@ -322,7 +322,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
           <p>Duration</p>
           <div className={styles.lastRow}>
             <div>
-              <Label className={styles.label} htmlFor="joinDate">
+              <Label className={styles.label} htmlFor="joinDate" required>
                 Join Date:{' '}
               </Label>
               <Input
@@ -341,7 +341,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
               <p>→</p>
             </div>
             <div>
-              <Label className={styles.label} htmlFor="endDate">
+              <Label className={styles.label} htmlFor="endDate" required>
                 End Date:{' '}
               </Label>
               <Input

frontend/src/components/RequestRideModal/RequestRideInfo.tsx

@@ -136,13 +136,13 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
       {((modalType === 'CREATE' && watchRepeating) ||
         modalType === 'EDIT_REGULAR' ||
         modalType === 'EDIT_SINGLE_RECURRING') && (
-        <Label htmlFor={'startDate'} className={styles.largeLabel}>
-          Date
-        </Label>
-      )}
+          <Label htmlFor={'startDate'} className={styles.largeLabel} required>
+            Date
+          </Label>
+        )}
       <div className={styles.box}>
         {modalType === 'EDIT_ALL_RECURRING' && (
-          <Label className={styles.boldLabel} htmlFor="startDate">
+          <Label className={styles.boldLabel} htmlFor="startDate" required>
             Starts
           </Label>
         )}
@@ -194,7 +194,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
       {showRepeatingInfo && watchRepeating ? (
         <div>
           <div className={styles.box}>
-            <Label className={styles.boldLabel} id="repeats">
+            <Label className={styles.boldLabel} id="repeats" required>
               Repeats
             </Label>
             <div className={styles.radioBox}>
@@ -278,7 +278,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
       </Label>
       <div className={styles.box}>
         <div className={styles.errorBox}>
-          <Label className={styles.label} id="pickupLocation">
+          <Label className={styles.label} id="pickupLocation" required>
             Location
           </Label>
           <select
@@ -307,7 +307,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
           )}
         </div>
         <div className={styles.errorBox}>
-          <Label className={styles.label} id="pickupTime">
+          <Label className={styles.label} id="pickupTime" required>
             Time
           </Label>
           <Input
@@ -383,7 +383,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
       </Label>
       <div className={styles.box}>
         <div className={styles.errorBox}>
-          <Label className={styles.label} id="dropoffLocation">
+          <Label className={styles.label} id="dropoffLocation" required>
             Location
           </Label>
           <select
@@ -413,7 +413,7 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
           )}
         </div>
         <div className={styles.errorBox}>
-          <Label className={styles.label} id="dropoffTime">
+          <Label className={styles.label} id="dropoffTime" required>
             Time
           </Label>
           <Input

frontend/src/components/RiderComponents/RequestRideDialog.tsx

@@ -430,12 +430,12 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
 
   const handleDateChange =
     (field: keyof Pick<FormData, 'date' | 'time' | 'repeatEndDate'>) =>
-    (newDate: Date | null) => {
-      setFormData({
-        ...formData,
-        [field]: newDate,
-      });
-    };
+      (newDate: Date | null) => {
+        setFormData({
+          ...formData,
+          [field]: newDate,
+        });
+      };
 
   const handleRepeatTypeChange = (
     event: React.ChangeEvent<HTMLInputElement>
@@ -493,7 +493,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
         finalDropoff !== null &&
         finalPickup !== null &&
         normalizeAddress(finalDropoff?.address) ===
-          normalizeAddress(finalPickup.address)
+        normalizeAddress(finalPickup.address)
       ) {
         setInputPickUpError(true);
         setInputDropOffError(true);
@@ -588,8 +588,8 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                         backgroundColor: formData.pickupLocation
                           ? '#4caf50'
                           : selectionState === 'pickup'
-                          ? '#2196f3'
-                          : '#e0e0e0',
+                            ? '#2196f3'
+                            : '#e0e0e0',
                         color: 'white',
                         fontSize: '12px',
                       }}
@@ -603,8 +603,8 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                         backgroundColor: formData.dropoffLocation
                           ? '#4caf50'
                           : selectionState === 'dropoff'
-                          ? '#2196f3'
-                          : '#e0e0e0',
+                            ? '#2196f3'
+                            : '#e0e0e0',
                         color: 'white',
                         fontSize: '12px',
                       }}
@@ -691,8 +691,8 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                     Or select from dropdown:
                   </h4>
 
-                  <FormControl fullWidth style={{ marginBottom: '16px' }}>
-                    <InputLabel>Pickup Location</InputLabel>
+                  <FormControl fullWidth required style={{ marginBottom: '16px' }}>
+                    <InputLabel required>Pickup Location</InputLabel>
                     <Select<string>
                       value={formData.pickupLocation?.id || ''}
                       onChange={(event) => {
@@ -744,8 +744,8 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                     </div>
                   )}
 
-                  <FormControl fullWidth>
-                    <InputLabel>Drop-off Location</InputLabel>
+                  <FormControl fullWidth required>
+                    <InputLabel required>Drop-off Location</InputLabel>
                     <Select<string>
                       value={formData.dropoffLocation?.id || ''}
                       disabled={!formData.pickupLocation} //makes ensuring start and end locations are different simpler
@@ -808,7 +808,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                 <LocalizationProvider dateAdapter={AdapterDateFns}>
                   <Stack direction="row" spacing={2}>
                     <DatePicker
-                      label="Date"
+                      label="Date *"
                       value={formData.date}
                       onChange={handleDateChange('date')}
                       slotProps={{
@@ -818,7 +818,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                       }}
                     />
                     <TimePicker
-                      label="Time"
+                      label="Time *"
                       value={formData.time}
                       onChange={handleDateChange('time')}
                       slotProps={{
@@ -850,7 +850,7 @@ const RequestRideDialog: React.FC<RequestRideDialogProps> = ({
                 {formData.repeatType !== 'none' && (
                   <LocalizationProvider dateAdapter={AdapterDateFns}>
                     <DatePicker
-                      label="Repeat End Date"
+                      label="Repeat End Date *"
                       value={formData.repeatEndDate}
                       onChange={handleDateChange('repeatEndDate')}
                       slotProps={{