From 54a4695034b11dccf1b92b86b4d9eb7cc07b85b8 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Sat, 3 Feb 2024 22:36:31 +0100
Subject: [PATCH] feat: add oauth2 icons

---
 .../lib/components/site/icons/apple.svelte    | 13 ++++++++++
 .../components/site/icons/bitbucket.svelte    | 13 ++++++++++
 .../lib/components/site/icons/discord.svelte  | 13 ++++++++++
 .../lib/components/site/icons/facebook.svelte | 13 ++++++++++
 .../lib/components/site/icons/gitlab.svelte   | 13 ++++++++++
 .../lib/components/site/icons/google.svelte   | 13 ++++++++++
 .../src/lib/components/site/icons/index.ts    | 22 +++++++++++++---
 .../components/site/icons/instagram.svelte    | 13 ++++++++++
 .../lib/components/site/icons/twitter.svelte  | 13 ++++++++++
 apps/web/src/routes/(auth)/login/+page.svelte | 26 +++++++++++++++----
 apps/web/src/routes/+layout.server.ts         |  3 ++-
 apps/web/src/routes/+page.svelte              | 12 +++++----
 12 files changed, 153 insertions(+), 14 deletions(-)
 create mode 100644 apps/web/src/lib/components/site/icons/apple.svelte
 create mode 100644 apps/web/src/lib/components/site/icons/bitbucket.svelte
 create mode 100644 apps/web/src/lib/components/site/icons/discord.svelte
 create mode 100644 apps/web/src/lib/components/site/icons/facebook.svelte
 create mode 100644 apps/web/src/lib/components/site/icons/gitlab.svelte
 create mode 100644 apps/web/src/lib/components/site/icons/google.svelte
 create mode 100644 apps/web/src/lib/components/site/icons/instagram.svelte
 create mode 100644 apps/web/src/lib/components/site/icons/twitter.svelte

diff --git a/apps/web/src/lib/components/site/icons/apple.svelte b/apps/web/src/lib/components/site/icons/apple.svelte
new file mode 100644
index 0000000..159af9e
--- /dev/null
+++ b/apps/web/src/lib/components/site/icons/apple.svelte
@@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 384 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
+	></path></svg
+>
diff --git a/apps/web/src/lib/components/site/icons/bitbucket.svelte b/apps/web/src/lib/components/site/icons/bitbucket.svelte
new file mode 100644
index 0000000..47c4a61
--- /dev/null
+++ b/apps/web/src/lib/components/site/icons/bitbucket.svelte
@@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 512 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M22.2 32A16 16 0 0 0 6 47.8a26.35 26.35 0 0 0 .2 2.8l67.9 412.1a21.77 21.77 0 0 0 21.3 18.2h325.7a16 16 0 0 0 16-13.4L505 50.7a16 16 0 0 0-13.2-18.3 24.58 24.58 0 0 0-2.8-.2L22.2 32zm285.9 297.8h-104l-28.1-147h157.3l-25.2 147z"
+	></path></svg
+>
diff --git a/apps/web/src/lib/components/site/icons/discord.svelte b/apps/web/src/lib/components/site/icons/discord.svelte
new file mode 100644
index 0000000..b2e6ba4
--- /dev/null
+++ b/apps/web/src/lib/components/site/icons/discord.svelte
@@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 640 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
+	></path></svg
+>
diff --git a/apps/web/src/lib/components/site/icons/facebook.svelte b/apps/web/src/lib/components/site/icons/facebook.svelte
new file mode 100644
index 0000000..26feaea
--- /dev/null
+++ b/apps/web/src/lib/components/site/icons/facebook.svelte
@@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 448 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"
+	></path></svg
+>
diff --git a/apps/web/src/lib/components/site/icons/gitlab.svelte b/apps/web/src/lib/components/site/icons/gitlab.svelte
new file mode 100644
index 0000000..690894c
--- /dev/null
+++ b/apps/web/src/lib/components/site/icons/gitlab.svelte
@@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 512 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"
+	></path></svg
+>
diff --git a/apps/web/src/lib/components/site/icons/google.svelte b/apps/web/src/lib/components/site/icons/google.svelte
new file mode 100644
index 0000000..a09496c
--- /dev/null
+++ b/apps/web/src/lib/components/site/icons/google.svelte
@@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 488 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+	></path></svg
+>
diff --git a/apps/web/src/lib/components/site/icons/index.ts b/apps/web/src/lib/components/site/icons/index.ts
index 23c24ab..ecd7398 100644
--- a/apps/web/src/lib/components/site/icons/index.ts
+++ b/apps/web/src/lib/components/site/icons/index.ts
@@ -3,17 +3,33 @@ import { ArrowRight, Loader2 } from 'lucide-svelte';
 import { GithubLogo, VercelLogo, LinkedinLogo } from 'radix-icons-svelte';
 import Logo from './logo.svelte';
 import Svelte from './svelte.svelte';
