54 lines
1.3 KiB
Svelte
54 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { LucideLoaderCircle } from '@lucide/svelte';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import { cn } from '$lib/utils.js';
|
|
import googleIcon from '$lib/assets/google.svg';
|
|
|
|
let { inviteToken, class: className, ...rest }: { inviteToken?: string; class?: string; rest?: { [p: string]: unknown } } = $props();
|
|
|
|
let isLoading = $state(false);
|
|
</script>
|
|
|
|
<div class={cn('flex gap-6', className)} {...rest}>
|
|
<form method="get" action="/auth/authentik{inviteToken ? `?invite=${inviteToken}` : ''}">
|
|
<input type="hidden" value={inviteToken} name="invite" />
|
|
<Button
|
|
type="submit"
|
|
onclick={() => {
|
|
isLoading = true;
|
|
}}
|
|
>
|
|
{#if isLoading}
|
|
<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
|
|
{:else}
|
|
<img
|
|
class="mr-2 h-4 w-4"
|
|
alt="Authentik Logo"
|
|
src="https://auth.cazzzer.com/static/dist/assets/icons/icon.svg"
|
|
/>
|
|
{/if}
|
|
Sign in with Authentik
|
|
</Button>
|
|
</form>
|
|
<form method="get" action="/auth/google">
|
|
<input type="hidden" value={inviteToken} name="invite" />
|
|
<Button
|
|
type="submit"
|
|
onclick={() => {
|
|
isLoading = true;
|
|
}}
|
|
>
|
|
{#if isLoading}
|
|
<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
|
|
{:else}
|
|
<img
|
|
class="mr-2 h-4 w-4"
|
|
alt="Google Logo"
|
|
src={googleIcon}
|
|
/>
|
|
{/if}
|
|
Sign in with Google
|
|
</Button>
|
|
</form>
|
|
</div>
|