Challenge Objectives

• As part of this challenge, you need to update the flow of changing the email address based on the detailed requirements below.

Project Background

We are in the process of migrating many of the legacy pages of our platform to the new Community App repo based on a newer technology stack and improve the overall user experience.

In this series of challenges, we are targeting to the public profile page and the profile settings page based on our new design (attached on the challenge forum, available on registration).

Technology Stack

• Node.js

• JavaScript

• React.js

Code Access

The work is to be done in the Community App repo and the Topcoder React lib repo, out of the latest commit in develop branch (on both repos).

Individual requirements

We recently changed the flow of the email change functionality on our backend and we need to apply the required changes on the frontend to make this work.

 

The following changes need to be done in the Settings page.

1. Handle SSO users

If the user was logged in using SSO (there will be a flag in the user object), clicking on the "Change email" button, an error message should appear above the button saying:  "Since you joined Topcoder using your <SSO Service> account, any password updates will need to be handled by logging in to your <SSO Service> account."

2. Handle normal users

Initially the “Send Verification Email” button should be disabled.

When the user enters a valid email address that’s not the same with the current email address, enable the “Send Verification Email” button. Clicking that button should show a simple popup message saying "Verification email sent to <new email>. Check your inbox and click on the link in the email to finish updating your email. If you can't find it, check your spam folder.".

There should be a blue (primary) “Close” button to close the popup.

 

You need to update the request query based on the provided Swagger definition. The changes is that we now pass a verifyUrl parameter which will be configured in the community-app and will be the full URL of the new page from the requirement bellow.

3. Implement email verification landing page

Route: /settings/account/verifyEmail

Query parameters:

• token - String. The verification token

• action - String(verify | reject).

If the action is “reject”, redirect the user to /settings/account/email-verification/failure

If the action is “verify”, show a message saying “Please wait while we’re verifying your new email” and a loading indicator (reuse the one we already have).

 

To verify the new email, you need to make a GET /members/:handle/verify?token=<token> passing the user’s JWT as “Authorization: Bearer <JWT>” header.

 

If there’s an error, redirect to /settings/account/email-verification/failure

If the call is successful, redirect to /settings/account/email-verification/success

4. Delete the email verification expired page

Please remove the page from /settings/account/email-verification/expired

5. Update the email verification failure/success pages

• Change the “Back to My Account” to “Back to My Dashboard” and the link should point to /my-dashboard

• Replace the content from the Failure page with the content from the Expired page.

• On the Failure page, add a tip below the reasons saying: "Make sure you're logged in with the right account or try updating your email again"

Important Notes

• You should follow the best practices established in the repository:

• We use this stand alone library: https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services of current ReactJS based app.

• As part of this challenge submission you also need to modify https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services updates

• Properly use Redux. Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure;

• Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS;

• Properly use babel-plugin-react-css-modules and / or react-css-themr for styling;

• Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;

• Do not break existing unit tests.

• Etc.;

 

Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!

Submission deliverables

- Submit a git patch for the latest commit in the develop branch of each repo.

- Make sure to mention the exact commits so we can apply your patch file.

- The winner must create a PR against our repos.

Final Submission Guidelines

Please read above