From 28882b57b120f7c17fa2c39494b2951ab3e73fa2 Mon Sep 17 00:00:00 2001
From: Khanh Ngo <khanh.ngo@lazada.com>
Date: Wed, 16 Dec 2015 14:21:30 +0700
Subject: [PATCH] Add UserProfile page

---
 app/models.py                   |  40 +++++--
 app/templates/base.html         |   2 +-
 app/templates/user_profile.html | 185 ++++++++++++++++++++++++++++++++
 app/views.py                    |  15 +++
 4 files changed, 233 insertions(+), 9 deletions(-)
 create mode 100644 app/templates/user_profile.html

diff --git a/app/models.py b/app/models.py
index 88d3860..b0c3012 100644
--- a/app/models.py
+++ b/app/models.py
@@ -37,7 +37,7 @@ class User(db.Model):
     email = db.Column(db.String(128))
     role_id = db.Column(db.Integer, db.ForeignKey('role.id'))
 
-    def __init__(self, id=None, username=None, password=None, plain_text_password=None, firstname=None, lastname=None, role_id=None, email=None):
+    def __init__(self, id=None, username=None, password=None, plain_text_password=None, firstname=None, lastname=None, role_id=None, email=None, reload_info=True):
         self.id = id
         self.username = username
         self.password = password
@@ -47,14 +47,16 @@ class User(db.Model):
         self.role_id = role_id
         self.email = email
 
-        user_info = self.get_user_info_by_id() if id else self.get_user_info_by_username()
+        if reload_info:
+            user_info = self.get_user_info_by_id() if id else self.get_user_info_by_username()
 
-        if user_info:
-            self.id = user_info.id
-            self.username = user_info.username
-            self.firstname = user_info.firstname
-            self.lastname = user_info.lastname
-            self.role_id = user_info.role_id
+            if user_info:
+                self.id = user_info.id
+                self.username = user_info.username
+                self.firstname = user_info.firstname
+                self.lastname = user_info.lastname
+                self.email = user_info.email
+                self.role_id = user_info.role_id
 
     def is_authenticated(self):
         return True
@@ -222,6 +224,28 @@ class User(db.Model):
         except Exception, e:
             raise
 
