Authentication Solution Angular4 and Material UI Prototype Challenge

Key Information

Register
Submit
The challenge is finished.

Timezone:Etc/UTC

Registration

Starts

Aug 16, 2017

16:12

Ends

Aug 19, 2017

16:19

Specification Submission

Starts

Aug 16, 2017

14:02

Ends

Aug 16, 2017

14:05

Specification Review

Starts

Aug 16, 2017

14:05

Ends

Aug 16, 2017

16:12

Final Submission

Starts

Aug 16, 2017

16:18

Ends

Aug 23, 2017

06:14

Screening

Starts

Aug 23, 2017

06:14

Ends

Aug 23, 2017

12:06

Final Review

Starts

Aug 23, 2017

12:06

Ends

Aug 24, 2017

12:01

Appeals Due

Starts

Aug 24, 2017

12:01

Ends

Aug 25, 2017

00:03

Appeals Response

Starts

Aug 25, 2017

00:03

Ends

Aug 25, 2017

03:26

Aggregation

Starts

Aug 25, 2017

03:27

Ends

Aug 25, 2017

03:50

Final Fix

Starts

Aug 25, 2017

03:50

Ends

Aug 26, 2017

06:11

Final Review

Starts

Aug 26, 2017

06:11

Ends

Aug 26, 2017

10:53

Final Fix

Starts

Aug 26, 2017

10:53

Ends

Aug 26, 2017

16:18

Final Review

Starts

Aug 26, 2017

16:19

Ends

Aug 26, 2017

16:37

Final Fix

Starts

Aug 26, 2017

16:37

Ends

Aug 26, 2017

17:26

Final Review

Starts

Aug 26, 2017

17:26

Ends

Aug 26, 2017

22:52

Approval

Starts

Aug 26, 2017

22:52

Ends

Aug 28, 2017

15:21

Winners Announced

Aug 28, 2017

15:21

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.
 

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
 

ELIGIBLE EVENTS:

2018 Topcoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30058867