[FE] Include profile icons

[AnnaH3003]

Description

The UI logic surrounding the log-in, log-out as well as the change of profile details should follow well-known Internet logic.

• In the upper right side, a profile icon should be included
• When the user is logged-in, the respective e-mail part before @ should be visible left to the icon, indicating the logged-in status
• When the user clicks on the profile, his details pop up and can be edited
• On the right side of the user profile, instead of the logout button, another icon should be placed.

Thus, in the end the top row could look something like this:

If the user is not logged in, two buttons should be visible:

Ideally, we would have highlighted the "log in"-Button

User story

1. As a user
2. I want / need UI elements I am familiar with
3. So that I know how to move through the WebApp intuitively

Acceptance criteria

• in the upper left side, a profile icon should be implemented
• when the user is logged-in, left to the profile the email part before the @ is depicted
• on a click on the user icon, the profile details pop-up and can be edited
• on the right side, an icon for logging out is visible

Definition of done (DoD)

• Work products are uploaded to the Github repository and merged to the main branch
• If necessary, the bill of materials section of the planning documents is updated
• Code/feature passes suited tests
• Code is peer-reviewed
• Help documentation (README) is updated
• Fits into our architecture, where possible

DoD general criteria

• Feature has been fully implemented
• Feature has been merged into the mainline
• All acceptance criteria were met
• Product owner approved features
• All tests are passing
• Developers agreed to release

[AnnaH3003]

@irhox we added an idea for the logged-out view