@indobaseinc/auth-ui-svelte 1.0.0

package/dist/Auth/interfaces/EmailAuth.svelte

@@ -0,0 +1,165 @@
+<script>import Anchor from '../../UI/Anchor.svelte';
+import Button from '../../UI/Button.svelte';
+import Container from '../../UI/Container.svelte';
+import Input from '../../UI/Input.svelte';
+import Label from '../../UI/Label.svelte';
+import Message from '../../UI/Message.svelte';
+import { VIEWS } from '@indobaseinc/auth-ui-shared';
+export let authView = 'sign_in';
+export let email = '';
+export let password = '';
+export let supabaseClient;
+export let redirectTo = undefined;
+export let additionalData = undefined;
+export let showLinks = false;
+export let magicLink = true;
+export let i18n;
+export let passwordLimit = false;
+export let appearance;
+let message = '';
+let error = '';
+let loading = false;
+let lngKey = authView === 'sign_in' ? 'sign_in' : 'sign_up';
+async function handleSubmit() {
+    loading = true;
+    error = '';
+    message = '';
+    switch (authView) {
+        case VIEWS.SIGN_IN:
+            const { error: signInError } = await supabaseClient.auth.signInWithPassword({
+                email,
+                password
+            });
+            if (signInError)
+                error = signInError.message;
+            loading = false;
+            break;
+        case VIEWS.SIGN_UP:
+            if (passwordLimit && password.length > 72) {
+                error = 'Password exceeds maxmium length of 72 characters';
+                loading = false;
+                return;
+            }
+            let options = {
+                emailRedirectTo: redirectTo
+            };
+            if (additionalData) {
+                options.data = additionalData;
+            }
+            const { data: { user: signUpUser, session: signUpSession }, error: signUpError } = await supabaseClient.auth.signUp({
+                email,
+                password,
+                options
+            });
+            if (signUpError)
+                error = signUpError.message;
+            // Check if session is null -> email confirmation setting is turned on
+            else if (signUpUser && !signUpSession)
+                message = i18n.sign_up?.confirmation_text;
+            break;
+    }
+    loading = false;
+}
+</script>
+
+<form method="post" on:submit|preventDefault={handleSubmit}>
+	<Container direction="vertical" gap="large" {appearance}>
+		<Container direction="vertical" gap="large" {appearance}>
+			<div>
+				<Label for="email" {appearance}>{i18n?.[lngKey]?.email_label}</Label>
+				<Input
+					id="email"
+					type="email"
+					name="email"
+					autofocus
+					placeholder={i18n?.[lngKey]?.email_input_placeholder}
+					bind:value={email}
+					autocomplete="email"
+					{appearance}
+				/>
+			</div>
+			<div>
+				<Label for="password" {appearance}>{i18n?.[lngKey]?.password_label}</Label>
+				<Input
+					id="password"
+					type="password"
+					name="password"
+					placeholder={i18n?.[lngKey]?.password_input_placeholder}
+					bind:value={password}
+					autocomplete={authView === VIEWS.SIGN_IN ? 'current-password' : 'new-password'}
+					{appearance}
+				/>
+			</div>
+			<slot />
+		</Container>
+		<Button type="submit" color="primary" {loading} {appearance}
+			>{loading ? i18n?.[lngKey]?.loading_button_label : i18n?.[lngKey]?.button_label}
+		</Button>
+
+		{#if showLinks}
+			<Container direction="vertical" gap="small" {appearance}>
+				{#if authView === VIEWS.SIGN_IN && magicLink}
+					<Anchor
+						on:click={(e) => {
+							e.preventDefault();
+							authView = VIEWS.MAGIC_LINK;
+						}}
+						href="#auth-magic-link"
+						{appearance}
+						>{i18n?.magic_link?.link_text}
+					</Anchor>
+				{/if}
+				{#if authView === VIEWS.SIGN_IN}
+					<Anchor
+						on:click={(e) => {
+							e.preventDefault();
+							authView = VIEWS.FORGOTTEN_PASSWORD;
+						}}
+						href="#auth-forgot-password"
+						{appearance}
+					>
+						{i18n?.forgotten_password?.link_text}</Anchor
+					>
+					<Anchor
+						on:click={(e) => {
+							e.preventDefault();
+							authView = VIEWS.SIGN_UP;
+						}}
+						href="#auth-sign-up"
+						{appearance}
+					>
+						{i18n?.sign_up?.link_text}
+					</Anchor>
+				{:else}
+					<Anchor
+						on:click={(e) => {
+							e.preventDefault();
+							authView = VIEWS.SIGN_IN;
+						}}
+						href="#auth-sign-in"
+						{appearance}
+					>
+						{i18n?.sign_in?.link_text}
+					</Anchor>
+				{/if}
+			</Container>
+		{/if}
+	</Container>
+
+	{#if message}
+		<Message {appearance}>
+			{message}
+		</Message>
+	{/if}
+	{#if error}
+		<Message color="danger" {appearance}>
+			{error}
+		</Message>
+	{/if}
+</form>
+
+<style>
+	form {
+		width: 100%;
+	}
+</style>

package/dist/Auth/interfaces/EmailAuth.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import { type I18nVariables, type ViewType, type RedirectTo } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        authView?: ViewType | undefined;
+        email?: string | undefined;
+        password?: string | undefined;
+        supabaseClient: IndobaseClient;
+        redirectTo?: RedirectTo;
+        additionalData?: {
+            [key: string]: any;
+        } | undefined;
+        showLinks?: boolean | undefined;
+        magicLink?: boolean | undefined;
+        i18n: I18nVariables;
+        passwordLimit?: boolean | undefined;
+        appearance: Appearance;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EmailAuthProps = typeof __propDef.props;
+export type EmailAuthEvents = typeof __propDef.events;
+export type EmailAuthSlots = typeof __propDef.slots;
+export default class EmailAuth extends SvelteComponentTyped<EmailAuthProps, EmailAuthEvents, EmailAuthSlots> {
+}
+export {};

package/dist/Auth/interfaces/ForgottenPassword.svelte

@@ -0,0 +1,81 @@
+<script>import Anchor from '../../UI/Anchor.svelte';
+import Button from '../../UI/Button.svelte';
+import Container from '../../UI/Container.svelte';
+import Input from '../../UI/Input.svelte';
+import Label from '../../UI/Label.svelte';
+import Message from '../../UI/Message.svelte';
+import { VIEWS } from '@indobaseinc/auth-ui-shared';
+export let i18n;
+export let supabaseClient;
+export let authView;
+export let redirectTo = undefined;
+export let email = '';
+export let showLinks = false;
+export let appearance;
+let message = '';
+let error = '';
+let loading = false;
+async function handleSubmit() {
+    loading = true;
+    error = '';
+    message = '';
+    const { error: resetPasswordError } = await supabaseClient.auth.resetPasswordForEmail(email, {
+        redirectTo
+    });
+    if (resetPasswordError)
+        error = resetPasswordError.message;
+    else
+        message = i18n.forgotten_password?.confirmation_text;
+    loading = false;
+}
+</script>
+
+<form id="auth-forgot-password" method="post" on:submit|preventDefault={handleSubmit}>
+	<Container direction="vertical" gap="large" {appearance}>
+		<Container direction="vertical" gap="large" {appearance}>
+			<div>
+				<Label for="email" {appearance}>{i18n?.forgotten_password?.email_label}</Label>
+				<Input
+					id="email"
+					type="email"
+					name="email"
+					autofocus
+					placeholder={i18n?.forgotten_password?.email_input_placeholder}
+					bind:value={email}
+					autocomplete="email"
+					{appearance}
+				/>
+			</div>
+			<Button type="submit" color="primary" {loading} {appearance}>
+				{loading ? i18n?.forgotten_password?.loading_button_label : i18n?.forgotten_password?.button_label}
+			</Button>
+		</Container>
+
+		{#if showLinks}
+			<Anchor
+				on:click={(e) => {
+					e.preventDefault();
+					authView = VIEWS.SIGN_IN;
+				}}
+				href="#auth-magic-link"
+				{appearance}>{i18n?.sign_in?.link_text}</Anchor
+			>
+		{/if}
+		{#if message}
+			<Message {appearance}>
+				{message}
+			</Message>
+		{/if}
+		{#if error}
+			<Message color="danger" {appearance}>
+				{error}
+			</Message>
+		{/if}
+	</Container>
+</form>
+
+<style>
+	form {
+		width: 100%;
+	}
+</style>

package/dist/Auth/interfaces/ForgottenPassword.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import { type I18nVariables, type ViewType } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        i18n: I18nVariables;
+        supabaseClient: IndobaseClient;
+        authView: ViewType;
+        redirectTo?: string | undefined;
+        email?: string | undefined;
+        showLinks?: boolean | undefined;
+        appearance: Appearance;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ForgottenPasswordProps = typeof __propDef.props;
+export type ForgottenPasswordEvents = typeof __propDef.events;
+export type ForgottenPasswordSlots = typeof __propDef.slots;
+export default class ForgottenPassword extends SvelteComponentTyped<ForgottenPasswordProps, ForgottenPasswordEvents, ForgottenPasswordSlots> {
+}
+export {};

package/dist/Auth/interfaces/MagicLink.svelte

@@ -0,0 +1,84 @@
+<script>import Anchor from '../../UI/Anchor.svelte';
+import Button from '../../UI/Button.svelte';
+import Container from '../../UI/Container.svelte';
+import Input from '../../UI/Input.svelte';
+import Label from '../../UI/Label.svelte';
+import Message from '../../UI/Message.svelte';
+import { VIEWS } from '@indobaseinc/auth-ui-shared';
+export let i18n;
+export let supabaseClient;
+export let authView;
+export let redirectTo = undefined;
+export let appearance;
+export let showLinks = false;
+export let email = '';
+let message = '';
+let error = '';
+let loading = false;
+async function handleSubmit() {
+    loading = true;
+    error = '';
+    message = '';
+    const { error: resetPasswordError } = await supabaseClient.auth.signInWithOtp({
+        email,
+        options: {
+            emailRedirectTo: redirectTo
+        }
+    });
+    if (resetPasswordError)
+        error = resetPasswordError.message;
+    else
+        message = i18n.magic_link?.confirmation_text;
+    loading = false;
+}
+</script>
+
+<form id="auth-magic-link" method="post" on:submit|preventDefault={handleSubmit}>
+	<Container direction="vertical" gap="large" {appearance}>
+		<Container direction="vertical" gap="large" {appearance}>
+			<div>
+				<Label for="email" {appearance}>{i18n?.magic_link?.email_input_label}</Label>
+				<Input
+					id="email"
+					type="email"
+					name="email"
+					autofocus
+					placeholder={i18n?.magic_link?.email_input_placeholder}
+					bind:value={email}
+					autocomplete="email"
+					{appearance}
+				/>
+			</div>
+			<Button type="submit" color="primary" {loading} {appearance}>
+				{loading ? i18n?.magic_link?.loading_button_label : i18n?.magic_link?.button_label}
+			</Button>
+		</Container>
+
+		{#if showLinks}
+			<Anchor
+				on:click={(e) => {
+					e.preventDefault();
+					authView = VIEWS.SIGN_IN;
+				}}
+				href="#auth-sign-in"
+				{appearance}>{i18n?.sign_in?.link_text}</Anchor
+			>
+		{/if}
+		{#if message}
+			<Message {appearance}>
+				{message}
+			</Message>
+		{/if}
+		{#if error}
+			<Message color="danger" {appearance}>
+				{error}
+			</Message>
+		{/if}
+	</Container>
+</form>
+
+<style>
+	form {
+		width: 100%;
+	}
+</style>

package/dist/Auth/interfaces/MagicLink.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import { type I18nVariables, type ViewType } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        i18n: I18nVariables;
+        supabaseClient: IndobaseClient;
+        authView: ViewType;
+        redirectTo?: string | undefined;
+        appearance: Appearance;
+        showLinks?: boolean | undefined;
+        email?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MagicLinkProps = typeof __propDef.props;
+export type MagicLinkEvents = typeof __propDef.events;
+export type MagicLinkSlots = typeof __propDef.slots;
+export default class MagicLink extends SvelteComponentTyped<MagicLinkProps, MagicLinkEvents, MagicLinkSlots> {
+}
+export {};

package/dist/Auth/interfaces/SocialAuth.svelte

@@ -0,0 +1,68 @@
+<script>import { template } from '@indobaseinc/auth-ui-shared';
+import Button from '../../UI/Button.svelte';
+import Container from '../../UI/Container.svelte';
+import Icons from '../Icons.svelte';
+import Divider from '../../UI/Divider.svelte';
+export let supabaseClient;
+export let socialLayout;
+export let redirectTo = undefined;
+export let onlyThirdPartyProviders;
+export let i18n;
+export let providers = [];
+export let providerScopes;
+export let queryParams;
+export let appearance;
+let error = '';
+let loading = false;
+$: verticalSocialLayout = socialLayout === 'vertical' ? true : false;
+async function handleProviderSignIn(provider) {
+    loading = true;
+    error = '';
+    const { error: providerSigninError } = await supabaseClient.auth.signInWithOAuth({
+        provider,
+        options: {
+            redirectTo,
+            scopes: providerScopes?.[provider],
+            queryParams
+        }
+    });
+    if (providerSigninError)
+        error = providerSigninError.message;
+    loading = false;
+}
+function capitalize(word) {
+    return word[0].toUpperCase() + word.slice(1).toLowerCase();
+}
+let iconTitle = (provider) => template(i18n['sign_in']?.social_provider_text, {
+    provider: capitalize(provider)
+});
+</script>
+
+{#if providers.length}
+	<Container direction="vertical" gap="large" {appearance}>
+		<Container
+			direction={verticalSocialLayout ? 'vertical' : 'horizontal'}
+			gap={verticalSocialLayout ? 'small' : 'medium'}
+			{appearance}
+		>
+			{#each providers as provider}
+				<Button
+					aria-label={iconTitle(provider)}
+					on:click={() => handleProviderSignIn(provider)}
+					type="submit"
+					color="default"
+					{loading}
+					{appearance}
+				>
+					<Icons {provider} />
+					{#if verticalSocialLayout}
+						{iconTitle(provider)}
+					{/if}
+				</Button>
+			{/each}
+		</Container>
+	</Container>
+	{#if !onlyThirdPartyProviders}
+		<Divider {appearance} />
+	{/if}
+{/if}

package/dist/Auth/interfaces/SocialAuth.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Provider } from '@indobaseinc/auth-js';
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import { type I18nVariables, type SocialLayout, type ProviderScopes } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        supabaseClient: IndobaseClient;
+        socialLayout: SocialLayout;
+        redirectTo?: string | undefined;
+        onlyThirdPartyProviders: boolean;
+        i18n: I18nVariables;
+        providers?: Provider[] | undefined;
+        providerScopes: Partial<ProviderScopes> | undefined;
+        queryParams: {
+            [key: string]: string;
+        } | undefined;
+        appearance: Appearance;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SocialAuthProps = typeof __propDef.props;
+export type SocialAuthEvents = typeof __propDef.events;
+export type SocialAuthSlots = typeof __propDef.slots;
+export default class SocialAuth extends SvelteComponentTyped<SocialAuthProps, SocialAuthEvents, SocialAuthSlots> {
+}
+export {};

package/dist/Auth/interfaces/UpdatePassword.svelte

@@ -0,0 +1,90 @@
+<script>import Anchor from '../../UI/Anchor.svelte';
+import Button from '../../UI/Button.svelte';
+import Container from '../../UI/Container.svelte';
+import Input from '../../UI/Input.svelte';
+import Label from '../../UI/Label.svelte';
+import Message from '../../UI/Message.svelte';
+import { VIEWS } from '@indobaseinc/auth-ui-shared';
+export let i18n;
+export let supabaseClient;
+export let authView;
+export let appearance;
+export let passwordLimit;
+export let showLinks = false;
+let password = '';
+let message = '';
+let error = '';
+let loading = false;
+async function handleSubmit() {
+    loading = true;
+    error = '';
+    message = '';
+    if (passwordLimit && password.length > 72) {
+        error = 'Password exceeds maxmium length of 72 characters';
+        loading = false;
+        return;
+    }
+    const { data, error: resetPasswordError } = await supabaseClient.auth.updateUser({
+        password
+    });
+    if (resetPasswordError)
+        error = resetPasswordError.message;
+    else
+        message = i18n.update_password?.confirmation_text;
+    loading = false;
+}
+</script>
+
+<form id="auth-update-password" method="post" on:submit|preventDefault={handleSubmit}>
+	<Container direction="vertical" gap="large" {appearance}>
+		<Container direction="vertical" gap="large" {appearance}>
+			<div>
+				<Label for="password" {appearance}>
+					{i18n?.update_password?.password_label}
+				</Label>
+				<Input
+					id="password"
+					type="password"
+					name="password"
+					autofocus
+					placeholder={i18n?.update_password?.password_input_placeholder}
+					bind:value={password}
+					autocomplete="password"
+					{appearance}
+				/>
+			</div>
+			<Button type="submit" color="primary" {loading} {appearance}>
+				{loading
+					? i18n?.update_password?.loading_button_label
+					: i18n?.update_password?.button_label}
+			</Button>
+		</Container>
+
+		{#if showLinks}
+			<Anchor
+				on:click={(e) => {
+					e.preventDefault();
+					authView = VIEWS.SIGN_IN;
+				}}
+				href="#auth-magic-link"
+				{appearance}>{i18n?.sign_in?.link_text}</Anchor
+			>
+		{/if}
+		{#if message}
+			<Message {appearance}>
+				{message}
+			</Message>
+		{/if}
+		{#if error}
+			<Message color="danger" {appearance}>
+				{error}
+			</Message>
+		{/if}
+	</Container>
+</form>
+
+<style>
+	form {
+		width: 100%;
+	}
+</style>

package/dist/Auth/interfaces/UpdatePassword.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IndobaseClient } from '@indobaseinc/indobase-js';
+import { type I18nVariables, type ViewType } from '@indobaseinc/auth-ui-shared';
+import type { Appearance } from '../../types';
+declare const __propDef: {
+    props: {
+        i18n: I18nVariables;
+        supabaseClient: IndobaseClient;
+        authView: ViewType;
+        appearance: Appearance;
+        passwordLimit: boolean;
+        showLinks?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UpdatePasswordProps = typeof __propDef.props;
+export type UpdatePasswordEvents = typeof __propDef.events;
+export type UpdatePasswordSlots = typeof __propDef.slots;
+export default class UpdatePassword extends SvelteComponentTyped<UpdatePasswordProps, UpdatePasswordEvents, UpdatePasswordSlots> {
+}
+export {};