-import Microsoft from './microsoft.svelte';
+import MicrosoftLogo from './microsoft.svelte';
+import AppleLogo from './apple.svelte';
+import GitLabLogo from './gitlab.svelte';
+import BitBucketLogo from './bitbucket.svelte';
+import DiscordLogo from './discord.svelte';
+import FacebookLogo from './facebook.svelte';
+import GoogleLogo from './google.svelte';
+import InstagramLogo from './instagram.svelte';
+import TwitterLogo from './twitter.svelte';
 
 export type Icon = LucideIcon;
 
 export const Icons = {
 	logo: Logo,
 	gitHub: GithubLogo,
-	microsoft: Microsoft,
+	microsoft: MicrosoftLogo,
 	svelte: Svelte,
 	vercel: VercelLogo,
 	linkedIn: LinkedinLogo,
 	spinner: Loader2,
-	arrowRight: ArrowRight
+	arrowRight: ArrowRight,
+	apple: AppleLogo,
+	bitBucket: BitBucketLogo,
+	gitLab: GitLabLogo,
+	discord: DiscordLogo,
+	facebook: FacebookLogo,
+	google: GoogleLogo,
+	instagram: InstagramLogo,
+	twitter: TwitterLogo,
 };
diff --git a/apps/web/src/lib/components/site/icons/instagram.svelte b/apps/web/src/lib/components/site/icons/instagram.svelte
new file mode 100644
index 0000000..4e4c286
--- /dev/null
+++ b/apps/web/src/lib/components/site/icons/instagram.svelte
@@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 448 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+	></path></svg
+>
diff --git a/apps/web/src/lib/components/site/icons/twitter.svelte b/apps/web/src/lib/components/site/icons/twitter.svelte
new file mode 100644
index 0000000..3655795
--- /dev/null
+++ b/apps/web/src/lib/components/site/icons/twitter.svelte
@@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 512 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+	></path></svg
+>
diff --git a/apps/web/src/routes/(auth)/login/+page.svelte b/apps/web/src/routes/(auth)/login/+page.svelte
index 11a77e7..ac47e62 100644
--- a/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/web/src/routes/(auth)/login/+page.svelte
@@ -5,6 +5,7 @@
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import * as Alert from '$lib/components/ui/alert';
+	import * as Select from '$lib/components/ui/select';
 	import { cn } from '$lib/utils';
 
 	export let form;
@@ -31,7 +32,7 @@
 	<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
 		<div class="flex flex-col space-y-2 text-center">
 			<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1>
-			<p class="text-sm text-muted-foreground">
+			<p class="text-muted-foreground text-sm">
 				Enter your email and password below to log into your account
 			</p>
 		</div>
@@ -85,11 +86,26 @@
 					<span class="w-full border-t" />
 				</div>
 				<div class="relative flex justify-center text-xs uppercase">
-					<span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
+					<span class="bg-background text-muted-foreground px-2"> Or continue with </span>
 				</div>
 			</div>
