Skip to content

Commit

Permalink
added name attribute to step1 fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@Miyuki-L
Miyuki-L committed May 11, 2024
1 parent ab0ba95 commit c2fdfa1
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 59 deletions.
71 changes: 52 additions & 19 deletions frontend/src/components/Step1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ export function Step1({ onSubmit }: Step1Props) {
const [email, setEmail] = useState<string>("");
const [confirmEmail, setConfirmEmail] = useState<string>("");
const [gender, setGender] = useState("");
const [phone, setPhone] = useState("");
const [phoneType, setPhoneType] = useState("");

const handleGenderSelect = (option: string) => {
setGender(option);
};

const handlePhoneSelect = (option: string) => {
setPhone(option);
setPhoneType(option);
};

const handleConfirmEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -102,6 +102,7 @@ export function Step1({ onSubmit }: Step1Props) {
className={styles.inputText}
type="text"
placeholder="Enter First Name Here"
name="firstName"
required
/>
</label>
Expand All @@ -113,6 +114,7 @@ export function Step1({ onSubmit }: Step1Props) {
className={styles.inputText}
type="text"
placeholder="Enter Middle Name Here"
name="middleName"
/>
</label>
</div>
Expand All @@ -123,6 +125,7 @@ export function Step1({ onSubmit }: Step1Props) {
className={styles.inputText}
type="text"
placeholder="Enter Last Name Here"
name="lastName"
required
/>
</label>
Expand All @@ -134,19 +137,20 @@ export function Step1({ onSubmit }: Step1Props) {
className={styles.inputText}
type="text"
placeholder="Enter 2nd Last Name Here"
name="maidenName"
/>
</label>
</div>
<div className={styles.inputBox}>
<label htmlFor="dropDown" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
<label htmlFor="gender" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
Gender<span className={styles.boldRed}>*</span>
<Dropdown options={genders} onSelect={handleGenderSelect}></Dropdown>
<input
className={styles.customDropDown}
type="text"
id="dropDown"
name="dropDown"
value={gender}
id="gender"
name="gender"
defaultValue={gender}
required
></input>
</label>
Expand All @@ -173,20 +177,21 @@ export function Step1({ onSubmit }: Step1Props) {
setEmail(e.target.value);
}}
placeholder="Enter Email Address"
autoComplete="email"
required
/>
</label>
</div>
<div className={styles.inputBox}>
<label htmlFor="dropDown" className={`${styles.inputTitle} ${styles.felonyLabel}`}>
<label htmlFor="phoneType" className={`${styles.inputTitle} ${styles.dropdownLabel}`}>
Phone Type<span className={styles.boldRed}>*</span>
<Dropdown options={devices} onSelect={handlePhoneSelect}></Dropdown>
<input
className={styles.customDropDown}
type="text"
id="dropDown"
name="dropDown"
value={phone}
id="phoneType"
name="phoneType"
defaultValue={phoneType}
required
></input>
</label>
Expand Down Expand Up @@ -214,8 +219,10 @@ export function Step1({ onSubmit }: Step1Props) {
className={styles.inputText}
type="tel"
placeholder="Enter Phone Number"
pattern="[0-9]{10}"
pattern="^\d+$"
autoComplete="tel"
required
name="phone"
/>
</label>
</div>
Expand All @@ -237,41 +244,67 @@ export function Step1({ onSubmit }: Step1Props) {
type="text"
placeholder="Enter Address"
required
name="address"
autoComplete="street-address"
/>
</label>
</div>
<div className={styles.inputBox}>
<label className={styles.inputTitle}>
City<span className={styles.boldRed}>*</span>
<input className={styles.inputText} type="text" placeholder="Enter City" required />
<input
className={styles.inputText}
type="text"
placeholder="Enter City"
name="city"
required
/>
</label>
</div>
<div className={styles.inputBox}>
<label className={styles.inputTitle}>
State<span className={styles.boldRed}>*</span>
<input className={styles.inputText} type="text" placeholder="Enter State" required />
<input
className={styles.inputText}
type="text"
placeholder="Enter State"
name="state"
required
/>
</label>
</div>
<div className={styles.inputBox}>
<label className={styles.inputTitle}>
Zip
<input className={styles.inputText} type="number" placeholder="Enter Zip Code" />
Country<span className={styles.boldRed}>*</span>
<input
className={styles.inputText}
type="text"
placeholder="Enter Country"
name="country"
required
autoComplete="country"
/>
</label>
</div>
<div className={styles.inputBox}>
<label className={styles.inputTitle}>
County
<input className={styles.inputText} type="text" placeholder="Enter County" />
<input
className={styles.inputText}
type="text"
placeholder="Enter County"
name="county"
/>
</label>
</div>
<div className={styles.inputBox}>
<label className={styles.inputTitle}>
Country<span className={styles.boldRed}>*</span>
Zip
<input
className={styles.inputText}
type="text"
placeholder="Enter Country"
required
placeholder="Enter Zip Code"
name="zip"
/>
</label>
</div>
Expand Down
55 changes: 17 additions & 38 deletions frontend/src/components/Step2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ function SchoolSection({ pathNumber }: { pathNumber: number }) {
<input
className={styles.inputText}
type="text"
name={`school_${index}`}
name={`school${index}`}
placeholder="Enter School Name"
required={isRequired}
/>
Expand All @@ -89,7 +89,7 @@ function SchoolSection({ pathNumber }: { pathNumber: number }) {
<input
className={styles.inputText}
type="text"
name={`city_${index}`}
name={`city${index}`}
placeholder="Enter City"
required={isRequired}
/>
Expand Down Expand Up @@ -263,7 +263,7 @@ function ProfessionalAssociationSection() {
<input
className={styles.inputText}
type="text"
name={`email_${index}`}
name={`email${index}`}
placeholder="Enter your Membership"
/>
</label>
Expand All @@ -274,7 +274,7 @@ function ProfessionalAssociationSection() {
<input
className={styles.inputText}
type="text"
name={`memLevel_${index}`}
name={`memLevel${index}`}
placeholder="Enter Membership Level"
/>
</label>
Expand Down Expand Up @@ -305,15 +305,18 @@ function NationalExamSection() {
</div>
<div className={styles.formSectionContainer}>
<div className={styles.inputBox}>
<label htmlFor="dropDown" className={`${styles.inputTitle} ${styles.felonyLabel}`}>
<label
htmlFor="nationalExam"
className={`${styles.inputTitle} ${styles.dropdownLabel}`}
>
National Exam<span className={styles.boldRed}>*</span>
<Dropdown options={examList} onSelect={handleExamSelect}></Dropdown>
<input
className={styles.customDropDown}
type="text"
id="dropDown"
name="dropDown"
value={exam}
id="nationalExam"
name="nationalExam"
defaultValue={exam}
required
></input>
</label>
Expand Down Expand Up @@ -410,8 +413,8 @@ function ICCCourses() {
<div className={styles.formSectionContainer}>
<div className={styles.inputBox}>
<label
htmlFor="dropDown"
className={`${styles.inputTitle} ${styles.felonyLabel}`}
htmlFor={`iccCourse${index}`}
className={`${styles.inputTitle} ${styles.dropdownLabel}`}
>
Courses
<span className={styles.boldRed}>*</span>
Expand All @@ -420,44 +423,20 @@ function ICCCourses() {
<input
className={styles.customDropDown}
type="text"
id="dropDown"
name="dropDown"
value={courseSelect}
id={`iccCourse${index}`}
name={`iccCourse${index}`}
defaultValue={courseSelect}
required
></input>
</label>
</div>
{/* <div className={styles.inputBox}>
<label className={styles.inputTitle}>
Courses<span className={styles.boldRed}>*</span>
<select
className={styles.inputText}
defaultValue={"default"}
id={`courseDrop${course.id}`}
required
>
<option value="default" className={styles.optionDefault} disabled>
Select One
</option>
{courseList.map((dropOption, dropIndex) => (
<option
key={dropIndex}
value={dropOption}
className={dropOption ? styles.optionSelected : styles.optionDefault}
>
{dropOption}
</option>
))}
</select>
</label>
</div> */}
<div className={styles.inputBox}>
<label className={styles.inputTitle}>
Date of Completion<span className={styles.boldRed}>*</span>
<input
className={styles.inputText}
type="text"
name={`complete_${index}`}
name={`iccComplete${index}`}
placeholder="mm/dd/yyyy"
pattern="^(0[1-9]|1[0-2])/(0[1-9]|[1-2][0-9]|3[0-1])/(19|20)\d{2}$"
required
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Step4.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export const Step4: React.FC<StepProps> = ({ next }: StepProps) => {
type="text"
id="dropDown"
name="dropDown"
value={selectedFelonyCharge}
defaultValue={selectedFelonyCharge}
required
></input>
</label>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { NavBar } from "./NavBar.tsx";
import { Page } from "./Page.tsx";
import { Pathway } from "./Pathway.tsx";
import { PathwayTimeline } from "./PathwayTimeline.tsx";
import { Step4 } from "./Step4.tsx";
import { Step1 } from "./Step1.tsx";
import { Step2 } from "./Step2.tsx";
import { Step4 } from "./Step4.tsx";

export {
Page,
Expand Down

0 comments on commit c2fdfa1

Please sign in to comment.