{% extends "page.html" %}

{% block script %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let button = document.getElementById('eye');
        button.addEventListener("click", function(e) {
            let pwd = document.getElementById("password_input");
            let pwdc = document.getElementById("password_confirmation_input");

            if (pwd.getAttribute("type") === "password") {
                pwd.setAttribute("type", "text");
                pwdc.setAttribute("type", "text");
                button.textContent = "🔑";
            } else {
                pwd.setAttribute("type", "password");
                pwdc.setAttribute("type", "password");
                button.textContent = "👁";
            }
        });
    });

    {% if tos %}
    document.addEventListener('DOMContentLoaded', function() {
        let checkbox = document.getElementById('tos_check');
        checkbox.addEventListener("click", function(e) {
            let submit_button = document.getElementById("signup_submit");
            submit_button.disabled = ! checkbox.checked;
        });
    });
    {% endif %}

    if (window.location.protocol === "http:") {
        // unhide http warning
        let warning = document.getElementById('insecure-login-warning');
        warning.className = warning.className.replace(/\bhidden\b/, '');
    }
</script>

{% if recaptcha_key %}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
{% endif %}
{% endblock script %}


{% block main %}
{% block login %}
<div id="login-main" class="container">
    <form action="{{post_url}}" method="post" role="form">
        <div class="auth-form-header">
            Sign Up
        </div>
        <div class='auth-form-body'>
            <p id='insecure-login-warning' class='hidden'>
                Warning: JupyterHub seems to be served over an unsecured HTTP connection.
                We strongly recommend enabling HTTPS for JupyterHub.
            </p>

            {% if alert %}
            <div class="alert {{alert}}" role="alert">
                <p>
                    {{result_message}}
                </p>

                {% if two_factor_auth_user %}
                <p>
                    <strong>Attention!</strong> You have configured two factor authentication.
                    Your two factor authentication code is <strong>{{ two_factor_auth_value }}</strong>.
                </p>
                {% endif %}
            </div>
            {% endif %}

            <label for="username_input">Username:</label>
            <input id="username_input" type="email" name="username" val="{{username}}" autocapitalize="off" autocorrect="off" class="form-control" autofocus="autofocus" required />
            <p></p>

            {% if ask_email %}
            <label for="email_input">Email:</label>
            <input id="email_input" type="email" name="email" val="{{email}}" class="form-control" required />
            <p></p>
            {% endif %}

            <label for="firstname_input">FirstName:</label>
            <input id="firstname_input" type="text" name="firstname" val="{{firstname}}" class="form-control" required />

            <label for="lastname_input">LastName:</label>
            <input id="lastname_input" type="text" name="lastname" val="{{lastname}}" class="form-control" required />


            <label for="password_input">Password:</label>
            <div class="input-group">
                <input id="password_input" type="password" name="signup_password" val="" autocapitalize="off" autocorrect="off" class="form-control" />
                <span class="input-group-addon">
                    <button id="eye" type="button" style="border:0;">👁</button>
                </span>
            </div>
            <p></p>
            
            <label for="password_confirm">Confirm password:</label>
            <div class="input-group">
                <input id="password_confirmation_input" type="password" name="signup_password_confirmation" val="" autocapitalize="off" autocorrect="off" class="form-control" />
            </div>
            <p></p>

            {% if two_factor_auth %}
            <input type="checkbox" id="2fa" name="2fa" value="2fa">
                Setup two factor authentication
            </input>
            <p></p>
            {% endif %}

            {% if tos %}
            <input type="checkbox" id="tos_check">
                {{tos|safe}}
            </input>
            <p></p>
            {% endif %}

            {% if recaptcha_key %}
            <div class="g-recaptcha" data-sitekey="{{ recaptcha_key }}"></div>
            <p></p>
            {% endif %}

            <input type="submit" id="signup_submit" class='btn btn-jupyter' value='Create User' {% if tos %}disabled{% endif %} />
            <p></p>

            <hr />
            <p>
                <a href="{{ base_url }}login">Login</a> with an existing user.
            </p>
        </div>
    </form>
</div>
{% endblock login %}
{% endblock main %}
