chore(front): convert auth-tokens to svelte

src/assets/views/auth-tokens.svelte

@@ -1,22 +1,31 @@
-{% extends 'layouts' %}
+<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>
 
-{% set title = app.name + ' - Auth tokens' %}
+<BaseTemplate title="{$locals.app.name} - Auth tokens" description="Upload files directly from your desktop." noH1>
+    <h1>Auth tokens</h1>
 
-{% block body %}
-<div class="container">
     <section class="panel">
-        <h2><i data-feather="key"></i> Auth tokens</h2>
-        <form action="{{ route('generate-token') }}" method="POST">
-            {{ macros.csrf(getCsrfToken) }}
+        <h2>
+            <Icon name="key"/>
+            Auth tokens
+        </h2>
+        <Form action="{route('generate-token')}" submitText="Generate a new token" submitIcon="plus"/>
 
-            <button type="submit"><i data-feather="plus"></i> Generate a new token</button>
-        </form>
+        <Pagination pagination={$locals.pagination} routeName="auth-tokens" contextSize={3}/>
 
         <table class="data-table">
             <thead>
             <tr>
                 <th>#</th>
-                <th class="table-col-grow">Secret</th>
+                <th class="col-grow">Secret</th>
                 <th>Created at</th>
                 <th>Last used at</th>
                 <th>Actions</th>
@@ -24,40 +33,52 @@
             </thead>
 
             <tbody>
-            {% for token in auth_tokens %}
+            {#each $locals.auth_tokens as token}
                 <tr>
-                    <td>{{ token.id }}</td>
+                    <td>{token.id}</td>
                     <td>
-                        <div class="copyable-text">
-                            <div class="content">{{ token.secret }}</div>
-                            <button class="copy-button"><i data-feather="copy"></i></button>
-                        </div>
+                        <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>{{ token.created_at.toISOString() }}</td>
-                    <td>{{ token.used_at.toISOString() }}</td>
                     <td class="actions">
-                        <form action="{{ route('revoke-token', token.id) }}" method="POST">
-                            <button class="button danger"><i data-feather="trash"></i> <span class="tip">Revoke</span></button>
-                            {{ macros.csrf(getCsrfToken) }}
-                        </form>
+                        <Form action="{route('revoke-token', token.id)}" submitText="Revoke" submitIcon="trash"
+                              submitClass="danger"/>
                     </td>
                 </tr>
-            {% endfor %}
+            {/each}
             </tbody>
         </table>
+
+        <Pagination pagination={$locals.pagination} routeName="auth-tokens" contextSize={3}/>
     </section>
 
 
     <section class="panel">
-        <h2><i data-feather="tool"></i> Setup a desktop utility</h2>
+        <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>
+            <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>
@@ -68,11 +89,11 @@
                 <tbody>
                 <tr>
                     <td>upload_file.sh</td>
-                    <td><a href="{{ route('file-linux-script') }}">Download</a></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>
+                    <td><a href="{route('url-linux-script')}">Download</a></td>
                 </tr>
                 </tbody>
             </table>
@@ -134,7 +155,7 @@
                     <td>url_domain</td>
                     <td>Choose domain name</td>
                     <td>No</td>
-                    <td>{{ allowed_domains.join('|') }}</td>
+                    <td>{$locals.allowed_domains.join('|')}</td>
                 </tr>
 
                 <tr>
@@ -156,12 +177,11 @@
                     <td>url_domain</td>
                     <td>Choose domain name</td>
                     <td>No</td>
-                    <td>{{ allowed_domains.join('|') }}</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>
-</div>
-{% endblock %}
+</BaseTemplate>

src/controllers/AuthTokenController.ts

@@ -9,7 +9,7 @@ import AuthToken from "../models/AuthToken.js";
 
 export default class AuthTokenController extends Controller {
     public routes(): void {
-        this.get('/auth-tokens', this.getAuthTokens, 'auth-tokens', RequireAuthMiddleware);
+        this.get('/auth-tokens/:page?', this.getAuthTokens, 'auth-tokens', RequireAuthMiddleware);
         this.post('/gen-auth-token', this.postGenAuthToken, 'generate-token', RequireAuthMiddleware);
         this.post('/revoke-auth-token/:id', this.postRevokeAuthToken, 'revoke-token', RequireAuthMiddleware);
     }
@@ -17,10 +17,16 @@ export default class AuthTokenController extends Controller {
     public async getAuthTokens(req: Request, res: Response): Promise<void> {
         const allowedDomains = config.get<string[]>('allowed_url_domains');
         const user = req.as(RequireAuthMiddleware).getUser();
+        const authTokens = await AuthToken.paginateForUser(req, 2, user.getOrFail('id'));
         res.render('auth-tokens', {
             allowed_domains: allowedDomains,
             default_domain: allowedDomains[config.get<number>('default_url_domain_for_files')],
-            auth_tokens: await AuthToken.select().where('user_id', user.id).get(),
+            auth_tokens: authTokens.map(token => ({
+                ...token,
+                created_at: token.created_at?.toISOString(),
+                used_at: token.used_at?.toISOString(),
+            })),
+            pagination: authTokens.pagination?.serialize(),
         });
     }
 

src/models/AuthToken.ts

@@ -1,14 +1,26 @@
+import {Request} from "express";
 import {nanoid} from "nanoid";
 import AuthProof from "swaf/auth/AuthProof";
 import User from "swaf/auth/models/User";
 import Model from "swaf/db/Model";
+import {ModelQueryResult} from "swaf/db/ModelQuery";
 
 export default class AuthToken extends Model implements AuthProof<User> {
+    public static async paginateForUser(
+        req: Request,
+        perPage: number,
+        user_id: number,
+    ): Promise<ModelQueryResult<AuthToken>> {
+        req.params.sortBy = 'created_at';
+        req.params.sortDirection = 'DESC';
+        return await this.paginate(req, perPage, this.select().where('user_id', user_id));
+    }
+
     public id?: number = undefined;
     protected readonly user_id?: number = undefined;
     private secret?: string = undefined;
-    protected created_at?: Date = undefined;
-    protected used_at?: Date = undefined;
+    public created_at?: Date = undefined;
+    public used_at?: Date = undefined;
     protected readonly ttl?: number = undefined;
 
     protected init(): void {
@@ -23,6 +35,9 @@ export default class AuthToken extends Model implements AuthProof<User> {
         }
     }
 
+    /**
+     * TODO promote this method to AuthProof interface in swaf and call it on successful authentication
+     */
     public use(): void {
         this.used_at = new Date();
     }