229 lines
14 KiB
HTML
229 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
{% set active_page = "user_profile" %}
|
|
{% block title %}<title>Edit Profile - {{ SITE_NAME }}</title>{% endblock %}
|
|
|
|
{% block dashboard_stat %}
|
|
<div class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0 text-dark">Edit Profile</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
|
|
<li class="breadcrumb-item active">Edit Profile</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6">
|
|
<div class="card card-outline card-primary shadow">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Profile Editor</h3>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
<div class="card-body">
|
|
<div class="nav-tabs-custom mb-2">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link {{ 'active' if not error_messages else '' }}" href="#tabs-personal" data-toggle="tab">
|
|
Personal Info
|
|
</a>
|
|
</li>
|
|
{% if session['authentication_type'] == 'LOCAL' %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {{ 'active' if 'password' in error_messages else '' }}" href="#tabs-password" data-toggle="tab">
|
|
Change Password
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% if session['authentication_type'] in ['LOCAL', 'LDAP'] %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#tabs-authentication" data-toggle="tab">
|
|
Authentication
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
<!-- /.nav-tabs-custom -->
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade {{ 'show active' if not error_messages else '' }}"
|
|
id="tabs-personal">
|
|
<form role="form" method="post" action="{{ user_profile }}">
|
|
<input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
|
|
<div class="form-group">
|
|
<label for="firstname">First Name</label>
|
|
<input type="text" class="form-control" name="firstname"
|
|
id="firstname" placeholder="{{ current_user.firstname }}"
|
|
{% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
|
|
</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 }}"
|
|
{% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">E-Mail</label> <input type="email"
|
|
class="form-control"
|
|
name="email" id="email"
|
|
placeholder="{{ current_user.email }}"
|
|
{% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
|
|
</div>
|
|
{% if session['authentication_type'] == 'LOCAL' %}
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-primary" title="Save Profile">
|
|
<i class="fa-solid fa-floppy-disk"></i> Save Profile
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</form>
|
|
</div>
|
|
<!-- /.tab-pane -->
|
|
|
|
{% if session['authentication_type'] == 'LOCAL' %}
|
|
<div class="tab-pane fade {{ 'show active' if 'password' in error_messages else '' }}"
|
|
id="tabs-password">
|
|
{% 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">
|
|
<input type="hidden" name="_csrf_token"
|
|
value="{{ csrf_token() }}">
|
|
<div class="form-group">
|
|
<label for="password">New Password</label>
|
|
<input type="password" class="form-control {{ 'is-invalid' if 'password' in error_messages else '' }}"
|
|
name="password"
|
|
id="newpassword">
|
|
{% if 'password' in error_messages %}
|
|
<div class="invalid-feedback">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
{{ error_messages['password'] }}
|
|
</div>
|
|
{% endif %}
|
|
</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-primary" title="Save Password">
|
|
<i class="fa-solid fa-floppy-disk"></i> Save Password
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
<!-- /.tab-pane -->
|
|
{% endif %}
|
|
|
|
<div class="tab-pane fade" id="tabs-authentication">
|
|
<form action="{{ user_profile }}" method="post">
|
|
<input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
|
|
<div class="form-group">
|
|
<input type="checkbox" id="otp_toggle" class="otp_toggle"
|
|
{% if current_user.otp_secret %}checked{% endif %}>
|
|
<label for="otp_toggle">Enable Two Factor Authentication</label>
|
|
{% if current_user.otp_secret %}
|
|
<div id="token_information">
|
|
<p>
|
|
<img id="qrcode" src="{{ url_for('user.qrcode') }}">
|
|
</p>
|
|
<div style="position: relative; left: 15px">
|
|
Your secret key is:
|
|
<br/>
|
|
<form>
|
|
<input type=text id="otp_secret"
|
|
value={{ current_user.otp_secret }} readonly>
|
|
<button type=button
|
|
style="position:relative; right:28px"
|
|
onclick="copy_otp_secret_to_clipboard()">
|
|
<i class="fa-solid fa-clipboard"></i>
|
|
</button>
|
|
<br/>
|
|
<span style="color: red;" id="copy_tooltip"
|
|
style="visibility:collapse">Copied.</span>
|
|
</form>
|
|
</div>
|
|
You can use Google Authenticator
|
|
(<a target="_blank"
|
|
href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"><i
|
|
class="fa-brands fa-google-play"></i>Android</a>
|
|
- <a target="_blank"
|
|
href="https://apps.apple.com/us/app/google-authenticator/id388497605"><i
|
|
class="fa-brands fa-app-store-ios"></i>iOS</a>)
|
|
or FreeOTP
|
|
(<a target="_blank"
|
|
href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en"><i
|
|
class="fa-brands fa-google-play"></i>Android</a>
|
|
- <a target="_blank"
|
|
href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8"><i
|
|
class="fa-brands fa-app-store-ios"></i>iOS</a>)
|
|
on your smartphone to scan the QR code.
|
|
<br/>
|
|
<p style="color: red; font-style: italic; font-weight: bold;">
|
|
Make sure only you can see this QR Code and
|
|
secret key and
|
|
nobody can capture them.
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<!-- /.form-group -->
|
|
</form>
|
|
</div>
|
|
<!-- /.tab-pane -->
|
|
</div>
|
|
<!-- /.tab-content -->
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% block extrascripts %}
|
|
<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 postdata = {
|
|
'action': 'enable_otp',
|
|
'data': {
|
|
'enable_otp': enable_otp
|
|
},
|
|
'_csrf_token': '{{ csrf_token() }}'
|
|
};
|
|
applyChanges(postdata, $SCRIPT_ROOT + '/user/profile', false, true, function () {
|
|
window.location.reload();
|
|
$('#tabs li:eq(2) a').tab('show');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|