[FE] My profile - Employee POV

[wiktoriasalamon]

Requirements:

• According to the designs.
• Breadcrumbs should be displayed at the top of the page. Clicking a link redirects the user to the specified subpage.
• "My Profile" is accessible to employees by clicking the avatar in the top right corner of the page or by clicking their profile on the "People" subpage.
• Employee data:
  • Employees can only edit their profile pictures.
  • All account details can be edited by a manager.
  • Available sections:
  • Personal Details: Avatar, Full name, Email
  • Ladders: Main and optional additional
  • Notifications: Notifications settings
• Notification settings:
  • Employees can turn notifications on or off on Slack and email by checking or unchecking the boxes.
• Editing the profile picture: The default avatar is generated based on the employee's initials.
  • Clicking the pencil icon next to the profile picture opens the system files dialog, allowing the user to select a picture to upload.
  • Once the picture is selected, a pop-up opens indicating that the file is being uploaded - the animated circle in the centre of the pop-up. Design
  • After the picture is uploaded, the user sees the uploaded picture and can:
  • Change the size of the picture by dragging the slider under the picture.
  • Change the position of the picture by dragging it to fit the circular frame.
  • Cancel the action by clicking the "Cancel" button.
  • Confirm the action and set the profile picture by clicking the "Save" button.
  • Users can delete their profile picture by clicking the trash bin icon next to it:
  • A pop-up appears informing that the profile picture will revert to the default one. Design
  • Users can cancel the action by clicking the "Cancel" button or confirm the action by clicking the "Delete Photo" button.

Tasks:

• [ ] FE
• [ ] BE

Link to designs:

Figma

[kellton-sarna]

To be tested (once BE task done):

1. Available sections: Ladders: Main and optional additional Notifications: Notifications settings
2. Editing profile picture