<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kontroll.digital</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#signin_button').on('click', function (event) {
                event.preventDefault();
                get_code();
            });
        });
        function get_code () {
            let form_values = $('#signin_form').serialize();
            console.log(form_values);
            $.ajax ({
                type: 'GET',
                url: './code',
                data: form_values,
                dataType: 'json',
                success: function (msg) {
                    if (msg) {
                        console.log('Result code: ' + msg);
                        send_code(msg)
                    }
                },
                error: function () {
                    let errors = ['An unknown error occured.'];
                    console.log(errors);
                }
            });
        }
        function send_code (code) {
            let redirect_uri = $('#redirect_uri').val();
            let response_type = $('#response_type').val();
            let scope = $('#scope').val();
            let state = $('#state').val();

            console.log('Redirect URI: ' + redirect_uri);
            console.log('Response type: ' + response_type);
            console.log('Scope: ' + scope);
            console.log('State: ' + state);
            console.log('Code: ' + code);

            $.get ({
                url: redirect_uri,
                crossDomain: true,
                data: {
                    response_type: response_type,
                    scope: scope,
                    state: state,
                    code: code
                },
                dataType: 'html',
                success: function (msg) {
                    if (msg) {
                        console.log('Result text: ' + msg);
                        $('#result_message').text('Received verification code. You may now close this window.');
                    }
                },
                error: function () {
                    let errors = ['An unknown error occured.'];
                    console.log(errors);
                }
            });
        }
    </script>
    <style>
        body {
            align-content: center;
            justify-content: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
        .page_layout {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="page_layout" class="page_layout">
    <form action="./code" id="signin_form" name="signin_form">
        <h1 class="h3 mb-3">kontroll.digital</h1>
        <div id="result_message">
            <label for="username" class="sr-only mb-1">Username</label>
            <input type="text" id="username" name="username" class="form-control mb-3" placeholder="Username" required autofocus>
            <label for="password" class="sr-only mb-1">Password</label>
            <input type="password" id="password" name="password" class="form-control mb-3" placeholder="Password" required>
            <div class="checkbox mb-3">
                <label>
                By signing in, I allow: {{client_name}}, to access data from Kontroll BCF server, on my behalf.
                </label>
            </div>
            <input type="hidden" id="response_type" name="response_type" value="{{response_type}}">
            <input type="hidden" id="client_id" name="client_id" value="{{client_id}}">
            <input type="hidden" id="client_name" name="client_name" value="{{client_name}}">
            <input type="hidden" id="state" name="state" value="{{state}}">
            <input type="hidden" id="scope" name="scope" value="{{scope}}">
            <input type="hidden" id="redirect_uri" name="redirect_uri" value="{{redirect_uri}}">
            <button class="btn btn-lg btn-primary btn-block" type="submit" id="signin_button">Sign in</button>
        </div>
    </form>
</div>
</body>
</html>

