<script lang="ts">
    import {locals} from "../ts/stores.js";
    import {route} from "../../common/Routing.js";
    import {Time} from "../../common/Time.js";
    import BaseTemplate from "./templates/BaseTemplate.svelte";
    import Form from "./utils/Form.svelte";
    import Icon from "./utils/Icon.svelte";
    import CopyableText from "./components/CopyableText.svelte";
    import Pagination from "./components/Pagination.svelte";
</script>

<BaseTemplate title="{$locals.app.name} - Auth tokens" description="Upload files directly from your desktop." noH1>
    <h1>Auth tokens</h1>

    <section class="panel">
        <h2>
            <Icon name="key"/>
            Auth tokens
        </h2>
        <Form action="{route('generate-token')}" submitText="Generate a new token" submitIcon="file-plus"/>

        <Pagination pagination={$locals.pagination} routeName="auth-tokens" contextSize={3}/>

        <table class="data-table">
            <thead>
            <tr>
                <th>#</th>
                <th class="col-grow">Secret</th>
                <th>Created at</th>
                <th>Last used at</th>
                <th>Actions</th>
            </tr>
            </thead>

            <tbody>
            {#each $locals.auth_tokens as token}
                <tr>
                    <td>{token.id}</td>
                    <td>
                        <CopyableText content="{token.secret}"/>
                    </td>
                    <td>
                        <time datetime="{token.created_at}" title="{token.created_at}">
                            {Time.humanizeTimeSince(new Date(token.created_at), true)} ago
                        </time>
                    </td>
                    <td>
                        {#if token.used_at}
                            <time datetime="{token.used_at}" title="{token.used_at}">
                                {Time.humanizeTimeSince(new Date(token.used_at), true)} ago
                            </time>
                        {:else}
                            Never
                        {/if}
                    </td>
                    <td class="actions">
                        <Form action="{route('revoke-token', token.id)}" submitText="Revoke" submitIcon="trash"
                              submitClass="danger" button/>
                    </td>
                </tr>
            {/each}
            </tbody>
        </table>

        <Pagination pagination={$locals.pagination} routeName="auth-tokens" contextSize={3}/>
    </section>


    <section class="panel">
        <h2>
            <Icon name="wrench"/>
            Setup a desktop utility
        </h2>
        <p>There may be a desktop client at some point. For now, if you're an advanced user, you can setup
            scripts/macros.</p>

        <hr>
        <section>
            <h3>First alternative: sh script (native on linux)</h3>
            <p>If you have the sh shell on your machine (i.e. you are on linux, git bash on windows...) and curl, you
                can download and use these scripts:</p>
            <table class="data-table">
                <thead>
                <tr>
                    <th class="table-col-grow">Name</th>
                    <th>Download link</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>upload_file.sh</td>
                    <td><a href="{route('file-linux-script')}">Download</a></td>
                </tr>
                <tr>
                    <td>shrink_url.sh</td>
                    <td><a href="{route('url-linux-script')}">Download</a></td>
                </tr>
                </tbody>
            </table>
            <p>You must put a valid auth token (generated in the form at the bottom of this page) in a .ily_token
                file in your home directory (<code>$HOME/.ily_token</code>).</p>
            <p>Examples:</p>
            <pre>upload_file.sh path/to/file</pre>
            <pre>upload_file.sh path/to/file my_very_important_file.png</pre>
            <pre>shrink_url.sh https://eternae.ink/ashpie/ily.li</pre>
            <pre>shrink_url.sh https://eternae.ink/ashpie/ily.li repo</pre>
        </section>

        <hr>

        <section>
            <h3>Second alternative: implement your own client</h3>
            <p>
                To upload the file, you must:
            </p>
            <ul>
                <li>Set the "Authorization" HTTP header to an auth token (generate one with the form below)</li>
                <li>Make a proper file upload request either with the method "POST" on / (auto-generates a short
                    url) or "PUT" (choose the target url you want, alphanum)
                </li>
            </ul>
            <table class="data-table">
                <thead>
                <tr>
                    <th>Field name</th>
                    <th>Description</th>
                    <th>Required?</th>
                    <th>Value(s)</th>
                </tr>
                </thead>

                <tbody>
                <tr>
                    <th colspan="4">File upload</th>
                </tr>
                <tr>
                    <td>type</td>
                    <td>Request type</td>
                    <td>Yes</td>
                    <td>file</td>
                </tr>
                <tr>
                    <td>upload</td>
                    <td>File field</td>
                    <td>Yes</td>
                    <td>The actual file contents</td>
                </tr>
                <tr>
                    <td>ttl</td>
                    <td>How much time (in seconds) to keep the file</td>
                    <td>No</td>
                    <td>0 (never delete), 30 (delete after 30s)</td>
                </tr>
                <tr>
                    <td>url_domain</td>
                    <td>Choose domain name</td>
                    <td>No</td>
                    <td>{$locals.allowed_domains.join('|')}</td>
                </tr>

                <tr>
                    <th colspan="4">URL shrink</th>
                </tr>
                <tr>
                    <td>type</td>
                    <td>Request type</td>
                    <td>Yes</td>
                    <td>url</td>
                </tr>
                <tr>
                    <td>target_url</td>
                    <td>Target url</td>
                    <td>Yes</td>
                    <td>A valid URL starting with https:// or http://</td>
                </tr>
                <tr>
                    <td>url_domain</td>
                    <td>Choose domain name</td>
                    <td>No</td>
                    <td>{$locals.allowed_domains.join('|')}</td>
                </tr>
                </tbody>
            </table>
            <p>For examples with curl, please download and review the scripts above.</p>
        </section>
    </section>
</BaseTemplate>
