Sending an email to a user to confirm their email address

.env.sample

@@ -38,3 +38,14 @@ export GIT_REPO_CHECKOUT=./tmp/index-co
 # to the address `http://localhost:4200/authorize/github`.
 export GH_CLIENT_ID=
 export GH_CLIENT_SECRET=
+
+# Credentials for configuring Mailgun. You can leave these commented out
+# if you are not interested in actually sending emails. If left empty,
+# a mock email will be sent to a file in your local '/tmp/' directory.
+# If interested in setting up Mailgun to send emails, you will have
+# to create an account with Mailgun and modify these manually.
+# If running a crates mirror on heroku, you can instead add the Mailgun
+# app to your instance and shouldn't have to mess with these.
+# export MAILGUN_SMTP_LOGIN=
+# export MAILGUN_SMTP_PASSWORD=
+# export MAILGUN_SMTP_SERVER=

Cargo.toml

@@ -59,6 +59,7 @@ comrak = { version = "0.1.9", default-features = false }
 ammonia = "0.7.0"
 docopt = "0.8.1"
 itertools = "0.6.0"
+lettre = "0.6"
 
 conduit = "0.8"
 conduit-conditional-get = "0.8"

app/components/email-input.js

@@ -1,15 +1,31 @@
 import Component from '@ember/component';
 import { empty } from '@ember/object/computed';
+import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
+    ajax: service(),
+    flashMessages: service(),
+
     type: '',
     value: '',
     isEditing: false,
     user: null,
     disableSave: empty('user.email'),
     notValidEmail: false,
     prevEmail: '',
-    emailIsNull: true,
+    emailIsNull: computed('user.email', function() {
+        let email = this.get('user.email');
+        return (email == null);
+    }),
+    emailNotVerified: computed('user.email', 'user.email_verified', function() {
+        let email = this.get('user.email');
+        let verified = this.get('user.email_verified');
+
+        return (email != null && !verified);
+    }),
+    isError: false,
+    emailError: '',
 
     actions: {
         editEmail() {
@@ -48,6 +64,8 @@ export default Component.extend({
                         msg = 'An unknown error occurred while saving this email.';
                     }
                     this.set('serverError', msg);
+                    this.set('isError', true);
+                    this.set('emailError', `Error in saving email: ${msg}`);
                 });
 
             this.set('isEditing', false);
@@ -57,6 +75,30 @@ export default Component.extend({
         cancelEdit() {
             this.set('isEditing', false);
             this.set('value', this.get('prevEmail'));
+        },
+
+        resendEmail() {
+            let user = this.get('user');
+
+            this.get('ajax').raw(`/api/v1/users/${user.id}/resend`, { method: 'PUT',
+                user: {
+                    avatar: user.avatar,
+                    email: user.email,
+                    email_verified: user.email_verified,
+                    kind: user.kind,
+                    login: user.login,
+                    name: user.name,
+                    url: user.url
+                }
+            }).catch((error) => {
+                if (error.payload) {
+                    this.set('isError', true);
+                    this.set('emailError', `Error in resending message: ${error.payload.errors[0].detail}`);
+                } else {
+                    this.set('isError', true);
+                    this.set('emailError', 'Unknown error in resending message');
+                }
+            });
         }
     }
 });

app/models/user.js

