Change Email with Confirmation

This commit will introduce change email feature with
email confirmation system.

dash/models.py

@@ -80,6 +80,28 @@ class User(UserMixin, db.Model):
         self.password = new_password
         db.session.add(self)
         return True
+        
+    # generates token for email change
+    def generate_email_change_token(self, new_email, expiration=3600):
+        s = Serializer(current_app.config['SECRET_KEY'], expiration)
+        return s.dumps({'change_email': self.id, 'new_email': new_email})
+    
+    def change_email(self, token):
+        s = Serializer(current_app.config['SECRET_KEY'])
+        try:
+            data = s.loads(token)
+        except:
+            return False
+        if data.get('change_email') != self.id:
+            return False
+        new_email = data.get('new_email')
+        if new_email is None:
+            return False
+        if self.query.filter_by(email=new_email).first() is not None:
+            return False
+        self.email = new_email
+        db.session.add(self)
+        return True
     
     def __repr__(self):
         return '<User %r>' % self.username

dash/profile/forms.py

@@ -30,9 +30,10 @@ class ChangeUserNameForm(Form):
         if User.query.filter_by(username=field.data).first():
             raise ValidationError('Username already in use.')
             
-class UpdateEmailForm(Form):
-    email = StringField('Email', validators=[Required(), Length(1, 128),
+class ChangeEmailForm(Form):
+    email = StringField('New Email', validators=[Required(), Length(1, 128),
                                              Email()])
+    password = PasswordField('Password', validators=[Required()])
     type = StringField()
                                              
     def validate_email(self, field):

dash/profile/views.py

@@ -6,7 +6,8 @@ from . import profile
 from .. import db
 from ..models import User
 from ..email import send_email
-from .forms import ChangePasswordForm, UpdateProfileForm, ChangeUserNameForm
+from .forms import ChangePasswordForm, UpdateProfileForm, ChangeUserNameForm, \
+    ChangeEmailForm
 
 
 @profile.route('/', methods=['GET', 'POST'])
@@ -15,6 +16,7 @@ def index():
     formChangePassword = ChangePasswordForm()
     formChangeUserName = ChangeUserNameForm()
     formUpdateProfile = UpdateProfileForm()
+    formChangeEmail = ChangeEmailForm()
     
     if formChangePassword.type.data == 'formChangePassword':
         if formChangePassword.validate_on_submit():
@@ -40,7 +42,30 @@ def index():
             db.session.add(current_user)
             flash('formUpdateProfile')
             return redirect(url_for('profile.index'))
+    if formChangeEmail.type.data == 'formChangeEmail':
+        if formChangeEmail.validate_on_submit():
+            if current_user.verify_password(formChangeEmail.password.data):
+                new_email = formChangeEmail.email.data
+                token = current_user.generate_email_change_token(new_email)
+                send_email(new_email, 'Confirm your email address',
+                       'profile/email/change_email',
+                       user=current_user, token=token)
+                flash('An email with instructions to confirm your new email '
+                      'address has been sent to you.')
+                return redirect(url_for('profile.index'))
+            else:
+                flash('Invalid email address or password.')
     return render_template('profile/index.html',
                             formChangePassword=formChangePassword,
                             formChangeUserName=formChangeUserName,
-                            formUpdateProfile=formUpdateProfile)
+                            formUpdateProfile=formUpdateProfile,
+                            formChangeEmail=formChangeEmail)
+                            
+@profile.route('/change-email/<token>')
+@login_required
+def change_email(token):
+    if current_user.change_email(token):
+        flash('Your email address has been updated.')
+    else:
+        flash('Invalid request.')
+    return redirect(url_for('profile.index'))

dash/templates/profile/email/change_email.html

@@ -0,0 +1,9 @@
+<p>Dear {{ user.username }},</p>
+<p>We have received a request to change your email.</p>
+<p>To confirm your your new email <a href="{{ url_for('auth.confirm', token=token, _external=True) }}">click here</a>.</p>
+<p>Your new email is {{ new_email }}</p>
+<p>Alternatively, you can paste the following link in your browser's address bar:</p>
+<p>{{ url_for('profile.change_email', token=token, _external=True) }}</p>
+<p>Sincerely,</p>
+<p>The - Stack Team</p>
+<p><small>Note: replies to this email address are not monitored.</small></p>

dash/templates/profile/email/change_email.txt

@@ -0,0 +1,13 @@
+Dear {{ user.username }},
+
+We have received a request to change your email.
+
+To confirm your your new email <a href="{{ url_for('auth.confirm', token=token, _external=True) }}">click here</a>.
+
+Alternatively, you can paste the following link in your browser's address bar:
+{{ url_for('profile.change_email', token=token, _external=True) }}
+
+Sincerely,
+The - Stack Team
+
+Note: replies to this email address are not monitored

dash/templates/profile/index.html

@@ -344,7 +344,7 @@
                   </div>
                   <div class="form-group">
                     <div class="col-sm-12">
-                      <button type="submit" class="btn btn-primary">Change</button>
+                      <button type="submit" class="btn btn-primary">Change Password</button>
                     </div>
                   </div>
                 </form>
@@ -364,7 +364,7 @@
                   </div>
                   <div class="form-group">
                     <div class="col-sm-12">
-                      <button type="submit" class="btn btn-primary">Update</button>
+                      <button type="submit" class="btn btn-primary">Change Username</button>
                     </div>
                   </div>                
                 </form>
@@ -383,10 +383,39 @@
                   </div> 
                   <div class="form-group">
                     <div class="col-sm-12">
-                      <button type="submit" class="btn btn-primary">Update</button>
+                      <button type="submit" class="btn btn-primary">Update Profile</button>
                     </div>
                   </div>                
                 </form>
+                <hr />
+                <h4>Change Your Email</h4>
+                <form class="form-horizontal" action="" method="post">
+                <input type="hidden" name="type" value="formChangeEmail">
+                {{ formChangeEmail.hidden_tag() }}
+                  <div class="form-group has-feedback">
+                    <div class="col-sm-12">
+                      <input type="email" name="email" class="form-control" placeholder="Your New Email"">
+                      <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+                      {% if formChangeEmail.email.errors %}
+                        <span class="text-red">{% for error in formChangeEmail.email.errors %} {{ error }} {% endfor %}</span>
+                      {% endif %}
+                    </div>
+                  </div>
+                  <div class="form-group has-feedback">
+                    <div class="col-sm-12">
+                      <input type="password" name="password" class="form-control" placeholder="Your Password">
+                      <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+                      {% if formChangeEmail.password.errors %}
+                        <span class="text-red">{% for error in formChangeEmail.password.errors %} {{ error }} {% endfor %}</span>
+                      {% endif %}
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-sm-12">
+                      <button type="submit" class="btn btn-primary">Change Email</button>
+                    </div>
+                  </div>
+                </form>
               </div>
               <!-- /.tab-pane -->
             </div>