stellars-jupyterhub-ds/services/jupyterhub/html_templates_enhanced/change-password.html

{% extends "page.html" %}

{% block script %}
{{ super() }}
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        let button = document.getElementById('eye');
        button.addEventListener("click", function(e) {
            let opwd = document.getElementById("old_password_input");
            let npwd = document.getElementById("new_password_input");
            let cpwd = document.getElementById("new_password_confirmation_input");
            if (opwd.getAttribute("type") === "password") {
                opwd.setAttribute("type", "text");
                npwd.setAttribute("type", "text");
                cpwd.setAttribute("type", "text");
                button.innerHTML = '<i class="fa fa-eye-slash"></i>';
            } else {
                opwd.setAttribute("type", "password");
                npwd.setAttribute("type", "password");
                cpwd.setAttribute("type", "password");
                button.innerHTML = '<i class="fa fa-eye"></i>';
            }
        });
    });
</script>
{% endblock script %}

{% block main %}
<div class="container">
    <form action="{{post_url}}" method="post" role="form">
        <h1>
            Change password for {{user_name}}
        </h1>
        
        <p>Please enter your current password and the new password you want to set it to. If you have forgotten your password, an admin can reset it for you.</p>
        <input type="hidden" name="_xsrf" value="{{ xsrf }}"/>
        <div class="form-group">
            <label for="old_password_input">Old password:</label>
            <div class="input-group col-xs-6">
                <input id="old_password_input" type="password" name="old_password" val="" autocapitalize="off" autocorrect="off" class="form-control" />
                <span class="input-group-addon">
                    <button id="eye" type="button" style="border:0;background:transparent;"><i class="fa fa-eye"></i></button>
                </span>
            </div>
            <p></p>
            
            <label for="new_password_input">New password:</label>
            <div class="input-group col-xs-6">
                <input id="new_password_input" type="password" name="new_password" val="" autocapitalize="off" autocorrect="off" class="form-control" />
            </div>
            <p></p>
            
            <label for="new_password_confirmation_input">Confirm new password:</label>
            <div class="input-group col-xs-6">
                <input id="new_password_confirmation_input" type="password" name="new_password_confirmation" val="" autocapitalize="off" autocorrect="off" class="form-control" />
                <span></span>
            </div>
            <p></p>

            <input id="signup_submit" type="submit" value='Change Password' class='btn btn-jupyter' />
        </div>
    </form>

    {% if result_message %}
        <div class="alert {{alert}} col-xs-6" role="alert">{{result_message}}</div>
    {% endif %}
</div>
{% endblock %}