@@ -2,6 +2,7 @@ import DS from 'ember-data';
 
 export default DS.Model.extend({
     email: DS.attr('string'),
+    email_verified: DS.attr('boolean'),
     name: DS.attr('string'),
     login: DS.attr('string'),
     avatar: DS.attr('string'),

app/router.js

@@ -45,6 +45,7 @@ Router.map(function() {
     this.route('catchAll', { path: '*path' });
     this.route('team', { path: '/teams/:team_id' });
     this.route('policies');
+    this.route('confirm', { path: '/confirm/:email_token' });
 });
 
 export default Router;

app/routes/confirm.js

@@ -0,0 +1,37 @@
+import Ember from 'ember';
+import { inject as service } from '@ember/service';
+
+export default Ember.Route.extend({
+    flashMessages: service(),
+    ajax: service(),
+
+    model(params) {
+        return this.get('ajax').raw(`/api/v1/confirm/${params.email_token}`, { method: 'PUT', data: {} })
+            .then(() => {
+                /*  We need this block to reload the user model from the database,
+                    without which if we haven't submitted another GET /me after
+                    clicking the link and before checking their account info page,
+                    the user will still see that their email has not yet been
+                    validated and could potentially be confused, resend the email,
+                    and set up a situation where their email has been verified but
+                    they have an unverified token sitting in the DB.
+
+                    Suggestions of a more ideomatic way to fix/test this are welcome!
+                */
+                if (this.session.get('isLoggedIn')) {
+                    this.get('ajax').request('/api/v1/me').then((response) => {
+                        this.session.set('currentUser', this.store.push(this.store.normalize('user', response.user)));
+                    });
+                }
+            })
+            .catch((error) => {
+                if (error.payload) {
+                    this.get('flashMessages').queue(`Error in email confirmation: ${error.payload.errors[0].detail}`);
+                    return this.replaceWith('index');
+                } else {
+                    this.get('flashMessages').queue(`Unknown error in email confirmation`);
+                    return this.replaceWith('index');
+                }
+            });
+    }
+});

app/styles/me.scss

@@ -65,6 +65,47 @@
     }
 }
 
