settings draft #2
6 changed files with 248 additions and 24 deletions
|
@ -61,7 +61,7 @@
|
||||||
</div>
|
</div>
|
||||||
{#if !running}
|
{#if !running}
|
||||||
<button
|
<button
|
||||||
class="hover:text-red-500"
|
class="hover:text-red"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
remove(file.name);
|
remove(file.name);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
export let click,
|
export let click,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
pulse = false;
|
pulse = false,
|
||||||
|
color = 'bg-crust';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
@ -11,7 +12,7 @@
|
||||||
{disabled}
|
{disabled}
|
||||||
>
|
>
|
||||||
<div
|
<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 />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,5 +6,8 @@ export const MAIL_WHITELIST = [
|
||||||
'madhouselabs.net',
|
'madhouselabs.net',
|
||||||
'dfuser.xyz',
|
'dfuser.xyz',
|
||||||
'liloandstit.ch',
|
'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' });
|
if (+(url.searchParams.get('i') || 0) < 0) error(400, { status: 403, message: 'Invalid Index' });
|
||||||
|
|
||||||
const totalUploads = await prisma.upload.count();
|
const totalUploads = await prisma.upload.count();
|
||||||
|
|
||||||
|
if (!totalUploads) return { uploads: [], totalUploads: 0 };
|
||||||
|
|
||||||
if (+(url.searchParams.get('i') || 0) >= Math.ceil(totalUploads / 15))
|
if (+(url.searchParams.get('i') || 0) >= Math.ceil(totalUploads / 15))
|
||||||
error(400, { status: 403, message: 'Invalid Index' });
|
error(400, { status: 403, message: 'Invalid Index' });
|
||||||
|
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await data.uploads then uploads}
|
{#await data.uploads then uploads}
|
||||||
|
{#if uploads.length}
|
||||||
<div class="grid grid-cols-5 grid-rows-3 gap-2">
|
<div class="grid grid-cols-5 grid-rows-3 gap-2">
|
||||||
{#each uploads as upload, i}
|
{#each uploads as upload, i}
|
||||||
<a
|
<a
|
||||||
|
@ -37,6 +38,9 @@
|
||||||
</a>
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p>no uploads</p>
|
||||||
|
{/if}
|
||||||
<div class="flex mx-auto mt-2 space-x-1 rounded-md bg-crust w-fit">
|
<div class="flex mx-auto mt-2 space-x-1 rounded-md bg-crust w-fit">
|
||||||
<button
|
<button
|
||||||
class="p-2 my-auto hover:text-overlay2"
|
class="p-2 my-auto hover:text-overlay2"
|
||||||
|
@ -54,7 +58,8 @@
|
||||||
if ($pageIndex >= Math.ceil(data.totalUploads / 15) - 1) return;
|
if ($pageIndex >= Math.ceil(data.totalUploads / 15) - 1) return;
|
||||||
$pageIndex += 1;
|
$pageIndex += 1;
|
||||||
}}
|
}}
|
||||||
><ChevronRight></ChevronRight>
|
>
|
||||||
|
<ChevronRight></ChevronRight>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{/await}
|
{/await}
|
||||||
|
|
Loading…
Reference in a new issue