welcome screen refinements
This commit is contained in:
10
src/assets/icons/trademarks/discord.svelte
Normal file
10
src/assets/icons/trademarks/discord.svelte
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 640 640"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M524.5 133.8c-.2-.3-.4-.6-.8-.7c-38.1-17.5-78.4-30-119.7-37.1c-.4-.1-.8 0-1.1.1s-.6.4-.8.8c-5.5 9.9-10.5 20.2-14.9 30.6c-44.6-6.8-89.9-6.8-134.4 0c-4.5-10.5-9.5-20.7-15.1-30.6c-.2-.3-.5-.6-.8-.8s-.7-.2-1.1-.2c-41.3 7.1-81.6 19.6-119.7 37.1c-.3.1-.6.4-.8.7c-76.2 113.8-97.1 224.9-86.9 334.5c0 .3.1.5.2.8s.3.4.5.6c44.4 32.9 94 58 146.8 74.2c.4.1.8.1 1.1 0s.7-.4.9-.7c11.3-15.4 21.4-31.8 30-48.8c.1-.2.2-.5.2-.8s0-.5-.1-.8s-.2-.5-.4-.6s-.4-.3-.7-.4c-15.8-6.1-31.2-13.4-45.9-21.9c-.3-.2-.5-.4-.7-.6s-.3-.6-.3-.9s0-.6.2-.9s.3-.5.6-.7c3.1-2.3 6.2-4.7 9.1-7.1c.3-.2.6-.4.9-.4s.7 0 1 .1c96.2 43.9 200.4 43.9 295.5 0c.3-.1.7-.2 1-.2s.7.2.9.4c2.9 2.4 6 4.9 9.1 7.2c.2.2.4.4.6.7s.2.6.2.9q0 .45-.3.9t-.6.6c-14.7 8.6-30 15.9-45.9 21.8c-.2.1-.5.2-.7.4s-.3.4-.4.7s-.1.5-.1.8s.1.5.2.8c8.8 17 18.8 33.3 30 48.8c.2.3.6.6.9.7s.8.1 1.1 0c52.9-16.2 102.6-41.3 147.1-74.2c.2-.2.4-.4.5-.6s.2-.5.2-.8c12.3-126.8-20.5-236.9-86.9-334.5zm-302 267.7c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2c0 32.7-23.4 59.2-52.8 59.2m195.4 0c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2c0 32.7-23.2 59.2-52.8 59.2"
|
||||
/></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
10
src/assets/icons/trademarks/google.svelte
Normal file
10
src/assets/icons/trademarks/google.svelte
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 640 640"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M564 325.8C564 467.3 467.1 568 324 568C186.8 568 76 457.2 76 320S186.8 72 324 72c66.8 0 123 24.5 166.3 64.9l-67.5 64.9c-88.3-85.2-252.5-21.2-252.5 118.2c0 86.5 69.1 156.6 153.7 156.6c98.2 0 135-70.4 140.8-106.9H324v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4"
|
||||
/></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 400 B |
@@ -4,6 +4,8 @@
|
||||
import DollPreview from "../app-menu/components/doll-preview.svelte";
|
||||
import ExternalLink from "../../assets/icons/external-link.svelte";
|
||||
import type { UnlistenFn } from "@tauri-apps/api/event";
|
||||
import Google from "../../assets/icons/trademarks/google.svelte";
|
||||
import Discord from "../../assets/icons/trademarks/discord.svelte";
|
||||
|
||||
let activeProvider: "google" | "discord" | null = null;
|
||||
let errorMessage = "";
|
||||
@@ -45,7 +47,11 @@
|
||||
const providerLabel = (provider: "google" | "discord") =>
|
||||
provider === "google" ? "Google" : "Discord";
|
||||
|
||||
const handleAuthFlowUpdated = ({ payload }: { payload: AuthFlowUpdatedPayload }) => {
|
||||
const handleAuthFlowUpdated = ({
|
||||
payload,
|
||||
}: {
|
||||
payload: AuthFlowUpdatedPayload;
|
||||
}) => {
|
||||
const provider = payload.provider as "google" | "discord";
|
||||
if (activeProvider !== provider) {
|
||||
return;
|
||||
@@ -62,11 +68,14 @@
|
||||
return;
|
||||
}
|
||||
|
||||
errorMessage = payload.message ?? `Unable to sign in with ${providerLabel(provider)}.`;
|
||||
errorMessage =
|
||||
payload.message ?? `Unable to sign in with ${providerLabel(provider)}.`;
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
unlistenAuthFlow = await events.authFlowUpdated.listen(handleAuthFlowUpdated);
|
||||
unlistenAuthFlow = await events.authFlowUpdated.listen(
|
||||
handleAuthFlowUpdated,
|
||||
);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
@@ -97,44 +106,66 @@
|
||||
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")}
|
||||
>
|
||||
<span>{activeProvider === "google" ? "Restart Google sign-in" : "Continue with Google"}</span>
|
||||
<div class="scale-70">
|
||||
<ExternalLink />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline btn-xl justify-between"
|
||||
onclick={() => startAuth("discord")}
|
||||
>
|
||||
<span>{activeProvider === "discord" ? "Restart Discord sign-in" : "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 class="flex flex-col gap-3">
|
||||
<span>Sign in with</span>
|
||||
<div class="w-full flex flex-row gap-3">
|
||||
<button
|
||||
class="card relative hover:cursor-pointer items-center"
|
||||
onclick={() => startAuth("google")}
|
||||
>
|
||||
<div class="size-full btn btn-primary absolute z-0"></div>
|
||||
<div
|
||||
class="flex flex-row justify-start items-center z-1 h-full p-1 pr-0"
|
||||
>
|
||||
<div
|
||||
class="bg-linear-to-t from-base-100/50 to-base-100 rounded-sm"
|
||||
>
|
||||
<div class="scale-70">
|
||||
<Google />
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xl font-semibold px-3 text-primary-content"
|
||||
>Google</span
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="card relative hover:cursor-pointer items-center"
|
||||
onclick={() => startAuth("discord")}
|
||||
>
|
||||
<div class="size-full btn btn-primary absolute z-0"></div>
|
||||
<div
|
||||
class="flex flex-row justify-start items-center z-1 h-full p-1 pr-0"
|
||||
>
|
||||
<div
|
||||
class="bg-linear-to-t from-base-100/50 to-base-100 rounded-sm"
|
||||
>
|
||||
<div class="scale-70">
|
||||
<Discord />
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xl font-semibold px-3 text-primary-content"
|
||||
>Discord</span
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if errorMessage}
|
||||
<p class="text-xs text-error max-w-72">{errorMessage}</p>
|
||||
<p class="text-xs text-error max-w-48">{errorMessage}</p>
|
||||
{:else}
|
||||
<p class="text-xs opacity-50 max-w-72">
|
||||
{#if activeProvider}
|
||||
Friendolls is waiting for the browser callback. Click either button again to restart sign-in at any time.
|
||||
{:else}
|
||||
Sign in through your browser, then return here once Friendolls finishes the handshake.
|
||||
{/if}
|
||||
<p class="text-xs opacity-70 max-w-48">
|
||||
An account is needed to connect you with friends.
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="btn btn-link p-0 btn-sm btn-primary w-max opacity-0 hover:opacity-100 transition-opacity"
|
||||
onclick={openClientConfig}
|
||||
>
|
||||
Client Configuration (Advanced)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -146,7 +177,7 @@
|
||||
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">
|
||||
<div class="flex flex-col scale-150 origin-bottom-right">
|
||||
<DollPreview dollColorScheme={{ body: "b7f2ff", outline: "496065" }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user