mirror of
https://github.com/bartvdbraak/omnidash.git
synced 2025-04-27 15:31:21 +00:00
refactor: separate components for auth
This commit is contained in:
parent
0028e357fe
commit
e96783230e
5 changed files with 255 additions and 234 deletions
3
src/routes/(auth)/auth/(components)/index.ts
Normal file
3
src/routes/(auth)/auth/(components)/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
export { default as LoginForm } from './login-form.svelte';
|
||||||
|
export { default as RegisterForm } from './register-form.svelte';
|
||||||
|
export { default as SSOForm } from './sso-form.svelte';
|
||||||
63
src/routes/(auth)/auth/(components)/login-form.svelte
Normal file
63
src/routes/(auth)/auth/(components)/login-form.svelte
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { enhance } from '$app/forms';
|
||||||
|
import { Icons } from '$lib/components/site/icons';
|
||||||
|
import { Button } from '$lib/components/ui/button';
|
||||||
|
import { Input } from '$lib/components/ui/input';
|
||||||
|
import { Label } from '$lib/components/ui/label';
|
||||||
|
import * as Alert from '$lib/components/ui/alert';
|
||||||
|
import { cn } from '$lib/utils';
|
||||||
|
import type { ActionData } from '../$types';
|
||||||
|
|
||||||
|
export let form: ActionData;
|
||||||
|
export let isLoading = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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="pb-6 text-sm text-muted-foreground">
|
||||||
|
Enter your credentials below to log into your account
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class={cn('grid gap-6')} {...$$restProps}>
|
||||||
|
<form
|
||||||
|
method="POST"
|
||||||
|
action="?/login"
|
||||||
|
use:enhance={() => {
|
||||||
|
isLoading = true;
|
||||||
|
return async ({ update }) => {
|
||||||
|
isLoading = false;
|
||||||
|
update();
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="email-username">Email or username</Label>
|
||||||
|
<Input
|
||||||
|
id="email-login"
|
||||||
|
name="email-username"
|
||||||
|
type="text"
|
||||||
|
autocapitalize="none"
|
||||||
|
autocomplete="email"
|
||||||
|
autocorrect="off"
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="password">Password</Label>
|
||||||
|
<Input id="password-login" name="password" type="password" disabled={isLoading} />
|
||||||
|
</div>
|
||||||
|
<Button type="submit" disabled={isLoading}>
|
||||||
|
{#if isLoading}
|
||||||
|
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
{/if}
|
||||||
|
Sign In
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{#if form?.notVerified}
|
||||||
|
<Alert.Root class="mt-4">
|
||||||
|
<Alert.Description>You must verify your email before you can log in.</Alert.Description>
|
||||||
|
</Alert.Root>
|
||||||
|
{/if}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
67
src/routes/(auth)/auth/(components)/register-form.svelte
Normal file
67
src/routes/(auth)/auth/(components)/register-form.svelte
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { enhance } from '$app/forms';
|
||||||
|
import { Icons } from '$lib/components/site/icons';
|
||||||
|
import { Button } from '$lib/components/ui/button';
|
||||||
|
import { Input } from '$lib/components/ui/input';
|
||||||
|
import { Label } from '$lib/components/ui/label';
|
||||||
|
import { cn } from '$lib/utils';
|
||||||
|
export let isLoading = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-col space-y-2 text-center">
|
||||||
|
<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
|
||||||
|
<p class="pb-6 text-sm text-muted-foreground">
|
||||||
|
Enter your details below to create a new account
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class={cn('grid gap-6')} {...$$restProps}>
|
||||||
|
<form
|
||||||
|
method="POST"
|
||||||
|
action="?/register"
|
||||||
|
use:enhance={() => {
|
||||||
|
isLoading = true;
|
||||||
|
return async ({ update }) => {
|
||||||
|
isLoading = false;
|
||||||
|
update();
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="email">Name</Label>
|
||||||
|
<Input id="name" name="name" type="name" disabled={isLoading} />
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="email">Email</Label>
|
||||||
|
<Input
|
||||||
|
id="email-register"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
autocapitalize="none"
|
||||||
|
autocomplete="email"
|
||||||
|
autocorrect="off"
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="password">Password</Label>
|
||||||
|
<Input id="password-register" name="password" type="password" disabled={isLoading} />
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="password">Confirm password</Label>
|
||||||
|
<Input
|
||||||
|
id="confirm-password-register"
|
||||||
|
name="passwordConfirm"
|
||||||
|
type="password"
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" disabled={isLoading}>
|
||||||
|
{#if isLoading}
|
||||||
|
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
{/if}
|
||||||
|
Register
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
115
src/routes/(auth)/auth/(components)/sso-form.svelte
Normal file
115
src/routes/(auth)/auth/(components)/sso-form.svelte
Normal file
|
|
@ -0,0 +1,115 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { Icons } from "$lib/components/site";
|
||||||
|
import PocketBase from 'pocketbase';
|
||||||
|
import { PUBLIC_CLIENT_PB } from '$env/static/public';
|
||||||
|
import { enhance } from "$app/forms";
|
||||||
|
import { Button } from "$lib/components/ui/button";
|
||||||
|
import { Separator } from "$lib/components/ui/separator";
|
||||||
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
|
||||||
|
import { ChevronDown } from "radix-icons-svelte";
|
||||||
|
|
||||||
|
export let isLoading = false;
|
||||||
|
export let providers: { name: string, icon?: any, displayName: string }[];
|
||||||
|
let currentProvider = providers[0];
|
||||||
|
|
||||||
|
const pb = new PocketBase(PUBLIC_CLIENT_PB);
|
||||||
|
let oauth2Form: HTMLFormElement;
|
||||||
|
async function loginWithOauth2(provider: string) {
|
||||||
|
try {
|
||||||
|
await pb.collection('users').authWithOAuth2({ provider });
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.type = 'hidden';
|
||||||
|
input.name = 'token';
|
||||||
|
input.value = pb.authStore.token;
|
||||||
|
oauth2Form.appendChild(input);
|
||||||
|
oauth2Form.submit();
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<form
|
||||||
|
method="POST"
|
||||||
|
action="?/oauth2"
|
||||||
|
bind:this={oauth2Form}
|
||||||
|
use:enhance={() => {
|
||||||
|
isLoading = true;
|
||||||
|
return async ({ update }) => {
|
||||||
|
isLoading = false;
|
||||||
|
update();
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute inset-0 flex items-center">
|
||||||
|
<span class="w-full border-t" />
|
||||||
|
</div>
|
||||||
|
<div class="relative flex justify-center text-xs uppercase">
|
||||||
|
<span class="bg-background px-2 py-4 text-muted-foreground"> Or continue with </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<input type="hidden" name="provider" bind:value={currentProvider.name} />
|
||||||
|
<div class="flex w-full items-center justify-center space-x-2">
|
||||||
|
<Button
|
||||||
|
on:click={() => loginWithOauth2(currentProvider.name)}
|
||||||
|
name={currentProvider.name}
|
||||||
|
variant="ghost"
|
||||||
|
class="w-full"
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
{#if isLoading}
|
||||||
|
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
{:else if currentProvider.icon === undefined}
|
||||||
|
<img
|
||||||
|
src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${currentProvider.name}.svg`}
|
||||||
|
alt={currentProvider.name}
|
||||||
|
class="mr-2 h-4 w-4"
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<svelte:component this={currentProvider.icon} class="mr-2 h-4 w-4" />
|
||||||
|
{/if}
|
||||||
|
{currentProvider.displayName}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{#if providers.length > 1}
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<Separator orientation="vertical" class="h-[20px] bg-secondary" />
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
|
<Button builders={[builder]} variant="ghost" class="px-2 shadow-none">
|
||||||
|
<ChevronDown class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
<DropdownMenu.Content class="" align="center">
|
||||||
|
<DropdownMenu.Label class="sr-only">Login Providers</DropdownMenu.Label>
|
||||||
|
{#each providers as provider}
|
||||||
|
{#if provider.name !== currentProvider.name}
|
||||||
|
<DropdownMenu.Item
|
||||||
|
class="flex justify-center"
|
||||||
|
on:click={() => (currentProvider = provider)}
|
||||||
|
>
|
||||||
|
{#if provider.icon === undefined}
|
||||||
|
<img
|
||||||
|
src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${provider.name}.svg`}
|
||||||
|
alt={provider.name}
|
||||||
|
class="mr-2 h-4 w-4"
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<svelte:component this={provider.icon} class="mr-2 h-4 w-4" />
|
||||||
|
{/if}
|
||||||
|
{provider.displayName}
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
@ -1,48 +1,19 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { browser } from '$app/environment';
|
import { browser } from '$app/environment';
|
||||||
import { enhance } from '$app/forms';
|
import { Icons } from '$lib/components/site/index.js';
|
||||||
import { Icons } from '$lib/components/site/icons';
|
|
||||||
import { Button } from '$lib/components/ui/button';
|
|
||||||
import { Input } from '$lib/components/ui/input';
|
|
||||||
import { Label } from '$lib/components/ui/label';
|
|
||||||
import * as Tabs from '$lib/components/ui/tabs';
|
import * as Tabs from '$lib/components/ui/tabs';
|
||||||
import * as Alert from '$lib/components/ui/alert';
|
import type { PageData } from './$types.js';
|
||||||
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
|
import { LoginForm, RegisterForm, SSOForm } from './(components)';
|
||||||
import { cn } from '$lib/utils';
|
|
||||||
import { ChevronDown } from 'radix-icons-svelte';
|
|
||||||
import Separator from '$lib/components/ui/separator/separator.svelte';
|
|
||||||
import type { PageData } from './$types';
|
|
||||||
import PocketBase from 'pocketbase';
|
|
||||||
import { PUBLIC_CLIENT_PB } from '$env/static/public';
|
|
||||||
|
|
||||||
let isLoading = false;
|
|
||||||
export let form;
|
export let form;
|
||||||
export let data: PageData;
|
export let data: PageData;
|
||||||
const { providers } = data;
|
const { providers } = data;
|
||||||
const providersWithIcons = providers.map((provider) => ({
|
const providersWithIcons = providers.map((provider) => ({
|
||||||
...provider,
|
...provider,
|
||||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||||
icon: (Icons as { [key: string]: any })[provider.name] || undefined
|
icon: (Icons as { [key: string]: any })[provider.name] || undefined
|
||||||
}));
|
}));
|
||||||
let currentProvider = providersWithIcons[0];
|
|
||||||
|
|
||||||
const pb = new PocketBase(PUBLIC_CLIENT_PB);
|
|
||||||
let oauth2Form: HTMLFormElement;
|
|
||||||
async function loginWithOauth2(provider: string) {
|
|
||||||
try {
|
|
||||||
await pb.collection('users').authWithOAuth2({ provider });
|
|
||||||
const input = document.createElement('input');
|
|
||||||
input.type = 'hidden';
|
|
||||||
input.name = 'token';
|
|
||||||
input.value = pb.authStore.token;
|
|
||||||
oauth2Form.appendChild(input);
|
|
||||||
oauth2Form.submit();
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let tab: string = 'login';
|
let tab: string = 'login';
|
||||||
|
|
||||||
if (browser) {
|
if (browser) {
|
||||||
const urlSearchParams = new URLSearchParams(window.location.search);
|
const urlSearchParams = new URLSearchParams(window.location.search);
|
||||||
tab = urlSearchParams.get('tab') || 'login';
|
tab = urlSearchParams.get('tab') || 'login';
|
||||||
|
|
@ -59,214 +30,16 @@
|
||||||
<Tabs.Trigger value="register">Register</Tabs.Trigger>
|
<Tabs.Trigger value="register">Register</Tabs.Trigger>
|
||||||
</Tabs.List>
|
</Tabs.List>
|
||||||
<Tabs.Content value="login">
|
<Tabs.Content value="login">
|
||||||
<div class="flex flex-col space-y-2 text-center">
|
<LoginForm {form} />
|
||||||
<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1>
|
|
||||||
<p class="pb-6 text-sm text-muted-foreground">
|
|
||||||
Enter your credentials below to log into your account
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class={cn('grid gap-6')} {...$$restProps}>
|
|
||||||
<form
|
|
||||||
method="POST"
|
|
||||||
action="?/login"
|
|
||||||
use:enhance={() => {
|
|
||||||
isLoading = true;
|
|
||||||
return async ({ update }) => {
|
|
||||||
isLoading = false;
|
|
||||||
update();
|
|
||||||
};
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<Label for="email">Email or username</Label>
|
|
||||||
<Input
|
|
||||||
id="email-login"
|
|
||||||
name="email"
|
|
||||||
type="email"
|
|
||||||
autocapitalize="none"
|
|
||||||
autocomplete="email"
|
|
||||||
autocorrect="off"
|
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<Label for="password">Password</Label>
|
|
||||||
<Input id="password-login" name="password" type="password" disabled={isLoading} />
|
|
||||||
</div>
|
|
||||||
<Button type="submit" disabled={isLoading}>
|
|
||||||
{#if isLoading}
|
|
||||||
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
|
||||||
{/if}
|
|
||||||
Sign In
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{#if form?.notVerified}
|
|
||||||
<Alert.Root class="mt-4">
|
|
||||||
<Alert.Title></Alert.Title>
|
|
||||||
<Alert.Description>You must verify your email before you can login.</Alert.Description
|
|
||||||
>
|
|
||||||
</Alert.Root>
|
|
||||||
{/if}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</Tabs.Content>
|
</Tabs.Content>
|
||||||
<Tabs.Content value="register">
|
<Tabs.Content value="register">
|
||||||
<div class="flex flex-col space-y-2 text-center">
|
<RegisterForm />
|
||||||
<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
|
|
||||||
<p class="pb-6 text-sm text-muted-foreground">
|
|
||||||
Enter your details below to create a new account
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class={cn('grid gap-6')} {...$$restProps}>
|
|
||||||
<form
|
|
||||||
method="POST"
|
|
||||||
action="?/register"
|
|
||||||
use:enhance={() => {
|
|
||||||
isLoading = true;
|
|
||||||
return async ({ update }) => {
|
|
||||||
isLoading = false;
|
|
||||||
update();
|
|
||||||
};
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<Label for="email">Name</Label>
|
|
||||||
<Input id="name" name="name" type="name" disabled={isLoading} />
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<Label for="email">Email</Label>
|
|
||||||
<Input
|
|
||||||
id="email-register"
|
|
||||||
name="email"
|
|
||||||
type="email"
|
|
||||||
autocapitalize="none"
|
|
||||||
autocomplete="email"
|
|
||||||
autocorrect="off"
|
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<Label for="password">Password</Label>
|
|
||||||
<Input id="password-register" name="password" type="password" disabled={isLoading} />
|
|
||||||
</div>
|
|
||||||
<div class="grid gap-2">
|
|
||||||
<Label for="password">Confirm password</Label>
|
|
||||||
<Input
|
|
||||||
id="confirm-password-register"
|
|
||||||
name="passwordConfirm"
|
|
||||||
type="password"
|
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button type="submit" disabled={isLoading}>
|
|
||||||
{#if isLoading}
|
|
||||||
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
|
||||||
{/if}
|
|
||||||
Register
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{#if form?.notVerified}
|
|
||||||
<Alert.Root class="mt-4">
|
|
||||||
<Alert.Title></Alert.Title>
|
|
||||||
<Alert.Description>You must verify your email before you can login.</Alert.Description
|
|
||||||
>
|
|
||||||
</Alert.Root>
|
|
||||||
{/if}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</Tabs.Content>
|
</Tabs.Content>
|
||||||
<p class="px-8 text-center text-xs text-muted-foreground">
|
<p class="px-8 text-center text-xs text-muted-foreground">
|
||||||
Don't have an account? <a class="text-primary underline" href="/auth?tab=register">Register</a
|
|
||||||
>.<br />
|
|
||||||
Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
|
Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
|
||||||
</p>
|
</p>
|
||||||
{#if providers.length}
|
{#if providers.length}
|
||||||
<form
|
<SSOForm providers={providersWithIcons} />
|
||||||
method="POST"
|
|
||||||
action="?/oauth2"
|
|
||||||
bind:this={oauth2Form}
|
|
||||||
use:enhance={() => {
|
|
||||||
isLoading = true;
|
|
||||||
return async ({ update }) => {
|
|
||||||
isLoading = false;
|
|
||||||
update();
|
|
||||||
};
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class="relative">
|
|
||||||
<div class="absolute inset-0 flex items-center">
|
|
||||||
<span class="w-full border-t" />
|
|
||||||
</div>
|
|
||||||
<div class="relative flex justify-center text-xs uppercase">
|
|
||||||
<span class="bg-background px-2 py-4 text-muted-foreground"> Or continue with </span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<input type="hidden" name="provider" bind:value={currentProvider.name} />
|
|
||||||
<div class="flex w-full items-center justify-center space-x-2">
|
|
||||||
<Button
|
|
||||||
on:click={() => loginWithOauth2(currentProvider.name)}
|
|
||||||
name={currentProvider.name}
|
|
||||||
variant="ghost"
|
|
||||||
class="w-full"
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
{#if isLoading}
|
|
||||||
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
|
||||||
{:else if currentProvider.icon === undefined}
|
|
||||||
<img
|
|
||||||
src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${currentProvider.name}.svg`}
|
|
||||||
alt={currentProvider.name}
|
|
||||||
class="mr-2 h-4 w-4"
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<svelte:component this={currentProvider.icon} class="mr-2 h-4 w-4" />
|
|
||||||
{/if}
|
|
||||||
{currentProvider.displayName}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{#if providers.length > 1}
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<Separator orientation="vertical" class="h-[20px] bg-secondary" />
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<DropdownMenu.Root>
|
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
|
||||||
<Button builders={[builder]} variant="ghost" class="px-2 shadow-none">
|
|
||||||
<ChevronDown class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenu.Trigger>
|
|
||||||
<DropdownMenu.Content class="" align="center">
|
|
||||||
<DropdownMenu.Label class="sr-only">Login Providers</DropdownMenu.Label>
|
|
||||||
{#each providersWithIcons as provider}
|
|
||||||
{#if provider.name !== currentProvider.name}
|
|
||||||
<DropdownMenu.Item
|
|
||||||
class="flex justify-center"
|
|
||||||
on:click={() => (currentProvider = provider)}
|
|
||||||
>
|
|
||||||
{#if provider.icon === undefined}
|
|
||||||
<img
|
|
||||||
src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${provider.name}.svg`}
|
|
||||||
alt={provider.name}
|
|
||||||
class="mr-2 h-4 w-4"
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<svelte:component this={provider.icon} class="mr-2 h-4 w-4" />
|
|
||||||
{/if}
|
|
||||||
{provider.displayName}
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{/if}
|
{/if}
|
||||||
</Tabs.Root>
|
</Tabs.Root>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue