Profile page and password update
New profile page added. Also added new password update functionality I need to figure out how to update all elements of user profile.
This commit is contained in:
kelepirci
parent
669eeaabad
commit
30b400005a
|
|
@ -50,4 +50,8 @@ def create_app(config_name):
|
|||
from .auth import auth as auth_blueprint
|
||||
dash.register_blueprint(auth_blueprint, url_prefix='/auth')
|
||||
|
||||
# user profile application
|
||||
from .profile import profile as profile_blueprint
|
||||
dash.register_blueprint(profile_blueprint, url_prefix='/profile')
|
||||
|
||||
return dash
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
from flask import Blueprint
|
||||
|
||||
profile = Blueprint('profile', __name__)
|
||||
|
||||
from . import views
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
from flask_wtf import Form
|
||||
from flask import flash
|
||||
from wtforms import StringField, PasswordField, BooleanField, SubmitField, ValidationError
|
||||
from wtforms.validators import Required, Length, Email, Regexp, EqualTo
|
||||
from ..models import User
|
||||
|
||||
class ChangePasswordForm(Form):
|
||||
old_password = PasswordField('Password', validators=[Required()])
|
||||
password = PasswordField('Password', validators=[
|
||||
Required(), EqualTo('password2', message='Passwords must match.')])
|
||||
password2 = PasswordField('Confirm password', validators=[Required()])
|
||||
type = StringField()
|
||||
|
||||
class UpdateProfileForm(Form):
|
||||
full_name = StringField('Full name', validators=[Required(), Length(1, 255)])
|
||||
type = StringField()
|
||||
|
||||
def validate_full_name(self, field):
|
||||
if User.query.filter_by(full_name=field.data).first():
|
||||
raise ValidationError('You have not changed your full name.')
|
||||
|
||||
class ChangeUserNameForm(Form):
|
||||
username = StringField('Username', validators=[
|
||||
Required(), Length(1, 64), Regexp('^[A-Za-z][A-Za-z0-9_.]*$', 0,
|
||||
'Usernames must have only letters, '
|
||||
'numbers, dots or underscores')])
|
||||
type = StringField()
|
||||
|
||||
def validate_username(self, field):
|
||||
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),
|
||||
Email()])
|
||||
type = StringField()
|
||||
|
||||
def validate_email(self, field):
|
||||
if User.query.filter_by(email=field.data).first():
|
||||
raise ValidationError('Email already registered.')
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import datetime
|
||||
from flask import render_template, redirect, request, url_for, flash
|
||||
from flask_login import login_user, logout_user, login_required, \
|
||||
current_user
|
||||
from . import profile
|
||||
from .. import db
|
||||
from ..models import User
|
||||
from ..email import send_email
|
||||
from .forms import ChangePasswordForm, UpdateProfileForm, ChangeUserNameForm
|
||||
|
||||
|
||||
@profile.route('/', methods=['GET', 'POST'])
|
||||
@login_required
|
||||
def index():
|
||||
formChangePassword = ChangePasswordForm()
|
||||
formChangeUserName = ChangeUserNameForm()
|
||||
formUpdateProfile = UpdateProfileForm()
|
||||
|
||||
if formChangePassword.type.data == 'formChangePassword':
|
||||
if formChangePassword.validate_on_submit():
|
||||
if current_user.verify_password(formChangePassword.old_password.data):
|
||||
current_user.password = formChangePassword.password.data
|
||||
db.session.add(current_user)
|
||||
flash('You password has been changed.')
|
||||
send_email(current_user.email, 'You Password has Changed',
|
||||
'profile/email/password_changed', user=current_user)
|
||||
return redirect(url_for('profile.index'))
|
||||
else:
|
||||
flash('Invalid password.')
|
||||
return redirect(url_for('profile.index'))
|
||||
if formChangeUserName.type.data == 'formChangeUserName':
|
||||
if formChangeUserName.validate_on_submit():
|
||||
current_user.username = formChangeUserName.username.data
|
||||
db.session.add(current_user)
|
||||
flash('formChangeUserName')
|
||||
return redirect(url_for('profile.index'))
|
||||
if formUpdateProfile.type.data == 'formUpdateProfile':
|
||||
if formUpdateProfile.validate_on_submit():
|
||||
current_user.full_name = formUpdateProfile.full_name.data
|
||||
db.session.add(current_user)
|
||||
flash('formUpdateProfile')
|
||||
return redirect(url_for('profile.index'))
|
||||
return render_template('profile/index.html',
|
||||
formChangePassword=formChangePassword,
|
||||
formChangeUserName=formChangeUserName,
|
||||
formUpdateProfile=formUpdateProfile)
|
||||
|
|
@ -230,7 +230,7 @@
|
|||
<!-- Menu Footer-->
|
||||
<li class="user-footer">
|
||||
<div class="pull-left">
|
||||
<a href="#" class="btn btn-default btn-flat">Profile</a>
|
||||
<a href="{{ url_for('profile.index') }}" class="btn btn-default btn-flat">Profile</a>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
{% if current_user.is_authenticated %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<p>Dear {{ user.username }},</p>
|
||||
<p>Your password recently has been changed</p>
|
||||
<p>If you have not changed your password, please contuct us immeadeatly!</p>
|
||||
<p>Sincerely,</p>
|
||||
<p>The - Stack Team</p>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
Dear {{ user.username }},
|
||||
|
||||
Your password recently has been changed.
|
||||
|
||||
If you have not changed your password, please contuct us immeadeatly!
|
||||
Sincerely,
|
||||
|
||||
The - Stack Team
|
||||
|
|
@ -0,0 +1,404 @@
|
|||
{% extends "adminlte/base.html" %}
|
||||
{% import "adminlte/layout.html" as layout with context %}
|
||||
{% import "adminlte/widgets.html" as widgets with context %}
|
||||
|
||||
{% block navbar %}
|
||||
<!-- Sidebar toggle button-->
|
||||
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<div class="navbar-custom-menu">
|
||||
<ul class="nav navbar-nav">
|
||||
<!-- Messages: style can be found in dropdown.less-->
|
||||
<li class="dropdown messages-menu">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-envelope"></i>
|
||||
<span class="label label-success">4</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="header">You have 4 messages</li>
|
||||
<li>
|
||||
<!-- inner menu: contains the actual data -->
|
||||
<ul class="menu">
|
||||
<li><!-- start message -->
|
||||
<a href="#">
|
||||
<div class="pull-left">
|
||||
<img src="{{ current_user.avatar }}" class="img-circle" alt="User Image"/>
|
||||
</div>
|
||||
<h4>
|
||||
Support Team
|
||||
<small><i class="fa fa-clock-o"></i> 5 mins</small>
|
||||
</h4>
|
||||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li><!-- end message -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="pull-left">
|
||||
<img src="{{ url_for('static', filename='img/avatar2.png') }}" class="img-circle" alt="user image"/>
|
||||
</div>
|
||||
<h4>
|
||||
AdminLTE Design Team
|
||||
<small><i class="fa fa-clock-o"></i> 2 hours</small>
|
||||
</h4>
|
||||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="pull-left">
|
||||
<img src="{{ url_for('static', filename='img/avatar.png') }}" class="img-circle" alt="user image"/>
|
||||
</div>
|
||||
<h4>
|
||||
Developers
|
||||
<small><i class="fa fa-clock-o"></i> Today</small>
|
||||
</h4>
|
||||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="pull-left">
|
||||
<img src="{{ url_for('static', filename='img/avatar2.png') }}" class="img-circle" alt="user image"/>
|
||||
</div>
|
||||
<h4>
|
||||
Sales Department
|
||||
<small><i class="fa fa-clock-o"></i> Yesterday</small>
|
||||
</h4>
|
||||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="pull-left">
|
||||
<img src="{{ url_for('static', filename='img/avatar.png') }}" class="img-circle" alt="user image"/>
|
||||
</div>
|
||||
<h4>
|
||||
Reviewers
|
||||
<small><i class="fa fa-clock-o"></i> 2 days</small>
|
||||
</h4>
|
||||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="footer"><a href="#">See All Messages</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- Notifications: style can be found in dropdown.less -->
|
||||
<li class="dropdown notifications-menu">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-warning"></i>
|
||||
<span class="label label-warning">10</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="header">You have 10 notifications</li>
|
||||
<li>
|
||||
<!-- inner menu: contains the actual data -->
|
||||
<ul class="menu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="ion ion-ios7-people info"></i> 5 new members joined today
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-users warning"></i> 5 new members joined
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="ion ion-ios7-cart success"></i> 25 sales made
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="ion ion-ios7-person danger"></i> You changed your username
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="footer"><a href="#">View all</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- Tasks: style can be found in dropdown.less -->
|
||||
<li class="dropdown tasks-menu">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-tasks"></i>
|
||||
<span class="label label-danger">9</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="header">You have 9 tasks</li>
|
||||
<li>
|
||||
<!-- inner menu: contains the actual data -->
|
||||
<ul class="menu">
|
||||
<li><!-- Task item -->
|
||||
<a href="#">
|
||||
<h3>
|
||||
Design some buttons
|
||||
<small class="pull-right">20%</small>
|
||||
</h3>
|
||||
<div class="progress xs">
|
||||
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
||||
<span class="sr-only">20% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li><!-- end task item -->
|
||||
<li><!-- Task item -->
|
||||
<a href="#">
|
||||
<h3>
|
||||
Create a nice theme
|
||||
<small class="pull-right">40%</small>
|
||||
</h3>
|
||||
<div class="progress xs">
|
||||
<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
||||
<span class="sr-only">40% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li><!-- end task item -->
|
||||
<li><!-- Task item -->
|
||||
<a href="#">
|
||||
<h3>
|
||||
Some task I need to do
|
||||
<small class="pull-right">60%</small>
|
||||
</h3>
|
||||
<div class="progress xs">
|
||||
<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
||||
<span class="sr-only">60% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li><!-- end task item -->
|
||||
<li><!-- Task item -->
|
||||
<a href="#">
|
||||
<h3>
|
||||
Make beautiful transitions
|
||||
<small class="pull-right">80%</small>
|
||||
</h3>
|
||||
<div class="progress xs">
|
||||
<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
||||
<span class="sr-only">80% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li><!-- end task item -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="footer">
|
||||
<a href="#">View all tasks</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- User Account: style can be found in dropdown.less -->
|
||||
<li class="dropdown user user-menu">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="glyphicon glyphicon-user"></i>
|
||||
<span>{{ current_user.full_name }} <i class="caret"></i></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<!-- User image -->
|
||||
<li class="user-header bg-light-blue">
|
||||
<img src="{{ current_user.avatar }}" class="img-circle" alt="User Image" />
|
||||
<p>
|
||||
{{ current_user.full_name }} - Web Developer
|
||||
<small>Member since {{ current_user.created_at.strftime("%b. %Y") }}</small>
|
||||
</p>
|
||||
</li>
|
||||
<!-- Menu Body -->
|
||||
<li class="user-body">
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">Followers</a>
|
||||
</div>
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">Sales</a>
|
||||
</div>
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">Friends</a>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Menu Footer-->
|
||||
<li class="user-footer">
|
||||
<div class="pull-left">
|
||||
<a href="#" class="btn btn-default btn-flat">Profile</a>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
{% if current_user.is_authenticated %}
|
||||
<a href="{{ url_for('auth.logout') }}" class="btn btn-default btn-flat">Sign out</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{%- endblock navbar %}
|
||||
{% block sidebar -%}
|
||||
<!-- sidebar: style can be found in sidebar.less -->
|
||||
<!-- sidebar menu: : style can be found in sidebar.less -->
|
||||
<div class="user-panel">
|
||||
<div class="pull-left image">
|
||||
<img src="{{ current_user.avatar }}" alt="User Image" class="img-circle">
|
||||
</div>
|
||||
<div class="pull-left info">
|
||||
<p>{{ current_user.full_name }}</p>
|
||||
<a href="#">
|
||||
<i class="fa fa-circle text-success"></i>
|
||||
Online
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="header">HEADER</li>
|
||||
<li class="active">
|
||||
<a href="{{ url_for('main.index') }}">
|
||||
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="treeview">
|
||||
<a href="#">
|
||||
<i class="fa fa-folder"></i>
|
||||
<span>Examples</span>
|
||||
<i class="fa fa-angle-left pull-right"></i>
|
||||
</a>
|
||||
<ul class="treeview-menu">
|
||||
<li>
|
||||
<a href="{{ url_for('auth.login') }}">
|
||||
<i class="fa fa-circle-o"></i>
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('main.lockscreen') }}">
|
||||
<i class="fa fa-circle-o"></i>
|
||||
Lockscreen
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- /.sidebar -->
|
||||
{%- endblock sidebar %}
|
||||
{% block content_header -%}
|
||||
<!-- Content Header (Page header) -->
|
||||
<section class="content-header">
|
||||
<h1>
|
||||
User Profile of {{ current_user.full_name }}
|
||||
</h1>
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
|
||||
<li><a href="#">Examples</a></li>
|
||||
<li class="active">User profile</li>
|
||||
</ol>
|
||||
</section>
|
||||
{%- endblock content_header %}
|
||||
{% block content -%}
|
||||
<!-- Main content -->
|
||||
<section class="content">
|
||||
<div class="row">
|
||||
<!-- /.col -->
|
||||
<div class="col-md-12">
|
||||
<div class="nav-tabs-custom">
|
||||
<ul class="nav nav-tabs">
|
||||
<li><a href="#activity" data-toggle="tab">Activity</a></li>
|
||||
<li><a href="#timeline" data-toggle="tab">Timeline</a></li>
|
||||
<li class="active"><a href="#settings" data-toggle="tab">Settings</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane" id="activity">
|
||||
<p>User activity log...</p>
|
||||
</div>
|
||||
|
||||
<div class="active tab-pane" id="settings">
|
||||
<h4>Change Your Password</h4>
|
||||
<form class="form-horizontal" action="" method="post">
|
||||
<input type="hidden" name="type" value="formChangePassword">
|
||||
{{ formChangePassword.hidden_tag() }}
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<input type="password" name="old_password" class="form-control" id="old_password" placeholder="Old Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<input type="password" name="password" class="form-control" id="password" placeholder="New Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<input type="password" name="password2" class="form-control" id="password2" placeholder="New Password Again">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button type="submit" class="btn btn-primary">Change</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<hr />
|
||||
<h4>Change Your User Name</h4>
|
||||
<form class="form-horizontal" method="post">
|
||||
{{ formChangeUserName.hidden_tag() }}
|
||||
<input type="hidden" name="type" value="formChangeUserName">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<input type="text" name="username" class="form-control"
|
||||
value="{{ current_user.username }}" id="username" placeholder="Your New Username">
|
||||
{% if formChangeUserName.username.errors %}
|
||||
<span class="text-red">{% for error in formChangeUserName.username.errors %} {{ error }} {% endfor %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button type="submit" class="btn btn-primary">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<hr />
|
||||
<h4>Update Your Profile</h4>
|
||||
<form class="form-horizontal" method="post">
|
||||
{{ formUpdateProfile.hidden_tag() }}
|
||||
<input type="hidden" name="type" value="formUpdateProfile">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<input type="text" name="full_name" class="form-control" value="{{ current_user.full_name }}" id="full_name" placeholder="Your New Name">
|
||||
{% if formUpdateProfile.full_name.errors %}
|
||||
<span class="text-red">{% for error in formUpdateProfile.full_name.errors %} {{ error }} {% endfor %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button type="submit" class="btn btn-primary">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.tab-pane -->
|
||||
</div>
|
||||
<!-- /.tab-content -->
|
||||
</div>
|
||||
<!-- /.nav-tabs-custom -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
|
||||
{%- endblock content %}
|
||||
Loading…
Reference in New Issue