Added better verification when a user changes his or her email

api/templates/email_change_verify_body.html

@@ -1,4 +1,4 @@
-{{define "verify_new_email_body"}}
+{{define "email_change_verify_body"}}
 
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 20px; line-height: 1.7; color: #555;">
     <tr>

api/templates/email_change_verify_subject.html

@@ -1 +1 @@
-{{define "verify_new_email_subject"}}[{{.ClientProps.SiteName}}] Verify new email address for {{.Props.TeamDisplayName}}{{end}}
+{{define "email_change_verify_subject"}}[{{.ClientProps.SiteName}}] Verify new email address for {{.Props.TeamDisplayName}}{{end}}

api/user.go

@@ -888,6 +888,10 @@ func updateUser(c *Context, w http.ResponseWriter, r *http.Request) {
 			} else {
 				team := tresult.Data.(*model.Team)
 				fireAndForgetEmailChangeEmail(rusers[1].Email, team.DisplayName, c.GetTeamURLFromTeam(team), c.GetSiteURL())
+
+				if utils.Cfg.EmailSettings.RequireEmailVerification {
+					fireAndForgetEmailChangeVerifyEmail(rusers[0].Id, rusers[0].Email, team.Name, team.DisplayName, c.GetSiteURL(), c.GetTeamURLFromTeam(team))
+				}
 			}
 		}
 
@@ -1340,6 +1344,25 @@ func fireAndForgetEmailChangeEmail(email, teamDisplayName, teamURL, siteURL stri
 	}()
 }
 
+func fireAndForgetEmailChangeVerifyEmail(userId, newUserEmail, teamName, teamDisplayName, siteURL, teamURL string) {
+	go func() {
+
+		link := fmt.Sprintf("%s/verify_email?uid=%s&hid=%s&teamname=%s&email=%s", siteURL, userId, model.HashPassword(userId), teamName, newUserEmail)
+
+		subjectPage := NewServerTemplatePage("email_change_verify_subject")
+		subjectPage.Props["SiteURL"] = siteURL
+		subjectPage.Props["TeamDisplayName"] = teamDisplayName
+		bodyPage := NewServerTemplatePage("email_change_verify_body")
+		bodyPage.Props["SiteURL"] = siteURL
+		bodyPage.Props["TeamDisplayName"] = teamDisplayName
+		bodyPage.Props["VerifyUrl"] = link
+
+		if err := utils.SendMail(newUserEmail, subjectPage.Render(), bodyPage.Render()); err != nil {
+			l4g.Error("Failed to send verification email successfully err=%v", err)
+		}
+	}()
+}
+
 func updateUserNotify(c *Context, w http.ResponseWriter, r *http.Request) {
 	props := model.MapFromJson(r.Body)
 

web/react/components/user_settings/user_settings_general.jsx

@@ -28,6 +28,7 @@ export default class UserSettingsGeneralTab extends React.Component {
         this.updateLastName = this.updateLastName.bind(this);
         this.updateNickname = this.updateNickname.bind(this);
         this.updateEmail = this.updateEmail.bind(this);
+        this.updateConfirmEmail = this.updateConfirmEmail.bind(this);
         this.updatePicture = this.updatePicture.bind(this);
         this.updateSection = this.updateSection.bind(this);
 
@@ -97,6 +98,7 @@ export default class UserSettingsGeneralTab extends React.Component {
 
         var user = UserStore.getCurrentUser();
         var email = this.state.email.trim().toLowerCase();
+        var confirmEmail = this.state.confirmEmail.trim().toLowerCase();
 
         if (user.email === email) {
             return;
@@ -107,12 +109,17 @@ export default class UserSettingsGeneralTab extends React.Component {
             return;
         }
 
+        if (email !== confirmEmail) {
+            this.setState({emailError: 'The new emails you entered do not match'});
+            return;
+        }
+
         user.email = email;
 
-        if (!this.state.emailEnabled || !this.state.emailVerificationEnabled) {
+        if (this.state.emailEnabled && this.state.emailVerificationEnabled) {
-            this.submitUser(user, {emailChangeInProgress: false});
-        } else {
             this.submitUser(user, {emailChangeInProgress: true});
+        } else {
+            this.submitUser(user, {emailChangeInProgress: false});
         }
     }
     submitUser(user, newState) {
@@ -191,6 +198,9 @@ export default class UserSettingsGeneralTab extends React.Component {
     updateEmail(e) {
         this.setState({email: e.target.value});
     }
+    updateConfirmEmail(e) {
+        this.setState({confirmEmail: e.target.value});
+    }
     updatePicture(e) {
         if (e.target.files && e.target.files[0]) {
             this.setState({picture: e.target.files[0]});
@@ -202,7 +212,8 @@ export default class UserSettingsGeneralTab extends React.Component {
         }
     }
     updateSection(section) {
-        this.setState(assign({}, this.setupInitialState(this.props), {clientError: '', serverError: '', emailError: ''}));
+        const emailChangeInProgress = this.state.emailChangeInProgress;
+        this.setState(assign({}, this.setupInitialState(this.props), {emailChangeInProgress: emailChangeInProgress, clientError: '', serverError: '', emailError: ''}));
         this.submitActive = false;
         this.props.updateSection(section);
     }
@@ -226,7 +237,7 @@ export default class UserSettingsGeneralTab extends React.Component {
         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, confirmEmail: '', picture: null, loadingPicture: false, emailEnabled: emailEnabled,
                         emailVerificationEnabled: emailVerificationEnabled, emailChangeInProgress: false};
     }
     render() {
@@ -477,6 +488,22 @@ export default class UserSettingsGeneralTab extends React.Component {
                             />
                         </div>
                     </div>
+                </div>
+            );
+
+            inputs.push(
+                <div key='confirmEmailSetting'>
+                    <div className='form-group'>
+                        <label className='col-sm-5 control-label'>{'Confirm Email'}</label>
+                        <div className='col-sm-7'>
+                            <input
+                                className='form-control'
+                                type='text'
+                                onChange={this.updateConfirmEmail}
+                                value={this.state.confirmEmail}
+                            />
+                        </div>
+                    </div>
                     {helpText}
                 </div>
             );