- Add support for email verification.

- Clean up formatting of accounts email templates.

imports/ui/layouts/App/App.js

@@ -1,10 +1,13 @@
+/* eslint-disable jsx-a11y/no-href*/
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import { Grid } from 'react-bootstrap';
+import { Grid, Alert, Button } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { createContainer } from 'meteor/react-meteor-data';
 import { Roles } from 'meteor/alanning:roles';
+import { Bert } from 'meteor/themeteorchef:bert';
 import Navigation from '../../components/Navigation/Navigation';
 import Authenticated from '../../components/Authenticated/Authenticated';
 import Public from '../../components/Public/Public';
@@ -16,6 +19,7 @@ import EditDocument from '../../pages/EditDocument/EditDocument';
 import Signup from '../../pages/Signup/Signup';
 import Login from '../../pages/Login/Login';
 import Logout from '../../pages/Logout/Logout';
+import VerifyEmail from '../../pages/VerifyEmail/VerifyEmail';
 import RecoverPassword from '../../pages/RecoverPassword/RecoverPassword';
 import ResetPassword from '../../pages/ResetPassword/ResetPassword';
 import Profile from '../../pages/Profile/Profile';
@@ -27,9 +31,20 @@ import ExamplePage from '../../pages/ExamplePage/ExamplePage';
 
 import './App.scss';
 
+const handleResendVerificationEmail = (emailAddress) => {
+  Meteor.call('users.sendVerificationEmail', (error) => {
+    if (error) {
+      Bert.alert(error.reason, 'danger');
+    } else {
+      Bert.alert(`Check ${emailAddress} for a verification link!`, 'success');
+    }
+  });
+};
+
 const App = props => (
   <Router>
     {!props.loading ? <div className="App">
+      {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p>Hey friend! Can you <strong>verify your email address</strong> ({props.emailAddress}) for us? <Button bsStyle="link" onClick={() => handleResendVerificationEmail(props.emailAddress)} href="#">Re-send verification email</Button></p></Alert> : ''}
       <Navigation {...props} />
       <Grid>
         <Switch>
@@ -42,6 +57,7 @@ const App = props => (
           <Public path="/signup" component={Signup} {...props} />
           <Public path="/login" component={Login} {...props} />
           <Public path="/logout" component={Logout} {...props} />
+          <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
           <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
           <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
           <Route name="terms" path="/terms" component={Terms} />
@@ -55,8 +71,16 @@ const App = props => (
   </Router>
 );
 
+App.defaultProps = {
+  userId: '',
+  emailAddress: '',
+};
+
 App.propTypes = {
   loading: PropTypes.bool.isRequired,
+  userId: PropTypes.string,
+  emailAddress: PropTypes.string,
+  emailVerified: PropTypes.bool.isRequired,
 };
 
 const getUserName = name => ({
@@ -78,5 +102,8 @@ export default createContainer(() => {
     authenticated: !loggingIn && !!userId,
     name: name || emailAddress,
     roles: !loading && Roles.getRolesForUser(userId),
+    userId,
+    emailAddress,
+    emailVerified: user ? user && user.emails && user.emails[0].verified : true,
   };
 }, App);