Implement profile pages

[gorkem-bwl]

The profile page of the HRM application has the following tabs:

• Profile: The user can set first name, last name and photo. Email address is immutable. Here the user can also remove the username from the database.

• Password: The user can give the current password and then set a new password. The new password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol.

• Team: This is only visible to the admin - the first logged-in user. The admin can invite a new user or an admin, change the role or remove other users/admins. The organization name can also be changed here. Initially, the organization name can be a random string, like "Stark Industries", and then can be modified by the admin.

The link to Figma is here.

You can also copy and implement some of the code from the Uptime Manager team, as they have almost completely implemented Profile pages.

Tasks:

• Implement profile tab

  • General layout
  • 3 Text field for names
  • Note that 1 there is one immutable text field for password
  • Update link by clicking on the picture functionality
  • "Delete" button
  • "Update" button
  • "Save" button
  • "Delete account" button

• Implement password tab

  • General layout
  • 3 Text field for password and confirmation
  • Text information what is required at the alert box text location (that is currently showing on Figma)
  • Alert text box when requirements are not met
  • "Save" button

• Team section

  • General layout
  • Organization name edit button (pen icon)
  • "Invite team member" button
  • List of members
  • Role selection: a dropdown menu for setting the member's role
  • Bulk action > Delete action for selected members