{% extends "layout.html" %}

{% block title %}Kawari Launcher{% endblock %}

{% block body %}
<main class="p-3">
<h1>Kawari</h1>

<div class="alert alert-primary" role="alert" id="alert" style="display: none">
    <p id="statusMessage"></p>
</div>

<form id="login" style="max-width: 300px;" class="mt-3 mb-3">
    <label for="sqexid" class="form-label">Username</label><br>
    <input type='text' id='sqexid' name='sqexid' class="form-control"/><br>
    <label for="password" class="form-label">Password</label><br>
    <input id='password' name='password' class="form-control" type="password"/><br>
    <input type="hidden" id="_STORED_" name="_STORED_" value="34657" />
    <button type='submit'  class="btn btn-primary">Login</button>
</form>

<input type="button" class="btn btn-primary btn-lg mt-3 mb-3" id="play" value="Play" onclick="window.external.user('startPlay');" style="display: none"/>

<div class="btn-group mb-3" role="group">
    <input type="button" class="btn btn-secondary" value="System Info" onclick="window.external.user('systemInfo');" />
    <input type="button" class="btn btn-secondary" value="Config Tool" onclick="window.external.user('configTransport');" />
</div>

<div class="btn-group mb-3" role="group">
    <input type="button" class="btn btn-outline-secondary" value="Accept EULA" onclick="window.external.user('eulaOk');" />
    <input type="button" class="btn btn-outline-secondary" value="Accept Ex EULAs" onclick="window.external.user('eulaExOk');" />
</div>

<p><small>This is not an official login page. It will <i>not</i> accept your official account's credentials, please do not enter them here!</small></p>

</main>

