# Epic DREAM-84 - New frontend for 'My account' based on design system
Project: Stream Design System
Status: closed
URL: https://community.openproject.org/work_packages/DREAM-84
## Detailed specification
### Motivation and background information
### Acceptance criteria
### Out of scope
| Attribute | Value |
| --- | --- |
| Mockups | https://www.figma.com/design/pb7hkwUvLmG5Du9NoDaXIX/My-account---Primarisation?node-id=239-10698 |
## Planning
| Attribute | Value |
| --- | --- |
| Roadmap | 2026 Q2 |
| Date | |
| Votes | |
| List | a11y report 2026 |
| Target versions | 17.7.0 |
| Sprint | |
| Backlog bucket | |
| Relevance | |
## Subitems
| ID | Type | Subject | Status | Assignee | Target versions | Project | Priority | Spent time |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| DREAM-386 | Feature | Redesign the "My Account / Settings" page using Primer | closed | | 16.4.0 | Stream Design System | Medium | |
| DREAM-456 | Feature | Primerise Account Settings (Language and Time Zone) pages | closed | | 16.4.0 | Stream Design System | Medium | |
| DREAM-391 | Feature | Redesign the "My Account / Session management" page using Primer | closed | | 16.5.0 | Stream Design System | Medium | |
| DREAM-385 | Feature | Redesign the "My Account" page using Primer | closed | | 17.0.0 | Stream Design System | Medium | |
| DREAM-390 | Feature | Redesign the "My Account / Access token" page using Primer | closed | | 17.1.0 | Stream Design System | Medium | |
| DREAM-387 | Feature | Combine and redesign "Notification settings" and "Email reminders" pages in MyAccount area | closed | | 17.4.0 | Stream Design System | Medium | |
| DREAM-388 | Feature | Add a 'Security' page in Account settings | closed | | 17.6.0 | Stream Design System | Medium | |
| DREAM-559 | Feature | Move Avatars setting into Account setttings | closed | | 17.7.0 | Stream Design System | Medium | |
## Bugs and other work packages
| ID | Type | Subject | Status | Assignee | Target versions | Module |
| --- | --- | --- | --- | --- | --- | --- |
| DREAM-125 | Bug | My Account 2FA page looks quirky | rejected | | | Frontend components and Primer design system |
## Details
| Attribute | Value |
| --- | --- |
| Module | Modules and project features / My account, Frontend components and Primer design system |
| Enterprise plan | Community (COM) |
| Labels | |
## People
| Attribute | Value |
| --- | --- |
| Assignee | |
| Accountable | Henriette Darge |
| Product manager | |
| Designer | Marc Alcobé |
| Developers | OP Dev Dream Team |
| Requested by | |
| Interest by | |
## Estimates and progress
| Attribute | Value |
| --- | --- |
| Work | |
## Description
# Motivation
- We want to push for Primer being used inside OpenProject.
- The settings pages are bit complex technically as there are many helpers involved which create the settings pages
- We have to start somewhere, so the My Account pages might be a good starting point as they are rather small and not too complex
# Acceptance criteria
- Re-organise My Account with the following pages (in bold), and rearrange settings so they are contained in these pages:
- **Account**
- # **Acceptance criteria**
**MyAccount**
* Primerise the My Account / Profile page
* Rename the menu item and the page itself to "Account"
* Restructure the page so that it only contains
* Basic details (name, email)
* User CFs
* Delete Account in the PageHeader
* Remove the page "Delete account"
**Deletion of users**
* The old danger zone is replaced by a new DangerDialog
* The same is true when deleting any user via the administration
* The texts are updated:
* For myself:
* `This account will immediately be removed from the system and the user will no longer be able to log in with their credentials.`
* `All user-specific data will be deleted. Your activity in shared views such as work packages and meetings will not be deleted but instead be associated with a generic 'Deleted user' that cannot be linked to your original account.`
* For others:
* `Your account will immediately be removed from the system and you will will no longer be able to log in using your credentials.`
* `All user-specific data will be deleted. The user's activity in shared views such as work packages and meetings will not be deleted but instead be associated with a generic 'Deleted user' that cannot be linked to the original account.`
- **Avatar**
- **Acceptance criteria**
* Within the MyAccount area:
* Merge Avatar to "Account"
* _Open: How to deal with Avatar only vs Gravatar only vs both enabled?_
* Remove the menu entry and the page "Avatars"
- **Language and region** (split from 'Settings')
- **Acceptance criteria**
* Primerise the My Account / Settings page
* Rename the menu item and the page itself to "Language and region"
* Restructure the page so that it only contains
* Language
* (Date format, out of scope, will be implemeted in ##64651)
* Time zone
- **Interface** (split from 'Settings'; should already be done in \#\#64234)
- Color mode
- Comment order
- Disable keyboard shortcuts
- Alert display (warning on unsaved changes)
- Auto-hide success notification
- Backlog module
- **Notification and email**
- **Acceptance criteria**
* Merge the page "notification settings" and "email reminders" in the MyAccount are into one page called "Notification and email"
* The page should have two tabs
* Notification settings
* Email reminders
* The form content remains unchanged, but will be using Primer form elements (see figma)
* This will also affect the two tabs in admin/users/:id/edit since they share the same logic
- **Security**
- **Acceptance criteria**
* Merge the page "Change password" and "Two-factor authentication" in the Account settings are into one page called "Security"
* The page should be divided in three sections:
* Password
* Two-factor authentication
* Backup codes
* The form content remains unchanged, but will be Primerised
- **Access tokens**
- **Acceptance criteria**
* The My Account / Access token page should have two tabs
* Provider tokens
* Client tokens
* The form content remains unchanged, but will be primerized
* Move the text 'Provider tokens are issue...' to the PageHeader description slot and combine the text from both tabs:
* "Provider tokens are issued by OpenProject, allowing other applications to access it. Client tokens are issued by other applications, allowing OpenProject to access them."
- **Session management**
- **Acceptance criteria**
* Primerise My Account → Session management
* Merge the two tables in current design (sessoins and 'Remembered devices') into one Border Box Table
* With four columns:
* Browser
* Device
* Expires (new)
* For remembered sessions, shows expiry date of the session in relative time ("in {n} days")
* _\[open\] For non-remembered sessions, don't they have an expiry date too? Don't all sessions?_
* Last connection
* For current session, replace the last login date with the word "Current (this device)"
* The last on each is a 'Revoke' action:
* Icon: `x`
* On hover, show Primer tooltip with text, 'Revoke'. On click, show browser native confirmation with text: "Are you sure you want to revoke this session? You will be logged out on this device."
**Translation considerations**
* For 'Revoke', use existing string `button_revoke`
**Visuals**
See [Figma mockups](https://www.figma.com/design/pb7hkwUvLmG5Du9NoDaXIX/Account-Settings--Primerised-?node-id=474-11966). The following is for reference only:
- Primerise the pages as specified in the mockups.
- *Open: What about those form elements that are repeated in the admin/user settings? Will they be primerized as well?*
### Out of scope
- Being able to set a colour for the avatar
## Figma and visuals