add transitions, abandon drizzle
This commit is contained in:
parent
a23fb292cd
commit
a54a0eba0b
12 changed files with 131 additions and 147 deletions
|
@ -26,8 +26,6 @@ FROM base AS app
|
||||||
COPY --from=install /usr/src/app/prod/node_modules node_modules
|
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/package.json .
|
||||||
COPY --from=build /usr/src/app/build/ .
|
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
|
EXPOSE 3000/tcp
|
||||||
CMD [ "node", "index.js" ]
|
CMD [ "node", "index.js" ]
|
|
@ -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
|
|
||||||
}
|
|
||||||
};
|
|
|
@ -1,19 +1,9 @@
|
||||||
// import { redirect } from '@sveltejs/kit';
|
// 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 }) {
|
// /** @type {import('@sveltejs/kit').Handle} */
|
||||||
// if (event.url.pathname.startsWith('/(app)')) {
|
// export const handle = ({ resolve }) => {
|
||||||
// const session = await event.locals.auth();
|
// return resolve();
|
||||||
// if (!session) {
|
// };
|
||||||
// throw redirect(303, '/auth/signin');
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
return resolve(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
export const handle = sequence(authenticationHandle, authorizationHandle);
|
|
||||||
|
|
||||||
/** @type {import('@sveltejs/kit').HandleServerError} */
|
/** @type {import('@sveltejs/kit').HandleServerError} */
|
||||||
export async function handleError({ error, event, status, message }) {
|
export async function handleError({ error, event, status, message }) {
|
||||||
|
|
|
@ -1,30 +1,45 @@
|
||||||
<script>
|
<script>
|
||||||
import { LogIn } from 'lucide-svelte';
|
import { blur } from 'svelte/transition';
|
||||||
|
import { LogIn, UserPlus } from 'lucide-svelte';
|
||||||
import { signIn } from '@auth/sveltekit/client';
|
|
||||||
|
|
||||||
import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
|
import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
|
||||||
import Button from '$lib/components/Button.svelte';
|
import Button from '$lib/components/Button.svelte';
|
||||||
import Logo from '$lib/components/Logo.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>
|
</script>
|
||||||
|
|
||||||
<div class="flex justify-center items-center h-screen">
|
{#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 class="flex flex-col space-y-1.5">
|
||||||
<div>
|
<div>
|
||||||
<div class="transition-colors fill-black dark:fill-white">
|
<div class="transition-colors fill-black dark:fill-white">
|
||||||
<Logo />
|
<Logo />
|
||||||
</div>
|
</div>
|
||||||
<p class="text-center">Currently hosting <strong>0</strong> files.</p>
|
<p>Currently hosting <strong>0</strong> files.</p>
|
||||||
<p class="text-center">Elon musk <strong>found dead</strong> in a <strong>pool</strong></p>
|
<p>Elon musk <strong>found dead</strong> in a <strong>pool</strong></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex place-content-around mx-auto space-x-2">
|
<div class="flex place-content-around mx-auto space-x-2">
|
||||||
<ThemeSwitcher />
|
<ThemeSwitcher />
|
||||||
|
|
||||||
<Button click={() => signIn('keycloak')}>
|
<Button click={() => (state = 1)}>
|
||||||
<LogIn />
|
<LogIn />
|
||||||
<p>Keycloak Login</p>
|
<p>Login</p>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button click={() => (state = 2)}>
|
||||||
|
<UserPlus />
|
||||||
|
<p>Register</p>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</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
38
src/lib/components/LoginForm.svelte
Normal 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
49
src/lib/components/RegisterForm.svelte
Normal 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>
|
|
@ -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
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})
|
|
||||||
]
|
|
||||||
});
|
|
|
@ -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' });
|
|
|
@ -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] })
|
|
||||||
})
|
|
||||||
);
|
|
|
@ -1,5 +1,6 @@
|
||||||
export const load = async ({ locals }) => {
|
// /** @type {import('@sveltejs/kit').Load} */
|
||||||
return {
|
// export const load = async ({ locals }) => {
|
||||||
session: await locals.getSession()
|
// return {
|
||||||
};
|
// session: await locals.getSession()
|
||||||
};
|
// };
|
||||||
|
// };
|
||||||
|
|
|
@ -5,9 +5,9 @@
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
import { darkMode } from '$lib/stores.js';
|
import { darkMode } from '$lib/stores.js';
|
||||||
import LoggedOut from '$lib/components/LoggedOut.svelte';
|
|
||||||
import ThemeHandler from '$lib/components/ThemeHandler.svelte';
|
import ThemeHandler from '$lib/components/ThemeHandler.svelte';
|
||||||
import PageMeta from '$lib/components/PageMeta.svelte';
|
import PageMeta from '$lib/components/PageMeta.svelte';
|
||||||
|
import LoggedOut from '$lib/components/LoggedOut.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<PageMeta title="cirro's file uploader" />
|
<PageMeta title="cirro's file uploader" />
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { signOut } from '@auth/sveltekit/client';
|
|
||||||
|
|
||||||
import Button from '$lib/components/Button.svelte';
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
@ -10,7 +7,3 @@
|
||||||
{JSON.stringify($page.data?.session, null, 4)}
|
{JSON.stringify($page.data?.session, null, 4)}
|
||||||
</tt>
|
</tt>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<Button click={signOut}>
|
|
||||||
<p>Logout</p>
|
|
||||||
</Button>
|
|
||||||
|
|
Loading…
Reference in a new issue