84 lines
2.8 KiB
Svelte
84 lines
2.8 KiB
Svelte
<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>
|