Web login

platforms/interface/web/src/components/connect.svelte

@@ -1,10 +1,16 @@
 <div class="m-20 mx-auto flex w-full max-w-2xl flex-row px-3">
-	<div class="flex w-full flex-col gap-3">
+	<div class="flex w-full flex-col gap-3 rounded-xl p-3">
 		{#each $settings.connectionCodes as item}
 			<ConnectItem {item} />
 		{/each}
 		{#if $settings.connectionCodes.length === 0}
-			<h2 class="mb-5 text-center">Add a new remote connection</h2>
+			<div class="text-center">
+				<h2>No remote connections</h2>
+				<h3 class="mb-5 text-center">Add a new remote connection or login to sync your connections</h3>
+			</div>
+		{/if}
+		{#if user === null}
+			<a href="/login" class="button">Login</a>
 		{/if}
 		<ModularDialog title={"Add Remote Connection"} description={"You can get your connection code from the Cores desktop app."}>
 			<slot slot="openButton">
@@ -32,10 +38,44 @@
 </div>
 
 <script lang="ts">
-	import { settings } from "ui/stores/settings.ts"
+	import { getSettings, setSettings, settings } from "ui/stores/settings.ts"
 	import ModularDialog from "ui/components/modularDialog.svelte"
 	import { Plus } from "lucide-svelte"
 	import { Dialog } from "bits-ui"
 	import { addConnectionCode } from "ui/utils/connection.ts"
 	import ConnectItem from "./connectItem.svelte"
+	import { onMount } from "svelte"
+	import { supabaseClient } from "ui/utils/supabase"
+	import type { User } from "@supabase/supabase-js"
+
+	$: user = null as User | null
+
+	onMount(async () => {
+		const { data: userData, error: userError } = await supabaseClient.auth.getUser()
+		const settings = getSettings()
+
+		if (!userError && userData !== null) {
+			user = userData.user
+			const { data, error } = await supabaseClient.from("remote_connection").select("*")
+
+			// check if connection is already added
+			if (data && data.length > 0) {
+				for (let i = 0; i < data.length; i++) {
+					const item = $settings.connectionCodes.filter((item) => item.code === data[i].code)
+
+					if (item.length === 0) {
+						settings.connectionCodes = [
+							...settings.connectionCodes,
+							{
+								name: data[i].name!,
+								code: data[i].code!,
+							},
+						]
+
+						setSettings(settings)
+					}
+				}
+			}
+		}
+	})
 </script>

platforms/interface/web/src/routes/(app)/login/+page.svelte

@@ -0,0 +1,41 @@
+{#if loading}
+	<Loading />
+{:else}
+	<div class="flex min-h-screen flex-col items-center justify-center">
+		<div class="flex w-full">
+			<Login loginFn={login} />
+		</div>
+	</div>
+{/if}
+
+<script lang="ts">
+	import Login from "ui/components/login.svelte"
+	import { supabaseClient } from "ui/utils/supabase"
+	import { PUBLIC_URL } from "$env/static/public"
+	import { onMount } from "svelte"
+	import Loading from "ui/navigation/loading.svelte"
+	import { goto } from "$app/navigation"
+
+	$: loading = true
+
+	onMount(async () => {
+		const { data: userData, error: userError } = await supabaseClient.auth.getUser()
+
+		if (!userError && userData !== null) {
+			goto("/home")
+		} else {
+			loading = false
+		}
+	})
+
+	const login = async () => {
+		const { data, error } = await supabaseClient.auth.signInWithOAuth({
+			provider: "google",
+			options: {
+				redirectTo: `${PUBLIC_URL}/login`,
+			},
+		})
+
+		console.log(data, error)
+	}
+</script>