powerdns-admin/app/templates/user_profile.html
2016-06-16 15:36:05 +07:00

158 lines
5.8 KiB
HTML

{% extends "base.html" %}
{% block title %}<title>DNS Control Panel - My Profile</title>{% endblock %}
{% block dashboard_stat %}
<!-- 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>
{% endblock %}
{% block content %}
<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>
<li><a href="#authentication_tab" data-toggle="tab">Authentication
</a></li>
</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">
<button type="submit" class="btn btn-flat btn-primary">Submit</button>
</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&amp;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>&nbsp;Only
supports <strong>.PNG, .JPG, .JPEG</strong>. The best size
to use is <strong>200x200</strong>.
</span>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-flat btn-primary">Submit</button>
</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">
<button type="submit" class="btn btn-flat btn-primary">Change
password</button>
</div>
</form>
{% endif %}
</div>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block extrascripts %}
<!-- TODO: add password and password confirmation comparisson check -->
<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>
{% endblock %}