issue #2654 - verification email container with success/failure/expired messages

Author: maxceem

src/components/CoderBot/CoderBot.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './CoderBot.scss'
 import CoderBroken from '../../assets/icons/coder-broken.svg'
+import CoderHappy from '../../assets/icons/coder-welcome.svg'
 
 
 
@@ -26,14 +27,17 @@ const getMessage = code => {
   }
 }
 
-const CoderBot = ({code, message}) => {
+const CoderBot = ({code, message, heading, children}) => {
   return (
     <section className="content content-error">
       <div className="container">
         <div className="page-error">
-          <h3>{ getHeading(code) }</h3>
-          <p dangerouslySetInnerHTML={ {__html : message || getMessage(code) } } />
-          <CoderBroken className="icon-coder-broken" />
+          <h3>{ heading || getHeading(code) }</h3>
+          <div className="content">
+            <p dangerouslySetInnerHTML={ {__html : message || getMessage(code) } } />
+            <div>{children}</div>
+          </div>
+          {code !== 200 ? <CoderBroken className="icon-coder-broken" /> : <CoderHappy className="icon-coder-broken" />}
           <span>{code !== 200 && code}</span>
         </div>
       </div>

src/components/CoderBot/CoderBot.scss

@@ -33,12 +33,6 @@
       }
     }
     background-size: 307px 300px;
-    a{
-      color: $tc-dark-blue;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
     h3{
       color: $tc-gray-70;
       @include roboto-medium;
@@ -56,9 +50,11 @@
         font-size: 30px;
       }
     }
+    .content {
+      min-height: 120px;
+    }
     p{
       text-align: left;
-      min-height: 120px;
       padding: 0 168px;
       @include roboto;
       font-size: $tc-label-lg;
@@ -71,6 +67,13 @@
       @media screen and (max-width: $screen-md - 1px) {
         padding: 0 28px;
       }
+
+      a{
+        color: $tc-dark-blue;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
     }
     span{
       position: absolute;

src/routes/settings/routes.jsx

@@ -9,9 +9,15 @@ import NotificationSettingsContainer from './routes/notifications/containers/Not
 import SettingsToolBar from './components/SettingsToolBar'
 import SystemSettingsContainer from './routes/system/containers/SystemSettingsContainer'
 import ProfileSettingsContainer from './routes/profile/containers/ProfileSettingsContainer'
+import EmailVerificationFailure from './routes/email-verification/components/Failure'
+import EmailVerificationSuccessContainer from './routes/email-verification/containers/SuccessContainer'
 
 export default [
-  <Route key={'system'} path="/settings/account" render={renderApp(<TopBarContainer toolbar={SettingsToolBar} />, <SystemSettingsContainer />)} />,
-  <Route key={'notifications'} path="/settings/notifications" render={renderApp(<TopBarContainer toolbar={SettingsToolBar} />, <NotificationSettingsContainer />)} />,
-  <Route key={'profile'} path="/settings/profile" render={renderApp(<TopBarContainer toolbar={SettingsToolBar} />, <ProfileSettingsContainer />)} />
+  <Route key="account" exact path="/settings/account" render={renderApp(<TopBarContainer toolbar={SettingsToolBar} />, <SystemSettingsContainer />)} />,
+  <Route key="account/email-verification/success" exact path="/settings/account/email-verification/success/:handle/:token/:newEmail/:oldEmail/:jwtToken" render={renderApp(<TopBarContainer toolbar={SettingsToolBar} />, <EmailVerificationSuccessContainer />)} />,
+  <Route key="account/email-verification/failure" exact path="/settings/account/email-verification/failure" render={renderApp(<TopBarContainer toolbar={SettingsToolBar} />, <EmailVerificationFailure />)} />,
+  
+  <Route key="notifications" exact path="/settings/notifications" render={renderApp(<TopBarContainer toolbar={SettingsToolBar} />, <NotificationSettingsContainer />)} />,
+  <Route key="profile" exact path="/settings/profile" render={renderApp(<TopBarContainer toolbar={SettingsToolBar} />, <ProfileSettingsContainer />)} />,
+  
 ]

src/routes/settings/routes/email-verification/components/Expired/Expired.jsx

@@ -0,0 +1,26 @@
+/**
+ * Message to show when new email verification link is expired.
+ */
+import React from 'react'
+import { Link } from 'react-router-dom'
+import CoderBot from '../../../../../../components/CoderBot/CoderBot'
+
+import './Expired.scss'
+
+const Expired = () => (
+  <CoderBot
+    code={401}
+    heading="Email Verification Failed" 
+    message="Sorry, this verification link is no longer valid due to one of the following reasons:" 
+  >
+    <ul styleName="list">
+      <li>It has already been verified.</li>
+      <li>It has expired or has been cancelled, any pending email change that is cancelled is no longer subject to verification.</li>
+    </ul>
+    <div styleName="controls">
+      <Link className="tc-btn tc-btn-primary" to="/settings/account">Back to My Account</Link>
+    </div>
+  </CoderBot>
+)
+
+export default Expired

src/routes/settings/routes/email-verification/components/Expired/Expired.scss

@@ -0,0 +1,27 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.list {
+  @include roboto;
+  font-size: $tc-label-lg;
+  color: $tc-gray-70;
+  letter-spacing: 0px;
+  line-height: 23px;
+  padding: 0 168px;
+  text-align: left;
+
+  @media screen and (max-width: 1000px - 1px) {
+    padding: 0 100px;
+  }
+
+  @media screen and (max-width: $screen-md - 1px) {
+    padding: 0 28px;
+  }
+
+  li {
+    list-style: inside circle;
+  }
+}
+
+.controls {
+  margin-top: 5 * $base-unit;
+}

src/routes/settings/routes/email-verification/components/Expired/index.jsx

@@ -0,0 +1,2 @@
+import Expired from './Expired'
+export default Expired

src/routes/settings/routes/email-verification/components/Failure/Failure.jsx

@@ -0,0 +1,22 @@
+/**
+ * Message to show when new email verification failed.
+ */
+import React from 'react'
+import { Link } from 'react-router-dom'
+import CoderBot from '../../../../../../components/CoderBot/CoderBot'
+
+import './Failure.scss'
+
+const Failure = () => (
+  <CoderBot
+    code={400}
+    heading="Email Verification Failed" 
+    message="We could not verify your email. If you have any issues with your Topcoder account, please contact <a href='mailto:support@topcoder.com'>support@topcoder.com</a>." 
+  >
+    <div styleName="controls">
+      <Link className="tc-btn tc-btn-primary" to="/settings/account">Back to My Account</Link>
+    </div>
+  </CoderBot>
+)
+
+export default Failure

src/routes/settings/routes/email-verification/components/Failure/Failure.scss

@@ -0,0 +1,5 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.controls {
+  margin-top: 5 * $base-unit;
+}

src/routes/settings/routes/email-verification/components/Failure/index.jsx

@@ -0,0 +1,2 @@
+import Failure from './Failure'
+export default Failure

src/routes/settings/routes/email-verification/components/Success/Success.jsx

@@ -0,0 +1,22 @@
+/**
+ * Message to show when new email verification was success.
+ */
+import React from 'react'
+import { Link } from 'react-router-dom'
+import CoderBot from '../../../../../../components/CoderBot/CoderBot'
+
+import './Success.scss'
+
+const Success = () => (
+  <CoderBot
+    code={200}
+    heading="Email Verification Success" 
+    message="Congratulations! Your email verification has been completed." 
+  >
+    <div styleName="controls">
+      <Link className="tc-btn tc-btn-primary" to="/settings/account">Back to My Account</Link>
+    </div>
+  </CoderBot>
+)
+
+export default Success