112 lines
3.5 KiB
Svelte
112 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import { commands } from "$lib/bindings";
|
|
import DollPreview from "../app-menu/components/doll-preview.svelte";
|
|
import ExternalLink from "../../assets/icons/external-link.svelte";
|
|
|
|
let loadingProvider: "google" | "discord" | null = null;
|
|
let errorMessage = "";
|
|
|
|
const normalizeError = (value: unknown) => {
|
|
if (value instanceof Error) {
|
|
return value.message;
|
|
}
|
|
|
|
return typeof value === "string" ? value : "Something went wrong";
|
|
};
|
|
|
|
const startAuth = async (provider: "google" | "discord") => {
|
|
if (loadingProvider) return;
|
|
|
|
loadingProvider = provider;
|
|
errorMessage = "";
|
|
|
|
try {
|
|
if (provider === "google") {
|
|
await commands.startGoogleAuth();
|
|
} else {
|
|
await commands.startDiscordAuth();
|
|
}
|
|
} catch (error) {
|
|
console.error(`Failed to start ${provider} auth`, error);
|
|
errorMessage = normalizeError(error);
|
|
loadingProvider = null;
|
|
}
|
|
};
|
|
|
|
const openClientConfig = async () => {
|
|
try {
|
|
await commands.openClientConfig();
|
|
} catch (error) {
|
|
console.error("Failed to open client config", error);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<div
|
|
class="size-full max-w-full max-h-full overflow-hidden relative bg-linear-to-br from-base-100 to-[#b7f2ff77]"
|
|
>
|
|
<div class="flex flex-row gap-2 justify-between size-full p-6">
|
|
<div class="flex flex-col justify-between">
|
|
<div class="flex flex-col gap-2 h-full">
|
|
<div class="flex flex-col gap-6">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex flex-row gap-2">
|
|
<p class="text-xl font-light">meow? nyaaa!!</p>
|
|
</div>
|
|
<p class="opacity-70 text-3xl font-bold">
|
|
a cute passive socialization layer!
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col gap-3 max-w-80">
|
|
<button
|
|
class="btn btn-primary btn-xl justify-between"
|
|
onclick={() => startAuth("google")}
|
|
disabled={loadingProvider !== null}
|
|
>
|
|
<span>{loadingProvider === "google" ? "Opening Google..." : "Continue with Google"}</span>
|
|
<div class="scale-70">
|
|
<ExternalLink />
|
|
</div>
|
|
</button>
|
|
<button
|
|
class="btn btn-outline btn-xl justify-between"
|
|
onclick={() => startAuth("discord")}
|
|
disabled={loadingProvider !== null}
|
|
>
|
|
<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"
|
|
onclick={openClientConfig}
|
|
>
|
|
Advanced options
|
|
</button>
|
|
</div>
|
|
|
|
{#if errorMessage}
|
|
<p class="text-xs text-error max-w-72">{errorMessage}</p>
|
|
{:else}
|
|
<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>
|
|
</div>
|
|
<div>
|
|
<p class="uppercase">Pre-release</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="absolute pointer-events-none bottom-6 right-6 flex flex-col gap-1 justify-between"
|
|
>
|
|
<div></div>
|
|
<div class="flex flex-col scale-200 origin-bottom-right">
|
|
<DollPreview dollColorScheme={{ body: "b7f2ff", outline: "496065" }} />
|
|
</div>
|
|
</div>
|
|
</div>
|