User Interface Specification

• At the beginnig, there will two sections in the page:

  • Top Section: It will be top of the page like a header section. Contains 2 buttons and 1 check box. Names of 2 buttons: New User, Save User. Name of check box: Hide Disabled User. The order of the buttons from left to right: New User, Hide Disabled User, Save User.

    • New User: Enables to add new user. After click, this will open "New User" form. User can click to add new user. Located on the far left of the top section.
    • Hide Disabled User: Enabled to show or hide disabled user information in table. Located right next to the New User button.
    • Save User: Enables to save user. User can click after fill the "New User" form. Located on the far right of the top section.

  • Left Section: It will be left part of the body of the page. Shows a table which contains information of all users in seperated rows. Names of columns: ID, User Name, Email, Enabled. The order of the columns from left to right: ID, User Name, Email, Enabled

• There will three sections in the page after user clicks the "New User" button:

  • Top Section: It will be top of the page like a header section. Contains 2 buttons and 1 check box. Names of 2 buttons: New User, Save User. Name of check box: Hide Disabled User. The order of the buttons from left to right: New User, Hide Disabled User, Save User

    • New User: Enables to add new user. After click, this will open "New User" form. User can click to add new user. Located on the far left of the top section.
    • Hide Disabled User: Enabled to show or hide disabled user information in table. Located right next to the New User button.
    • Save User: Enables to save user. User can click after fill the "New User" form. Located on the far right of the top section.

  • Left Section: It will be left part of the body of the page. Shows a table which contains information of all users in seperated rows. Names of columns: ID, User Name, Email, Enabled. The order of the columns from left to right: ID, User Name, Email, Enabled.

  • Right Section: It will be right part of the body of the page. Shows a form named "New User" for the user to enter information. In this form there will be 6 section to take information input from the user. These sections are 'Username', 'Display Name', 'Phone', 'Email', 'User Roles', 'Enabled'. Orders of the section from top to bottom: 'Username', 'Display Name', 'Phone', 'Email', 'User Roles'.

    • Username: Input for name of the new user. Users can write names as a text in this section.
    • Display Name: Input for a display name of the new user. Users can write display names as a text in this section.
    • Phone: Input for a phone number of the new user. Users can write phone numbers as a text in this section.
    • Email: Input for an email address of the new user. Users can write email address as a text in this section.
    • User Roles: Input for a role for the new user. Show a input list that contains roles (Guest, Admin, SuperAdmin in this order from top to bottom). User can select a role from this input list.
    • Enabled: Input for enable or disable status of the new user. User can click to the box to check if the new user is enable.