You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
9.6 KiB
280 lines
9.6 KiB
{% extends "bootstrap/base.html" %}
|
|
{% block title %}Manage your Technical Incompetence account{% endblock %}
|
|
|
|
{% block styles %}
|
|
{{super()}}
|
|
<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
|
|
{% endblock %}
|
|
|
|
{% block navbar %}
|
|
{% include "fragments/navbar.j2" %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<iframe id="apps" src="https://technicalincompetence.club/frame" width="305" height="400" class="shadow-lg overlay-frame" style="display: none;"></iframe>
|
|
<div id="overlay" style="display: none;" onclick="showApps();"></div>
|
|
<div class="container" style="margin-top: 15px">
|
|
<div id="success-alert" class="alert alert-success" role="alert" style="display: none;">
|
|
This is a success alert—check it out!
|
|
</div>
|
|
<div id="error-alert" class="alert alert-danger" role="alert" style="display: none;">
|
|
This is a danger alert—check it out!
|
|
</div>
|
|
<form>
|
|
<div class="row">
|
|
<div class="col-lg-6" id="firstNameRow">
|
|
<label for="formGroupExampleInput1">First name</label>
|
|
<input id="firstName" type="text" class="form-control" placeholder="First name" value="{{ user['firstName'] }}">
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<label for="formGroupExampleInput2">Last name</label>
|
|
<input id="lastName" type="text" class="form-control" placeholder="Last name" value="{{ user['lastName'] }}">
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<button type="button" class="btn btn-primary" onclick="updateName();">Change Name</button>
|
|
</form>
|
|
<br><br>
|
|
<form>
|
|
<div class="row">
|
|
<div class="col-lg-6" id="userNameRow">
|
|
<label for="formGroupExampleInput3">Username</label>
|
|
<input id="userName" type="text" class="form-control" placeholder="Username" value="{{ user['userName'] }}">
|
|
<br>
|
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#userNameWarningModal">Change Username</button>
|
|
<br>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<label for="formGroupExampleInput4">Email</label>
|
|
<input id="email" type="email" class="form-control" placeholder="Email" value="{{ user['email'] }}">
|
|
<br>
|
|
<button type="button" class="btn btn-primary" onclick="updateEmail();">Change Email</button>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<br><br>
|
|
<form>
|
|
<button id="passwordButton" type="button" class="btn btn-danger" data-toggle="modal" data-target="#passwordChangeModal">Change Password</button>
|
|
</form>
|
|
<br><br>
|
|
<form class="text-center">
|
|
<button id="premiumButton" type="button" class="btn btn-success" data-toggle="modal" data-target="#upgradeModal">Upgrade to Technical Incompetence+</button>
|
|
</form>
|
|
<br><br>
|
|
</div>
|
|
|
|
<div id="userNameWarningModal" class="modal fade" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Warning</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="username-alert" class="alert alert-danger" role="alert" style="display: none;">
|
|
This is a danger alert—check it out!
|
|
</div>
|
|
<p>If you change your username, you will be logged out here and likely need to re-login in everywhere with your new username.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" onclick="updateUserName();">Save new username</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="passwordChangeModal" class="modal fade" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Update Password</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="password-alert" class="alert alert-danger" role="alert" style="display: none;">
|
|
This is a danger alert—check it out!
|
|
</div>
|
|
<p>If you change your password, you will be logged out here and likely need to re-login in everywhere with your new password.</p>
|
|
<form style="padding: .75rem 1.25rem;">
|
|
<div class="row">
|
|
<label for="formGroupExampleInput5">Current Password</label>
|
|
<input id="currentPassword" type="password" class="form-control" placeholder="Current Password">
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<label for="formGroupExampleInput6">New Password</label>
|
|
<input id="newPassword" type="password" class="form-control" placeholder="New Password">
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<label for="formGroupExampleInput6">Confirm New Password</label>
|
|
<input id="confirmNewPassword" type="password" class="form-control" placeholder="Confirm New Password">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" onclick="updatePassword();">Change Password</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="upgradeModal" class="modal fade" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Upgrade to Technical Incompetence+</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Coming soon!</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" disabled>Upgrade</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script>
|
|
function updateEmail() {
|
|
email = $('#email').val();
|
|
|
|
if (email.trim().length === 0) {
|
|
showError('Email is required');
|
|
return false;
|
|
}
|
|
|
|
dn = '{{ user['dn'] }}';
|
|
$.ajax({
|
|
url: '/update/email',
|
|
method: 'POST',
|
|
data: { "email": email,
|
|
"dn": dn },
|
|
success: function(data) {
|
|
if (data === 'Success')
|
|
showSuccess('Email updated!');
|
|
else
|
|
showError(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateName() {
|
|
first = $('#firstName').val();
|
|
last = $('#lastName').val();
|
|
|
|
if (first.trim().length === 0 || last.trim().length === 0) {
|
|
showError('Both first and last name are required');
|
|
return false;
|
|
}
|
|
|
|
dn = '{{ user['dn'] }}';
|
|
$.ajax({
|
|
url: '/update/name',
|
|
method: 'POST',
|
|
data: { "firstName": first,
|
|
"lastName": last,
|
|
"dn": dn },
|
|
success: function(data) {
|
|
if (data === 'Success')
|
|
showSuccess('Name updated!');
|
|
else
|
|
showError(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateUserName() {
|
|
user = $('#userName').val();
|
|
|
|
if (user.trim().length === 0) {
|
|
showUsernameError('Username is required');
|
|
return false;
|
|
}
|
|
|
|
dn = '{{ user['dn'] }}';
|
|
$.ajax({
|
|
url: '/update/username',
|
|
method: 'POST',
|
|
data: { "userName": user,
|
|
"dn": dn },
|
|
success: function(data) {
|
|
if (data === 'Success')
|
|
window.location = window.location.origin + "/logout";
|
|
else
|
|
showUsernameError(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
function updatePassword() {
|
|
currentPassword = $('#currentPassword').val();
|
|
newPassword = $('#newPassword').val();
|
|
confirmPassword = $('#confirmNewPassword').val();
|
|
dn = '{{ user['dn'] }}';
|
|
$.ajax({
|
|
url: '/update/password',
|
|
method: 'POST',
|
|
data: { "currentPassword": currentPassword,
|
|
"newPassword": newPassword,
|
|
"confirmPassword": confirmPassword,
|
|
"dn": dn },
|
|
success: function(data) {
|
|
if (data === 'Success')
|
|
window.location = window.location.origin + "/logout";
|
|
else
|
|
showPasswordError(data)
|
|
}
|
|
});
|
|
}
|
|
|
|
function showError(error) {
|
|
hideSuccess();
|
|
$('#error-alert').text(error);
|
|
$('#error-alert').show();
|
|
}
|
|
|
|
function showPasswordError(error) {
|
|
$('#password-alert').text(error);
|
|
$('#password-alert').show();
|
|
}
|
|
|
|
function showUsernameError(error) {
|
|
$('#username-alert').text(error);
|
|
$('#username-alert').show();
|
|
}
|
|
|
|
function hideError() {
|
|
$('#error-alert').hide();
|
|
}
|
|
|
|
function showSuccess(message) {
|
|
hideError();
|
|
$('#success-alert').text(message);
|
|
$('#success-alert').show();
|
|
}
|
|
|
|
function hideSuccess() {
|
|
$('#success-alert').hide();
|
|
}
|
|
|
|
function showApps () {
|
|
$("#apps").toggle();
|
|
$("#overlay").toggle();
|
|
}
|
|
</script>
|
|
{% endblock %}
|