ti-account-app/templates/profile.j2

{% 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 %}
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
    <div class="navbar-brand">Technical Incompetence Account</div>
    <form class="form-inline ml-auto">
        {# <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="darkSwitch" />
            <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
        </div>
        <div class="navbar-text" style="margin-right: 20px; ">{{ user['userName'] }}</div> #}
        <a class="btn btn-primary" href="/logout" role="button">Logout</a>
    </form>
</nav>
{% endblock %}

{% block content %}
    <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>
    </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">&times;</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">&times;</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>
{% 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();
}
</script>
{% endblock %}