Challenge Overview
Welcome to Authentication Solution Angular4 Material UI Prototype Challenge
The main task of this challenge is need to create the Authentication Solution Application by using Angular4 & Material UI components by following the provided storyboard
For this challenge you need focus on Desktop screen size only.
Let’s discuss any questions you have on challenge forum.
- You must use Angular4 & Material UI components as base framework for this submission challenge
- Focus on Desktop screen size only.
- Storyboard created by follow Google Material Design style.
- For this challenge as possible, use standard styling & function based on Material UI components
- Explore https://material.angular.io/components to get familiar with the components needed for this challenge
- For this prototype submission we need you to build using Angular4 with TypeScript, HTML5, CSS3 and JSON as main technologies.
- You can choose some Angular4 starter seed to help you build the UI Prototype.
- Use SCSS/SASS for the submission styling
- Angular Components must re-usable. Component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular components
- All table datas need loaded by JSON.
- Create HTTP Services to pull all data from JSON.
- Create Routes that use proper naming with existing pages
- Create README.md file that explains your UI Prototype submission structure and commands
- Create clear documentation to set up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link/url in your submission
General Requirements
- Check this url for the Prototype clickflow: https://marvelapp.com/9aghcaj/screen/31264057
- Design Guidelines: https://marvelapp.com/9aghcaj/screen/31364308
- Storyboard Design: Storyboard.zip
- Use minimum width of 1280px for the page layout.
- Based on the storyboard, do not build the header that show the browser toolbar
- Click Sign out menu from left sidebar Need load the modal window and then take user to homepage.
Page Requirements
1). Login
- On the left side, text need editable
- Put login form on the right side
- When user focus on the inputs need show up the label on top. Refer to this example: https://material.angular.io/components/input/examples
- Forgot Password & Sign up can be dead links
- Sign In button take user to Admin page
2). Admin
- On top, display header bar with the application title
- Hamburger menu can be dead link
- On the right side of header bar, you need show badge of username
- On the left sidebar, click those menu will take to different pages
- Admin page need display these following box:
-- User Administration
-- LDAP Configuration
-- Activity Log
- Click Open button take user to related pages.
3). User Administration
- Breadcrumb displayed on top. Click Admin link need take to previous Admin page
- Page consists of 2 box, on top user will see the Username input & Roles dropdown
- Display the label when user focus on the input
- Follow this styling for the dropdown: https://material.angular.io/components/select/examples
- Actions buttons: Search OR add button
- By default display some rows on the bottom
- Follow this styling for slide button: https://material.angular.io/components/slide-toggle/examples
- Put dead link for Edit & Delete button
- If user click Search, need find data with related Username & roles
- If user click Search, need add new data to row
- Done button take user back to Admin page
4). LDAP Configuration
- Config name input placed on top box
- Display current Config on table rows
- On the right side, delete button shows up
- User need able to scroll down, you can use standard scrollbar
- On the bottom box, there’s Configuration table input that allow user to filled the data
- Test Connection need load modal
- Save button take user to Admin page
5). Activity Log
- This will consist of all Activity Log
- Match data like provided storyboard screens
6). Policy
- Policies Configuration box shows up when click the Policy menu
- On top box, user will see the input for Policy name & Description
- Click Search OR Add button need show different flow
- Policy table row displayed on the bottom, match content like provided screenshot
- On the very bottom box, you can see Rules and Headers tab
- Example of Material UI tabs: https://material.angular.io/components/tabs/overview
- Click Add new need show up the Add/Edit Rules modal window
- Example of Material UI dialog: https://material.angular.io/components/dialog/overview
- Click Headers Tabs, there are some table like Headers table, Static & User Attribute tab
- Need able to let user Add/Remove the Header. Click the Add/Remove button take user to Header page
- Show added rules need display the table on the bottom
- Cancel & Apply button take to Policy page
7). Header
- HTTP Header Details show shows up when user click the Header button
- Open button take user to HTTP Headers Details page
- On top of page, user will see the multi-select input
- Need able to move the selected row to the left or right side
- All headers need loaded by default
- User also need able to search the policies
- Click Add Policy button take user to Policy page
- On Create/Modify Header, user need filled Name & Description.
- Then, click Add button need load Static or User Attribute on the bottom
- Done button take user to the Header page
8). Preview
- User need filled the User ID (NT ID), then click Preview button need load data like provided storyboard
- Need able to scrolling down the data
- Done button take user to the Preview page
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
CSS3
- Provide comments on the SCSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
Javascript
- You must using Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
IMAGES/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
The main task of this challenge is need to create the Authentication Solution Application by using Angular4 & Material UI components by following the provided storyboard
For this challenge you need focus on Desktop screen size only.
Let’s discuss any questions you have on challenge forum.
Final Submission Guidelines
Important:- You must use Angular4 & Material UI components as base framework for this submission challenge
- Focus on Desktop screen size only.
- Storyboard created by follow Google Material Design style.
- For this challenge as possible, use standard styling & function based on Material UI components
- Explore https://material.angular.io/components to get familiar with the components needed for this challenge
- For this prototype submission we need you to build using Angular4 with TypeScript, HTML5, CSS3 and JSON as main technologies.
- You can choose some Angular4 starter seed to help you build the UI Prototype.
- Use SCSS/SASS for the submission styling
- Angular Components must re-usable. Component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular components
- All table datas need loaded by JSON.
- Create HTTP Services to pull all data from JSON.
- Create Routes that use proper naming with existing pages
- Create README.md file that explains your UI Prototype submission structure and commands
- Create clear documentation to set up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link/url in your submission
General Requirements
- Check this url for the Prototype clickflow: https://marvelapp.com/9aghcaj/screen/31264057
- Design Guidelines: https://marvelapp.com/9aghcaj/screen/31364308
- Storyboard Design: Storyboard.zip
- Use minimum width of 1280px for the page layout.
- Based on the storyboard, do not build the header that show the browser toolbar
- Click Sign out menu from left sidebar Need load the modal window and then take user to homepage.
Page Requirements
1). Login
- On the left side, text need editable
- Put login form on the right side
- When user focus on the inputs need show up the label on top. Refer to this example: https://material.angular.io/components/input/examples
- Forgot Password & Sign up can be dead links
- Sign In button take user to Admin page
2). Admin
- On top, display header bar with the application title
- Hamburger menu can be dead link
- On the right side of header bar, you need show badge of username
- On the left sidebar, click those menu will take to different pages
- Admin page need display these following box:
-- User Administration
-- LDAP Configuration
-- Activity Log
- Click Open button take user to related pages.
3). User Administration
- Breadcrumb displayed on top. Click Admin link need take to previous Admin page
- Page consists of 2 box, on top user will see the Username input & Roles dropdown
- Display the label when user focus on the input
- Follow this styling for the dropdown: https://material.angular.io/components/select/examples
- Actions buttons: Search OR add button
- By default display some rows on the bottom
- Follow this styling for slide button: https://material.angular.io/components/slide-toggle/examples
- Put dead link for Edit & Delete button
- If user click Search, need find data with related Username & roles
- If user click Search, need add new data to row
- Done button take user back to Admin page
4). LDAP Configuration
- Config name input placed on top box
- Display current Config on table rows
- On the right side, delete button shows up
- User need able to scroll down, you can use standard scrollbar
- On the bottom box, there’s Configuration table input that allow user to filled the data
- Test Connection need load modal
- Save button take user to Admin page
5). Activity Log
- This will consist of all Activity Log
- Match data like provided storyboard screens
6). Policy
- Policies Configuration box shows up when click the Policy menu
- On top box, user will see the input for Policy name & Description
- Click Search OR Add button need show different flow
- Policy table row displayed on the bottom, match content like provided screenshot
- On the very bottom box, you can see Rules and Headers tab
- Example of Material UI tabs: https://material.angular.io/components/tabs/overview
- Click Add new need show up the Add/Edit Rules modal window
- Example of Material UI dialog: https://material.angular.io/components/dialog/overview
- Click Headers Tabs, there are some table like Headers table, Static & User Attribute tab
- Need able to let user Add/Remove the Header. Click the Add/Remove button take user to Header page
- Show added rules need display the table on the bottom
- Cancel & Apply button take to Policy page
7). Header
- HTTP Header Details show shows up when user click the Header button
- Open button take user to HTTP Headers Details page
- On top of page, user will see the multi-select input
- Need able to move the selected row to the left or right side
- All headers need loaded by default
- User also need able to search the policies
- Click Add Policy button take user to Policy page
- On Create/Modify Header, user need filled Name & Description.
- Then, click Add button need load Static or User Attribute on the bottom
- Done button take user to the Header page
8). Preview
- User need filled the User ID (NT ID), then click Preview button need load data like provided storyboard
- Need able to scrolling down the data
- Done button take user to the Preview page
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
CSS3
- Provide comments on the SCSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
Javascript
- You must using Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
IMAGES/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version