Add user action to email verification page (#775)

frontend/src/containers/RegisterAccount/RegisterAccount.js

@@ -30,20 +30,23 @@ class RegisterAccount extends Component {
     const qs = querystring.parse(props.location.search.replace('?', ''));
 
     this.state = {
+      submitted: false,
       error: false,
       success: false,
       username: qs.username
     };
   }
 
-  componentDidMount() {
+  finalizeRegistration = () => {
     const { match } = this.props;
     const reg = match.params.registration;
     const validateApi = `${apiPath}/auth/validate`;
     document.cookie = `valreg=${reg}; Max-Age=60; Path=${validateApi}`;
 
     const data = { reg };
 
+    this.setState({ submitted: true });
+
     // call user registration endpoint
     apiFetch(`/auth/validate?username=${this.state.username}`, data, { method: 'POST' })
       .then(res => res.json())
@@ -61,33 +64,40 @@ class RegisterAccount extends Component {
   }
 
   render() {
-    const { error, success } = this.state;
+    const { error, submitted, success } = this.state;
     const finished = error || success;
 
     return (
       <div className="verification">
         {
-          !finished &&
-            <h3>Validating Registration...</h3>
+          !submitted &&
+            <React.Fragment>
+              <h4>Please click the button to complete your registration:</h4>
+              <button className="rounded btn-primary" onClick={this.finalizeRegistration} type="button">Complete Registration</button>
+            </React.Fragment>
+        }
+        {
+          submitted && !finished &&
+            <h4>Validating Registration...</h4>
         }
         {
           finished && error === 'invalid_code' &&
             <React.Fragment>
-              <h3>Error Validating Registration</h3>
+              <h4>Error Validating Registration</h4>
               <p>Please try the link again or contact <a href={`mailto:${supportEmail}`}>{supportEmail}</a> if the problem persists.</p>
             </React.Fragment>
         }
         {
           finished && error === 'already_registered' &&
             <React.Fragment>
-              <h3>This user has already been verified.</h3>
+              <h4>This user has already been verified.</h4>
               <button onClick={this.props.toggleLogin} className="rounded" type="button">Login</button>
             </React.Fragment>
         }
         {
           finished && success &&
             <React.Fragment>
-              <h3>Thank you {this.state.username}, your email is now verified.</h3>
+              <h4>Thank you {this.state.username}, your email is now verified.</h4>
               <button onClick={this.goHome} className="rounded" type="button">Proceed to Homepage</button>
             </React.Fragment>
         }

frontend/src/containers/RegisterAccount/style.scss

@@ -1,6 +1,4 @@
 
 .verification {
-    h3 {
-        margin: 4.5rem 0 1.5rem 0;
-    }
+    margin-top: 2.5rem;
 }

frontend/src/routes.js

@@ -312,7 +312,7 @@ export default [
   },
   {
     path: '/_valreg/:registration',
-    breadcrumb: 'Registering',
+    breadcrumb: 'Complete Registration',
     component: RegisterAccount,
     exact: true,
     footer: true,