mirror of
https://github.com/wireadmin/wireadmin
synced 2025-02-26 05:48:44 +00:00
update
This commit is contained in:
parent
b56961377b
commit
93f9b506fa
@ -2,6 +2,7 @@
|
||||
"useTabs": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"jsxSingleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 120,
|
||||
"jsxBracketSameLine": true,
|
||||
|
@ -3,26 +3,22 @@ import { verifyToken } from '$lib/auth';
|
||||
import { HASHED_PASSWORD } from '$env/static/private';
|
||||
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
|
||||
if (!!HASHED_PASSWORD && !AUTH_EXCEPTION.includes(event.url.pathname)) {
|
||||
const token = event.cookies.get('authorization');
|
||||
const token_valid = await verifyToken(token ?? '');
|
||||
|
||||
const redirect = new Response(null, { status: 302, headers: { location: '/login' } });
|
||||
const is_login_page = event.url.pathname === '/login';
|
||||
|
||||
if (!token) {
|
||||
console.log('handle', event.url.pathname, 'no token');
|
||||
return redirect;
|
||||
}
|
||||
|
||||
const token_valid = await verifyToken(token);
|
||||
if (!token_valid) {
|
||||
if (!token_valid && !is_login_page) {
|
||||
console.log('handle', event.url.pathname, 'invalid token');
|
||||
return redirect;
|
||||
}
|
||||
}
|
||||
|
||||
if (event.url.pathname === '/login') {
|
||||
console.log('handle', 'already logged in');
|
||||
return new Response(null, { status: 302, headers: { location: '/' } });
|
||||
if (token_valid && is_login_page) {
|
||||
console.log('handle', 'already logged in');
|
||||
return new Response(null, { status: 302, headers: { location: '/' } });
|
||||
}
|
||||
}
|
||||
|
||||
const resp = await resolve(event);
|
||||
@ -32,5 +28,4 @@ export const handle: Handle = async ({ event, resolve }) => {
|
||||
return resp;
|
||||
};
|
||||
|
||||
|
||||
const AUTH_EXCEPTION = ['/api/health', '/login'];
|
||||
const AUTH_EXCEPTION = ['/api/health'];
|
||||
|
@ -16,7 +16,6 @@ export async function generateToken(): Promise<string> {
|
||||
export async function verifyToken(token: string): Promise<boolean> {
|
||||
try {
|
||||
const decode = jwt.verify(token, AUTH_SECRET);
|
||||
console.log('decode', decode);
|
||||
return !!decode;
|
||||
} catch (e) {
|
||||
return false;
|
||||
|
20
web/src/lib/components/page/BasePage.svelte
Normal file
20
web/src/lib/components/page/BasePage.svelte
Normal file
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { cn } from '$lib/utils';
|
||||
import PageFooter from '$lib/components/page/PageFooter.svelte';
|
||||
import PageHeader from '$lib/components/page/PageHeader.svelte';
|
||||
|
||||
export let rootClass: string | undefined = undefined;
|
||||
let className: string | undefined = undefined;
|
||||
export let showLogout: boolean = false;
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div class="w-full min-h-screen flex justify-center px-2 md:px-6 py-2">
|
||||
<div class={cn("w-full mx-auto max-w-3xl space-y-3.5", rootClass)}>
|
||||
<PageHeader {showLogout} />
|
||||
<main class={cn("py-2", className)}>
|
||||
<slot />
|
||||
</main>
|
||||
<PageFooter />
|
||||
</div>
|
||||
</div>
|
37
web/src/lib/components/page/PageHeader.svelte
Normal file
37
web/src/lib/components/page/PageHeader.svelte
Normal file
@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import Logo from '$lib/assets/logo.png';
|
||||
|
||||
export let showLogout: boolean = false;
|
||||
</script>
|
||||
|
||||
<header class={'w-full py-3 px-2'}>
|
||||
<nav class={'w-full flex items-center justify-between'}>
|
||||
<div class={'flex items-center gap-x-2 text-3xl font-medium'}>
|
||||
<img src={Logo} alt="WireAdmin" width="40" height="40" />
|
||||
<h1>WireAdmin</h1>
|
||||
</div>
|
||||
|
||||
<div class={'flex items-center gap-x-2'}>
|
||||
<a href={'https://github.com/shahradelahi/wireadmin'} title={'Giv me a star on Github'}>
|
||||
<img
|
||||
src={'https://img.shields.io/github/stars/shahradelahi/wireadmin.svg?style=social&label=Star'}
|
||||
alt={'Giv me a star on Github'}
|
||||
/>
|
||||
</a>
|
||||
|
||||
{#if showLogout}
|
||||
<a href={'/logout'} class={''} title="logout">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-red-500 hover:text-red-700"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
12
web/src/routes/+page.server.ts
Normal file
12
web/src/routes/+page.server.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import type { Actions } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = () => {
|
||||
return {};
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async ({ request, cookies }) => {
|
||||
return { message: 'Success!' };
|
||||
},
|
||||
};
|
@ -1,8 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import BasePage from '$lib/components/page/BasePage.svelte';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
</script>
|
||||
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
<BasePage showLogout={true}>
|
||||
<div class={'flex items-center justify-between py-3 px-2'}>
|
||||
<h2 class={'font-bold text-xl'}>Hello there 👋</h2>
|
||||
</div>
|
||||
|
||||
<Button variant="outline">Button</Button>
|
||||
<Card.Root>
|
||||
<Card.Content>
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
|
||||
<Button variant="outline">Button</Button>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</BasePage>
|
||||
|
17
web/src/routes/login/+layout.svelte
Normal file
17
web/src/routes/login/+layout.svelte
Normal file
@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
import PageFooter from '$lib/components/page/PageFooter.svelte';
|
||||
import Logo from '$lib/assets/logo.png';
|
||||
</script>
|
||||
|
||||
<div class={'w-full min-h-screen flex justify-center px-2 md:px-6 py-2'}>
|
||||
<div class={'w-full mx-auto max-w-3xl flex flex-col items-center gap-y-3.5'}>
|
||||
<header class={'flex items-center gap-x-2 text-3xl font-medium py-4'}>
|
||||
<img src={Logo} alt="WireAdmin" width="40" height="40" />
|
||||
<h1>WireAdmin</h1>
|
||||
</header>
|
||||
<main class={'py-4'}>
|
||||
<slot />
|
||||
</main>
|
||||
<PageFooter />
|
||||
</div>
|
||||
</div>
|
@ -1,40 +1,30 @@
|
||||
<script lang="ts">
|
||||
import PageFooter from '$lib/components/page/PageFooter.svelte';
|
||||
import Logo from '$lib/assets/logo.png';
|
||||
import * as Form from '$lib/components/ui/form';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { formSchema, type FormSchema } from './schema';
|
||||
import type { SuperValidated } from 'sveltekit-superforms';
|
||||
|
||||
export let form: SuperValidated<FormSchema>;
|
||||
</script>
|
||||
|
||||
<div class={'w-full min-h-screen flex justify-center px-2 md:px-6 py-2'}>
|
||||
<div class={'w-full mx-auto max-w-3xl flex flex-col items-center gap-y-3.5'}>
|
||||
<header class={'flex items-center gap-x-2 text-3xl font-medium py-4'}>
|
||||
<img src={Logo} alt="WireAdmin" width="40" height="40" />
|
||||
<h1>WireAdmin</h1>
|
||||
</header>
|
||||
<main class={'py-4'}>
|
||||
<div class="w-full bg-white rounded-lg shadow-sm">
|
||||
<Form.Root method="POST" {form} schema={formSchema} let:config class="p-4 space-y-8">
|
||||
<div class="w-full flex items-center justify-center">
|
||||
<div class="w-16 aspect-square flex items-center justify-center rounded-full bg-gray-200">
|
||||
<i class="fas fa-user text-primary text-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Form.Field {config} name="password">
|
||||
<Form.Item>
|
||||
<Form.Label>Password</Form.Label>
|
||||
<Form.Input type="password" autocomplete="off" />
|
||||
<Form.Validation />
|
||||
</Form.Item>
|
||||
</Form.Field>
|
||||
|
||||
<Form.Button class="w-full">Sign In</Form.Button>
|
||||
</Form.Root>
|
||||
<Card.Root>
|
||||
<Card.Content>
|
||||
<Form.Root method="POST" {form} schema={formSchema} let:config class="pt-4 space-y-8">
|
||||
<div class="w-full flex items-center justify-center">
|
||||
<div class="w-16 aspect-square flex items-center justify-center rounded-full bg-gray-200">
|
||||
<i class="fas fa-user text-primary text-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<PageFooter />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Form.Field {config} name="password">
|
||||
<Form.Item>
|
||||
<Form.Label>Password</Form.Label>
|
||||
<Form.Input type="password" autocomplete="off" />
|
||||
<Form.Validation />
|
||||
</Form.Item>
|
||||
</Form.Field>
|
||||
|
||||
<Form.Button class="w-full">Sign In</Form.Button>
|
||||
</Form.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
7
web/src/routes/logout/+page.server.ts
Normal file
7
web/src/routes/logout/+page.server.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load: PageServerLoad = ({ cookies }) => {
|
||||
cookies.delete('authorization');
|
||||
throw redirect(302, '/login');
|
||||
};
|
Loading…
Reference in New Issue
Block a user