+    def update_profile(self):
+        """
+        Update user profile
+        """
+        user = User.query.filter(User.username == self.username).first()
+        if user:
+            if self.firstname:
+                user.firstname = self.firstname
+            if self.lastname:
+                user.lastname = self.lastname
+            if self.email:
+                user.email = self.email
+            if self.plain_text_password:
+                user.password = self.get_hashed_password(self.plain_text_password)
+
+            try:
+                db.session.commit()
+                return True
+            except:
+                db.session.rollback()
+                return False
+
     def get_domain(self):
         """
         Get domains which user has permission to
diff --git a/app/templates/base.html b/app/templates/base.html
index fc0e59b..9b5415a 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -105,7 +105,7 @@
                         </a>
                         <ul class="dropdown-menu dropdown-menu-default">
                             <li>
-                                <a href="{{ url_for('index') }}">
+                                <a href="{{ url_for('user_profile') }}">
                                 <i class="icon-user"></i> My Profile </a>
                             </li>
                             <li class="divider">
diff --git a/app/templates/user_profile.html b/app/templates/user_profile.html
new file mode 100644
index 0000000..42dea25
--- /dev/null
+++ b/app/templates/user_profile.html
@@ -0,0 +1,185 @@
+{% extends "base.html" %}
+{% block head %}
+        {{ super() }}
+
+        <!-- BEGIN PAGE LEVEL STYLES -->
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='global/plugins/jquery-multi-select/css/multi-select.css') }}"/>
+        <!-- BEGIN THEME STYLES -->
+
+        <!-- BEGIN THEME STYLES -->
+        <!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
+        <link href="{{ url_for('static', filename='global/css/components-md.css') }}" id="style_components" rel="stylesheet" type="text/css"/>
+        <link href="{{ url_for('static', filename='global/css/plugins-md.css') }}" rel="stylesheet" type="text/css"/>
+        <link href="{{ url_for('static', filename='admin/layout2/css/layout.css') }}" rel="stylesheet" type="text/css"/>
+        <link href="{{ url_for('static', filename='admin/layout2/css/themes/grey.css') }}" rel="stylesheet" type="text/css" id="style_color"/>
+        <link href="{{ url_for('static', filename='admin/layout2/css/custom.css') }}" rel="stylesheet" type="text/css"/>
+        <!-- END THEME STYLES -->
+{% endblock %}
+{% block title %}<title>DNS Control Panel - User Profile</title>{% endblock %}
+
+{% block dashboard_stat %}
+                <!-- BEGIN PAGE HEADER-->
+                <h3 class="page-title">
+                User Profile</h3>
+                <div class="page-bar">
+                    <ul class="page-breadcrumb">
+                        <li>
+                            <i class="fa fa-home"></i>
+                            <a href="/">Home</a>
+                            <i class="fa fa-angle-right"></i>
+                        </li>
+                        <li>
+                            <a href="#">User Profile</a>
+                        </li>
+                    </ul>
+                </div>
+                <!-- END PAGE HEADER-->
+{% endblock %}
+
+{% block content %}
+                <div class="clearfix">
+                </div>
+
+                <div class="row">
+                    <div class="col-md-12">
+                        <!-- BEGIN PROFILE CONTENT -->
+                        <div class="profile-content">
+                            <div class="row">
+                                <div class="col-md-12">
+                                    <div class="portlet light">
+                                        <div class="portlet-title tabbable-line">
+                                            <div class="caption caption-md">
+                                                <i class="icon-globe theme-font hide"></i>
+                                                <span class="caption-subject font-blue-madison bold uppercase">Profile Account</span>
+                                            </div>
+                                            <ul class="nav nav-tabs">
+                                                <li class="active">
+                                                    <a href="#tab_1_1" data-toggle="tab">Personal Info</a>
+                                                </li>
+                                                <li>
+                                                    <a href="#tab_1_2" data-toggle="tab">Change Avatar</a>
+                                                </li>
+                                                <li>
+                                                    <a href="#tab_1_3" data-toggle="tab">Change Password</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <div class="portlet-body">
+                                            <div class="tab-content">
+                                                <!-- PERSONAL INFO TAB -->
+                                                <div class="tab-pane active" id="tab_1_1">
+                                                    <form role="form" action="{{ user_profile }}" method="POST">
+                                                        <div class="form-group">
+                                                            <label class="control-label">First Name</label>
+                                                            <input name="firstname" type="text" placeholder="{{ current_user.firstname }}" class="form-control"/>
+                                                        </div>
+                                                        <div class="form-group">
+                                                            <label class="control-label">Last Name</label>
+                                                            <input name="lastname" type="text" placeholder="{{ current_user.lastname }}" class="form-control"/>
+                                                        </div>
+                                                        <div class="form-group">
+                                                            <label class="control-label">Email</label>
+                                                            <input name="email" type="text" placeholder="{{ current_user.email }}" class="form-control"/>
+                                                        </div>
+                                                        <div class="margiv-top-10">
+                                                            <button type="submit" class="btn green-haze"> Save Changes</button>
+                                                            <a href="javascript:;" class="btn default">
+                                                            Cancel </a>
+                                                        </div>
+                                                    </form>
+                                                </div>
+                                                <!-- END PERSONAL INFO TAB -->
+                                                <!-- CHANGE AVATAR TAB -->
+                                                <div class="tab-pane" id="tab_1_2">
+                                                    <form action="{{ user_profile }}" role="form">
+                                                        <div class="form-group">
+                                                            <div class="fileinput fileinput-new" data-provides="fileinput">
+                                                                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
+                                                                    <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt=""/>
+                                                                </div>
+                                                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
+                                                                </div>
+                                                                <div>
+                                                                    <span class="btn default btn-file">
+                                                                    <span class="fileinput-new">
+                                                                    Select image </span>
+                                                                    <span class="fileinput-exists">
+                                                                    Change </span>
+                                                                    <input type="file" name="...">
+                                                                    </span>
+                                                                    <a href="javascript:;" class="btn default fileinput-exists" data-dismiss="fileinput">
+                                                                    Remove </a>
+                                                                </div>
+                                                            </div>
+                                                            <div class="clearfix margin-top-10">
+                                                                <span class="label label-danger">NOTE! </span>
+                                                                <span>Attached image thumbnail is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 10 only </span>
+                                                            </div>
+                                                        </div>
+                                                        <div class="margin-top-10">
+                                                            <a href="javascript:;" class="btn green-haze">
+                                                            Submit </a>
+                                                            <a href="javascript:;" class="btn default">
+                                                            Cancel </a>
+                                                        </div>
+                                                    </form>
+                                                </div>
+                                                <!-- END CHANGE AVATAR TAB -->
+                                                <!-- CHANGE PASSWORD TAB -->
+                                                <div class="tab-pane" id="tab_1_3">
+                                                {% if not current_user.password %}
+                                                Your account password is managed via LDAP which isn't supported to change here.
+                                                {% else %}
+                                                    <form action="{{ user_profile }}" method="POST">
+                                                        <div class="form-group">
+                                                            <label class="control-label">Current Password</label>
+                                                            <input type="password" class="form-control"/>
+                                                        </div>
+                                                        <div class="form-group">
+                                                            <label class="control-label">New Password</label>
+                                                            <input type="password" class="form-control"/>
+                                                        </div>
+                                                        <div class="form-group">
+                                                            <label class="control-label">Re-type New Password</label>
+                                                            <input name="newpassword" type="password" class="form-control"/>
+                                                        </div>
+                                                        <div class="margin-top-10">
+                                                            <button type="submit" class="btn green-haze"> Change Password</button>
+                                                            <a href="javascript:;" class="btn default">
+                                                            Cancel </a>
+                                                        </div>
+                                                    </form>
+                                                {% endif %}
+                                                </div>
+                                                <!-- END CHANGE PASSWORD TAB -->
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- END PROFILE CONTENT -->
+                    </div>
+                </div>
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+<!-- BEGIN PAGE LEVEL PLUGINS -->
+<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/bootstrap-select/bootstrap-select.min.js') }}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/select2/select2.min.js') }}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/jquery-multi-select/js/jquery.multi-select.js') }}"></script>
+<!-- END PAGE LEVEL PLUGINS -->
+
+<!-- BEGIN PAGE LEVEL SCRIPTS -->
+<script src="{{ url_for('static', filename='global/scripts/metronic.js') }}" type="text/javascript"></script>
+<script src="{{ url_for('static', filename='admin/layout2/scripts/layout.js') }}" type="text/javascript"></script>
+<!-- END PAGE LEVEL SCRIPTS -->
+<script>
+jQuery(document).ready(function() {    
+   Metronic.init(); // init metronic core componets
+   Layout.init(); // init layout
+});
+</script>
+<!-- END JAVASCRIPTS -->
+{% endblock %}
diff --git a/app/views.py b/app/views.py
index 6c0c869..883e746 100644
--- a/app/views.py
+++ b/app/views.py
@@ -397,6 +397,21 @@ def admin_history():
         return render_template('admin_history.html', histories=histories)
 
 
+@app.route('/user/profile', methods=['GET', 'POST'])
+@login_required
+def user_profile():
+    if request.method == 'GET':
+        return render_template('user_profile.html')
+    if request.method == 'POST':
+        firstname = request.form['firstname'] if 'firstname' in request.form else ''
+        lastname = request.form['lastname'] if 'lastname' in request.form else ''
+        email = request.form['email'] if 'email' in request.form else ''
+        new_password = request.form['newpassword'] if 'newpassword' in request.form else ''
+
+        user = User(username=current_user.username, plain_text_password=new_password, firstname=firstname, lastname=lastname, email=email, reload_info=False)
+        user.update_profile()
+        return render_template('user_profile.html')
+
 @app.route('/', methods=['GET', 'POST'])
 @login_required
 def index():