Compare commits
3 commits
3feafdcb8b
...
c2e03d5a78
Author | SHA1 | Date | |
---|---|---|---|
c2e03d5a78 | |||
b009d3e98f | |||
6072f99027 |
6 changed files with 248 additions and 24 deletions
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
{#if !running}
|
||||
<button
|
||||
class="hover:text-red-500"
|
||||
class="hover:text-red"
|
||||
on:click={() => {
|
||||
remove(file.name);
|
||||
}}
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
<script>
|
||||
export let click,
|
||||
disabled = false,
|
||||
pulse = false;
|
||||
pulse = false,
|
||||
color = 'bg-crust';
|
||||
</script>
|
||||
|
||||
<button
|
||||
|
@ -11,7 +12,7 @@
|
|||
{disabled}
|
||||
>
|
||||
<div
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 hadow-md bg-crust border-overlay2 hover:border-overlay0 group-disabled/button:border-overlay0 group-disabled/button:hover:border-overlay0"
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 hadow-md {color} border-overlay2 hover:border-overlay0 group-disabled/button:border-overlay0 group-disabled/button:hover:border-overlay0"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
@ -6,5 +6,8 @@ export const MAIL_WHITELIST = [
|
|||
'madhouselabs.net',
|
||||
'dfuser.xyz',
|
||||
'liloandstit.ch',
|
||||
'vea.st'
|
||||
'vea.st',
|
||||
'fwfy.club',
|
||||
'protonmail.com',
|
||||
'pm.me'
|
||||
];
|
||||
|
|
|
@ -0,0 +1,212 @@
|
|||
<script>
|
||||
import { Info, X, Plus } from 'lucide-svelte';
|
||||
import Button from '$lib/components/Inputs/Button.svelte';
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 mx-auto xl:grid-cols-3 w-fit">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-2 p-2 max-w-lg rounded-lg bg-crust">
|
||||
<p class="text-xl font-bold">Account Settings</p>
|
||||
<span class="w-full border-b-2 border-surface0" />
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-lg font-bold" for="username">Username</label>
|
||||
<input
|
||||
class="px-2 h-8 rounded-lg ring-1 transition-all bg-mantle ring-surface2 focus-visible:outline-none focus-visible:outline-overlay0"
|
||||
type="text"
|
||||
name="username"
|
||||
id="username"
|
||||
placeholder="cirro"
|
||||
/>
|
||||
<p class="text-sm text-surface2">
|
||||
Your username is used to identify you around the site. You can change it at any time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-lg font-bold" for="username">Email</label>
|
||||
<input
|
||||
class="px-2 h-8 rounded-lg ring-1 transition-all bg-mantle ring-surface2 focus-visible:outline-none focus-visible:outline-overlay0"
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="c*******@madhouselabs.net"
|
||||
/>
|
||||
<p class="text-sm text-surface2">
|
||||
Changing your email may require you to verify ownership.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button color={'bg-mantle'} click={() => {}}>
|
||||
<p class="w-full text-center">Update Account</p></Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 p-2 max-w-lg rounded-lg bg-crust">
|
||||
<p class="flex text-xl font-bold">
|
||||
API Keys
|
||||
<button class="my-auto ml-auto hover:text-blue">
|
||||
<Plus></Plus>
|
||||
</button>
|
||||
</p>
|
||||
<span class="w-full border-b-2 border-surface0" />
|
||||
<table class="w-full text-left rounded-t-lg table-auto">
|
||||
<thead>
|
||||
<tr class="bg-mantle">
|
||||
<th>API Key</th>
|
||||
<th class="text-center">Revoke</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
<tt class="text-md">d8895a0c-daa5-4b6e-b66f-2494c039fe9e </tt>
|
||||
</th>
|
||||
<th class="flex">
|
||||
<button class="m-auto hover:text-red">
|
||||
<X></X>
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-2 p-2 max-w-lg rounded-lg bg-crust">
|
||||
<p class="flex text-xl font-bold">
|
||||
Embed Settings
|
||||
<button class="my-auto ml-auto">
|
||||
<Info class="my-auto"></Info>
|
||||
</button>
|
||||
</p>
|
||||
<span class="w-full border-b-2 border-surface0" />
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-lg font-bold" for="title">Title</label>
|
||||
<input
|
||||
class="px-2 h-8 rounded-lg ring-1 transition-all bg-mantle ring-surface2 focus-visible:outline-none focus-visible:outline-overlay0"
|
||||
type="text"
|
||||
name="title"
|
||||
id="title"
|
||||
placeholder={`{{ file }}`}
|
||||
/>
|
||||
<p class="text-sm text-surface2">The title shown on the embed.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-lg font-bold" for="description">Desciption</label>
|
||||
<textarea
|
||||
class="px-2 py-1 h-48 rounded-lg ring-1 transition-all bg-mantle ring-surface2 focus-visible:outline-none focus-visible:outline-overlay0"
|
||||
name="description"
|
||||
id="description"
|
||||
placeholder={`Uploaded by {{ username }} at {{ time }}`}
|
||||
></textarea>
|
||||
|
||||
<p class="text-sm text-surface2">
|
||||
The description of the embed. Can have up to 2000 characters.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-1">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-lg font-bold" for="color">Color</label>
|
||||
<input type="color" name="color" id="color" value="#{(3159110).toString(16)}" />
|
||||
<p class="text-sm text-surface2">The color shown to the left of the embed.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button color={'bg-mantle'} click={() => {}}>
|
||||
<p class="w-full text-center">Update Embeds</p></Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-2 p-2 max-w-lg rounded-lg bg-crust">
|
||||
<p class="text-xl font-bold">Security Settings</p>
|
||||
<span class="w-full border-b-2 border-surface0" />
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-lg font-bold" for="password">Password</label>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<input
|
||||
class="px-2 h-8 rounded-lg ring-1 transition-all bg-mantle ring-surface2 focus-visible:outline-none focus-visible:outline-overlay0"
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
placeholder="Old Password"
|
||||
/>
|
||||
<input
|
||||
class="px-2 h-8 rounded-lg ring-1 transition-all bg-mantle ring-surface2 focus-visible:outline-none focus-visible:outline-overlay0"
|
||||
type="password"
|
||||
name="npassword"
|
||||
id="npassword"
|
||||
placeholder="New Password"
|
||||
/>
|
||||
<input
|
||||
class="px-2 h-8 rounded-lg ring-1 transition-all bg-mantle ring-surface2 focus-visible:outline-none focus-visible:outline-overlay0"
|
||||
type="password"
|
||||
name="cpassword"
|
||||
id="cpassword"
|
||||
placeholder="Confirm Password"
|
||||
/>
|
||||
</div>
|
||||
<Button color={'bg-mantle mt-1'} click={() => {}}>
|
||||
<p class="w-full text-center">Change Password</p></Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-lg font-bold" for="description">2FA</label>
|
||||
<p class="text-sm text-surface2">
|
||||
A One-Time Password will be required each time you login.
|
||||
</p>
|
||||
|
||||
<Button color={'bg-mantle mt-2'} click={() => {}}>
|
||||
<p class="w-full text-center">Enable 2FA</p>
|
||||
</Button>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 p-2 max-w-lg rounded-lg bg-crust">
|
||||
<p class="text-xl font-bold">Privacy Settings</p>
|
||||
<span class="w-full border-b-2 border-surface0" />
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="">
|
||||
<div class="flex flex-col gap-1">
|
||||
<div>
|
||||
<input type="checkbox" name="newPostsPublic" id="newPostsPublic" />
|
||||
<label class="" for="newPostsPublic">New Posts Public</label>
|
||||
</div>
|
||||
<p class="text-sm text-surface2">
|
||||
Whether newly uploaded posts should be public or not.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="flex flex-col gap-1">
|
||||
<div>
|
||||
<input type="checkbox" name="newPostsPublic" id="newPostsPublic" />
|
||||
<label class="" for="newPostsPublic">Encrypt Uploads</label>
|
||||
</div>
|
||||
<p class="text-sm text-surface2">Enable encryption for new uploads. (Client-side)</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button color={'bg-mantle'} click={() => {}}>
|
||||
<p class="w-full text-center">Update Preferences</p></Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -7,6 +7,9 @@ export async function load({ locals, url }) {
|
|||
if (+(url.searchParams.get('i') || 0) < 0) error(400, { status: 403, message: 'Invalid Index' });
|
||||
|
||||
const totalUploads = await prisma.upload.count();
|
||||
|
||||
if (!totalUploads) return { uploads: [], totalUploads: 0 };
|
||||
|
||||
if (+(url.searchParams.get('i') || 0) >= Math.ceil(totalUploads / 15))
|
||||
error(400, { status: 403, message: 'Invalid Index' });
|
||||
|
||||
|
|
|
@ -18,25 +18,29 @@
|
|||
</script>
|
||||
|
||||
{#await data.uploads then uploads}
|
||||
<div class="grid grid-cols-5 grid-rows-3 gap-2">
|
||||
{#each uploads as upload, i}
|
||||
<a
|
||||
in:fade|global={{ duration: 500, delay: 100 * i }}
|
||||
href="/file/{upload.id}"
|
||||
class="flex flex-col gap-2 p-2 mx-auto w-full rounded-lg shadow-lg bg-crust"
|
||||
>
|
||||
<div class="flex w-full rounded-lg aspect-video bg-mantle">
|
||||
<File size="32" class="m-auto text-surface2"></File>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold overflow-ellipsis whitespace-nowrap overflow-x-clip">
|
||||
{upload.fileName}
|
||||
</p>
|
||||
<p class="text-sm text-overlay1">{bytesToHumanReadable(upload.size)}</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{#if uploads.length}
|
||||
<div class="grid grid-cols-5 grid-rows-3 gap-2">
|
||||
{#each uploads as upload, i}
|
||||
<a
|
||||
in:fade|global={{ duration: 500, delay: 100 * i }}
|
||||
href="/file/{upload.id}"
|
||||
class="flex flex-col gap-2 p-2 mx-auto w-full rounded-lg shadow-lg bg-crust"
|
||||
>
|
||||
<div class="flex w-full rounded-lg aspect-video bg-mantle">
|
||||
<File size="32" class="m-auto text-surface2"></File>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold overflow-ellipsis whitespace-nowrap overflow-x-clip">
|
||||
{upload.fileName}
|
||||
</p>
|
||||
<p class="text-sm text-overlay1">{bytesToHumanReadable(upload.size)}</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p>no uploads</p>
|
||||
{/if}
|
||||
<div class="flex mx-auto mt-2 space-x-1 rounded-md bg-crust w-fit">
|
||||
<button
|
||||
class="p-2 my-auto hover:text-overlay2"
|
||||
|
@ -54,7 +58,8 @@
|
|||
if ($pageIndex >= Math.ceil(data.totalUploads / 15) - 1) return;
|
||||
$pageIndex += 1;
|
||||
}}
|
||||
><ChevronRight></ChevronRight>
|
||||
>
|
||||
<ChevronRight></ChevronRight>
|
||||
</button>
|
||||
</div>
|
||||
{/await}
|
||||
|
|
Loading…
Reference in a new issue