account
Overview
Editor
Desktop
Mobile
Why does this page exist?
For Users to Edit their Account Information
Users need a way to edit their account information easily and quickly. After the Current User adds or edits their information using the forms on this page, it is then displayed on their profile page and wherever it's needed through the application.
Who can access this page?
Logged-In Users
Only Users that are logged-in with an account can access this page. This means that the re-direct workflows folder ensures that Users can only access their own account page.
If the Current User is logged-in with an account, but has navigated to the page using the URL "www.[yourwebsitename].com/account/" instead of what it should be "www.[yourwebsitename].com/account/[the User's unique ID]", the Current User will be redirected to the homepage.
If the Current User is not logged-in, they will be redirected to the homepage.
If the Current User is logged-in, but is somehow trying to access a different User's account page, they will be redirected to the homepage.
What does this page allow my Users to do?
Change their Email/Password
Users can change their email or password by clicking on the Button Change Email Address (Shows Popup)
and Button Change Password (Shows Popup)
elements. These buttons' workflows open popups that allow the Current User to edit that information.
Change their First Name, Last Name, Biography & Website
Users can change their first name, last name, personal website and biography. Once the Current User changes their information and clicks the Button Save Changes
element, that button's workflow saves their updated information to the database.
Should a User make changes to that information, but click "Cancel" or navigate away from the page without clicking "Save", their changes will not be saved.
Change their Profile Picture
Users can change their profile picture by using the PictureUploader
element on this page. When the Current User uploads a new picture, a group containing a green checkmark and a red X will appear:
If the Current User clicks the green checkbox icon, their new profile picture is saved to the database, and the old profile picture file is removed from your app's storage.
If the Current User clicks the Icon Checkmark (Save New Picture)
, their new profile picture is saved to the database, and the old profile picture file is removed from your app's file storage.
If the Current User clicks the Icon Delete (Don't Save New Picture)
, their profile picture will not be changed, and the new image file that was just uploaded will be removed from your app's file storage.
Delete their Account
Users can delete their account by clicking the Button Delete Account (Opens Are You Sure? Popup)
element.
If the Current User is sure they would like to delete their account, they will click the Delete Account Button (Final)
element to permanently delete their account.
When a User deletes their account, this action cannot be undone.
Where do my Users click in order to go to this page?
Within the Desktop Navigation Reusable Elements
This reusable element is on the left-hand side of the screen when the current page width is greater than 887 pixels in width):
Within the Header Navigation
Reusable Elements
Header Navigation
Reusable ElementsThis link is visible when the Current User is logged in and viewing the header_navigation reusable element:
Within the Mobile Submenu
Reusable Elements
Mobile Submenu
Reusable ElementsThis reusable element becomes visible when the page width is less than or equal to 887 pixels in width:
Within the Mobile Menu (List)
Reusable Elements
Mobile Menu (List)
Reusable ElementsThis link is shown within the mobile menu (list)
reusable element on all pages.
On their Profile Page, by clicking either the "Edit Profile" or "Edit" Buttons
Within the User Picture/Dropdown Reusable Elements
Desktop:
Mobile:
When are my Users taken to this page?
After signing up, users are immediately navigated to the Onboard page which prompts them to complete their profile. When finished, they are taken to this page.
What should I keep in mind about this page's workflows?
When the Current User changes their email, password, or profile picture, those inputs' save button elements save those new values. (The Current User doesn't need to click the Button Save Changes
element at the bottom in addition to those elements' save buttons.)
Button Update (Change Email)
element
This button's workflow save the Current User's new password.
Button Update (Change Password)
element
This button's workflow save the Current User's new password.
Group Checkmark Save Picture
element
This button's workflow save the Current User's new profile picture.
What else should I keep in mind about this page's design?
The admin page shows the desktop navigation
, mobile header
, and mobile submenu
reusable elements conditionally, depending on the current page width.
Here you can see that the desktop navigation
is shown when the current page width is greater than 887 pixels. Once the page width is less than 887 pixels, the desktop navigation
element becomes hidden (using a responsive, hiding rule) and the mobile header
and mobile submenu
reusable elements are shown, so the Current User can easily navigate the application.
When the Current User clicks the hamburger menu icon within the mobile submenu
reusable element, the admin page's FG - Mobile Menu
and FG - Fade Overlay
elements are shown:
In order for the FG - Mobile Menu
and FG - Fade Overlay
elements to display correctly, they should always be the same height as the page, and above the other elements on the page.
Last updated