Update HTML components to MUI: ./src/components/auth/Auth.js

[trillium]

Overview

Review all components in ./src/components/Auth.js and replace all standard HTML components with applicable MUI components.

Action Items

• Review components in: ./src/components/Auth.js and search for any standard HTML components.
  • IF all components are already updated to relevant MUI:
    • Comment on this issue that all components are already updated to MUI.
    • Close the issue & check the box associated with this issue on the MUI issue epic
    • Move on to the next MUI issue
  • IF standard HTML components are found in the file:
    • Replace these standard HTML components with applicable MUI components.
    • Make a PR for this file.
    • If you would like to continue working on MUI issues, move on to the next issue in the MUI epic
• If you run into any questions, add a comment to the issue and tag "@trillium"

Resources

https://mui.com/base-ui/all-components/

[freaky4wrld]

@spiteless the file has instances of elements, needs to be converted to MUI-components, was trying to locally run the dev-environment, but it's not running. As suggested have tried to run the backend and fronted separately but no signs of error except warning to update Browserslist

Browserslist: caniuse-lite is outdated. Please run:
[1]   npx update-browserslist-db@latest
[1]   Why you should do it regularly: https://github.com/browserslist/update-db#readme
[1] Compiled with warnings.
[1] 
[1] ./src/pages/ManageProjects.js
[1]   Line 46:6:   React Hook useCallback has a missing dependency: 'EventsApiService'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
[1]   Line 103:5:  React Hook useCallback has a missing dependency: 'EventsApiService'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

[freaky4wrld]

@spiteless

• Just want to confirm html components like <form>, <label>, <input> and <button> should be left alone??
• Also the link provided in the issue redirects to Base UI instead of Material UI, is it the correct one?

[JackHaeg]

@spiteless Can you please assist Nayan on the above question?

[JackHaeg]

@spiteless Can you please respond to Nayan's questions above when you get a chance?

[trillium]

It depends.

• <button> should be replaced with the MUI <Button> every time
• <label> can be replaced by
  • https://mui.com/material-ui/api/input-label/
  • https://mui.com/material-ui/api/form-helper-text/
  • https://mui.com/material-ui/api/form-control-label/
• <input> should always be replaced, replacement changes based on type
  • text area --> https://mui.com/material-ui/react-text-field/
  • radio button --> https://mui.com/material-ui/react-radio-button/
• <form> can be replaced by
  • https://mui.com/material-ui/api/form-control/