Final page edits for bootstrap v4 and Admin LTE v3.2

This commit is contained in:
Tyler Todd
2023-02-17 22:25:11 +00:00
parent e1bbe10fc3
commit 62d95e874a
28 changed files with 613 additions and 547 deletions

View File

@ -1,5 +1,7 @@
{% extends "base.html" %}
{% set active_page = "user_profile" %}
{% block title %}
<title>
My Profile - {{ SITE_NAME }}
@ -31,38 +33,39 @@
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card card-primary">
<div class="card-header with-border">
<h3 class="card-title">
Edit my profile {% if session['authentication_type'] != 'LOCAL' %} [Disabled - Authenticated externally]{% endif %}
</h3>
</div>
<div class="card-body">
<div class="col-6">
<div class="card">
<div class="card-header">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#tabs-personal" data-toggle="tab">Personal Info</a>
<a class="nav-link active" href="#tabs-personal" data-toggle="tab">
Personal Info
</a>
</li>
{% if session['authentication_type'] == 'LOCAL' %}
<li class="nav-item">
<a class="nav-link" href="#tabs-password" data-toggle="tab">Change Password</a>
<a class="nav-link" 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>
<a class="nav-link" href="#tabs-authentication" data-toggle="tab">
Authentication
</a>
</li>
{% endif %}
</ul>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" 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 }}"
<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">
@ -71,12 +74,14 @@
{% 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 }}"
<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">Submit</button>
<button type="submit" class="btn btn-primary">
<i class="fa-solid fa-floppy-disk"></i>&nbsp;Save
</button>
</div>
{% endif %}
</form>
@ -89,14 +94,17 @@
<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" name="password" id="newpassword">
<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-primary">Change Password</button>
<button type="submit" class="btn btn-primary">
<i class="fa-solid fa-floppy-disk"></i>&nbsp;Save
</button>
</div>
</form>
{% endif %}
@ -118,17 +126,19 @@
<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 fa-clipboard"></i> </button>
<button type=button style="position:relative; right:28px" onclick="copy_otp_secret_to_clipboard()">
<i class="fa-solid fa-clipboard"></i>
</button>
<br />
<font color="red" id="copy_tooltip" style="visibility:collapse">Copied.</font>
</form>
</div>
You can use Google Authenticator
(<a target="_blank" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a>
- <a target="_blank" href="https://apps.apple.com/us/app/google-authenticator/id388497605">iOS</a>)
(<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">Android</a>
- <a target="_blank" href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8">iOS</a>)
(<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 />
<font color="red">
@ -153,19 +163,7 @@
</section>
{% endblock %}
{% block extrascripts %}
<!-- TODO: add password and password confirmation comparison check -->
<script>
$(function () {
$('#tabs').tabs({
// add url anchor tags
activate: function (event, ui) {
window.location.hash = ui.newPanel.attr('id');
}
});
// re-set active tab (ui)
var activeTabIdx = $('#tabs').tabs('option', 'active');
$('#tabs li:eq(' + activeTabIdx + ')').tab('show')
});
// initialize pretty checkboxes
$('.otp_toggle').iCheck({
@ -174,16 +172,19 @@
});
// 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);
$('.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 %}