Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 13x 13x 13x 13x 13x 13x 13x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script>
import { Button } from '@rokkit/molecules'
import { InputField } from '@rokkit/organisms'
import { getContext } from 'svelte'
import { createEventDispatcher } from 'svelte'
import AuthPassword from './AuthPassword.svelte'
const dispatch = createEventDispatcher()
const kavach = getContext('kavach')
let className = ''
export { className as class }
/** @type {'otp'|'oauth'|'password'} */
export let mode = 'oauth'
/** @type {string} */
export let name
/** @type {string} */
export let label
/** @type {Array<string>} */
export let scopes = []
let result
let value
let password
async function signIn() {
if (mode === 'password') {
result = await kavach.signIn({ [name]: value, password })
} else if (mode === 'otp') {
result = await kavach.signIn({ provider: name, email: value })
} else {
await kavach.signIn({
provider: name,
scopes
})
}
if (result) {
if (result.error) {
dispatch('error', result.error)
} else {
dispatch('success', result.data)
}
}
}
</script>
{#if mode === 'oauth'}
<Button
on:click={signIn}
{label}
leftIcon="i-auth-{name}"
class={className}
/>
{:else if mode === 'password'}
<AuthPassword bind:value bind:password on:click={signIn} />
{:else}
<form on:submit={signIn} class="flex w-full p-0 {className}">
<InputField
type="email"
name="magic"
label="magic link"
icon="i-auth-{name}"
placeholder={label}
bind:value
/>
</form>
{/if}
|