Add Profile Settings screen

[nikita-remeslov]

SPECS from QA Team

Users can create and manage their profiles (Full Name, Nickname, Date of birth, Weight, Height, Sex). Include personal details, fitness goals, and preferences.

1. Personal Information tab (opened by default when user navigates from avatar menu icon in header) should contain:

Avatar photo

• may be uploaded from the user’s device in PNG and JPEG format
• max size 20 MB
• may be cropped and zoomed manually

Field “Full Name”:

• Should have minlength 2 characters and maxlength 60.
• Unicode symbols - Letters (upper- and lowercase, latin and non-Latin), special characters, spaces, emoji are allowed.
• Contains placeholder John Doe
• Spaces before and after text should be cropped

Field “Nickname”:

• Should have minlength 2 characters and maxlength 30.
• Unicode symbols - letters (upper- and lowercase, latin and non-Latin), special characters, spaces, emoji are allowed.
• Contains placeholder MyNickname2024
• Spaces before and after text should be cropped

Field “Date of birth”:

• Date can be entered manually or picked up from the Calendar (absent in design!!!)
• Format of date is DD/MM/YYYY, only past valid dates.
• User should be prevented from entering the wrong date format - e.g. by using input masking.
• Field accepts numbers digits (0-9), any other characters aren’t accepted.
• Contains placeholder, showing format of date

Field “Weight”:

• Should have minlength 2 characters and maxlength 20.
• Digits (0-9), uppercase and lowercase Latin letters (A-Z, a-z), middle-placed comma, middle-placed dot, middle-placed space are allowed.
• Contains placeholder “0 kg”
• Spaces before and after text should be cropped

Field “Height”:

• Should have minlength 2 characters and maxlength 20.
• Digits (0-9), uppercase and lowercase Latin letters (A-Z, a-z), middle- placed comma, middle-placed dot, middle-placed space are allowed.
• Contains placeholder “0 sm”
• Spaces before and after text should be cropped

СOMMENT: All fields are optional for now but smth will be changed

Input “Male/Femail/Prefer not to say”: (last option absent in design)!!!

• Only one option can be selected

Save button (absent in design)!!!

• Should be disabled with empty mandatory fields
• Should be disabled after negative validation

Cancel button (absent in design)!!!

• Should be disabled if no changes were made
• Cancels all unsaved changes

User should be prevented from leaving page without saving changes: e.g. with pop-up asking “Do you want to save changes before leaving?” and buttons “Save” and “Discard changes”. If the uses closes pop-up without confirmation of saving or discarding, page is displayed with unsaved changes.

Error messages

• displayed under field with error value
• for empty mandatory field - Please fill out this field
• for invalid length or format for Full name, Nickname, Weight, Height - Please enter valid data
• for invalid calendar date - Please enter a valid past date in DD/MM/YYYY format

2. User should be redirected to the Goals page after clicking Fitness Goals tab link.

3. User should be able to add Preferences, searching for them as tags

Preferences are chosen among Activities: Running, Walking, Cycling (will be added).

Preferences page may contain:

• search field with a title Choose your preferences and placeholder Find an Activity
• area of added tags

Field accepts up to 50 characters - letters, digits, special characters.
Spaces at the beginning of the input should be trimmed

Search should start automatically after entering 2 characters. User should be provided autocomplete menu with results, that include keyword value.

User should be able to choose one of the search results. Chosen value is added as a tag.

User should be able to remove added preference in one click

User should be able to remove all preferences in one click and to make bulk choice for removing

[Olena-Olenka]

Non-existing date values, entered manually, are not validated negatively on Profile information page #327
Future values of date of birth can be saved on Profile information page #310
Error messages on Personal information page are displayed overlapping field label below when window width is 1443 px and less
#301
Server error message is received when users saves Profile information with with dot in value of Weight and Height
#303
Error message for invalid format of Weight and Height in Profile information is not user-friendly
#305
Labels of radiobuttons on Profile information page don't match design
#309
Height of "Prefer not to say" element in Personal information page is not aligned with other when the width of screensize is 1502px and less
#300