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.

The redirect workflows can be accessed on the account page, within the "A. Pageload" folder.

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 Email and Change Password Buttons

Change Email Address Popup

Change Password Popup

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.

Initial Delete Account Button element which shows the Popup Delete Your Account? element which double-checks if the User wants to delete their account.

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.

Clicking Delete schedules an API workflow which deletes the User's account and all of that User's data (except for sent Messages).

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

This link is visible when the Current User is logged in and viewing the header_navigation reusable element:

Within the Mobile Submenu Reusable Elements

This 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

This 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.