2015-12-16 07:21:30 +00:00
{% extends "base.html" %}
2016-05-11 00:03:32 +00:00
{% block title %}< title > DNS Control Panel - My Profile< / title > {% endblock %}
2015-12-16 07:21:30 +00:00
{% block dashboard_stat %}
2016-05-11 00:03:32 +00:00
<!-- Content Header (Page header) -->
< section class = "content-header" >
< h1 >
Profile
< small > Edit my profile< / small >
< / h1 >
< ol class = "breadcrumb" >
< li > < a href = "{{ url_for('dashboard') }}" > < i class = "fa fa-dashboard" > < / i > Home< / a > < / li >
< li class = "active" > My Profile< / li >
< / ol >
< / section >
2015-12-16 07:21:30 +00:00
{% endblock %}
{% block content %}
2016-05-11 00:03:32 +00:00
< section class = "content" >
< div class = "row" >
< div class = "col-lg-12" >
< div class = "box box-primary" >
< div class = "box-header with-border" >
< h3 class = "box-title" > Edit my profile< / h3 >
< / div >
< div class = "box-body" >
<!-- Custom Tabs -->
< div class = "nav-tabs-custom" >
< ul class = "nav nav-tabs" >
< li class = "active" > < a href = "#personal_tab" data-toggle = "tab" > Personal
Info< / a > < / li >
< li > < a href = "#avatar_tab" data-toggle = "tab" > Change
Avatar< / a > < / li >
< li > < a href = "#password_tab" data-toggle = "tab" > Change
Password< / a > < / li >
2016-06-16 08:33:05 +00:00
< li > < a href = "#authentication_tab" data-toggle = "tab" > Authentication
< / a > < / li >
2016-05-11 00:03:32 +00:00
< / ul >
< div class = "tab-content" >
< div class = "tab-pane active" id = "personal_tab" >
< form role = "form" method = "post" action = "{{ user_profile }}" >
< div class = "form-group" >
< label for = "firstname" > First Name< / label > < input type = "text"
class="form-control" name="firstname" id="firstname"
placeholder="{{ current_user.firstname }}">
< / div >
< div class = "form-group" >
< label for = "lastname" > Last Name< / label > < input type = "text"
class="form-control" name="lastname" id="lastname"
placeholder="{{ current_user.lastname }}">
< / div >
< div class = "form-group" >
< label for = "email" > E-mail< / label > < input type = "text"
class="form-control" name="email" id="email"
placeholder="{{ current_user.email }}">
< / div >
< div class = "form-group" >
2016-05-11 00:11:17 +00:00
< button type = "submit" class = "btn btn-flat btn-primary" > Submit< / button >
2016-05-11 00:03:32 +00:00
< / div >
< / form >
< / div >
< div class = "tab-pane" id = "avatar_tab" >
< form action = "{{ user_profile }}" method = "post"
enctype="multipart/form-data">
< div class = "form-group" >
< div class = "form-group" >
< div class = "thumbnail" style = "width: 200px; height: 210px;" >
{% if current_user.avatar %} < img
src="{{ url_for('user_avatar', filename=current_user.avatar) }}"
alt="" / style="width: 200px; height: 200px;"> {%
else %} < img
src="http://www.placehold.it/200x200/EFEFEF/AAAAAA& text=no+image"
alt="" /> {% endif %}
< / div >
< div >
< label for = "file" > Select image< / label > < input type = "file"
id="file" name="file">
< / div >
< / div >
< div >
< span class = "label label-danger" > NOTE! < / span > < span > Only
supports < strong > .PNG, .JPG, .JPEG< / strong > . The best size
to use is < strong > 200x200< / strong > .
< / span >
< / div >
< / div >
< div class = "form-group" >
2016-05-11 00:11:17 +00:00
< button type = "submit" class = "btn btn-flat btn-primary" > Submit< / button >
2016-05-11 00:03:32 +00:00
< / div >
< / form >
< / div >
< div class = "tab-pane" id = "password_tab" >
{% 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 for = "password" > New Password< / label > < input
type="password" class="form-control" name="password"
id="newpassword" />
< / div >
< div class = "form-group" >
< label for = "rpassword" > Re-type New Password< / label > < input
type="password" class="form-control" name="rpassword"
id="rpassword" />
< / div >
< div class = "form-group" >
2016-05-11 00:11:17 +00:00
< button type = "submit" class = "btn btn-flat btn-primary" > Change
2016-05-11 00:03:32 +00:00
password< / button >
< / div >
< / form >
{% endif %}
< / div >
2016-06-16 08:33:05 +00:00
< div class = "tab-pane" id = "authentication_tab" >
< form action = "{{ user_profile }}" method = "post" >
< div class = "form-group" >
< input type = "checkbox" id = "{{ current_user.username }}" class = "otp_toggle" { % if current_user . otp_secret % } checked { % endif % } >
< label for = "otp_toggle" > Enable Two Factor Authentication< / label >
{% if current_user.otp_secret %}
< p > < img id = "qrcode" src = "{{ url_for('qrcode') }}" > < / p >
Please start FreeOTP (< a target = "_blank" href = "https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en" > Android< / a > - < a target = "_blank" href = "https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8" > iOS< / a > ) on your smartphone and scan the above QR Code with it.
< br / >
< font color = "red" > < strong > < i > Make sure only you can see this QR Code and nobodoy can capture it.< / i > < / strong > < / font >
{% endif %}
< / div >
< / form >
< / div >
2016-05-11 00:03:32 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
2015-12-16 07:21:30 +00:00
{% endblock %}
2016-05-11 00:03:32 +00:00
{% block extrascripts %}
<!-- TODO: add password and password confirmation comparisson check -->
2016-06-16 08:33:05 +00:00
< script >
// initialize pretty checkboxes
$('.otp_toggle').iCheck({
checkboxClass : 'icheckbox_square-blue',
increaseArea : '20%'
});
// handle checkbox toggling
$('.otp_toggle').on('ifToggled', function(event) {
var enable_otp = $(this).prop('checked');
var username = $(this).prop('id');
postdata = {
'action' : 'enable_otp',
'data' : {
'username' : username,
'enable_otp' : enable_otp
}
};
applyChanges(postdata, '/user/profile');
});
< / script >
2015-12-16 07:21:30 +00:00
{% endblock %}