Profile Settings Modal Revamp
- Matt Birtch
In Review
Important Links
Description
In line with the work done for both Channel Settings and Product Settings, the Profile settings modal should also be updated to match the proposed UI updates.
No more collapsed sections
Another significant change proposed here is the removal of sections being collapsed. All sections are now fully open without the need to click in to edit individual settings. This should help reduce the number of clicks and surface nested settings to be more discoverable.
Info Section
If login provider handles profile info
In cases where some fields are handled through the login provider, a notice shows at the top and fields are disabled.
Ideally we can display which login provider in the message.
Hovering over read-only fields will display a tooltip.
Profile photo
By default, a user’s profile is set to a fallback image.
The fallback image cannot be removed - it can only be replaced
When the fallback image is displayed, the image formatting and file size limits display under the image.
Users can edit their profile image by clicking on the image or the pencil icon
This will open an OS dialog to choose the image they wish to use
Once a profile image has been added, the ‘Remove photo’ button displays under the image
If a user removes their custom image, it returns to the fallback image
Full name
No changes are proposed here, other than the updated text input UI. If this field is handled by the login provider, it will still be displayed, but in a disabled state.
Username
No changes are proposed here, other than the updated text input UI. If this field is handled by the login provider, it will still be displayed, but in a disabled state.
Real-time validation on blur of the field
Format/requirement validations happen after data has been entered and the field loses focus (on blur).
Nickname
No changes are proposed here, other than the updated text input UI.
Position
No changes are proposed here, other than the updated text input UI. If this field is handled by the login provider, it will still be displayed, but in a disabled state.
No changes are proposed here, other than the updated text input UI. If this field is handled by the login provider, it will still be displayed, but in a disabled state.
Real-time validation on blur of the field
Format/requirement validations happen after data has been entered and the field loses focus (on blur).
Security Section
Not a lot of changes here other than UI improvements and removing the collapsing of each section.
Password
Once a user clicks ‘Change password’, the appropriate fields are displayed. The ‘Current password’ field is immediately focused.
Each of the password fields has a ‘show password’ icon that toggles the visibility of the password. By default the password is hidden.
Multi-factor authentication
No changes are proposed to the behavior of MFA setup or authentication. Just UI Updates.
OAuth 2.0 Applications
If no OAuth 2.0 Applications are set or allowed by the environment, hide this section. No other changes proposed for this section.
Sign-in Method
No changes are proposed to the behavior here (to keep scope down). Just UI updates.
Access history
Rather than just a button, a new section with description is proposed. For now, no changes in behavior are proposed here other than UI updates - to keep scope down.
Active sessions
Rather than just a button, a new section with description is proposed. For now, no changes in behavior are proposed here other than UI updates - to keep scope down.
Behavior for Saving Settings
As soon as a change is made to the settings, a floating footer animates from the bottom within the active content area. Users can continue making changes while this footer is displayed, but they cannot change sections until they either save or cancel the changes they’ve made. See details on the Product Settings documentation as this follows the same behavior.
Changing Tabs while there are unsaved changes
If users attempt to change sections while there are unsaved changes, the footer animates with a shake to highlight that they have unsaved changes. They cannot change tabs until changes are saved or canceled. See details on the Product Settings documentation as this follows the same behavior.