Initial cosmetic changes to the process of verifying a changed email

7 files changed, 102 insertions, 8 deletions

diff --git a/api/templates/email_change_body.html b/api/templates/email_change_body.html
index 0ec4ace2a..7addb6f35 100644
--- a/api/templates/email_change_body.html
+++ b/api/templates/email_change_body.html
@@ -18,7 +18,7 @@
                                         <tr>
                                             <td style="border-bottom: 1px solid #ddd; padding: 0 0 20px;">
                                                 <h2 style="font-weight: normal; margin-top: 10px;">You updated your email</h2>
-                                                <p>You updated your email for {{.Props.TeamDisplayName}} on {{ .Props.TeamURL }}<br> If this change wasn't initiated by you, please reply to this email and let us know.</p>
+                                                <p>You email address for {{.Props.TeamDisplayName}} has been changed.<br>If you did not make this change, please contact the system administrator.</p>
                                             </td>
                                         </tr>
                                         <tr>
@@ -51,4 +51,3 @@
 </table>
 
 {{end}}
-
diff --git a/api/templates/email_change_subject.html b/api/templates/email_change_subject.html
index 5690b148a..962ae868e 100644
--- a/api/templates/email_change_subject.html
+++ b/api/templates/email_change_subject.html
@@ -1 +1 @@
-{{define "email_change_subject"}}You updated your email for {{.Props.TeamDisplayName}} on {{ .Props.Domain }}{{end}}
+{{define "email_change_subject"}}[{{.ClientProps.SiteName}}] Your email address has changed for {{.Props.TeamDisplayName}}{{end}}
diff --git a/api/templates/email_change_verify_body.html b/api/templates/email_change_verify_body.html
new file mode 100644
index 000000000..296a3d968
--- /dev/null
+++ b/api/templates/email_change_verify_body.html
@@ -0,0 +1,56 @@
+{{define "verify_new_email_body"}}
+
+<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 20px; line-height: 1.7; color: #555;">
+    <tr>
+        <td>
+            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 660px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; background: #FFF;">
+                <tr>
+                    <td style="border: 1px solid #ddd;">
+                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
+                            <tr>
+                                <td style="padding: 20px 20px 10px; text-align:left;">
+                                    <img src="{{.Props.SiteURL}}/static/images/{{.ClientProps.SiteName}}-logodark.png" width="130px" style="opacity: 0.5" alt="">
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <table border="0" cellpadding="0" cellspacing="0" style="padding: 20px 50px 0; text-align: center; margin: 0 auto">
+                                        <tr>
+                                            <td style="border-bottom: 1px solid #ddd; padding: 0 0 20px;">
+                                                <h2 style="font-weight: normal; margin-top: 10px;">You updated your email</h2>
+                                                <p>To finish updating your email address for {{.Props.TeamDisplayName}}, please click the link below to confirm this is the right address.</p>
+                                                <p style="margin: 20px 0 15px">
+                                                    <a href="{{.Props.VerifyUrl}}" style="background: #2389D7; border-radius: 3px; color: #fff; border: none; outline: none; min-width: 200px; padding: 15px 25px; font-size: 14px; font-family: inherit; cursor: pointer; -webkit-appearance: none;text-decoration: none;">Verify Email</a>
+                                                </p>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td style="color: #999; padding-top: 20px; line-height: 25px; font-size: 13px;">
+                                                Any questions at all, mail us any time: <a href="mailto:{{.ClientProps.FeedbackEmail}}" style="text-decoration: none; color:#2389D7;">{{.ClientProps.FeedbackEmail}}</a>.<br>
+                                                Best wishes,<br>
+                                                The {{.ClientProps.SiteName}} Team<br>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td style="text-align: center;color: #AAA; font-size: 11px; padding-bottom: 10px;">
+                                    <p style="margin: 25px 0;">
+                                        <img width="65" src="{{.Props.SiteURL}}/static/images/circles.png" alt="">
+                                    </p>
+                                    <p style="padding: 0 50px;">
+                                        (c) 2015 SpinPunch, Inc. 855 El Camino Real, 13A-168, Palo Alto, CA, 94301.<br>
+                                        If you no longer wish to receive these emails, click on the following link: <a href="mailto:{{.ClientProps.FeedbackEmail}}?subject=Unsubscribe&body=Unsubscribe" style="text-decoration: none; color:#2389D7;">Unsubscribe</a>
+                                    </p>
+                                </td>
+                            </tr>
+                        </table>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+</table>
+
+{{end}}
diff --git a/api/templates/email_change_verify_subject.html b/api/templates/email_change_verify_subject.html
new file mode 100644
index 000000000..f1cebd710
--- /dev/null
+++ b/api/templates/email_change_verify_subject.html
@@ -0,0 +1 @@
+{{define "verify_new_email_subject"}}[{{.ClientProps.SiteName}}] Verify new email address for {{.Props.TeamDisplayName}}{{end}}
diff --git a/utils/config.go b/utils/config.go
index 44c4c43af..0a2697e6c 100644
--- a/utils/config.go
+++ b/utils/config.go
@@ -189,6 +189,7 @@ func getClientProperties(c *model.Config) map[string]string {
 
 	props["SendEmailNotifications"] = strconv.FormatBool(c.EmailSettings.SendEmailNotifications)
 	props["EnableSignUpWithEmail"] = strconv.FormatBool(c.EmailSettings.EnableSignUpWithEmail)
+	props["RequireEmailVerification"] = strconv.FormatBool(c.EmailSettings.RequireEmailVerification)
 	props["FeedbackEmail"] = c.EmailSettings.FeedbackEmail
 
 	props["EnableSignUpWithGitLab"] = strconv.FormatBool(c.GitLabSettings.Enable)
diff --git a/web/react/components/user_settings/user_settings_general.jsx b/web/react/components/user_settings/user_settings_general.jsx
index c1d4c4ab5..bd7ed12db 100644
--- a/web/react/components/user_settings/user_settings_general.jsx
+++ b/web/react/components/user_settings/user_settings_general.jsx
@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 var UserStore = require('../../stores/user_store.jsx');
+var ErrorStore = require('../../stores/error_store.jsx');
 var SettingItemMin = require('../setting_item_min.jsx');
 var SettingItemMax = require('../setting_item_max.jsx');
 var SettingPicture = require('../setting_picture.jsx');
@@ -108,13 +109,26 @@ export default class UserSettingsGeneralTab extends React.Component {
 
         user.email = email;
 
-        this.submitUser(user);
+        if (!this.state.emailEnabled || !this.state.emailVerificationEnabled) {
+            this.submitUser(user, {emailChangeInProgress: false});
+        } else {
+            this.submitUser(user, {emailChangeInProgress: true});
+        }
     }
-    submitUser(user) {
+    submitUser(user, newState) {
         client.updateUser(user,
             function updateSuccess() {
                 this.updateSection('');
                 AsyncClient.getMe();
+
+                if (newState) {
+                    if (newState.emailChangeInProgress) {
+                        ErrorStore.storeLastError({message: 'Check your email at ' + user.email + ' to verify the address.'});
+                        ErrorStore.emitChange();
+                    }
+
+                    this.setState(newState);
+                }
             }.bind(this),
             function updateFailure(err) {
                 var state = this.setupInitialState(this.props);
@@ -209,8 +223,11 @@ export default class UserSettingsGeneralTab extends React.Component {
     setupInitialState(props) {
         var user = props.user;
         var emailEnabled = global.window.config.SendEmailNotifications === 'true';
+        var emailVerificationEnabled = global.window.config.RequireEmailVerification === 'true';
+
         return {username: user.username, firstName: user.first_name, lastName: user.last_name, nickname: user.nickname,
-                        email: user.email, picture: null, loadingPicture: false, emailEnabled: emailEnabled};
+                        email: user.email, picture: null, loadingPicture: false, emailEnabled: emailEnabled,
+                        emailVerificationEnabled: emailVerificationEnabled, emailChangeInProgress: false};
     }
     render() {
         var user = this.props.user;
@@ -434,10 +451,17 @@ export default class UserSettingsGeneralTab extends React.Component {
         }
         var emailSection;
         if (this.props.activeSection === 'email') {
-            let helpText = <div>Email is used for notifications, and requires verification if changed.</div>;
+            let helpText = 'Email is used for notifications, and requires verification if changed.';
 
             if (!this.state.emailEnabled) {
                 helpText = <div className='setting-list__hint text-danger'>{'Email has been disabled by your system administrator. No notification emails will be sent until it is enabled.'}</div>;
+            } else if (!this.state.emailVerificationEnabled) {
+                helpText = 'Email is used for notifications.';
+            } else if (this.state.emailChangeInProgress) {
+                const newEmail = UserStore.getCurrentUser().email;
+                if (newEmail) {
+                    helpText = 'A verification email was sent to ' + newEmail + '.';
+                }
             }
 
             inputs.push(
@@ -471,10 +495,22 @@ export default class UserSettingsGeneralTab extends React.Component {
                 />
             );
         } else {
+            let describe = '';
+            if (this.state.emailChangeInProgress) {
+                const newEmail = UserStore.getCurrentUser().email;
+                if (newEmail) {
+                    describe = 'New Address: ' + newEmail + '\nCheck your email to verify the above address.';
+                } else {
+                    describe = 'Check your email to verify your new address';
+                }
+            } else {
+                describe = UserStore.getCurrentUser().email;
+            }
+
             emailSection = (
                 <SettingItemMin
                     title='Email'
-                    describe={UserStore.getCurrentUser().email}
+                    describe={describe}
                     updateSection={function updateEmailSection() {
                         this.updateSection('email');
                     }.bind(this)}
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 1f785f63c..aef7e83f9 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -131,6 +131,7 @@
 
             .section-describe {
                 @include opacity(0.7);
+                white-space:pre;
             }
 
             .divider-dark {