Challenge Overview
Welcome to MyWishCompany Account Management Material Design Responsive Code Challenge
For this is challenge, you need to build provided design into Angular 5 application with Material UI framework. Your submission need to support responsive solution for Desktop, Tablet & Mobile screen sizes.
Let’s discuss any questions you have on challenge forum
Overview of project
Account management portal is a web application portal through which customers register themselves to access various resources and materials. There are different registration types based on which the customer category and resources sections shall be accessed.
Overall Requirement
- Development of front end web pages for provisioning registration functionalities on each types of registration.
- Application to be development using Angular 5 and Material UI
- Each page will have its own specific url suffix
- For each page type, as the header & footer contents will vary, the header & footer to be template style which will be updated based on Page type.
- Header logo & footer logo along with contents shall vary based on page type
- The page content shall be modular so that we can create new page and renders appropriately.
- AngularJS codes written to be modular and should contain necessary factory/service methods to ensure code design & best practices.
- All requests / responses should be in JSON format.
- Requests parameters to be encapsulated as object rather than individual parameters.
- Token from login to be stored in localstorage. All requests to send this bearer token if present. To be passed as header in all API requests. The corresponding authorizations will be handled in server side on each API end point.
- Validation – Key/Value response for error message update next to form field.
- Responsive design for different screen form factor.
- We need to have the unit testing also covered for the javascript codes
Important!
- Make sure to always read the challenge specs and design from AVD carefully and ask for clarifications in the challenge forum as soon as possible. Don't hesitate to not ask questions and don't just assume how to implement any possible vague requirement.
- Provide a detailed documentation on how to setup, deploy and test your submission (preferably in a README.md file). Writing clean code is very important but providing detailed instructions on how to run your code is also an important part of your submission.
- Remove unnecessary / unused code from your application. You should always make sure you submit what you are required to submit.
- Do not omit any requirement even minor one. There is no “Final fix” phase in Code track and remember that this is a competition so don’t omit any requirements.
- Create a clean folder structure and follow the latest best practices for the technology you are using.
Downloadable Files
Storyboard.zip - Storyboard Design created on Sketch
Fonts: Please swap Lato font with uploaded Cera font.
MarvelApp Flow
Check the flow for all required responsive on different devices:
DESKTOP (1280px): https://marvelapp.com/12f8ji16/screen/36923418
TABLET (768px): https://marvelapp.com/5d9632g/screen/36735491
MOBILE (750px Retina): https://marvelapp.com/2gh7d1e/screen/36903821
Page Requirements
1). Overview
a). DESKTOP VERSION
Screenshot: WEB - 01.00 Login.png
- This is login page page look and feel on Desktop screen size
- Page title need to be text based, we will updated in the future
- Click forgot password link need take to Forgot Password page
- If Email ID & Password correct, need take user to Company Registration 1 page
- Click Register button need take to Register page
- Help button can be dead link
Screenshot: WEB - 01.01 Login Email.png
- Focus on Email ID field
Screenshot: WEB - 01.02 Login Email Cursor.png
- User start typing for the Email ID field
Screenshot: WEB - 01.03 Login Email address.png
- Filled with email address
Screenshot: WEB - 01.04 Login Password.png
- Focus on Password field
- There’s eye button to reveal the typed password
Screenshot: WEB - 01.05 Login Password Cursor.png
- User typing on Password field
Screenshot: WEB - 01.06 Login Password Input.png
- After user completed typing on on the Password field
Screenshot: WEB - 01.07 Login Password Error.png
- Need create validation of incorrect password
b). TABLET VERSION
Screenshot: 01.00 Login.png
- For Tablet screen: Help button need always placed on the bottom of screen
- Register button and New to MyWish Company text also need placed on the bottom of screen above the Help button
Screenshot: 01.01 Login Email.png
- Focus on Email ID field
Screenshot: 01.02 Login Email 2.png
- Filled with email address
Screenshot: 01.03 Login Password.png
- Focus on Password field
Screenshot: 01.04 Login - Password 2.png
- User typing on Password field
Screenshot: 01.05 Login - Password Error.png
- Need create validation of incorrect password
c). MOBILE VERSION
Screenshot: Mobile - 01.00 Login.png
- This is Mobile screen size look
Screenshot: Mobile - 01.01 Login - Email.png
- Focus on Email ID field
Screenshot: Mobile - 01.02 Login - Email 2.png
- Filled with email address
Screenshot: Mobile - 01.03 Login Password .png
- Focus on Password field
Screenshot: Mobile - 01.04 Login - Password 2.png
- User typing on Password field
Screenshot: Mobile - 01.05 Login - Password Error.png
- Need create validation of incorrect password
2). Register
a). DESKTOP VERSION
Screenshot: WEB - 02.00 register.png
- User landed to this after click Register button on the homepage
Screenshot: WEB - 02.01 register - first name.png
- User focus on First Name field
Screenshot: WEB - 02.02 register - first name 2.png
- User filled First Name field
Screenshot: WEB - 02.03 register - Email address.png
- User filled Email Address field
- Confirm Email Address field must have function to detect same values with Email Address field
Screenshot: WEB - 02.04a register - Password Strength medium.png
- There’s password strength indicator need show up when user typing the value
- Be at least 8 characters in length
- Not contain the user's account name or parts of the user's fullname that exceed 2 consecutive characters.
- Contains characters from three of the following four categories:
-- English uppercase characters (A through Z)
-- English lowercase characters (a through z)
-- Base 10 digits (0 through 9)
-- Non-alphabetic characters (for example, !, $, #, %, @, *....)
Screenshot: WEB - 02.04b register - Password.png
- Error validation show up if password not meet the strength password
Screenshot: WEB - 02.05 register - Password Done.png
- Password Strength turn to green if meet all requirements
Screenshot: WEB - 02.06 register - Confirm Password.png
- User filled the Confirm Password field
Screenshot: WEB - 02.07 register - Checkbox Agreement.png
- User click checkbox on the bottom of form
- Click Register button need take user to the Email Confirmation screen to let us see the application flow
b). TABLET VERSION
Screenshot: 02.00 register.png
- This is Register screen for tablet screen size
Screenshot: 02.01 register - first name.png
- User focus on First Name field
Screenshot: 02.02 register - first name 2.png
- User filled First Name field
Screenshot: 02.03 register - Email address.png
- User filled Email Address field
Screenshot: 02.04a register - Password Strength medium.png
- Follow Password Strength Rules like on Desktop version
Screenshot: 02.04b register - Password.png
- Error validation show up if password not meet the strength password
Screenshot: 02.05 register - Password Done.png
- Password Strength turn to green if meet all requirements
Screenshot: 02.06 register - Confirm Password.png
- User filled the Confirm Password field
Screenshot: 02.07 register - Checkbox Agreement.png
- User click checkbox on the bottom of form
c). MOBILE VERSION
Screenshot: Mobile - 02.00 register.png
- This is Register screen for tablet screen size
Screenshot: Mobile - 02.01 register - first name.png
- User focus on First Name field
Screenshot: Mobile - 02.02 register - first name 2.png
- User filled First Name field
Screenshot: Mobile - 02.03 register - Email address.png
- User filled Email Address field
Screenshot: Mobile - 02.04a register - Password Strength medium.png
- Follow Password Strength Rules like on Desktop version
Screenshot: Mobile - 02.04b register - Password.png
- Error validation show up if password not meet the strength password
Screenshot: Mobile - 02.05 register - Password Done.png
- Password Strength turn to green if meet all requirements
Screenshot: Mobile - 02.06 register - Confirm Password.png
- User filled the Confirm Password field
Screenshot: Mobile - 02.07 register - Checkbox Agreement.png
- User click checkbox on the bottom of form
3). Email Confirmation
a). DESKTOP VERSION
Screenshot: WEB - 03 Email Confirmation.png
- This is Email Confirmation after user completed the Register flow
- Resend Email button need take user to Account Activation screen
b). TABLET VERSION
Screenshot: 03 Email Confirmation.png
- This Email confirmation for Tablet screen size
c). MOBILE VERSION
Screenshot: Mobile - 03 Email Confirmation.png
- For mobile screen size, there’s no white box with shadow
4). Account Activation
a). DESKTOP VERSION
Screenshot: WEB - 04 Account Activation.png
- This is Account Activation after user click the email for Activation
- Login button need take user back to Login page
b). TABLET VERSION
Screenshot: 04 Account Activation.png
- This is Account Activation for tablet screen size
c). MOBILE VERSION
Screenshot: Mobile - 04 Account Activation.png
- For mobile screen size, there’s no white box with shadow
5). Forgot Password
a). DESKTOP VERSION
Screenshot: WEB - 05.00 Forgot Password.png
- User landed to this page after click the Forgot Password page
- Send Request button need take to Reset Password screen
Screenshot: WEB - 05.01 Forgot Password - email.png
- User filled the email address
Screenshot: WEB - 05.02 Forgot Password Checkbox.png
- User checked the checkbox
Screenshot: WEB - 05.03 Forgot Password - contact detail.png
- User see the options to reset the password, via email or via sms
- Click Email button need take user to Reset password screen
b). TABLET VERSION
Screenshot: 05.00 Forgot Password.png
- This is Forgot Password screen for Tablet
Screenshot: 05.01 Forgot Password - email.png
- User filled the email address
Screenshot: 05.02 Forgot Password Checkbox.png
- User checked the checkbox
Screenshot: 05.03 Forgot Password - contact detail.png
- User see the options to reset the password, via email or via sms
c). MOBILE VERSION
Screenshot: Mobile - 05.00 Forgot Password.png
- This is Forgot Password screen for Mobile Screen size
Screenshot: Mobile - 05.01 Forgot Password - email.png
- User filled the email address
Screenshot: Mobile - 05.02 Forgot Password Checkbox.png
- User checked the checkbox
Screenshot: Mobile - 05.03 Forgot Password - contact detail.png
- User see the options to reset the password, via email or via sms
6). Reset Password
a). DESKTOP VERSION
Screenshot: WEB - 06.00 Reset Password .png
- This is Reset Password screen for Desktop
- Click Reset Reset Password button take use back to Login page
Screenshot: WEB - 06.01 Reset Password 1.png
- User filled new password
- Re-use password strength function
Screenshot: WEB - 06.02 Reset Password 2.png
- Confirm password must detect same value like on New password field
b). TABLET VERSION
Screenshot: 06.00 Reset Password.png
- This is Reset Password screen for Tablet
Screenshot: 06.01 Reset Password 1.png
- User filled new password
Screenshot: 06.02 Reset Password 2.png
- Confirm password must detect same value like on New password field
c). MOBILE VERSION
Screenshot: Mobile - 06.00 Reset Password.png
- This is Reset Password screen for Mobile
Screenshot: Mobile - 06.01 Reset Password 1.png
- User filled new password
Screenshot: Mobile - 06.02 Reset Password 2.png
- Confirm password must detect same value like on New password field
7) Company Registration Type 1
a). DESKTOP VERSION
Screenshot: WEB - 07.00a company1 registration - personal.png
- This is Company Registration Type 1
- There are 2 steps need to filled for users: Personals & Company
- Re-use password strength function for this page
- Click Register button need take to Company Registration Type 2
Screenshot: WEB - 07.00b company1 registration - personal 2.png
- User complete all fields
- Click Next button take to next step
Screenshot: WEB - 07.01 company1 registration company.png
- This is Company step
- There are dropdown on top for Brand Region and Channel Partner Type
Screenshot: WEB - 07.02 company1 registration company - brand-region.png
- User select option on Brand Region
Screenshot: WEB - 07.03 company1 registration company - channel partner.png
- User select option on Channel Partner Type
Screenshot: WEB - 07.04 company1 registration company CHECKBOX agreement.png
- User click the checkbox
b). TABLET VERSION
Screenshot: 07.00a company1 registration - personal.png
- Re-use password strength function for this page
Screenshot: 07.00b company1 registration - personal 2.png
- User complete all fields
- Click Next button take to next step
Screenshot: 07.01 company1 registration company.png
- This is Company step
- There are dropdown on top for Brand Region and Channel Partner Type
Screenshot: 07.02 company1 registration company - brand-region.png
- User select option on Brand Region
Screenshot: 07.03 company1 registration company - channel partner.png
- User select option on Channel Partner Type
Screenshot: 07.04 company1 registration company CHECKBOX agreement Copy.png
- User click the checkbox
c). MOBILE VERSION
Screenshot: Mobile - 07.00a company1 registration - personal.png
- Re-use password strength function for this page
Screenshot: Mobile - 07.00b company1 registration - personal 2.png
- User complete all fields
- Click Next button take to next step
Screenshot: Mobile - 07.01 company1 registration company.png
- This is Company step
- There are dropdown on top for Brand Region and Channel Partner Type
Screenshot: Mobile - 07.02 company1 registration company - brand-region.png
- User select option on Brand Region
Screenshot: Mobile - 07.03 company1 registration company - channel partner.png
- User select option on Channel Partner Type
Screenshot: Mobile - 07.04 company1 registration company CHECKBOX agreement.png
- User click the checkbox
8) Company Registration Type 2
a). DESKTOP VERSION
Screenshot: WEB - 08.01 company2 registration - personal.png
- This is Company Registration Type 2
- Click Register button need take to Developer Registration
Screenshot: WEB - 08.02 company2 registration - personal cursor.png
Screenshot: WEB - 08.03 company2 registration - first name.png
- User filled First Name value
Screenshot: WEB - 08.04 company2 registration - last name.png
Screenshot: WEB - 08.05 company2 registration - last name cursor.png
Screenshot: WEB - 08.06 company2 registration - last name done.png
- User filled Last Name value
Screenshot: WEB - 08.07 company2 registration - company name.png
- User filled Company Name
Screenshot: WEB - 08.08 company2 registration - company address.png
- User filled Company Address
Screenshot: WEB - 08.09 company2 registration - Job title.png
- User filled Job Title
Screenshot: WEB - 08.10 company2 registration - Phone.png
- User filled Phone
Screenshot: WEB - 08.11 company2 registration - Security.png
- User filled Security
Screenshot: WEB - 08.12 company2 registration - Email.png
- User filled Email
Screenshot: WEB - 08.13 company2 registration - Password 1.png
- User filled Password field
Screenshot: WEB - 08.14 company2 registration - Password 2.png
- User filled Confirm Password field
Screenshot: WEB - 08.15 company2 registration - Checkbox.png
- User checked the checkbox
b). TABLET VERSION
Screenshot: 08.01 company2 registration - personal.png
- This is Company Registration Type 2
Screenshot: 08.02 company2 registration - personal cursor.png
Screenshot: 08.03 company2 registration - first name.png
- User filled First Name value
Screenshot: 08.04 company2 registration - last name.png
Screenshot: 08.05 company2 registration - last name cursor.png
Screenshot: 08.06 company2 registration - last name done.png
- User filled Last Name value
Screenshot: 08.07 company2 registration - company name.png
- User filled Company Name
Screenshot: 08.08 company2 registration - company address.png
- User filled Company Address
Screenshot: 08.09 company2 registration - Job title.png
- User filled Job Title
Screenshot: 08.10 company2 registration - Phone.png
- User filled Phone
Screenshot: 08.11 company2 registration - Security.png
- User filled Security
Screenshot: 08.12 company2 registration - Email.png
- User filled Email
Screenshot: 08.13 company2 registration - Password 1.png
- User filled Password field
Screenshot: 08.14 company2 registration - Password 2.png
- User filled Confirm Password field
Screenshot: 08.15 company2 registration - Checkbox.png
- User checked the checkbox
c). MOBILE VERSION
Screenshot: Mobile - 08.00 company2 registration - personal.png
- This is Company Registration Type 2
Screenshot: Mobile - 08.01 company2 registration - first name.png
- User filled First Name value
Screenshot: Mobile - 08.02 company2 registration - last name.png
- User filled Last Name value
Screenshot: Mobile - 08.03 company2 registration - Company name.png
- User filled Company Name
Screenshot: Mobile - 08.04 company2 registration - Company address.png
- User filled Company Addresss
Screenshot: Mobile - 08.05 company2 registration - Job title.png
- User filled Job Title
Screenshot: Mobile - 08.06 company2 registration - Phone.png
- User filled Phone
Screenshot: Mobile - 08.07 company2 registration - Security.png
- User filled Security
Screenshot: Mobile - 08.09 company2 registration - Security - Password 1.png
- User filled Password field
Screenshot: Mobile - 08.10 company2 registration - Security - Password 2.png
- User filled Confirm Password field
Screenshot: Mobile - 08.11 company2 registration - Security - checkbox.png
- User checked the checkbox
9) Developer Portal
a). DESKTOP VERSION
Screenshot: WEB - 09.00 developer portal registration 1.png
- This is Developer Registration page
Screenshot: WEB - 09.01 developer portal registration - first name.png
- User filled the First Name field
Screenshot: WEB - 09.02 developer portal registration - last name.png
- User filled the Last Name field
Screenshot: WEB - 09.03 developer portal registration - email.png
- User filled the Email field
Screenshot: WEB - 09.04 developer portal registration - password.png
- User filled the password field
Screenshot: WEB - 09.05 developer portal registration - checkbox.png
- User checked the checkbox
b). TABLET VERSION
Screenshot: 09.00 developer portal registration 1.png
- This is Developer Registration page for tablet
Screenshot: 09.01 developer portal registration - first name.png
- User filled the First Name field
Screenshot: 09.02 developer portal registration - last name.png
- User filled the Last Name field
Screenshot: 09.03 developer portal registration - email.png
- User filled the Email field
Screenshot: 09.04 developer portal registration - password.png
- User filled the password field
Screenshot: 09.05 developer portal registration - checkbox.png
- User checked the checkbox
c). MOBILE VERSION
Screenshot: Mobile - 09.00 developer portal registration 1.png
- This is Developer Registration page for mobile
Screenshot: Mobile - 09.01 developer portal registration - first name.png
- User filled the First Name field
Screenshot: Mobile - 09.02 developer portal registration - last name.png
- User filled the Last Name field
Screenshot: Mobile - 09.03 developer portal registration - email.png
- User filled the Email field
Screenshot: Mobile - 09.04 developer portal registration - password.png
- User filled the password field
Screenshot: Mobile - 09.05 developer portal registration - checkbox.png
- User checked the checkbox
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
- Put clear comment/documentation for all AngularJS 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
- Firefox latest version on Tablet
- Safari latest version on Tablet
- Chrome latest version on Tablet
1. Source code zip file.
2. Submission Demo on Heroku
3. Compiling and building instructions.
4. List of frameworks / plugins used.
For this is challenge, you need to build provided design into Angular 5 application with Material UI framework. Your submission need to support responsive solution for Desktop, Tablet & Mobile screen sizes.
Let’s discuss any questions you have on challenge forum
Overview of project
Account management portal is a web application portal through which customers register themselves to access various resources and materials. There are different registration types based on which the customer category and resources sections shall be accessed.
Overall Requirement
- Development of front end web pages for provisioning registration functionalities on each types of registration.
- Application to be development using Angular 5 and Material UI
- Each page will have its own specific url suffix
- For each page type, as the header & footer contents will vary, the header & footer to be template style which will be updated based on Page type.
- Header logo & footer logo along with contents shall vary based on page type
- The page content shall be modular so that we can create new page and renders appropriately.
- AngularJS codes written to be modular and should contain necessary factory/service methods to ensure code design & best practices.
- All requests / responses should be in JSON format.
- Requests parameters to be encapsulated as object rather than individual parameters.
- Token from login to be stored in localstorage. All requests to send this bearer token if present. To be passed as header in all API requests. The corresponding authorizations will be handled in server side on each API end point.
- Validation – Key/Value response for error message update next to form field.
- Responsive design for different screen form factor.
- We need to have the unit testing also covered for the javascript codes
Important!
- Make sure to always read the challenge specs and design from AVD carefully and ask for clarifications in the challenge forum as soon as possible. Don't hesitate to not ask questions and don't just assume how to implement any possible vague requirement.
- Provide a detailed documentation on how to setup, deploy and test your submission (preferably in a README.md file). Writing clean code is very important but providing detailed instructions on how to run your code is also an important part of your submission.
- Remove unnecessary / unused code from your application. You should always make sure you submit what you are required to submit.
- Do not omit any requirement even minor one. There is no “Final fix” phase in Code track and remember that this is a competition so don’t omit any requirements.
- Create a clean folder structure and follow the latest best practices for the technology you are using.
Downloadable Files
Storyboard.zip - Storyboard Design created on Sketch
Fonts: Please swap Lato font with uploaded Cera font.
MarvelApp Flow
Check the flow for all required responsive on different devices:
DESKTOP (1280px): https://marvelapp.com/12f8ji16/screen/36923418
TABLET (768px): https://marvelapp.com/5d9632g/screen/36735491
MOBILE (750px Retina): https://marvelapp.com/2gh7d1e/screen/36903821
Page Requirements
1). Overview
a). DESKTOP VERSION
Screenshot: WEB - 01.00 Login.png
- This is login page page look and feel on Desktop screen size
- Page title need to be text based, we will updated in the future
- Click forgot password link need take to Forgot Password page
- If Email ID & Password correct, need take user to Company Registration 1 page
- Click Register button need take to Register page
- Help button can be dead link
Screenshot: WEB - 01.01 Login Email.png
- Focus on Email ID field
Screenshot: WEB - 01.02 Login Email Cursor.png
- User start typing for the Email ID field
Screenshot: WEB - 01.03 Login Email address.png
- Filled with email address
Screenshot: WEB - 01.04 Login Password.png
- Focus on Password field
- There’s eye button to reveal the typed password
Screenshot: WEB - 01.05 Login Password Cursor.png
- User typing on Password field
Screenshot: WEB - 01.06 Login Password Input.png
- After user completed typing on on the Password field
Screenshot: WEB - 01.07 Login Password Error.png
- Need create validation of incorrect password
b). TABLET VERSION
Screenshot: 01.00 Login.png
- For Tablet screen: Help button need always placed on the bottom of screen
- Register button and New to MyWish Company text also need placed on the bottom of screen above the Help button
Screenshot: 01.01 Login Email.png
- Focus on Email ID field
Screenshot: 01.02 Login Email 2.png
- Filled with email address
Screenshot: 01.03 Login Password.png
- Focus on Password field
Screenshot: 01.04 Login - Password 2.png
- User typing on Password field
Screenshot: 01.05 Login - Password Error.png
- Need create validation of incorrect password
c). MOBILE VERSION
Screenshot: Mobile - 01.00 Login.png
- This is Mobile screen size look
Screenshot: Mobile - 01.01 Login - Email.png
- Focus on Email ID field
Screenshot: Mobile - 01.02 Login - Email 2.png
- Filled with email address
Screenshot: Mobile - 01.03 Login Password .png
- Focus on Password field
Screenshot: Mobile - 01.04 Login - Password 2.png
- User typing on Password field
Screenshot: Mobile - 01.05 Login - Password Error.png
- Need create validation of incorrect password
2). Register
a). DESKTOP VERSION
Screenshot: WEB - 02.00 register.png
- User landed to this after click Register button on the homepage
Screenshot: WEB - 02.01 register - first name.png
- User focus on First Name field
Screenshot: WEB - 02.02 register - first name 2.png
- User filled First Name field
Screenshot: WEB - 02.03 register - Email address.png
- User filled Email Address field
- Confirm Email Address field must have function to detect same values with Email Address field
Screenshot: WEB - 02.04a register - Password Strength medium.png
- There’s password strength indicator need show up when user typing the value
- Be at least 8 characters in length
- Not contain the user's account name or parts of the user's fullname that exceed 2 consecutive characters.
- Contains characters from three of the following four categories:
-- English uppercase characters (A through Z)
-- English lowercase characters (a through z)
-- Base 10 digits (0 through 9)
-- Non-alphabetic characters (for example, !, $, #, %, @, *....)
Screenshot: WEB - 02.04b register - Password.png
- Error validation show up if password not meet the strength password
Screenshot: WEB - 02.05 register - Password Done.png
- Password Strength turn to green if meet all requirements
Screenshot: WEB - 02.06 register - Confirm Password.png
- User filled the Confirm Password field
Screenshot: WEB - 02.07 register - Checkbox Agreement.png
- User click checkbox on the bottom of form
- Click Register button need take user to the Email Confirmation screen to let us see the application flow
b). TABLET VERSION
Screenshot: 02.00 register.png
- This is Register screen for tablet screen size
Screenshot: 02.01 register - first name.png
- User focus on First Name field
Screenshot: 02.02 register - first name 2.png
- User filled First Name field
Screenshot: 02.03 register - Email address.png
- User filled Email Address field
Screenshot: 02.04a register - Password Strength medium.png
- Follow Password Strength Rules like on Desktop version
Screenshot: 02.04b register - Password.png
- Error validation show up if password not meet the strength password
Screenshot: 02.05 register - Password Done.png
- Password Strength turn to green if meet all requirements
Screenshot: 02.06 register - Confirm Password.png
- User filled the Confirm Password field
Screenshot: 02.07 register - Checkbox Agreement.png
- User click checkbox on the bottom of form
c). MOBILE VERSION
Screenshot: Mobile - 02.00 register.png
- This is Register screen for tablet screen size
Screenshot: Mobile - 02.01 register - first name.png
- User focus on First Name field
Screenshot: Mobile - 02.02 register - first name 2.png
- User filled First Name field
Screenshot: Mobile - 02.03 register - Email address.png
- User filled Email Address field
Screenshot: Mobile - 02.04a register - Password Strength medium.png
- Follow Password Strength Rules like on Desktop version
Screenshot: Mobile - 02.04b register - Password.png
- Error validation show up if password not meet the strength password
Screenshot: Mobile - 02.05 register - Password Done.png
- Password Strength turn to green if meet all requirements
Screenshot: Mobile - 02.06 register - Confirm Password.png
- User filled the Confirm Password field
Screenshot: Mobile - 02.07 register - Checkbox Agreement.png
- User click checkbox on the bottom of form
3). Email Confirmation
a). DESKTOP VERSION
Screenshot: WEB - 03 Email Confirmation.png
- This is Email Confirmation after user completed the Register flow
- Resend Email button need take user to Account Activation screen
b). TABLET VERSION
Screenshot: 03 Email Confirmation.png
- This Email confirmation for Tablet screen size
c). MOBILE VERSION
Screenshot: Mobile - 03 Email Confirmation.png
- For mobile screen size, there’s no white box with shadow
4). Account Activation
a). DESKTOP VERSION
Screenshot: WEB - 04 Account Activation.png
- This is Account Activation after user click the email for Activation
- Login button need take user back to Login page
b). TABLET VERSION
Screenshot: 04 Account Activation.png
- This is Account Activation for tablet screen size
c). MOBILE VERSION
Screenshot: Mobile - 04 Account Activation.png
- For mobile screen size, there’s no white box with shadow
5). Forgot Password
a). DESKTOP VERSION
Screenshot: WEB - 05.00 Forgot Password.png
- User landed to this page after click the Forgot Password page
- Send Request button need take to Reset Password screen
Screenshot: WEB - 05.01 Forgot Password - email.png
- User filled the email address
Screenshot: WEB - 05.02 Forgot Password Checkbox.png
- User checked the checkbox
Screenshot: WEB - 05.03 Forgot Password - contact detail.png
- User see the options to reset the password, via email or via sms
- Click Email button need take user to Reset password screen
b). TABLET VERSION
Screenshot: 05.00 Forgot Password.png
- This is Forgot Password screen for Tablet
Screenshot: 05.01 Forgot Password - email.png
- User filled the email address
Screenshot: 05.02 Forgot Password Checkbox.png
- User checked the checkbox
Screenshot: 05.03 Forgot Password - contact detail.png
- User see the options to reset the password, via email or via sms
c). MOBILE VERSION
Screenshot: Mobile - 05.00 Forgot Password.png
- This is Forgot Password screen for Mobile Screen size
Screenshot: Mobile - 05.01 Forgot Password - email.png
- User filled the email address
Screenshot: Mobile - 05.02 Forgot Password Checkbox.png
- User checked the checkbox
Screenshot: Mobile - 05.03 Forgot Password - contact detail.png
- User see the options to reset the password, via email or via sms
6). Reset Password
a). DESKTOP VERSION
Screenshot: WEB - 06.00 Reset Password .png
- This is Reset Password screen for Desktop
- Click Reset Reset Password button take use back to Login page
Screenshot: WEB - 06.01 Reset Password 1.png
- User filled new password
- Re-use password strength function
Screenshot: WEB - 06.02 Reset Password 2.png
- Confirm password must detect same value like on New password field
b). TABLET VERSION
Screenshot: 06.00 Reset Password.png
- This is Reset Password screen for Tablet
Screenshot: 06.01 Reset Password 1.png
- User filled new password
Screenshot: 06.02 Reset Password 2.png
- Confirm password must detect same value like on New password field
c). MOBILE VERSION
Screenshot: Mobile - 06.00 Reset Password.png
- This is Reset Password screen for Mobile
Screenshot: Mobile - 06.01 Reset Password 1.png
- User filled new password
Screenshot: Mobile - 06.02 Reset Password 2.png
- Confirm password must detect same value like on New password field
7) Company Registration Type 1
a). DESKTOP VERSION
Screenshot: WEB - 07.00a company1 registration - personal.png
- This is Company Registration Type 1
- There are 2 steps need to filled for users: Personals & Company
- Re-use password strength function for this page
- Click Register button need take to Company Registration Type 2
Screenshot: WEB - 07.00b company1 registration - personal 2.png
- User complete all fields
- Click Next button take to next step
Screenshot: WEB - 07.01 company1 registration company.png
- This is Company step
- There are dropdown on top for Brand Region and Channel Partner Type
Screenshot: WEB - 07.02 company1 registration company - brand-region.png
- User select option on Brand Region
Screenshot: WEB - 07.03 company1 registration company - channel partner.png
- User select option on Channel Partner Type
Screenshot: WEB - 07.04 company1 registration company CHECKBOX agreement.png
- User click the checkbox
b). TABLET VERSION
Screenshot: 07.00a company1 registration - personal.png
- Re-use password strength function for this page
Screenshot: 07.00b company1 registration - personal 2.png
- User complete all fields
- Click Next button take to next step
Screenshot: 07.01 company1 registration company.png
- This is Company step
- There are dropdown on top for Brand Region and Channel Partner Type
Screenshot: 07.02 company1 registration company - brand-region.png
- User select option on Brand Region
Screenshot: 07.03 company1 registration company - channel partner.png
- User select option on Channel Partner Type
Screenshot: 07.04 company1 registration company CHECKBOX agreement Copy.png
- User click the checkbox
c). MOBILE VERSION
Screenshot: Mobile - 07.00a company1 registration - personal.png
- Re-use password strength function for this page
Screenshot: Mobile - 07.00b company1 registration - personal 2.png
- User complete all fields
- Click Next button take to next step
Screenshot: Mobile - 07.01 company1 registration company.png
- This is Company step
- There are dropdown on top for Brand Region and Channel Partner Type
Screenshot: Mobile - 07.02 company1 registration company - brand-region.png
- User select option on Brand Region
Screenshot: Mobile - 07.03 company1 registration company - channel partner.png
- User select option on Channel Partner Type
Screenshot: Mobile - 07.04 company1 registration company CHECKBOX agreement.png
- User click the checkbox
8) Company Registration Type 2
a). DESKTOP VERSION
Screenshot: WEB - 08.01 company2 registration - personal.png
- This is Company Registration Type 2
- Click Register button need take to Developer Registration
Screenshot: WEB - 08.02 company2 registration - personal cursor.png
Screenshot: WEB - 08.03 company2 registration - first name.png
- User filled First Name value
Screenshot: WEB - 08.04 company2 registration - last name.png
Screenshot: WEB - 08.05 company2 registration - last name cursor.png
Screenshot: WEB - 08.06 company2 registration - last name done.png
- User filled Last Name value
Screenshot: WEB - 08.07 company2 registration - company name.png
- User filled Company Name
Screenshot: WEB - 08.08 company2 registration - company address.png
- User filled Company Address
Screenshot: WEB - 08.09 company2 registration - Job title.png
- User filled Job Title
Screenshot: WEB - 08.10 company2 registration - Phone.png
- User filled Phone
Screenshot: WEB - 08.11 company2 registration - Security.png
- User filled Security
Screenshot: WEB - 08.12 company2 registration - Email.png
- User filled Email
Screenshot: WEB - 08.13 company2 registration - Password 1.png
- User filled Password field
Screenshot: WEB - 08.14 company2 registration - Password 2.png
- User filled Confirm Password field
Screenshot: WEB - 08.15 company2 registration - Checkbox.png
- User checked the checkbox
b). TABLET VERSION
Screenshot: 08.01 company2 registration - personal.png
- This is Company Registration Type 2
Screenshot: 08.02 company2 registration - personal cursor.png
Screenshot: 08.03 company2 registration - first name.png
- User filled First Name value
Screenshot: 08.04 company2 registration - last name.png
Screenshot: 08.05 company2 registration - last name cursor.png
Screenshot: 08.06 company2 registration - last name done.png
- User filled Last Name value
Screenshot: 08.07 company2 registration - company name.png
- User filled Company Name
Screenshot: 08.08 company2 registration - company address.png
- User filled Company Address
Screenshot: 08.09 company2 registration - Job title.png
- User filled Job Title
Screenshot: 08.10 company2 registration - Phone.png
- User filled Phone
Screenshot: 08.11 company2 registration - Security.png
- User filled Security
Screenshot: 08.12 company2 registration - Email.png
- User filled Email
Screenshot: 08.13 company2 registration - Password 1.png
- User filled Password field
Screenshot: 08.14 company2 registration - Password 2.png
- User filled Confirm Password field
Screenshot: 08.15 company2 registration - Checkbox.png
- User checked the checkbox
c). MOBILE VERSION
Screenshot: Mobile - 08.00 company2 registration - personal.png
- This is Company Registration Type 2
Screenshot: Mobile - 08.01 company2 registration - first name.png
- User filled First Name value
Screenshot: Mobile - 08.02 company2 registration - last name.png
- User filled Last Name value
Screenshot: Mobile - 08.03 company2 registration - Company name.png
- User filled Company Name
Screenshot: Mobile - 08.04 company2 registration - Company address.png
- User filled Company Addresss
Screenshot: Mobile - 08.05 company2 registration - Job title.png
- User filled Job Title
Screenshot: Mobile - 08.06 company2 registration - Phone.png
- User filled Phone
Screenshot: Mobile - 08.07 company2 registration - Security.png
- User filled Security
Screenshot: Mobile - 08.09 company2 registration - Security - Password 1.png
- User filled Password field
Screenshot: Mobile - 08.10 company2 registration - Security - Password 2.png
- User filled Confirm Password field
Screenshot: Mobile - 08.11 company2 registration - Security - checkbox.png
- User checked the checkbox
9) Developer Portal
a). DESKTOP VERSION
Screenshot: WEB - 09.00 developer portal registration 1.png
- This is Developer Registration page
Screenshot: WEB - 09.01 developer portal registration - first name.png
- User filled the First Name field
Screenshot: WEB - 09.02 developer portal registration - last name.png
- User filled the Last Name field
Screenshot: WEB - 09.03 developer portal registration - email.png
- User filled the Email field
Screenshot: WEB - 09.04 developer portal registration - password.png
- User filled the password field
Screenshot: WEB - 09.05 developer portal registration - checkbox.png
- User checked the checkbox
b). TABLET VERSION
Screenshot: 09.00 developer portal registration 1.png
- This is Developer Registration page for tablet
Screenshot: 09.01 developer portal registration - first name.png
- User filled the First Name field
Screenshot: 09.02 developer portal registration - last name.png
- User filled the Last Name field
Screenshot: 09.03 developer portal registration - email.png
- User filled the Email field
Screenshot: 09.04 developer portal registration - password.png
- User filled the password field
Screenshot: 09.05 developer portal registration - checkbox.png
- User checked the checkbox
c). MOBILE VERSION
Screenshot: Mobile - 09.00 developer portal registration 1.png
- This is Developer Registration page for mobile
Screenshot: Mobile - 09.01 developer portal registration - first name.png
- User filled the First Name field
Screenshot: Mobile - 09.02 developer portal registration - last name.png
- User filled the Last Name field
Screenshot: Mobile - 09.03 developer portal registration - email.png
- User filled the Email field
Screenshot: Mobile - 09.04 developer portal registration - password.png
- User filled the password field
Screenshot: Mobile - 09.05 developer portal registration - checkbox.png
- User checked the checkbox
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
- Put clear comment/documentation for all AngularJS 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
- Firefox latest version on Tablet
- Safari latest version on Tablet
- Chrome latest version on Tablet
Final Submission Guidelines
Things need to be submitted:1. Source code zip file.
2. Submission Demo on Heroku
3. Compiling and building instructions.
4. List of frameworks / plugins used.