Content
View differences
Updated by Henriette Darge almost 2 years ago
### 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] Remove the "+" button at the end of the 2FA devices table (TBC)
* [ ] Remove the intermediate page "Add 2FA device"
* [x] Modify the title and help text of each dropdown option of options as follows:
* [ ] [x] <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>
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]
* [ ] Remove the intermediate page "Add 2FA device"
* [x]
* [ ]
* [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>