chore(front/url-shrinker): convert url-shrinker to svelte

This commit is contained in:
Alice Gaudon 2022-03-05 10:12:26 +01:00
parent c025aa2539
commit 7c65f1b6ae
4 changed files with 95 additions and 77 deletions

View File

@ -1,75 +0,0 @@
{% extends 'layouts' %}
{% set title = app.name + ' - Shrink URL' %}
{% block scripts %}
<script src="/js/url-shrinker.js"></script>
{% endblock %}
{% block body %}
<h1>Shrink URLs</h1>
<p>For security reasons, shrinked URLs cannot be deleted.</p>
<div class="container">
<section class="panel">
<h2><i data-feather="crosshair"></i> Shrink a URL</h2>
<form action="{{ route('shrink-url') }}" method="POST" id="url-shrink-form">
{{ macros.field(_locals, 'text', 'target_url', '', 'Target URL', 'Only valid URLs starting with http:// or https://', validation_attributes='required') }}
{{ macros.field(_locals, 'checkbox', 'autogen_url', '', 'Generate url automatically', null, validation_attributes='checked') }}
{{ macros.field(_locals, 'text', 'slug', '', 'Custom url slug', 'Example: bear sets url to https://'+default_domain+'/bear', validation_attributes='disabled') }}
{{ macros.csrf(getCsrfToken) }}
<button type="submit"><i data-feather="link"></i> Shrink URL</button>
</form>
{% set url = flash('url') %}
{% if url | length %}
<div class="copyable-text">
<div class="title">URL</div>
<div class="content">{{ url }}</div>
<button class="copy-button"><i data-feather="copy"></i></button>
</div>
{% endif %}
</section>
<section class="panel">
<h2><i data-feather="link"></i> URL list</h2>
{{ macros.paginate(urls.pagination, 'url-shrinker', 3) }}
<table class="data-table">
<thead>
<tr>
<th>#</th>
<th class="table-col-grow">Target</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for url in urls %}
<tr>
<td>{{ url.id }}</td>
<td class="table-col-grow-cell"><a href="{{ url.getURL() }}"><pre>{{ url.target_url }}</pre></a></td>
<td class="actions">
<div>
<button class="copy-button" data-content="{{ url.getURL() }}"><i data-feather="copy"></i> <span class="tip">Copy URL</span></button>
</div>
</td>
</tr>
{% else %}
<tr>
<td colspan="3" class="center">You haven't shrunk any url yet.</td>
</tr>
{% endfor %}
</tbody>
</table>
{{ macros.paginate(urls.pagination, 'url-shrinker', 3) }}
</section>
</div>
{% endblock %}

View File

@ -0,0 +1,83 @@
<script lang="ts">
import {locals} from "../ts/stores.js";
import {route} from "../../common/Routing";
import BaseTemplate from "./templates/BaseTemplate.svelte";
import Icon from "./utils/Icon.svelte"
import Form from "./utils/Form.svelte";
import Field from "./utils/Field.svelte";
import CopyableText from "./components/CopyableText.svelte";
import Pagination from "./components/Pagination.svelte";
let autogenUrl;
</script>
<BaseTemplate title="{$locals.app.name} - Shrink URL" description="Make your URLs shorter." noH1>
<h1>Shrink URLs</h1>
<section class="panel">
<h2>
<Icon name="shrink"/>
Shrink a URL
</h2>
<p>For security reasons, shrinked URLs cannot be deleted.</p>
<Form action="{route('shrink-url')}" submitText="Shrink URL" submitIcon="shrink">
<Field type="text" name="target_url" placeholder="Target URL" icon="link"
hint="Only valid URLs starting with http:// or https://" required/>
<Field type="checkbox" name="autogen_url" placeholder="Generate url automatically"
icon="zap"
bind:value={autogenUrl} initialValue={true}/>
{#if !autogenUrl}
<Field type="text" name="slug" placeholder="Custom url slug" icon="link"
hint="Example: beautiful_image.jpg sets url to https://{$locals.default_domain}/beautiful_image.jpg"/>
{/if}
</Form>
{#if $locals.flash.url}
<CopyableText title="URL" content={$locals.flash.url}/>
{/if}
</section>
<section class="panel">
<h2>
<Icon name="link"/>
URL list
</h2>
<Pagination pagination={$locals.pagination} routeName="url-shrinker" contextSize={3}/>
<table class="data-table">
<thead>
<tr>
<th>#</th>
<th class="col-grow">Target</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{#each $locals.urls as url}
<tr>
<td>{url.id}</td>
<td class="col-grow-cell">
<a href="{url.url}">
<pre>{url.target_url}</pre>
</a>
</td>
<td class="actions">
<CopyableText content="{url.url}" buttonMode/>
</td>
</tr>
{:else}
<tr>
<td colspan="3" class="center">You haven't shrunk any url yet.</td>
</tr>
{/each}
</tbody>
</table>
<Pagination pagination={$locals.pagination} routeName="url-shrinker" contextSize={3}/>
</section>
</BaseTemplate>

View File

@ -18,10 +18,15 @@ export default class URLRedirectController extends Controller {
protected async getUrlShrinker(req: Request, res: Response): Promise<void> { protected async getUrlShrinker(req: Request, res: Response): Promise<void> {
const user = req.as(RequireAuthMiddleware).getUser(); const user = req.as(RequireAuthMiddleware).getUser();
const allowedDomains = config.get<string[]>('allowed_url_domains'); const allowedDomains = config.get<string[]>('allowed_url_domains');
const urls = await URLRedirect.paginateForUser(req, 25, user.getOrFail('id'));
res.render('url-shrinker', { res.render('url-shrinker', {
allowed_domains: allowedDomains, allowed_domains: allowedDomains,
default_domain: allowedDomains[config.get<number>('default_url_domain_for_urls')], default_domain: allowedDomains[config.get<number>('default_url_domain_for_urls')],
urls: await URLRedirect.paginateForUser(req, 25, user.getOrFail('id')), urls: urls.map(url => ({
...url,
url: url.getURL(),
})),
pagination: urls.pagination?.serialize(),
}); });
} }

View File

@ -3,6 +3,7 @@ import {Request} from "express";
import User from "swaf/auth/models/User"; import User from "swaf/auth/models/User";
import {route} from "swaf/common/Routing"; import {route} from "swaf/common/Routing";
import Model from "swaf/db/Model"; import Model from "swaf/db/Model";
import {ModelQueryResult} from "swaf/db/ModelQuery";
import FileModel from "./FileModel.js"; import FileModel from "./FileModel.js";
@ -15,7 +16,11 @@ export default class URLRedirect extends Model {
return await this.select().where('slug', slug).first(); return await this.select().where('slug', slug).first();
} }
public static async paginateForUser(req: Request, perPage: number, user_id: number): Promise<URLRedirect[]> { public static async paginateForUser(
req: Request,
perPage: number,
user_id: number,
): Promise<ModelQueryResult<URLRedirect>> {
req.params.sortBy = 'created_at'; req.params.sortBy = 'created_at';
req.params.sortDirection = 'DESC'; req.params.sortDirection = 'DESC';
return await this.paginate(req, perPage, this.select().where('user_id', user_id)); return await this.paginate(req, perPage, this.select().where('user_id', user_id));