signup.html

{% 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">

<div style="text-align: center;">
  <a href="https://landslides.openearthscape.org" target="_blank">
    <img alt="CICESEG" style="width:50%;" src="https://raw.githubusercontent.com/csdms/ciceseg-management/main/ciceseg-logo-transparent.png">
  </a>
</div>

<div style="text-align: center; margin-bottom:20px;">
  <h1>Landslide Modeling Portal</h1>
</div>

<div style="margin-top:50px; padding-left:30%; padding-right:30%; text-align:center; font-size:90%;">
  <p>The Collaborative Center for Landslides and Ground Failure Geohazards (CICESEG) is supported by the U.S. National Science Foundation.</p>
  <a href="https://www.nsf.gov" target="_blank">
    <img alt="National Science Foundation" style="width:50px;" src="https://raw.githubusercontent.com/csdms/ciceseg-management/main/nsf1.gif">
  </a>
</div>

    <form action="{{post_url}}" method="post" role="form" style="vertical-align:top;">
        <div class="auth-form-header">
            Sign Up For An Account
        </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">Email address:</label>
            <input id="username_input" type="text" 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="password_input">Choose a 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 your 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 Account' {% if tos %}disabled{% endif %} />
            <p></p>

            <hr />
            <p>
                After creating an account, <a href="{{ base_url }}login">login</a> as an existing user.
            </p>
        </div>
    </form>
</div>
{% endblock login %}
{% endblock main %}