Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/routes/login/+page.server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ locals }) => {
const session = await locals.auth();

if (session?.user) {
redirect(308, '/dashboard');
}

return {
session: null
};
};
49 changes: 31 additions & 18 deletions src/routes/login/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,55 @@
import { signIn } from '@auth/sveltekit/client';
import { SignIn } from '@auth/sveltekit/components';
import { page } from '$app/state';
import { goto } from '$app/navigation';
import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';

console.log(page.data.session);

if (page.data.session) {
goto('/dashboard');
}
</script>

<div
class="flex min-h-screen items-center justify-center bg-gradient-to-b from-surface-100 to-tertiary-100 dark:from-surface-700 dark:to-surface-900 px-4 py-6 sm:px-6 sm:py-8"
class="flex min-h-screen items-center justify-center bg-gradient-to-b from-surface-100 to-tertiary-100 px-4 py-6 sm:px-6 sm:py-8 dark:from-surface-700 dark:to-surface-900"
>
<div class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg p-4 sm:p-6 md:p-8 lg:p-10 shadow-lg">
<div
class="card w-full max-w-xs p-4 shadow-lg sm:max-w-sm sm:p-6 md:max-w-md md:p-8 lg:max-w-lg lg:p-10"
>
<!-- Welcome and Animation -->
<header class="card-header mb-4 sm:mb-6 text-center">
<h1 class="text-xl sm:text-2xl font-bold">Welcome to Hungry Stack</h1>
<div class="w-full max-w-64 mx-auto">
<header class="card-header mb-4 text-center sm:mb-6">
<h1 class="text-xl font-bold sm:text-2xl">Welcome to Hungry Stack</h1>
<div class="mx-auto w-full max-w-64">
<DotLottieSvelte src="/animations/pancakes.lottie" loop={true} autoplay={true} />
</div>
<p class="text-sm sm:text-base">Sign in or sign up to continue learning!</p>
</header>

<section class="space-y-3 sm:space-y-4 text-center">
<section class="space-y-3 text-center sm:space-y-4">
<!-- Google Authentication - Using the SignIn component -->
<SignIn provider="google" callbackUrl="/dashboard">
<div slot="submitButton" class="btn flex justify-center items-center w-full bg-red-500 py-2 sm:py-3 text-white text-sm sm:text-base">
<span><img src="/images/google.svg" alt="Google" class="mr-2 sm:mr-3 h-5 w-5 sm:h-6 sm:w-6" /></span>
<div
slot="submitButton"
class="btn flex w-full items-center justify-center bg-red-500 py-2 text-sm text-white sm:py-3 sm:text-base"
>
<span
><img
src="/images/google.svg"
alt="Google"
class="mr-2 h-5 w-5 sm:mr-3 sm:h-6 sm:w-6"
/></span
>
<span>Continue with Google</span>
</div>
</SignIn>

<!-- GitHub Authentication - Using the SignIn component -->
<SignIn provider="github" callbackUrl="/dashboard">
<div slot="submitButton" class="btn flex justify-center items-center w-full bg-gray-800 py-2 sm:py-3 text-white text-sm sm:text-base">
<span><img src="/images/github.svg" alt="GitHub" class="mr-2 sm:mr-3 h-5 w-5 sm:h-6 sm:w-6" /></span>
<div
slot="submitButton"
class="btn flex w-full items-center justify-center bg-gray-800 py-2 text-sm text-white sm:py-3 sm:text-base"
>
<span
><img
src="/images/github.svg"
alt="GitHub"
class="mr-2 h-5 w-5 sm:mr-3 sm:h-6 sm:w-6"
/></span
>
<span>Continue with GitHub</span>
</div>
</SignIn>
Expand All @@ -50,4 +63,4 @@
width: 100% !important;
height: auto !important;
}
</style>
</style>