-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
/
SignIn.svelte
70 lines (67 loc) · 2.14 KB
/
SignIn.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script lang="ts">
import { enhance } from "$app/forms"
import type { signIn } from "$lib/actions"
export let className = ""
// TODO: Lookup provider type by id
export let provider: Partial<Parameters<typeof signIn>[0]> = ""
/** The path to the FormAction file in your route. @default signin */
export let signInPage = "signin"
export let options: Parameters<typeof signIn>[1] | undefined = undefined
export let authorizationParams: Parameters<typeof signIn>[2] | undefined =
undefined
const callbackUrl =
options instanceof FormData
? options.get("redirectTo")
: options?.redirectTo
const redirect =
options instanceof FormData ? options.get("redirect") : options?.redirectTo
const authorizationParamsInputs = authorizationParams
? typeof authorizationParams === "string" && authorizationParams
? new URLSearchParams(authorizationParams)
: authorizationParams
: undefined
</script>
<form
method="POST"
action={`/${signInPage}`}
use:enhance
class={`signInButton ${className}`}
{...$$restProps}
>
<input type="hidden" name="providerId" value={provider} />
{#if callbackUrl}
<input type="hidden" name="callbackUrl" value={callbackUrl} />
{/if}
{#if redirect}
<input type="hidden" name="redirect" value={redirect} />
{/if}
{#if authorizationParamsInputs}
{#each Object.entries(authorizationParamsInputs) as [key, value]}
<input type="hidden" name={`authorizationParams-${key}`} {value} />
{/each}
{/if}
{#if provider === "credentials"}
<slot name="credentials" />
{/if}
<!-- TODO: Filter by provider type only -->
{#if provider === "email" || provider === "sendgrid" || provider === "resend"}
<slot name="email">
<label
class="section-header"
for={`input-email-for-${provider}-provider`}
>
Email
</label>
<input
id="input-email-for-email-provider"
type="email"
name="email"
placeholder="email@example.com"
required
/>
</slot>
{/if}
<button type="submit">
<slot name="submitButton">Signin{provider ? ` with ${provider}` : ""}</slot>
</button>
</form>