Change profile template to use adminlte2 templating.

This commit is contained in:
Ivan Filippov 2016-05-10 18:03:32 -06:00
parent 51ddb8821d
commit dc41a55da7
2 changed files with 115 additions and 172 deletions

View File

@ -86,7 +86,7 @@
<!-- Menu Footer--> <!-- Menu Footer-->
<li class="user-footer"> <li class="user-footer">
<div class="pull-left"> <div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Change password</a> <a href="{{ url_for('user_profile') }}" class="btn btn-default btn-flat">My Profile</a>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<a href="{{ url_for('logout') }}" class="btn btn-default btn-flat">Log out</a> <a href="{{ url_for('logout') }}" class="btn btn-default btn-flat">Log out</a>

View File

@ -1,177 +1,120 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block head %} {% block title %}<title>DNS Control Panel - My Profile</title>{% endblock %}
{{ 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 %} {% block dashboard_stat %}
<!-- BEGIN PAGE HEADER--> <!-- Content Header (Page header) -->
<h3 class="page-title"> <section class="content-header">
User Profile</h3> <h1>
<div class="page-bar"> Profile
<ul class="page-breadcrumb"> <small>Edit my profile</small>
<li> </h1>
<i class="fa fa-home"></i> <ol class="breadcrumb">
<a href="{{ url_for('dashboard') }}">Home</a> <li><a href="{{ url_for('dashboard') }}"><i class="fa fa-dashboard"></i>Home</a></li>
<i class="fa fa-angle-right"></i> <li class="active">My Profile</li>
</li> </ol>
<li> </section>
<a href="#">User Profile</a>
</li>
</ul>
</div>
<!-- END PAGE HEADER-->
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="clearfix"> <section class="content">
</div> <div class="row">
<div class="col-lg-12">
<div class="row"> <div class="box box-primary">
<div class="col-md-12"> <div class="box-header with-border">
<!-- BEGIN PROFILE CONTENT --> <h3 class="box-title">Edit my profile</h3>
<div class="profile-content"> </div>
<div class="row"> <div class="box-body">
<div class="col-md-12"> <!-- Custom Tabs -->
<div class="portlet light"> <div class="nav-tabs-custom">
<div class="portlet-title tabbable-line"> <ul class="nav nav-tabs">
<div class="caption caption-md"> <li class="active"><a href="#personal_tab" data-toggle="tab">Personal
<i class="icon-globe theme-font hide"></i> Info</a></li>
<span class="caption-subject font-blue-madison bold uppercase">Profile Account</span> <li><a href="#avatar_tab" data-toggle="tab">Change
</div> Avatar</a></li>
<ul class="nav nav-tabs"> <li><a href="#password_tab" data-toggle="tab">Change
<li class="active"> Password</a></li>
<a href="#tab_1_1" data-toggle="tab">Personal Info</a> </ul>
</li> <div class="tab-content">
<li> <div class="tab-pane active" id="personal_tab">
<a href="#tab_1_2" data-toggle="tab">Change Avatar</a> <form role="form" method="post" action="{{ user_profile }}">
</li> <div class="form-group">
<li> <label for="firstname">First Name</label> <input type="text"
<a href="#tab_1_3" data-toggle="tab">Change Password</a> class="form-control" name="firstname" id="firstname"
</li> placeholder="{{ current_user.firstname }}">
</ul> </div>
</div> <div class="form-group">
<div class="portlet-body"> <label for="lastname">Last Name</label> <input type="text"
<div class="tab-content"> class="form-control" name="lastname" id="lastname"
<!-- PERSONAL INFO TAB --> placeholder="{{ current_user.lastname }}">
<div class="tab-pane active" id="tab_1_1"> </div>
<form role="form" action="{{ user_profile }}" method="POST"> <div class="form-group">
<div class="form-group"> <label for="email">E-mail</label> <input type="text"
<label class="control-label">First Name</label> class="form-control" name="email" id="email"
<input name="firstname" type="text" placeholder="{{ current_user.firstname }}" class="form-control"/> placeholder="{{ current_user.email }}">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">Last Name</label> <button type="submit" class="btn btn-primary btn-flat">Submit</button>
<input name="lastname" type="text" placeholder="{{ current_user.lastname }}" class="form-control"/> </div>
</div> </form>
<div class="form-group"> </div>
<label class="control-label">Email</label> <div class="tab-pane" id="avatar_tab">
<input name="email" type="text" placeholder="{{ current_user.email }}" class="form-control"/> <form action="{{ user_profile }}" method="post"
</div> enctype="multipart/form-data">
<div class="margiv-top-10"> <div class="form-group">
<button type="submit" class="btn green-haze"> Save Changes</button> <div class="form-group">
<a href="javascript:;" class="btn default"> <div class="thumbnail" style="width: 200px; height: 210px;">
Cancel </a> {% if current_user.avatar %} <img
</div> src="{{ url_for('user_avatar', filename=current_user.avatar) }}"
</form> alt="" / style="width: 200px; height: 200px;"> {%
</div> else %} <img
<!-- END PERSONAL INFO TAB --> src="http://www.placehold.it/200x200/EFEFEF/AAAAAA&amp;text=no+image"
<!-- CHANGE AVATAR TAB --> alt="" /> {% endif %}
<div class="tab-pane" id="tab_1_2"> </div>
<form action="{{ user_profile }}" method="POST" enctype="multipart/form-data"> <div>
<div class="form-group"> <label for="file">Select image</label> <input type="file"
<div class="fileinput fileinput-new" data-provides="fileinput"> id="file" name="file">
<div class="fileinput-new thumbnail" style="width: 200px; height: 210px;"> </div>
{% if current_user.avatar %} </div>
<img src="{{ url_for('user_avatar', filename=current_user.avatar) }}" alt=""/ style="width:200px;height:200px;"> <div>
{% else %} <span class="label label-danger">NOTE! </span> <span>&nbsp;Only
<img src="http://www.placehold.it/200x200/EFEFEF/AAAAAA&amp;text=no+image" alt=""/> supports <strong>.PNG, .JPG, .JPEG</strong>. The best size
{% endif %} to use is <strong>200x200</strong>.
</div> </span>
<div> </div>
<span class="btn default btn-file"> </div>
<span class="fileinput-new"> <div class="form-group">
Select image </span> <button type="submit" class="btn btn-primary btn-flat">Submit</button>
<span class="fileinput-exists"> </div>
Change </span> </form>
<input type="file" name="file"> </div>
</span> <div class="tab-pane" id="password_tab">
</div> {% if not current_user.password %} Your account password is
</div> managed via LDAP which isn't supported to change here. {% else
<div class="clearfix margin-top-10"> %}
<span class="label label-danger">NOTE! </span> <form action="{{ user_profile }}" method="post">
<span>&nbsp;Only support <strong>.PNG, .JPG, .JPEG</strong>. Best size is <strong>200x200</strong>. </span> <div class="form-group">
</div> <label for="password">New Password</label> <input
</div> type="password" class="form-control" name="password"
<div class="margin-top-10"> id="newpassword" />
<button type="submit" class="btn green-haze"> Submit</button> </div>
</div> <div class="form-group">
</form> <label for="rpassword">Re-type New Password</label> <input
</div> type="password" class="form-control" name="rpassword"
<!-- END CHANGE AVATAR TAB --> id="rpassword" />
<!-- CHANGE PASSWORD TAB --> </div>
<div class="tab-pane" id="tab_1_3"> <div class="form-group">
{% if not current_user.password %} <button type="submit" class="btn btn-primary btn-flat">Change
Your account password is managed via LDAP which isn't supported to change here. password</button>
{% else %} </div>
<form class="password-form" action="{{ user_profile }}" method="POST"> </form>
<div class="form-group"> {% endif %}
<label class="control-label">New Password</label> </div>
<input name="password" id="newpassword" type="password" class="form-control"/> </div>
</div> </div>
<div class="form-group"> </div>
<label class="control-label">Re-type New Password</label> </div>
<input name="rpassword" type="password" class="form-control"/> </div>
</div> </div>
<div class="margin-top-10"> </section>
<button type="submit" class="btn green-haze"> Change Password</button>
</div>
</form>
{% endif %}
</div>
<!-- END CHANGE PASSWORD TAB -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END PROFILE CONTENT -->
</div>
</div>
{% endblock %} {% endblock %}
{% block extrascripts %}
{% block scripts %} <!-- TODO: add password and password confirmation comparisson check -->
{{ super() }}
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ url_for('static', filename='global/plugins/jquery-validation/js/jquery.validate.min.js') }}" type="text/javascript"></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>
<script src="{{ url_for('static', filename='admin/pages/scripts/user_profile.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
jQuery(document).ready(function() {
Metronic.init(); // init metronic core componets
Layout.init(); // init layout
UserProfile.init();
});
</script>
<!-- END JAVASCRIPTS -->
{% endblock %} {% endblock %}