MadHouse-Labs/file-uploader
2
0
Fork 0
Code Issues Pull requests Packages Activity Actions

Merge pull request 'settings draft' (#2) from development into master

Browse source 
Reviewed-on: #2
This commit is contained in:
cirroskais 2024-07-31 05:00:02 +00:00
commit c2e03d5a78
6 changed files with 248 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/File.svelte
View file

@ -61,7 +61,7 @@
</div>
{#if !running}
<button
class="hover:text-red-500"
class="hover:text-red"
on:click={() => {
remove(file.name);
}}

5
src/lib/components/Inputs/Button.svelte
View file

@ -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>

5
src/lib/config.js
View file

@ -6,5 +6,8 @@ export const MAIL_WHITELIST = [
'madhouselabs.net',
'dfuser.xyz',
'liloandstit.ch',
'vea.st'
'vea.st',
'fwfy.club',
'protonmail.com',
'pm.me'
];

212
src/routes/(app)/settings/+page.svelte
View file

@ -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>

3
src/routes/(app)/uploads/+page.server.ts
View file

@ -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' });

45
src/routes/(app)/uploads/+page.svelte
View file

@ -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}