-			<form action="/?msauth" method="POST">
-				<Button type="submit" variant="outline" disabled={true} class="w-full">
+			<form action="/?oauth2" method="POST" class="flex">
+				<Select.Root disabled={isLoading}>
+					<Select.Trigger class="w-12">
+					</Select.Trigger>
+					<Select.Content class="w-full">
+						<Select.Item value="microsoft"><Icons.microsoft class="mr-2 h-4 w-4" />Microsoft</Select.Item>
+						<Select.Item value="apple"><Icons.apple class="mr-2 h-4 w-4" />Apple</Select.Item>
+						<Select.Item value="google"><Icons.google class="mr-2 h-4 w-4" />Google</Select.Item>
+						<Select.Item value="bitBucket"><Icons.bitBucket class="mr-2 h-4 w-4" />BitBucket</Select.Item>
+						<Select.Item value="discord"><Icons.discord class="mr-2 h-4 w-4" />Discord</Select.Item>
+						<Select.Item value="facebook"><Icons.facebook class="mr-2 h-4 w-4" />Facebook</Select.Item>
+						<Select.Item value="gitLab"><Icons.gitLab class="mr-2 h-4 w-4" />GitLab</Select.Item>
+						<Select.Item value="facebook"><Icons.twitter class="mr-2 h-4 w-4" />Twitter</Select.Item>
+						<Select.Item value="instagram"><Icons.instagram class="mr-2 h-4 w-4" />Instagram</Select.Item>
+					</Select.Content>
+				</Select.Root>
+				<Button type="submit" variant="outline" disabled={isLoading} class="w-full">
 					{#if isLoading}
 						<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
 					{:else}
@@ -100,7 +116,7 @@
 				</Button>
 			</form>
 		</div>
-		<p class="px-8 text-center text-sm text-muted-foreground">
+		<p class="text-muted-foreground px-8 text-center text-sm">
 			Don't have an account? <a class="text-primary underline" href="/register">Sign up.</a> <br />
 			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
 		</p>
diff --git a/apps/web/src/routes/+layout.server.ts b/apps/web/src/routes/+layout.server.ts
index 0df51af..b71d50b 100644
--- a/apps/web/src/routes/+layout.server.ts
+++ b/apps/web/src/routes/+layout.server.ts
@@ -16,6 +16,7 @@ export const load: LayoutServerLoad = async ({ locals }: { locals: App.Locals })
 
 	return {
 		authenticated: locals.pocketBase.authStore.isValid,
-		user
+		user,
+		providers: (await locals.pocketBase.collection('users').listAuthMethods()).authProviders,
 	};
 };
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 9a8fe87..0fa944f 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -11,13 +11,15 @@
 <div class="pb-16 pt-52 md:pb-32 md:pt-60">
 	<div class="container mx-auto text-center">
 		<h1
-			class="bg-gradient-to-r from-zinc-800 via-zinc-800/60 to-zinc-800 bg-clip-text pb-4 text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-transparent dark:from-zinc-200/60 dark:via-zinc-200 dark:to-zinc-200/60 lg:text-7xl"
+			class="bg-gradient-to-r from-zinc-800 via-zinc-800/60 to-zinc-800 bg-clip-text pb-4 text-4xl font-extrabold tracking-tight text-transparent sm:text-5xl md:text-6xl lg:text-7xl dark:from-zinc-200/60 dark:via-zinc-200 dark:to-zinc-200/60"
 		>
-			<span class="inline-block text-balance align-top decoration-inherit"
-				>One Dashboard <br /> Countless Solutions</span
-			>
+			<span class="inline-block text-balance align-top decoration-inherit">
+				One Dashboard
+				<br />
+				Countless Solutions
+			</span>
 		</h1>
-		<p class="mb-8 text-sm md:text-xl text-zinc-800 dark:text-zinc-300">
+		<p class="mb-8 text-sm text-zinc-800 md:text-xl dark:text-zinc-300">
 			Tame ticket overload and keep your operations teams sane
 		</p>
 		<div