SSO auth

src/routes/welcome/+page.svelte

@@ -1,60 +1,36 @@
 <script lang="ts">
   import { commands } from "$lib/bindings";
-  import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
   import DollPreview from "../app-menu/components/doll-preview.svelte";
   import ExternalLink from "../../assets/icons/external-link.svelte";
 
-  let isContinuing = false;
-  let useRegister = false;
+  let loadingProvider: "google" | "discord" | null = null;
   let errorMessage = "";
-  let form = {
-    email: "",
-    password: "",
-    name: "",
-    username: "",
-  };
 
   const normalizeError = (value: unknown) => {
     if (value instanceof Error) {
       return value.message;
     }
+
     return typeof value === "string" ? value : "Something went wrong";
   };
 
-  const handleContinue = async () => {
-    if (isContinuing) return;
-    if (!form.email.trim() || !form.password) {
-      errorMessage = "Email and password are required";
-      return;
-    }
-    isContinuing = true;
+  const startAuth = async (provider: "google" | "discord") => {
+    if (loadingProvider) return;
+
+    loadingProvider = provider;
     errorMessage = "";
+
     try {
-      if (useRegister) {
-        await commands.register(
-          form.email.trim(),
-          form.password,
-          form.name.trim() || null,
-          form.username.trim() || null,
-        );
-        useRegister = false;
-        resetRegisterFields();
-        form.password = "";
-        return;
+      if (provider === "google") {
+        await commands.startGoogleAuth();
+      } else {
+        await commands.startDiscordAuth();
       }
-
-      await commands.login(form.email.trim(), form.password);
-      await getCurrentWebviewWindow().close();
     } catch (error) {
-      console.error("Failed to authenticate", error);
+      console.error(`Failed to start ${provider} auth`, error);
       errorMessage = normalizeError(error);
+      loadingProvider = null;
     }
-    isContinuing = false;
-  };
-
-  const resetRegisterFields = () => {
-    form.name = "";
-    form.username = "";
   };
 
   const openClientConfig = async () => {
@@ -81,76 +57,26 @@
               a cute passive socialization layer!
             </p>
           </div>
-          <div class="flex flex-col gap-4">
-            <div class="flex flex-col gap-2">
-              <label class="flex flex-col gap-1">
-                <span class="text-xs opacity-60">Email</span>
-                <input
-                  class="input input-bordered input-sm"
-                  type="email"
-                  autocomplete="email"
-                  bind:value={form.email}
-                  placeholder="you@example.com"
-                />
-              </label>
-              <label class="flex flex-col gap-1">
-                <span class="text-xs opacity-60">Password</span>
-                <input
-                  class="input input-bordered input-sm"
-                  type="password"
-                  autocomplete={useRegister
-                    ? "new-password"
-                    : "current-password"}
-                  bind:value={form.password}
-                  placeholder="••••••••"
-                />
-              </label>
-              {#if useRegister}
-                <label class="flex flex-col gap-1">
-                  <span class="text-xs opacity-60">Name (optional)</span>
-                  <input
-                    class="input input-bordered input-sm"
-                    autocomplete="name"
-                    bind:value={form.name}
-                  />
-                </label>
-                <label class="flex flex-col gap-1">
-                  <span class="text-xs opacity-60">Username (optional)</span>
-                  <input
-                    class="input input-bordered input-sm"
-                    autocomplete="username"
-                    bind:value={form.username}
-                  />
-                </label>
-              {/if}
-            </div>
+          <div class="flex flex-col gap-3 max-w-80">
             <button
-              class="btn btn-primary btn-xl"
-              onclick={handleContinue}
-              disabled={isContinuing}
+              class="btn btn-primary btn-xl justify-between"
+              onclick={() => startAuth("google")}
+              disabled={loadingProvider !== null}
             >
-              {#if isContinuing}
-                Loading...
-              {:else}
-                <div class="scale-70">
-                  <ExternalLink />
-                </div>
-                {useRegister ? "Create account" : "Sign in"}
-              {/if}
+              <span>{loadingProvider === "google" ? "Opening Google..." : "Continue with Google"}</span>
+              <div class="scale-70">
+                <ExternalLink />
+              </div>
             </button>
             <button
-              class="btn btn-ghost btn-sm px-0 justify-start"
-              onclick={() => {
-                useRegister = !useRegister;
-                errorMessage = "";
-                if (!useRegister) {
-                  resetRegisterFields();
-                }
-              }}
+              class="btn btn-outline btn-xl justify-between"
+              onclick={() => startAuth("discord")}
+              disabled={loadingProvider !== null}
             >
-              {useRegister
-                ? "Already have an account? Sign in"
-                : "New here? Create an account"}
+              <span>{loadingProvider === "discord" ? "Opening Discord..." : "Continue with Discord"}</span>
+              <div class="scale-70">
+                <ExternalLink />
+              </div>
             </button>
             <button
               class="btn btn-link p-0 btn-sm text-base-content w-max"
@@ -163,8 +89,8 @@
           {#if errorMessage}
             <p class="text-xs text-error max-w-72">{errorMessage}</p>
           {:else}
-            <p class="text-xs opacity-50 max-w-60">
-              An account is needed to identify you for connecting with friends.
+            <p class="text-xs opacity-50 max-w-72">
+              Sign in in your browser, then return here once Friendolls finishes the handshake.
             </p>
           {/if}
         </div>