sign out page styles

* implement most basic auth with authjs w google as provider and protect /crear-receta * implement basic authjs with google as provider * Add sign out screen
luz-ojeda · Jul 19, 2024 · 67bc0c9 · 67bc0c9
1 parent 4e3e169
commit 67bc0c9
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 46 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -22,12 +22,59 @@ footer {
 	padding-bottom: var(--page-padding-vertical);
 }
 
-button {
+button,
+form.signOutButton button {
 	border: 0;
+	font-weight: bold;
 
 	&:not(:disabled) {
 		cursor: pointer;
 	}
+
+	&:disabled {
+		color: var(--btn-disabled-color);
+	}
+}
+
+button.primary,
+form.signOutButton button {
+	background-color: var(--btn-primary-bg);
+	box-shadow:
+		inset 0 3px 0 var(--primary100),
+		$shadow;
+
+	&:not(:disabled) {
+		color: var(--grey200);
+	}
+
+	&:disabled {
+		box-shadow:
+			inset 0 3px 0 var(--grey300),
+			$smallShadow;
+		background-color: var(--btn-primary-disabled-bg);
+	}
+
+	&:hover:enabled {
+		background-color: var(--btn-primary-hover);
+		transition: background-color 0.3s;
+	}
+
+	&:active:enabled {
+		box-shadow: $smallestShadow;
+	}
+}
+
+form.signOutButton button {
+	background-color: var(--btn-primary-bg);
+	box-shadow:
+		inset 0 3px 0 var(--primary100),
+		$shadow;
+	color: var(--grey200);
+
+	&:hover:enabled {
+		background-color: var(--btn-primary-hover);
+		transition: background-color 0.3s;
+	}
 }
 
 a {
@@ -123,7 +170,8 @@ button {
 }
 
 .small,
-form > button { // form for the google sign in button
+form > button {
+	// form for the google sign in button
 	font-size: 1em;
 	height: 32px;
 	padding: 4px 12px;

diff --git a/src/auth.ts b/src/auth.ts
@@ -1,8 +1,7 @@
+import { SvelteKitAuth } from '@auth/sveltekit';
+import Google from '@auth/sveltekit/providers/google';
 
-import { SvelteKitAuth } from "@auth/sveltekit"
-import Google from "@auth/sveltekit/providers/google"
-
-export const { handle, signIn } = SvelteKitAuth({
-  providers: [Google],
-  trustHost: true
-}) 
+export const { handle, signIn, signOut } = SvelteKitAuth({
+	providers: [Google],
+	trustHost: true
+});
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -32,48 +32,23 @@
 <style lang="scss">
 	@import '../../sass/variables.scss';
 
-	button {
-		font-weight: bold;
-
-		&:disabled {
-			box-shadow:
-				inset 0 3px 0 var(--grey300),
-				$smallShadow;
-			background-color: var(--btn-primary-disabled-bg);
-		}
-
-		&:active:enabled {
-			box-shadow: $smallestShadow;
-		}
-	}
-
 	.large {
 		font-size: var(--text-md);
 		height: 48px;
 		padding: 8px 24px;
 		width: 100%;
 	}
 
-	.primary {
-		background-color: var(--btn-primary-bg);
-		box-shadow:
-			inset 0 3px 0 var(--primary100),
-			$shadow;
-		color: var(--grey200);
-
-		&:hover:enabled {
-			background-color: var(--btn-primary-hover);
-			transition: background-color 0.3s;
-		}
-	}
-
 	.tertiary {
 		background-color: transparent;
-		color: var(--btn-tertiary);
 		padding: 0;
 		width: fit-content;
 
-		&:hover {
+		&:not(:disabled) {
+			color: var(--btn-tertiary);
+		}
+
+		&:hover:enabled {
 			color: var(--btn-tertiary-hover);
 			text-decoration: underline;
 		}

diff --git a/src/lib/components/GoogleSignInButton.svelte b/src/lib/components/GoogleSignInButton.svelte
@@ -2,7 +2,14 @@
 	import { SignIn } from '@auth/sveltekit/components';
 </script>
 
-<SignIn className="small" provider="google" signInPage="iniciar-sesion">
+<SignIn
+	className="small"
+	options={{
+		redirectTo: '/recetas'
+	}}
+	provider="google"
+	signInPage="iniciar-sesion"
+>
 	<div class="flex-center" slot="submitButton">
 		<svg width="32" height="32" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<g clip-path="url(#clip0_710_6221)">
@@ -31,4 +38,4 @@
 		</svg>
 		Iniciar sesión con Google
 	</div></SignIn
->
+>
diff --git a/src/lib/components/NavLinks.svelte b/src/lib/components/NavLinks.svelte
@@ -1,6 +1,5 @@
 <script>
 	import { page } from '$app/stores';
-	import GoogleSignInButton from './GoogleSignInButton.svelte';
 </script>
 
 <div class="flex-center nav-links text--md">
@@ -22,7 +21,7 @@
 	{#if $page.data.session}
 		<a
 			class="non-text-anchor-element nav-link"
-			href="/auth/signout"
+			href="/cerrar-sesion"
 			data-sveltekit-preload-data="off"
 			>Cerrar sesión
 		</a>

diff --git a/src/routes/cerrar-sesion/+page.server.ts b/src/routes/cerrar-sesion/+page.server.ts
@@ -0,0 +1,3 @@
+import { signOut } from '../../auth';
+import type { Actions } from './$types';
+export const actions: Actions = { default: signOut } satisfies Actions;
diff --git a/src/routes/cerrar-sesion/+page.svelte b/src/routes/cerrar-sesion/+page.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { SignOut } from '@auth/sveltekit/components';
+	import Protected from '$lib/components/Protected.svelte';
+</script>
+
+<Protected>
+	<div class="narrow-page">
+		<h2>Estás seguro/a que quieres cerrar sesión?</h2>
+		<SignOut
+			options={{
+				redirectTo: '/'
+			}}
+			signOutPage="cerrar-sesion"
+			className="w-full"
+		>
+			<div slot="submitButton">
+				<span> Cerrar sesión </span>
+			</div>
+		</SignOut>
+	</div>
+</Protected>
diff --git a/src/routes/iniciar-sesion/+page.server.ts b/src/routes/iniciar-sesion/+page.server.ts
@@ -1,3 +1,3 @@
-import { signIn } from "../../auth"
-import type { Actions } from "./$types"
-export const actions: Actions = { default: signIn }
+import { signIn } from '../../auth';
+import type { Actions } from './$types';
+export const actions: Actions = { default: signIn };
diff --git a/src/sass/colors.scss b/src/sass/colors.scss
@@ -51,6 +51,7 @@
 	--btn-primary-disabled-bg: var(--grey500);
 	--btn-tertiary: var(--primary500);
 	--btn-tertiary-hover: var(--primary400);
+	--btn-disabled-color: var(--grey800);
 
 	/* inputs */
 	--accent-color: var(--primary500);