account
Last updated
Last updated
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.
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.
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.
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.
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.
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.
This reusable element is on the left-hand side of the screen when the current page width is greater than 887 pixels in width):
Header Navigation Reusable ElementsThis link is visible when the Current User is logged in and viewing the header_navigation reusable element:
Mobile Submenu Reusable ElementsThis reusable element becomes visible when the page width is less than or equal to 887 pixels in width:
Mobile Menu (List) Reusable ElementsThis link is shown within the mobile menu (list) reusable element on all pages.
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.
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.
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.
