The settings page is accessed by clicking the gear icon in the upper right of the profile page.

Pages and Links were used to create this functionality.

Refer to the adding page documentation posted here.

Refer to the adding link to page documentation posted here.

To add your own images to the project, you must complete the following steps:

1. Place the image files in the assets directory.
2. Import them to the desired .tsx file. For example: import EditNameButton from "@/assets/edit_name.png";
3. Create an array of the images. Example: const images = [EditNameButton, EditEmailButton, EditPaymentMethodButton, EditUniversityButton, LogoutButton, DeleteAccountButton];
4. Map through the images array to generate buttons with links like so:

{images.map((image, index) => (
             <Link key={index} to={routes[index]}>
               <button>
                  <img src={image} alt={`Button ${index+1}`} style={{width: '200px', height: '65px'}}/>
               </button>
             </Link>
))}

The final result will look something like this:

After clicking the "Edit Name" or "Edit Email" buttons, you will be taken to a page with a text box like such:

To achieve this, four steps must be taken.

1. State the hook to manage the 'name' input value: const [name, setName] = useState("");
2. Create the event handler for the input change:

const handleChange = (event: FormEvent<HTMLInputElement>) => {
    setName(event.currentTarget.value);
};

3. Create the event handler for the form submission. For now we will just print the input. Actual functionality will be added in a future sprint.

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(`New name: ${name}`); 
  };

4. Render the component.

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Enter your new name: 
        <input type="text" value={name} onChange={handleChange} />
      </label>
      
      <input type="submit" value="Submit" />
    </form>
  );
};