Profile Page
On the profile Page, the user can make changes about his account.
The content of the profile settings page should always be grouped into related data fields and options.
Therefore, in this demo the content is structured into three groups/sections:
Personal Details
In this section, the user is able to change his first- and last name and his date of birth.
| Field name | Type | allowed characters | Limitation | additional info |
|---|---|---|---|---|
| First name | text box | alphabetic | - | - |
| Last name | text box | alphabetic | - | - |
| Date of birth | select box | numeric | - | by clicking on the calendar-icon a calendar pops up and the user is able to select a date |
Profile Picture
The user is able to upload a photo and is able to delete it.
Contact Details
This section gives information about contact details like address and electronic ways of communication.
| Field name | Type | allowed characters | Limitation | additional info |
|---|---|---|---|---|
| Address | text box | alphanumeric | - | - |
| Postal | text box | alphanumeric | - | - |
| City | text box | numeric | - | - |
| Country | select box | alphabetic | - | - |
| text box | alphanumeric | - | instant validation | |
| Phone | text box | numeric | - | prefilled with correct format, related to country |
Advanced Settings
In this section, the user is able to make changes which affect the application, for example its appearance.
Changable Theme
The user is able to switch the theme for example from light to dark.
Language Switch
The language-switch is shown as a Drop-Down-Field, all languages available are written in their language and use its own characters.