{% extends 'clients/master.twig' %}

{% set title = 'Clients' %}

{% block content %}
    <div class="section accheader">
        <h1>Clients</h1>
        <p>On this page you can manage what Minecraft username is linked to your account as well as what clients are authorised to use that username. Please check the list of authorised clients from time to time if you know your IP address changes frequently to prevent any unauthorised access.</p>
    </div>

    {% if link is not defined %}
        <div class="section acclink">
            <h2>Link a Minecraft account</h2>
            <p>This will associate a Minecraft username with your Flashii ID. You may only have one linked at a time. In order to obtain a link code, connect to one of the Minecraft servers.</p>

            {% if error is defined and error.section == 'link' %}
                <p style="color: red;">{{ error.message }}</p>
            {% endif %}

            <form method="post" action="/clients/link">
                <input type="hidden" name="csrfp" value="{{ globals.csrfp }}">
                <label>
                    <div class="label-header">Link code</div>
                    <div class="label-input"><input type="text" name="code" value="" minlength="10" maxlength="10" pattern="^[A-Za-z0-9]*$" spellcheck="false"></div>
                </label>
                <input type="submit" value="Link account">
            </form>
        </div>
    {% else %}
        <div class="section accipaddr">
            <h2>Your IP Address</h2>
            <p>Use this to verify the clients list below. The Authorise button only becomes available once your IP address is visible here.</p>
            <ul>
                <li>Your IPv4 address is: <span class="js-ipv4">loading...</span></li>
            </ul>
        </div>

        <div class="section accclients">
            <h2>Clients</h2>
            <p>This list contains the list of both authorised and pending clients. Only authorise clients you recognise and take care to remove old ones you don't use anymore.</p>

            {% if clients is empty %}
                <p><em>You currently don't have any pending or authorised clients.</em></p>
            {% else %}
                <table>
                    <thead>
                        <tr>
                            <th>IP Address</th>
                            <th>Requested</th>
                            <th>Granted</th>
                            <th>Last Used</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for client in clients %}
                            <tr>
                                <td class="ipaddr">
                                    <span data-addr="{{ client.addressRaw }}">{{ client.addressRaw }}</span>
                                </td>
                                <td class="request">
                                    {{ client.requestedTime|date('Y-m-d H:i:s T') }}
                                </td>
                                <td class="granted">
                                    {{ client.isPending ? 'pending' : client.grantedTime|date('Y-m-d H:i:s T') }}
                                </td>
                                <td class="used">
                                    {{ client.isUsed ? client.lastUsedTime|date('Y-m-d H:i:s T') : 'unused' }}
                                </td>
                                <td class="actions">
                                    {% if client.isPending %}
                                        <form method="post" action="/clients/authorise">
                                            <input type="hidden" name="csrfp" value="{{ globals.csrfp }}">
                                            <input type="hidden" name="auth" value="{{ client.id }}">
                                            <input class="action action-authorise js-authorise-button" type="submit" value="Approve" disabled onclick="return confirm('Are you sure?');">
                                        </form>
                                    {% endif %}
                                    <form method="post" action="/clients/deauthorise">
                                        <input type="hidden" name="csrfp" value="{{ globals.csrfp }}">
                                        <input type="hidden" name="auth" value="{{ client.id }}">
                                        <input class="action action-deauthorise" type="submit" value="{% if client.isPending %}Deny{% else %}Deauthorise{% endif %}">
                                    </form>
                                </td>
                            </tr>

                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>

        <div class="section accmegadeauth">
            <h2>Crowd Control</h2>
            <p>Provided for those who prefer the nuclear option. Pressing the first button will deauthorise all clients, the other one will only remove pending ones.</p>
            <form method="post" action="/clients/deauthorise">
                <input type="hidden" name="csrfp" value="{{ globals.csrfp }}">
                <button class="form-btn-red" name="auth" value="all">Deauthorise all clients</button>
                <button class="form-btn-green" name="auth" value="pending">Deny pending clients</button>
            </form>
        </div>

        <div class="section accunlink">
            <h2>Linked Minecraft account</h2>
            <p>This is the Minecraft account currently associated with your Flashii ID. Revoking revoke your access to the servers. <strong>If you're planning on changing your username, please keep in mind that your stats and inventory on the servers WILL NOT carry over automatically.</strong></p>
            <p>Your account has been linked with <b>{{ link.name }}</b> since <b>{{ link.createdTime|date('Y-m-d H:i:s T') }}</b>.</p>
            <form method="post" action="/clients/unlink">
                <input type="hidden" name="csrfp" value="{{ globals.csrfp }}">
                <input type="submit" value="Unlink account">
            </form>
        </div>

        <script>
            window.addEventListener('DOMContentLoaded', function() {
                // it's possible that the site was loaded over IPv6
                const ipv4field = document.querySelector('.js-ipv4');
                const xhr = new XMLHttpRequest;
                xhr.addEventListener('load', function() {
                    ipv4field.style.fontWeight = '700';
                    ipv4field.textContent = xhr.responseText;

                    const addrs = document.querySelectorAll('[data-addr="' + xhr.responseText + '"]');
                    for(const addr of addrs)
                        addr.style.textDecoration = 'underline';

                    const buttons = document.querySelectorAll('.js-authorise-button');
                    for(const button of buttons)
                        button.disabled = false;
                });
                xhr.addEventListener('error', function() {
                    ipv4field.style.color = 'red';
                    ipv4field.textContent = 'Failed to connect to ipv4.flash.moe, are you blocking it?';
                });
                xhr.open('GET', '//ipv4.flash.moe');
                xhr.send();
            });
        </script>
    {% endif %}
{% endblock %}