<!DOCTYPE html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<title>Loading</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    html, body {
        height: 100%;
        background-color: white;
        font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #statustext {
        text-align: center;
    }

    #giveup {
        display: none;
        margin-top: 5px;
        border: none;
        border-radius: 3px;
        box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
        padding: 6px 16px;
        font-size: 13px;
        line-height: 1.846;
        color: #fff;
        background-color: #2196f3;
        text-align: center;
        vertical-align: middle;
        touch-action: manipulation;
        white-space: nowrap;
        text-decoration: none;
        box-sizing: border-box;
        text-transform: uppercase;
        position: relative;
    }
</style>

<img src="cdvfile://localhost/assets/www/img/loader.gif" style="width: 65px; height: 65px;" alt="" onerror="this.onerror=null;this.src='cdvfile://localhost/bundle/www/img/loader.gif';"/>

<p id="statustext">Logging in...</p>
<br />
<div id="giveup" onclick="parent.postMessage('quit', '*');">Give up</div>
<script>
    window.addEventListener('message', function (event) {
        if (event.data == "loginok") {
            document.getElementById("statustext").innerHTML = "Loading...";
            setTimeout(function () {
                document.getElementById("statustext").innerHTML = "Still loading...";
            }, 5000);
            setTimeout(function () {
                document.getElementById("statustext").innerHTML = "Just a moment...";
                document.getElementById("giveup").style.display = "inline-block";
            }, 10000);
            setTimeout(function () {
                document.getElementById("statustext").innerHTML = "Well this is awkward.";
            }, 20000);
            setTimeout(function () {
                document.getElementById("statustext").innerHTML = "[fidgets nervously]";
            }, 25000);
            setTimeout(function () {
                document.getElementById("statustext").innerHTML = "Either something is broken or your connection is too slow.";
            }, 30000);
        }
    });
</script>