    <!DOCTYPE html>
<html>
    <head>
        <title>tinypin</title>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

        <link rel="apple-touch-icon" sizes="180x180" href="pub/icons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="pub/icons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="pub/icons/favicon-16x16.png">
        <link rel="manifest" href="pub/icons/site.webmanifest">
        <link rel="mask-icon" href="pub/icons/safari-pinned-tab.svg" color="#5bbad5">
        <link rel="shortcut icon" href="pub/icons/favicon.ico">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="msapplication-config" content="pub/icons/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">

        <link rel="stylesheet" href="pub/bulma-custom.css" />
    </head>
    <body>
        <div class="modal is-active">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title">tinypin &raquo; create account</p>
                </header>
                <form method="post" action="./register">
                    <section class="modal-card-body">
                    
                        <div class="field">
                            <label class="label" for="username">username</label>
                            <div class="control">
                                <input class="input" name="username" id="username" type="text">
                            </div>
                        </div>

                        <div class="field">
                            <label class="label" for="password">password</label>
                            <div class="control">
                                <input class="input" name="password" id="password" type="password">
                            </div>
                        </div>

                        <div class="field">
                            <label class="label" for="repeat-password">repeat password</label>
                            <div class="control">
                                <input class="input" name="repeat-password" id="repeat-password" type="password">
                            </div>
                        </div>

                    </section>

                    <footer class="modal-card-foot">
                        <button id="submitButton" class="button is-success" disabled type="submit">create account</button>
                        <a class="button" href="login.html">login</a>
                    </footer>
                </form>

            </div>    

        </div>
        <script>

const username = document.getElementById("username");
const password = document.getElementById("password");
const passwordRepeat = document.getElementById("repeat-password");
const submitButton = document.getElementById("submitButton");

const validate = () => {

    let valid = true;

    if ( username.value.length < 1 ){
        if ( username.getAttribute("data-visited") == "y" ){
            username.classList.add("is-danger");
        }
        valid = false;
    } else {
        username.classList.remove("is-danger");
    }

    if ( password.value.length < 1 ){
        if ( password.getAttribute("data-visited") == "y" ){
            password.classList.add("is-danger");
        }
        valid = false;
    } else {
        password.classList.remove('is-danger');
    }

    if ( password.value != passwordRepeat.value ){
        if ( passwordRepeat.getAttribute("data-visited") == "y" ){
            passwordRepeat.classList.add("is-danger");
        }
        valid = false;
    } else {
        passwordRepeat.classList.remove("is-danger");
    }

    if ( valid ){
        submitButton.disabled = false;
    } else {
        submitButton.disabled = true;
    }

}

document.addEventListener('input', validate);
document.addEventListener('focusin', (evt) => {
    if ( evt.target == username ){
        username.setAttribute("data-visited", "y");
    } else if ( evt.target == password ){
        password.setAttribute("data-visited", "y");
    } else if ( evt.target == passwordRepeat ){
        passwordRepeat.setAttribute("data-visited", "y");
    }
});
document.addEventListener('focusout', (evt) => {   
    validate();
});

        </script>
    </body>

</html>