<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js" integrity="sha256-E8KRdFk/LTaaCBoQIV/rFNc0s3ICQQiOHFT4Cioifa8=" crossorigin="anonymous"></script>
        <style>
            .pageContainer {
                margin: 20%;
            }
            @media (max-width: 1100px) {
                .pageContainer {
                    margin: 2%;
                }
            }
            .contactBox {
                color: grey;
            }
            #container {
                margin-top: 5%;
                margin-bottom: 5%;
            }
        </style>
        <title>Create Jellyfin Account</title>
    </head>
    <body>
        <div class="modal fade" id="successBox" tabindex="-1" role="dialog" aria-labelledby="successBox" aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="successTitle">Success!</h5>
                    </div>
                    <div class="modal-body" id="successBody">
                        <p>{{ successMessage }}</p>
                    </div>
                    <div class="modal-footer">
                        <a href="{{ jfLink }}" class="btn btn-primary">Continue</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="pageContainer">
            <h1>
                Create Account
            </h1>
            <p>{{ helpMessage }}</p>
            <p class="contactBox">{{ contactMessage }}</p>
            <div class="container" id="container">
                <div class="row" id="cardContainer">
                    <div class="col-sm" id="accountForm">
                        <div class="card bg-light mb-3">
                            <div class="card-header">Details</div>
                            <div class="card-body">
                                <form action="#" method="POST">
                                    <div class="form-group">
                                        <label for="inputEmail">Email</label>
                                        <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" value="{{ email }}" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputUsername">Username</label>
                                        <input type="username" class="form-control" id="inputUsername" name="username" placeholder="Username" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword">Password</label>
                                        <input type="password" class="form-control" id="inputPassword" name="password" placeholder="Password" required>
                                    </div>
                                    <div class="btn-group" role="group" aria-label="Button & Error" id="errorBox">
                                        <button type="submit" class="btn btn-outline-primary" id="submitButton">
                                            <span id="createAccount">Create Account</span>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var code = window.location.href.split('/').pop();
            $.ajax('/getRequirements', {
                data : JSON.stringify({ 'code': code }),
                contentType : 'application/json',
                type : 'POST',
                crossDomain : true,
                complete : function(response){
                    var data = response['responseJSON'];
                    if (Object.keys(data).length > 1) {
                        var col = document.createElement('div');
                        col.classList.add('col-sm');
                        col.id = 'requirementBox';
                        var card = document.createElement('div');
                        card.classList.add('card', 'bg-light', 'mb-3', 'requirementBox');
                        // card.setAttribute('style', 'max-width: 18rem;');
                        var header = document.createElement('div');
                        header.classList.add('card-header');
                        header.appendChild(document.createTextNode('Password Requirements'));
                        card.appendChild(header);
                        var body = document.createElement('div');
                        body.classList.add('card-body');
                        var listGroup = document.createElement('ul');
                        listGroup.classList.add('list-group');
                        listGroup.id = 'requirements';
                        for (var key in data) {
                            if (data.hasOwnProperty(key)) {
                                var criterion = document.createElement('li');
                                criterion.id = key;
                                criterion.classList.add('list-group-item', 'list-group-item-danger');
                                var text = document.createElement('div');
                                text.appendChild(document.createTextNode(' ' + data[key]));
                                criterion.appendChild(text);
                                listGroup.appendChild(criterion);
                            };
                        };
                        body.appendChild(listGroup);
                        card.appendChild(body);
                        col.appendChild(card);
                        document.getElementById('cardContainer').appendChild(col);
                    };
                }
            });
            function toggleSpinner () {
                var submitButton = document.getElementById('submitButton');
                var oldSpan = document.getElementById('createAccount');
                var newSpan = document.createElement('span');
                newSpan.id = 'createAccount';
                if (document.getElementById('createAccountSpinner')) {
                    newSpan.appendChild(document.createTextNode('Create Account'));
                    submitButton.disabled = false;
                } else {
                    var spinner = document.createElement('span');
                    spinner.id = 'createAccountSpinner';
                    spinner.classList.add('spinner-border', 'spinner-border-sm');
                    spinner.setAttribute('role', 'status');
                    spinner.setAttribute('aria-hidden', 'true');
                    var text = document.createTextNode(' Creating...');
                    newSpan.appendChild(spinner);
                    newSpan.appendChild(text);
                    submitButton.disabled = true;
                }
                submitButton.replaceChild(newSpan, oldSpan);
            };
            $("form").submit(function() {
                toggleSpinner();
                var send = $("form").serializeObject();
                send['code'] = code;
                send = JSON.stringify(send);
                $.ajax('/newUser', {
                    data : send,
                    contentType : 'application/json',
                    type : 'POST',
                    crossDomain : true,
                    complete : function(response){
                        toggleSpinner();
                        var data = response['responseJSON'];
                        if ('error' in data) {
                            var text = document.createTextNode(data['error']);
                                    // <div class="alert alert-danger" id="errorBox"></div>
                            var error = document.createElement('button');
                            error.classList.add('btn', 'btn-outline-danger');
                            error.setAttribute('disabled', '');
                            error.appendChild(text);
                            document.getElementById('errorBox').appendChild(error);
                        } else {
                            var valid = true
                            for (var key in data) {
                                if (data.hasOwnProperty(key)) {
                                    var criterion = document.getElementById(key);
                                    if (criterion) {
                                        if (data[key] == false) {
                                            valid = false;
                                            if (criterion.classList.contains('list-group-item-success')) {
                                                criterion.classList.remove('list-group-item-success');
                                                criterion.classList.add('list-group-item-danger');
                                            };
                                        } else {
                                            if (criterion.classList.contains('list-group-item-danger')) {
                                                criterion.classList.remove('list-group-item-danger');
                                                criterion.classList.add('list-group-item-success');
                                            };
                                        };
                                    };
                                };
                            };
                            if (valid == true) {
                                $('#successBox').modal('show');
                            };
                        }
                    }
                });
                return false;
            });
        </script>
    </body>
</html>                            