<script type="text/javascript">
    let req;
    function readystatechange(event) {
        if (req.readyState == 4) {
            // This login endpoint sends a "window.external.user" which we need to evaludate.
            eval(req.response);
        }
    }

    function error(event) {
        window.external.user('login=auth,ng,err,' + req.response);
    }

    function login() {
        let sqexid = document.getElementById('sqexid').value;
        let password = document.getElementById('password').value;
        let otppw = "";
        let stored = document.getElementById('_STORED_').value;

        req = new XMLHttpRequest();
        req.addEventListener("readystatechange", readystatechange);
        req.addEventListener("error", error);
        req.open("POST", "http://ffxiv-login.square.localhost/oauth/ffxivarr/login/login.send");
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        req.send("sqexid=" + sqexid + "&password=" + password + "&otppw=" + otppw + "&_STORED_=" + stored);
    }

    function sendAlert(text) {
        document.getElementById('statusMessage').innerText = text;
        document.getElementById('alert').style.display = "block";
    }

    function checkHandlerType(e) {
        if ('function' != typeof e) throw new Error('Protocol Callback is not function.');
        return e
    }

    function fromAppConfig(thing) {
        //document.getElementById('replace-me').innerText += "config: " + JSON.stringify(thing);
    }
    window.fromAppConfig = this.checkHandlerType(fromAppConfig);

    function fromAppWarn(thing) {
        document.getElementById('statusMessage').innerText += "warn: " + JSON.stringify(thing);
    }
    window.fromAppWarn = this.checkHandlerType(fromAppWarn);

    function fromAppStartVersionCheck(thing) {
        sendAlert(thing.versionChecking);

        // the official launcher does some preparation stuff here, and when it's finished it tells it the ID it just recieved
        window.external.user('received=' + thing.ID);
    }
    window.fromAppStartVersionCheck = this.checkHandlerType(fromAppStartVersionCheck);

    function fromAppDP(thing) {
        //document.getElementById('replace-me').innerText += "dp: " + JSON.stringify(thing);
    }
    window.fromAppDP = this.checkHandlerType(fromAppDP);

    function fromAppDisplaySettings(thing) {
        //document.getElementById('replace-me').innerText += "display settings: " + JSON.stringify(thing);
    }
    window.fromAppDisplaySettings = this.checkHandlerType(fromAppDisplaySettings);

    function fromAppResumeInfo(thing) {
        // 3 means "ready to play"
        if (thing.state == 3) {
            document.getElementById("login").style.display = "none";
            document.getElementById("play").style.display = "block";
        }

        // acknowledge
        window.external.user('received=' + thing.ID);
    }
    window.fromAppResumeInfo = this.checkHandlerType(fromAppResumeInfo);

    function fromAppLoginUrl(thing) {
        //document.getElementById('replace-me').innerText += "login info: " + JSON.stringify(thing);
    }
    window.fromAppLoginUrl = this.checkHandlerType(fromAppLoginUrl);

    function fromAppExAgree(thing) {
        sendAlert("You need to accept the following Ex EULAs: " + thing.notAgreedExEulas);
    }
    window.fromAppExAgree = this.checkHandlerType(fromAppExAgree);

    function fromAppStartDownload(thing) {
        //document.getElementById('replace-me').innerText += "start download: " + JSON.stringify(thing);
    }
    window.fromAppStartDownload = this.checkHandlerType(fromAppStartDownload);

    function fromAppDownloadProgress(thing) {
        //document.getElementById('replace-me').innerText += "download prog: " + JSON.stringify(thing);
    }
    window.fromAppDownloadProgress = this.checkHandlerType(fromAppDownloadProgress);

    function fromAppInstallProgress(thing) {
        //document.getElementById('replace-me').innerText += "install prog: " + JSON.stringify(thing);
    }
    window.fromAppInstallProgress = this.checkHandlerType(fromAppInstallProgress);

    function fromAppStartInstall(thing) {
        //document.getElementById('replace-me').innerText += "start install: " + JSON.stringify(thing);
    }
    window.fromAppStartInstall = this.checkHandlerType(fromAppStartInstall);

    function fromAppWaitPlay(thing) {
        //document.getElementById('replace-me').innerText += "wait play: " + JSON.stringify(thing);

        // the official launcher does some preparation stuff here, and when it's finished it tells it the ID it just recieved
        window.external.user('received=' + thing.ID);

        // it requests the config again?
        window.external.user('requestConfig');
    }
    window.fromAppWaitPlay = this.checkHandlerType(fromAppWaitPlay);

    function fromAppStartFileCheck(thing) {
        //document.getElementById('replace-me').innerText += "file check: " + JSON.stringify(thing);
    }
    window.fromAppStartFileCheck = this.checkHandlerType(fromAppStartFileCheck);

    function fromAppFileCheckProgress(thing) {
        //document.getElementById('replace-me').innerText += "file check prog: " + JSON.stringify(thing);
    }
    window.fromAppFileCheckProgress = this.checkHandlerType(fromAppFileCheckProgress);

    function fromAppFinishedFileCheck(thing) {
        //document.getElementById('replace-me').innerText += "file check finished: " + JSON.stringify(thing);
    }
    window.fromAppFinishedFileCheck = this.checkHandlerType(fromAppFinishedFileCheck);

    function fromAppServiceAgreement(thing) {
        //document.getElementById('replace-me').innerText += "agreement: " + JSON.stringify(thing);
    }
    window.fromAppServiceAgreement = this.checkHandlerType(fromAppServiceAgreement);

    function fromAppDialog(thing) {
        //document.getElementById('replace-me').innerText += "dialog: " + JSON.stringify(thing);
    }
    window.fromAppDialog = this.checkHandlerType(fromAppDialog);

    // this is what the retail launcher does
    window.external.user('permissionFromApp=1');
    window.external.user('requestDP');
    window.external.user('requestConfig');
    window.external.user('requestDisplaySettings');
    window.external.user('requestResumeInfo');

    // setup form submission
    const form = document.getElementById("login");
    form.addEventListener("submit", function (event) {
        // ie11 is amazing
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
        login();
    });
</script>
{% endblock %}