+#me-email {
+    border-bottom: 5px solid $gray-border;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+    @include display-flex;
+    @include flex-direction(column);
+    .row {
+        width: 100%;
+        border: 1px solid #d5d3cb;
+        border-bottom-width: 0px;
+        &:last-child { border-bottom-width: 1px; }
+        padding: 10px 20px;
+        @include display-flex;
+        @include align-items(center);
+        .label {
+            @include flex(1);
+            margin-right: 0.4em;
+            font-weight: bold;
+        }
+        .email {
+            @include flex(20);
+        }
+        .actions {
+            @include display-flex;
+            @include align-items(center);
+            img { margin-left: 10px }
+        }
+        .email-form {
+            display: inline-flex;
+        }
+        .space-right {
+            margin-right: 10px;
+        }
+    }
+    .friendly-message {
+        width: 95%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
 #me-api {
     @media only screen and (max-width: 350px) {
         .api { display: none; }

app/templates/components/email-input.hbs

@@ -1,17 +1,22 @@
+{{#if emailIsNull }}
+    <div class='friendly-message'>
+        <p class='small-text'> Please add your email address. We will only use
+        it to contact you about your account. We promise we'll never share it!
+        </p>
+    </div>
+{{/if}}
+
 {{#if isEditing }}
     <div class='row'>
         <div class='label'>
             <dt>Email</dt>
         </div>
-        <form {{action 'saveEmail' on='submit'}}>
-            {{input type=type value=value placeholder='Email' class='form-control space-bottom'}}
+        <form class='email-form' {{action 'saveEmail' on='submit'}}>
+            {{input type=type value=value placeholder='Email' class='form-control space-right'}}
             {{#if notValidEmail }}
-                <p class='small-text error'>Invalid email format. Please try again.</p>
-            {{/if}}
-            {{#if emailIsNull }}
-                <p class='small-text'> Please add your email address. We will only use
-                it to contact you about your account. We promise we'll never share it!
-                </p>
+                <div class='error'>
+                    <p class='small-text error'>Whoops, that email format is invalid</p>
+                </div>
             {{/if}}
             <div class='actions'>
                 <button type='submit' class='small yellow-button space-right' disabled={{disableSave}}>Save</button>
@@ -20,7 +25,7 @@
         </form>
     </div>
 {{else}}
-    <div class='row align-center'>
+    <div class='row'>
         <div class='label'>
             <dt>Email</dt>
         </div>
@@ -31,4 +36,21 @@
             <button class='small yellow-button space-left' {{action 'editEmail'}}>Edit</button>
         </div>
     </div>
+    {{#if emailNotVerified }}
+        <div class='row'>
+            <div class='label'>
+                <p class='small-text'>Your email has not yet been verified.</p>
+            </div>
+            <div class='actions'>
+                <button class='small yellow-button space-left' {{action 'resendEmail'}}>Resend</button>
+            </div>
+        </div>
+    {{/if}}
+    {{#if isError}}
+        <div class='row'>
+            <div class='label'>
+                <p class='small-text'>{{emailError}}</p>
+            </div>
+        </div>
+    {{/if}}
 {{/if}}

app/templates/confirm.hbs

@@ -0,0 +1 @@
+<h1>Thank you for confirming your email! :)</h1>

app/templates/error.hbs

@@ -1,5 +1,5 @@
 <h1>Something Went Wrong!</h1>
 <h5>{{model.message}}</h5>
 <pre>
-  {{model.stack}}
+    {{model.stack}}
 </pre>

app/templates/me/index.hbs

@@ -16,11 +16,15 @@
             <dd>{{ model.user.name }}</dd>
             <dt>GitHub Account</dt>
             <dd>{{ model.user.login }}</dd>
-            {{email-input type='email' value=model.user.email user=model.user}}
         </dl>
     </div>
 </div>
 
+<div id='me-email'>
+    <h2>User Email</h2>
+    {{email-input type='email' value=model.user.email user=model.user}}
+</div>
+
 <div id='me-api'>
     <div class='me-subheading'>
         <h2>API Access</h2>

docs/CONTRIBUTING.md

@@ -338,6 +338,35 @@ yarn run start:local
 
 And then you should be able to visit http://localhost:4200!
 
+##### Using Mailgun to Send Emails
+
+We currently have email functionality enabled for confirming a user's email
+address. In development, the sending of emails is simulated by a file
+representing the email being created in your local `/tmp/` directory. If
+you want to test sending real emails, you will have to either set the
+Mailgun environment variables in `.env` manually or run your app instance
+on Heroku and add the Mailgun app.
+
+To set the environment variables manually, create an account and configure
+Mailgun. [These quick start instructions]
+(http://mailgun-documentation.readthedocs.io/en/latest/quickstart.html)
+might be helpful. Once you get the environment variables for the app, you
+will have to add them to the bottom of the `.env` file. You will need to
+fill in the `MAILGUN_SMTP_LOGIN`, `MAILGUN_SMTP_PASSWORD`, and
+`MAILGUN_SMTP_SERVER` fields.
+
+If using Heroku, you should be able to add the app to your instance on your
+dashboard. When your code is pushed and run on Heroku, the environment
+variables should be detected and you should not have to set anything
+manually.
+
+In either case, you should be able to check in your Mailgun account to see
+if emails are being detected and sent. Relevant information should be under
+the 'logs' tab on your Mailgun dashboard. To access, if the variables were
+set up manually, log in to your account. If the variables were set through
+Heroku, you should be able to click on the Mailgun icon in your Heroku
+dashboard, which should take you to your Mailgun dashboard.
+
 #### Running the backend tests
 
 In your `.env` file, set `TEST_DATABASE_URL` to a value that's the same as

migrations/20170804200817_add_email_table/down.sql

@@ -0,0 +1,3 @@
+-- This file should undo anything in `up.sql`
+DROP table tokens; 
+DROP table emails;

migrations/20170804200817_add_email_table/up.sql

@@ -0,0 +1,17 @@
+-- Your SQL goes here
+CREATE table emails (
+    id          SERIAL PRIMARY KEY,
+    user_id     INTEGER NOT NULL UNIQUE,
+    email       VARCHAR NOT NULL,
+    verified    BOOLEAN DEFAULT false NOT NULL
+);
+
+CREATE table tokens (
+    id          SERIAL PRIMARY KEY,
+    email_id    INTEGER NOT NULL UNIQUE REFERENCES emails,
+    token       VARCHAR NOT NULL,
+    created_at  TIMESTAMP NOT NULL DEFAULT now()
+);
+
+INSERT INTO emails (user_id, email)
+    SELECT id, email FROM users WHERE email IS NOT NULL;