{% extends 'base.html.twig' %}

{% block title %}{{ 'server.connection.title'|trans }}{% endblock %}

{% block body -%}
    <button id="refresh" style="display: none;" class="btn btn-default" onclick="location.reload(true)"><i class="fa fa-refresh"></i> {{ 'server.connection.refresh'|trans }}</button>

    <button id="working" class="btn btn-default"><i class="fa fa-cog fa-spin"></i> {{ 'server.connection.loading'|trans }}</button>
    <br /><br />

    <br />

    <h3>{{ 'server.connection.setup'|trans }}</h3>

    <table class="table arecord">
        <thead>
        <tr>
            <th></th>
            <th style="width: 6em;">Test</th>
            <th style="width: 35%">Description</th>
            <th>{{ 'server.connection.test_result'|trans }}</th>
        </tr>
        </thead>
        <tbody>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>LE</th>
            <td>Let's Encrypt challenge token exchange test</td>
            <td id="result-le"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>IPv4</th>
            <td>Correct remote connection IPv4</td>
            <td id="result-ip4"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>IPv6</th>
            <td>Correct remote connection IPv6</td>
            <td id="result-ip6"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Resolver</th>
            <td>Proper DNS resolver</td>
            <td id="result-resolver"></td>
        </tr>
        </tbody>
    </table>

    <h3>{{ 'server.connection.outbound'|trans }}</h3>

    <table class="table arecord">
        <thead>
        <tr>
            <th></th>
            <th style="width: 6em;">Test</th>
            <th style="width: 35%">Description</th>
            <th>{{ 'server.connection.test_result'|trans }}</th>
        </tr>
        </thead>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Port <strong>25</strong></th>
            <td>Testing gmail.com port 25 connection</td>
            <td id="result-outbound"></td>
        </tr>
    </table>

    <h3>{{ 'server.connection.inbound'|trans }}</h3>

    <table class="table arecord">
        <thead>
        <tr>
            <th></th>
            <th style="width: 6em;">Test</th>
            <th style="width: 35%">Description</th>
            <th>{{ 'server.connection.test_result'|trans }}</th>
        </tr>
        </thead>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Port <strong>25</strong></th>
            <td>SMTP server for incoming emails</td>
            <td id="result-25"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Port <strong>80</strong></th>
            <td>Redirecting HTTP server</td>
            <td id="result-80"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Port <strong>110</strong></th>
            <td>POP3 server (STARTTLS required)</td>
            <td id="result-110"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Port <strong>143</strong></th>
            <td>IMAP server (STARTTLS required)</td>
            <td id="result-143"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Port <strong>443</strong></th>
            <td>Administration and webmail HTTPS server</td>
            <td id="result-443"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Port <strong>587</strong></th>
            <td>Submission server (STARTTLS SMTP server for clients)</td>
            <td id="result-587"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Port <strong>993</strong></th>
            <td>IMAP server (implicit TLS)</td>
            <td id="result-993"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Port <strong>995</strong></th>
            <td>POP3 server (implicit TLS)</td>
            <td id="result-995"></td>
        </tr>
        <tr class="record">
            <td class="status">
                <span class="label-wating glyphicon glyphicon-time"></span>
            </td>
            <th>Port <strong>4190</strong></th>
            <td>Sieve server <strong>(optional)</strong></td>
            <td id="result-4190"></td>
        </tr>
    </table>

{% endblock %}

{% block javascripts %}
    <script>
        var refresh = document.getElementById('refresh');
        var working = document.getElementById('working');

        var todo = 10;

        check ('25', 'result-25');
        check ('80', 'result-80');
        check ('110', 'result-110');
        check ('143', 'result-143');
        check ('443', 'result-443');
        check ('587', 'result-587');
        check ('993', 'result-993');
        check ('995', 'result-995');
        check ('4190', 'result-4190');

        check ('le', 'result-le');
        check ('ip4', 'result-ip4');
        check ('ip6', 'result-ip6');
        check ('resolver', 'result-resolver');

        check ('outbound', 'result-outbound');

        function cb() {
            todo--;
            if (todo === 0) {
                refresh.style.display = 'inline-block';
                working.style.display = 'none';
            }
        }

        function check(target, result_id) {
            var xhr = new XMLHttpRequest();
            xhr.previous_text = '';

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {

                    var status = JSON.parse(xhr.responseText);

                    var icon = document.getElementById(result_id).parentNode.childNodes[1];

                    if (status['ok']) {
                        icon.innerHTML = "<span class='label-ok glyphicon glyphicon-ok'></span>";
                    } else {
                        icon.innerHTML = "<span class='label-warning glyphicon glyphicon-warning-sign'></span>";
                    }

                    document.getElementById(result_id).innerText = status['ok'] ? status['ok'] : status['err'];

                    cb();
                }
            };
            xhr.open("GET", "{{ path('diagnostic_connection_test') }}?target=" + target, true);
            xhr.send();
        }
    </script>
{% endblock %}