# Feature DREAM-26 - Update PageHeaders & SubHeaders in the My account pages

Project: Stream Design System
Status: closed
URL: https://community.openproject.org/work_packages/DREAM-26

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 14.5.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable | Behrokh Satarnejad |
| Product manager |  |
| Developers |  |
| Designer | Marc Alcobé |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

### Acceptance criteria

Replace the current toolbar implementation with the new PageHeader component on the (rails) pages of the my account section

- [x] Profile
- [x] Settings
- [x] Change password
- [x] 2fA
- [x] Access tokens
- [x] Session management
- [x] Notification settings
- [x] Email reminders
- [x] Avatar
- [x] Delete account

**For the 2FA page:**

- [x] Make the "+ 2FA device" in the sub-header a drop-down with the available options:
  - [x] Mobile device
  - [x] App-based authenticator
  - [x] WebAuthn
- [x] Modify the title and help text of each dropdown option as follows:
- [ ] <figure class="table op-uc-figure op-uc-figure_align-center"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Mobile phone</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>App-based authenticator</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>WebAuthn</strong></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Receive 2FA code via a text message on your phone each time you log in</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Use a one-time code generated by an authenticator like Authy or Google Authenticator </p></td><td class="op-uc-table--cell"><p class="op-uc-p">Register a FIDO2 device (like YubiKey) or the secure encalve of your mobile device</p></td></tr></tbody></table></figure>
- [x] Remove the "+" button at the end of the 2FA devices table (TBC)
- [x] Remove the intermediate page "Add 2FA device" in the MyAccount section
  - [x] When a user without enabled 2fa, logs into an instace where 2fa is mandatory, that page is still shown to enforce users to select a device

### **Hint for QA/Docs/Marketing**

  - For most pages, only the design of the pageheader should change. There is a now breadcrumb which should be consitent with the left-side menu and it's navigation. 

  - The only real change is the creation of a new two factor authentication device. Previuosly, there was a separate page with some weird tiles. This was replaced by a dropdown on the creation button (see specification above)

**Before**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:426px;" src="/api/v3/attachments/136854/content">

**After**

**<img class="image_resized op-uc-image op-uc-image_inline" style="width:285px;">**

<figure class="image image_resized op-uc-figure" style="width:453px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/136856/content"></div></figure>