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

add transitions, abandon drizzle

Browse source
This commit is contained in:
cirroskais 2024-03-24 01:54:45 -04:00
parent a23fb292cd
commit a54a0eba0b
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
12 changed files with 131 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Dockerfile
View file

@ -26,8 +26,6 @@ FROM base AS app
COPY --from=install /usr/src/app/prod/node_modules node_modules
COPY --from=build /usr/src/app/package.json .
COPY --from=build /usr/src/app/build/ .
COPY --from=build /usr/src/app/drizzle.config.js .
COPY --from=build /usr/src/app/src/lib/server/database ./src/lib/server/database
EXPOSE 3000/tcp
CMD [ "node", "index.js" ]

11
drizzle.config.js
View file

@ -1,11 +0,0 @@
/** @type { import("drizzle-kit").Config } */
export default {
schema: 'src/lib/server/database/schema.js',
driver: 'mysql2',
dbCredentials: {
host: process.env.MYSQL_HOST,
user: process.env.MYSQL_USERNAME,
password: process.env.MYSQL_PASSWORD,
database: process.env.MYSQL_DATABASE
}
};

18
src/hooks.server.js
View file

@ -1,19 +1,9 @@
// import { redirect } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { handle as authenticationHandle } from '$lib/server/auth.js';
async function authorizationHandle({ event, resolve }) {
// if (event.url.pathname.startsWith('/(app)')) {
// const session = await event.locals.auth();
// if (!session) {
// throw redirect(303, '/auth/signin');
// }
// }
return resolve(event);
}
export const handle = sequence(authenticationHandle, authorizationHandle);
// /** @type {import('@sveltejs/kit').Handle} */
// export const handle = ({ resolve }) => {
// return resolve();
// };
/** @type {import('@sveltejs/kit').HandleServerError} */
export async function handleError({ error, event, status, message }) {

51
src/lib/components/LoggedOut.svelte
View file

@ -1,30 +1,45 @@
<script>
import { LogIn } from 'lucide-svelte';
import { signIn } from '@auth/sveltekit/client';
import { blur } from 'svelte/transition';
import { LogIn, UserPlus } from 'lucide-svelte';
import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
import Button from '$lib/components/Button.svelte';
import Logo from '$lib/components/Logo.svelte';
import LoginForm from '$lib/components/LoginForm.svelte';
import RegisterForm from '$lib/components/RegisterForm.svelte';
let state = 0;
</script>
<div class="flex justify-center items-center h-screen">
<div class="flex flex-col space-y-1.5">
<div>
<div class="transition-colors fill-black dark:fill-white">
<Logo />
{#if state === 0}
<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-screen">
<div class="flex flex-col space-y-1.5">
<div>
<div class="transition-colors fill-black dark:fill-white">
<Logo />
</div>
<p>Currently hosting <strong>0</strong> files.</p>
<p>Elon musk <strong>found dead</strong> in a <strong>pool</strong></p>
</div>
<p class="text-center">Currently hosting <strong>0</strong> files.</p>
<p class="text-center">Elon musk <strong>found dead</strong> in a <strong>pool</strong></p>
</div>
<div class="flex place-content-around mx-auto space-x-2">
<ThemeSwitcher />
<div class="flex place-content-around mx-auto space-x-2">
<ThemeSwitcher />
<Button click={() => signIn('keycloak')}>
<LogIn />
<p>Keycloak Login</p>
</Button>
<Button click={() => (state = 1)}>
<LogIn />
<p>Login</p>
</Button>
<Button click={() => (state = 2)}>
<UserPlus />
<p>Register</p>
</Button>
</div>
</div>
</div>
</div>
{:else if state === 1}
<LoginForm callback={() => (state = 0)} />
{:else if state === 2}
<RegisterForm callback={() => (state = 0)} />
{/if}

38
src/lib/components/LoginForm.svelte Normal file
View file

@ -0,0 +1,38 @@
<script>
import { blur } from 'svelte/transition';
import { Mail, SquareAsterisk, LogIn, Undo } from 'lucide-svelte';
import Logo from '$lib/components/Logo.svelte';
import FormInput from '$lib/components/FormInput.svelte';
import Button from '$lib/components/Button.svelte';
export let callback;
</script>
<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-screen">
<div class="flex flex-col space-y-2">
<div class="transition-colors fill-black dark:fill-white">
<Logo />
</div>
<form action="">
<div class="flex flex-col space-y-2">
<FormInput type={'email'} name={'email'} id={'email'} placeholder={'user@example.com'}>
<Mail />
</FormInput>
<FormInput type={'password'} name={'password'} id={'password'} placeholder={'•'.repeat(16)}>
<SquareAsterisk />
</FormInput>
<div class="flex place-content-between">
<Button click={callback}>
<Undo />
<p>Go Back</p>
</Button>
<Button>
<LogIn />
<p>Login</p>
</Button>
</div>
</div>
</form>
</div>
</div>

49
src/lib/components/RegisterForm.svelte Normal file
View file

@ -0,0 +1,49 @@
<script>
import { blur } from 'svelte/transition';
import { Mail, SquareAsterisk, Undo, User, UserPlus } from 'lucide-svelte';
import Logo from '$lib/components/Logo.svelte';
import FormInput from '$lib/components/FormInput.svelte';
import Button from '$lib/components/Button.svelte';
export let callback;
</script>
<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-screen">
<div class="flex flex-col space-y-2">
<div class="transition-colors fill-black dark:fill-white">
<Logo />
</div>
<form action="">
<div class="flex flex-col space-y-2">
<FormInput type={'username'} name={'username'} id={'username'} placeholder={'Username'}>
<User />
</FormInput>
<FormInput type={'email'} name={'email'} id={'email'} placeholder={'user@example.com'}>
<Mail />
</FormInput>
<FormInput type={'password'} name={'password'} id={'password'} placeholder={'•'.repeat(16)}>
<SquareAsterisk />
</FormInput>
<FormInput
type={'password'}
name={'cpassword'}
id={'cpassword'}
placeholder={'•'.repeat(16)}
>
<SquareAsterisk />
</FormInput>
<div class="flex place-content-between">
<Button click={callback}>
<Undo />
<p>Go Back</p>
</Button>
<Button>
<UserPlus />
<p>Register</p>
</Button>
</div>
</div>
</form>
</div>
</div>

23
src/lib/server/auth.js
View file

@ -1,23 +0,0 @@
import { SvelteKitAuth } from '@auth/sveltekit';
import Keycloak from '@auth/core/providers/keycloak';
import { DrizzleAdapter } from '@auth/drizzle-adapter';
import { db } from '$lib/server/database';
import { env } from '$env/dynamic/private';
export const { handle, signIn, signOut } = SvelteKitAuth({
adapter: DrizzleAdapter(db),
providers: [
Keycloak({
clientId: env.KEYCLOAK_CLIENT_ID,
clientSecret: env.KEYCLOAK_CLIENT_SECRET,
issuer: env.KEYCLOAK_ISSUER,
profile(profile) {
return {
id: profile.sub,
name: profile.preferred_username,
email: profile.email
};
}
})
]
});

13
src/lib/server/database/index.js
View file

@ -1,13 +0,0 @@
import { drizzle } from 'drizzle-orm/mysql2';
import mysql from 'mysql2/promise';
import { env } from '$env/dynamic/private';
import * as schema from './schema';
const connection = await mysql.createConnection({
host: env.MYSQL_HOST,
user: env.MYSQL_USERNAME,
password: env.MYSQL_PASSWORD,
database: process.env.MYSQL_DATABASE
});
export const db = drizzle(connection, { schema, mode: 'default' });

53
src/lib/server/database/schema.js
View file

@ -1,53 +0,0 @@
import { int, timestamp, mysqlTable, primaryKey, varchar } from 'drizzle-orm/mysql-core';
export const users = mysqlTable('user', {
id: varchar('id', { length: 255 }).notNull().primaryKey(),
name: varchar('name', { length: 255 }),
email: varchar('email', { length: 255 }).notNull(),
emailVerified: timestamp('emailVerified', { mode: 'date', fsp: 3 }).defaultNow(),
image: varchar('image', { length: 255 })
});
export const accounts = mysqlTable(
'account',
{
userId: varchar('userId', { length: 255 })
.notNull()
.references(() => users.id, { onDelete: 'cascade' }),
type: varchar('type', { length: 255 }).notNull(),
provider: varchar('provider', { length: 255 }).notNull(),
providerAccountId: varchar('providerAccountId', { length: 255 }).notNull(),
refresh_token: varchar('refresh_token', { length: 2048 }),
access_token: varchar('access_token', { length: 2048 }),
expires_at: int('expires_at'),
token_type: varchar('token_type', { length: 255 }),
scope: varchar('scope', { length: 255 }),
id_token: varchar('id_token', { length: 2048 }),
session_state: varchar('session_state', { length: 255 })
},
(account) => ({
compoundKey: primaryKey({
columns: [account.provider, account.providerAccountId]
})
})
);
export const sessions = mysqlTable('session', {
sessionToken: varchar('sessionToken', { length: 255 }).notNull().primaryKey(),
userId: varchar('userId', { length: 255 })
.notNull()
.references(() => users.id, { onDelete: 'cascade' }),
expires: timestamp('expires', { mode: 'date' }).notNull()
});
export const verificationTokens = mysqlTable(
'verificationToken',
{
identifier: varchar('identifier', { length: 255 }).notNull(),
token: varchar('token', { length: 255 }).notNull(),
expires: timestamp('expires', { mode: 'date' }).notNull()
},
(vt) => ({
compoundKey: primaryKey({ columns: [vt.identifier, vt.token] })
})
);

11
src/routes/+layout.server.js
View file

@ -1,5 +1,6 @@
export const load = async ({ locals }) => {
return {
session: await locals.getSession()
};
};
// /** @type {import('@sveltejs/kit').Load} */
// export const load = async ({ locals }) => {
// return {
// session: await locals.getSession()
// };
// };

2
src/routes/+layout.svelte
View file

@ -5,9 +5,9 @@
import { page } from '$app/stores';
import { darkMode } from '$lib/stores.js';
import LoggedOut from '$lib/components/LoggedOut.svelte';
import ThemeHandler from '$lib/components/ThemeHandler.svelte';
import PageMeta from '$lib/components/PageMeta.svelte';
import LoggedOut from '$lib/components/LoggedOut.svelte';
</script>
<PageMeta title="cirro's file uploader" />

7
src/routes/+page.svelte
View file

@ -1,8 +1,5 @@
<script>
import { page } from '$app/stores';
import { signOut } from '@auth/sveltekit/client';
import Button from '$lib/components/Button.svelte';
</script>
<p>
@ -10,7 +7,3 @@
{JSON.stringify($page.data?.session, null, 4)}
</tt>
</p>
<Button click={signOut}>
<p>Logout</p>
</Button>