search

TBolton2000 / concord

A group project for CSCE 606: Software Engineering at Texas A&M University
0 stars 0 forks source link

User Settings modal #44

Open TBolton2000 opened 3 years ago

TBolton2000 commented 3 years ago

When clicking on the gear icon in the header, it should bring up a Modal. The modal should have a header that says "User Settings" and a button right adjusted that says "Log out." The Modal should also show the User's information: Name and Email with a pencil icon button for each of them in order to change the name or email. Then below that should be 3 text fields and a button for changing the user's password. One for the current, one for the new password, and one for the new password confirmed. Finally a change password button at the bottom.

image

For implementation, please use the Material UI Modal, probably similar to the simple example. Place this code in the src/client/components/Header.tsx

The modal component should be placed after the current logout button so that it is in the array of components to be rendered when the user is logged in.

A quick crash course on how to use the modal:

  1. Create a pair of variables for managing the state of the modal, called open and setOpen from the useState hook.
  2. Put all of the content that you want to render inside of the modal component. The main component should be a component that has a maxWidth of 800 and a minWidth of 500 and margins set to auto. This should make it appear very cleanly. Then add all the content inside of a grid, like you did for the login/signup page.
  3. The user's data should be accessible from the data variable which is coming from the useMeQuery.
  4. You can then move the "Log Out" button into the modal where it is supposed to be.