svelte-firekit 0.0.10 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/auth/reset-password.svelte +27 -15
  2. package/dist/auth/reset-password.svelte.d.ts +7 -17
  3. package/dist/auth/sign-in.svelte +51 -23
  4. package/dist/auth/sign-in.svelte.d.ts +11 -1
  5. package/dist/auth/sign-up.svelte +62 -23
  6. package/dist/auth/sign-up.svelte.d.ts +13 -0
  7. package/dist/components/app/nav/app-sidebar.svelte +35 -0
  8. package/dist/components/app/nav/app-sidebar.svelte.d.ts +8 -0
  9. package/dist/components/app/nav/breadcrumb.svelte +42 -0
  10. package/dist/components/app/nav/breadcrumb.svelte.d.ts +19 -0
  11. package/dist/components/auth/google-sign-in.svelte +55 -53
  12. package/dist/components/auth/reset-password-form.svelte +49 -47
  13. package/dist/components/auth/reset-password-form.svelte.d.ts +3 -17
  14. package/dist/components/auth/sign-in-form.svelte +21 -5
  15. package/dist/components/auth/sign-in-form.svelte.d.ts +7 -17
  16. package/dist/components/auth/sign-up-form.svelte +127 -110
  17. package/dist/components/auth/sign-up-form.svelte.d.ts +10 -17
  18. package/dist/components/auth/user-button/profile-section/avatar-user.svelte +107 -0
  19. package/dist/components/auth/user-button/profile-section/avatar-user.svelte.d.ts +2 -0
  20. package/dist/components/auth/user-button/profile-section/connect-user.svelte +45 -0
  21. package/dist/components/auth/user-button/profile-section/connect-user.svelte.d.ts +18 -0
  22. package/dist/components/auth/user-button/profile-section/email-user.svelte +81 -0
  23. package/dist/components/auth/user-button/profile-section/email-user.svelte.d.ts +2 -0
  24. package/dist/components/auth/user-button/profile-section/phone-user.svelte +122 -0
  25. package/dist/components/auth/user-button/profile-section/phone-user.svelte.d.ts +2 -0
  26. package/dist/components/auth/user-button/profile-section/profile-section.svelte +17 -0
  27. package/dist/components/auth/user-button/profile-section/profile-section.svelte.d.ts +18 -0
  28. package/dist/components/auth/user-button/settings-dialog.svelte +80 -87
  29. package/dist/components/auth/user-button/type-account.svelte +35 -0
  30. package/dist/components/auth/user-button/type-account.svelte.d.ts +4 -0
  31. package/dist/components/auth/user-button/user-button.svelte +122 -112
  32. package/dist/components/nav/nav-main.svelte +70 -0
  33. package/dist/components/nav/nav-main.svelte.d.ts +18 -0
  34. package/dist/components/ui/badge/badge.svelte +49 -0
  35. package/dist/components/ui/badge/badge.svelte.d.ts +59 -0
  36. package/dist/components/ui/badge/index.d.ts +2 -0
  37. package/dist/components/ui/badge/index.js +2 -0
  38. package/dist/components/ui/collapsible/index.d.ts +5 -0
  39. package/dist/components/ui/collapsible/index.js +7 -0
  40. package/dist/config.d.ts +2 -0
  41. package/dist/config.js +28 -0
  42. package/dist/firebase/auth/auth-guard.svelte.d.ts +0 -30
  43. package/dist/firebase/auth/auth-guard.svelte.js +119 -103
  44. package/dist/firebase/auth/auth-manager.svelte.d.ts +73 -0
  45. package/dist/firebase/auth/auth-manager.svelte.js +257 -0
  46. package/dist/firebase/auth/auth.js +2 -2
  47. package/dist/firebase/auth/user.svelte.d.ts +0 -53
  48. package/dist/firebase/auth/user.svelte.js +177 -134
  49. package/dist/firebase/firestore/document-mutations.svelte.d.ts +1 -1
  50. package/dist/firebase/firestore/document-mutations.svelte.js +18 -13
  51. package/dist/firebase/storage/upload-task.svelte.d.ts +1 -0
  52. package/dist/firebase/storage/upload-task.svelte.js +4 -2
  53. package/dist/index.d.ts +1 -3
  54. package/dist/index.js +3 -3
  55. package/dist/types/nav.d.ts +4 -0
  56. package/package.json +4 -2
@@ -1,20 +1,32 @@
1
1
  <script lang="ts">
2
- import ResetPasswordForm from "../components/auth/reset-password-form.svelte";
3
- import Button from "../components/ui/button/button.svelte";
4
- import * as Card from "../components/ui/card/index.js";
2
+ import ResetPasswordForm from "../components/auth/reset-password-form.svelte";
3
+ import Button from "../components/ui/button/button.svelte";
4
+ import * as Card from "../components/ui/card/index.js";
5
+
6
+ let {
7
+ title,
8
+ subtitle,
9
+ labelLink,
10
+ link,
11
+ redirect,
12
+ }: {
13
+ title: string;
14
+ subtitle: string;
15
+ labelLink: string;
16
+ link: string;
17
+ redirect: string;
18
+ } = $props();
5
19
  </script>
6
20
 
7
21
  <Card.Root class="sm:w-[448px]">
8
- <Card.Header>
9
- <Card.Title class="text-center text-2xl">Forgot password?</Card.Title>
10
- <Card.Description class="text-center">
11
- Remember your password?
12
- <Button variant="link" href="/sign-in" class="p-0"
13
- >Sign in here</Button
14
- >
15
- </Card.Description>
16
- </Card.Header>
17
- <Card.Content>
18
- <ResetPasswordForm />
19
- </Card.Content>
22
+ <Card.Header>
23
+ <Card.Title class="text-center text-2xl">{title}</Card.Title>
24
+ <Card.Description class="text-center">
25
+ {subtitle}
26
+ <Button variant="link" href={link} class="p-0">{labelLink}</Button>
27
+ </Card.Description>
28
+ </Card.Header>
29
+ <Card.Content>
30
+ <ResetPasswordForm {redirect} />
31
+ </Card.Content>
20
32
  </Card.Root>
@@ -1,18 +1,8 @@
1
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
- $$bindings?: Bindings;
4
- } & Exports;
5
- (internal: unknown, props: {
6
- $$events?: Events;
7
- $$slots?: Slots;
8
- }): Exports & {
9
- $set?: any;
10
- $on?: any;
11
- };
12
- z_$$bindings?: Bindings;
13
- }
14
- declare const ResetPassword: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
15
- [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
17
- type ResetPassword = InstanceType<typeof ResetPassword>;
1
+ declare const ResetPassword: import("svelte").Component<{
2
+ title: string;
3
+ subtitle: string;
4
+ labelLink: string;
5
+ link: string;
6
+ redirect: string;
7
+ }, {}, "">;
18
8
  export default ResetPassword;
@@ -1,30 +1,58 @@
1
1
  <script lang="ts">
2
- import SignInWithGoogle from "../components/auth/google-sign-in.svelte";
3
- import SignInForm from "../components/auth/sign-in-form.svelte";
4
- import Button from "../components/ui/button/button.svelte";
5
- import * as Card from "../components/ui/card/index.js";
6
- let { title = "Sign in" }: { title?: string } = $props();
2
+ import SignInWithGoogle from "../components/auth/google-sign-in.svelte";
3
+ import SignInForm from "../components/auth/sign-in-form.svelte";
4
+ import Button from "../components/ui/button/button.svelte";
5
+ import * as Card from "../components/ui/card/index.js";
6
+ let {
7
+ title = "Sign in",
8
+ subtitle = "Don't have an account yet?",
9
+ textLink = "Sign up here",
10
+ link = "/sign-up",
11
+ labelBtnGoogle = "Sign in with",
12
+ labelEmail = "Email",
13
+ labelPassword = "Password",
14
+ labellLinkEmailForm = "I forgot my password",
15
+ linkForgetPassword = "/reset-password",
16
+ labelBtnFormEmail = "Sign",
17
+ labelDivider = "Or",
18
+ }: {
19
+ title: string;
20
+ subtitle: string;
21
+ textLink: string;
22
+ link: string;
23
+ labelBtnGoogle: string;
24
+ labelEmail: string;
25
+ labelPassword: string;
26
+ labellLinkEmailForm: string;
27
+ linkForgetPassword: string;
28
+ labelBtnFormEmail: string;
29
+ labelDivider: string;
30
+ } = $props();
7
31
  </script>
8
32
 
9
33
  <Card.Root class="sm:w-[448px]">
10
- <Card.Header>
11
- <Card.Title class="text-center text-2xl">{title}</Card.Title>
12
- <Card.Description class="text-center">
13
- Don't have an account yet?
14
- <Button variant="link" href="/sign-up" class="p-0"
15
- >Sign up here</Button
16
- >
17
- </Card.Description>
18
- </Card.Header>
19
- <Card.Content class="space-y-5">
20
- <SignInWithGoogle label="Sign in" />
34
+ <Card.Header>
35
+ <Card.Title class="text-center text-2xl">{title}</Card.Title>
36
+ <Card.Description class="text-center">
37
+ {subtitle}
38
+ <Button variant="link" href={link} class="p-0">{textLink}</Button>
39
+ </Card.Description>
40
+ </Card.Header>
41
+ <Card.Content class="space-y-5">
42
+ <SignInWithGoogle label={labelBtnGoogle} />
21
43
 
22
- <div
23
- class="before:muted-foreground after:muted-foreground flex items-center text-xs uppercase text-muted-foreground before:me-6 before:flex-1 before:border-t after:ms-6 after:flex-1 after:border-t dark:before:border-muted-foreground dark:after:border-muted-foreground"
24
- >
25
- Or
26
- </div>
44
+ <div
45
+ class="before:muted-foreground after:muted-foreground flex items-center text-xs uppercase text-muted-foreground before:me-6 before:flex-1 before:border-t after:ms-6 after:flex-1 after:border-t dark:before:border-muted-foreground dark:after:border-muted-foreground"
46
+ >
47
+ {labelDivider}
48
+ </div>
27
49
 
28
- <SignInForm />
29
- </Card.Content>
50
+ <SignInForm
51
+ {labelEmail}
52
+ {labelPassword}
53
+ {labellLinkEmailForm}
54
+ {linkForgetPassword}
55
+ {labelBtnFormEmail}
56
+ />
57
+ </Card.Content>
30
58
  </Card.Root>
@@ -1,4 +1,14 @@
1
1
  declare const SignIn: import("svelte").Component<{
2
- title?: string;
2
+ title: string;
3
+ subtitle: string;
4
+ textLink: string;
5
+ link: string;
6
+ labelBtnGoogle: string;
7
+ labelEmail: string;
8
+ labelPassword: string;
9
+ labellLinkEmailForm: string;
10
+ linkForgetPassword: string;
11
+ labelBtnFormEmail: string;
12
+ labelDivider: string;
3
13
  }, {}, "">;
4
14
  export default SignIn;
@@ -1,30 +1,69 @@
1
1
  <script lang="ts">
2
- import SignInWithGoogle from "../components/auth/google-sign-in.svelte";
3
- import SignUpForm from "../components/auth/sign-up-form.svelte";
4
- import Button from "../components/ui/button/button.svelte";
5
- import * as Card from "../components/ui/card/index.js";
6
- let { title = "Sign up" }: { title: string } = $props();
2
+ import SignInWithGoogle from "../components/auth/google-sign-in.svelte";
3
+ import SignUpForm from "../components/auth/sign-up-form.svelte";
4
+ import Button from "../components/ui/button/button.svelte";
5
+ import * as Card from "../components/ui/card/index.js";
6
+ // let { title = "Sign up" }: { title: string } = $props();
7
+
8
+ let {
9
+ title = "Sign up",
10
+ subtitle = "Already have an account?",
11
+ labelLink = "Sign in here",
12
+ link = "/sign-in",
13
+ labelBtnGoogle = "Sign up with",
14
+ labelFisrtName = "First Name",
15
+ labelLastName = "Last Name",
16
+ labelEmail = "Email",
17
+ labelPassword = "Password",
18
+ linkTerms = "/terms-and-conditions",
19
+ labelTerms = "I accept the",
20
+ labelLinkTerms = "Terms and Conditions",
21
+ labelBtnFormEmail = "Sign up",
22
+ labelDivider = "Or",
23
+ }: {
24
+ title: string;
25
+ subtitle: string;
26
+ labelLink: string;
27
+ link: string;
28
+ labelBtnGoogle: string;
29
+ labelFisrtName: string;
30
+ labelLastName: string;
31
+ labelEmail: string;
32
+ labelPassword: string;
33
+ linkTerms: string;
34
+ labelTerms: string;
35
+ labelLinkTerms: string;
36
+ labelBtnFormEmail: string;
37
+ labelDivider: string;
38
+ } = $props();
7
39
  </script>
8
40
 
9
41
  <Card.Root class="sm:w-[448px]">
10
- <Card.Header>
11
- <Card.Title class="text-center text-2xl">{title}</Card.Title>
12
- <Card.Description class="text-center">
13
- Already have an account?
14
- <Button variant="link" href="/sign-in" class="p-0"
15
- >Sign in here</Button
16
- >
17
- </Card.Description>
18
- </Card.Header>
19
- <Card.Content class="space-y-5">
20
- <SignInWithGoogle label="Sign up" />
42
+ <Card.Header>
43
+ <Card.Title class="text-center text-2xl">{title}</Card.Title>
44
+ <Card.Description class="text-center">
45
+ {subtitle}
46
+ <Button variant="link" href={link} class="p-0">{labelLink}</Button>
47
+ </Card.Description>
48
+ </Card.Header>
49
+ <Card.Content class="space-y-5">
50
+ <SignInWithGoogle label={labelBtnGoogle} />
21
51
 
22
- <div
23
- class="before:muted-foreground after:muted-foreground flex items-center text-xs uppercase text-muted-foreground before:me-6 before:flex-1 before:border-t after:ms-6 after:flex-1 after:border-t dark:before:border-muted-foreground dark:after:border-muted-foreground"
24
- >
25
- Or
26
- </div>
52
+ <div
53
+ class="before:muted-foreground after:muted-foreground flex items-center text-xs uppercase text-muted-foreground before:me-6 before:flex-1 before:border-t after:ms-6 after:flex-1 after:border-t dark:before:border-muted-foreground dark:after:border-muted-foreground"
54
+ >
55
+ {labelDivider}
56
+ </div>
27
57
 
28
- <SignUpForm />
29
- </Card.Content>
58
+ <SignUpForm
59
+ {labelFisrtName}
60
+ {labelLastName}
61
+ {labelEmail}
62
+ {labelPassword}
63
+ {linkTerms}
64
+ {labelTerms}
65
+ {labelLinkTerms}
66
+ {labelBtnFormEmail}
67
+ />
68
+ </Card.Content>
30
69
  </Card.Root>
@@ -1,4 +1,17 @@
1
1
  declare const SignUp: import("svelte").Component<{
2
2
  title: string;
3
+ subtitle: string;
4
+ labelLink: string;
5
+ link: string;
6
+ labelBtnGoogle: string;
7
+ labelFisrtName: string;
8
+ labelLastName: string;
9
+ labelEmail: string;
10
+ labelPassword: string;
11
+ linkTerms: string;
12
+ labelTerms: string;
13
+ labelLinkTerms: string;
14
+ labelBtnFormEmail: string;
15
+ labelDivider: string;
3
16
  }, {}, "">;
4
17
  export default SignUp;
@@ -0,0 +1,35 @@
1
+ <script lang="ts">
2
+ import * as Sidebar from "../../ui/sidebar/index.js";
3
+ import type { ComponentProps } from "svelte";
4
+ // import SidebarOptInForm from "./sidebar-opt-in-form.svelte";
5
+ import { firekitAuthManager } from "../../../firebase/auth/auth-manager.svelte.js";
6
+ import UserButton from "../../auth/user-button/user-button.svelte";
7
+ import NavMain from "../../nav/nav-main.svelte";
8
+
9
+ let {
10
+ ref = $bindable(null),
11
+ collapsible = "icon",
12
+ ...restProps
13
+ }: ComponentProps<typeof Sidebar.Root> = $props();
14
+ </script>
15
+
16
+ <Sidebar.Root bind:ref {collapsible} {...restProps}>
17
+ <Sidebar.Header>
18
+ <section class="flex justify-center items-center gap-2 my-4">
19
+ <UserButton></UserButton>
20
+ <div class="flex flex-col">
21
+ <small>{firekitAuthManager.data?.displayName}</small>
22
+ <small>{firekitAuthManager.data?.email}</small>
23
+ </div>
24
+ </section>
25
+ </Sidebar.Header>
26
+ <Sidebar.Content>
27
+ <NavMain />
28
+ </Sidebar.Content>
29
+ <Sidebar.Footer>
30
+ <div class="p-1">
31
+ <!-- <SidebarOptInForm /> -->
32
+ </div>
33
+ </Sidebar.Footer>
34
+ <Sidebar.Rail />
35
+ </Sidebar.Root>
@@ -0,0 +1,8 @@
1
+ declare const AppSidebar: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
2
+ ref?: HTMLElement | null | undefined;
3
+ } & {
4
+ side?: "left" | "right";
5
+ variant?: "sidebar" | "floating" | "inset";
6
+ collapsible?: "offcanvas" | "icon" | "none";
7
+ }, {}, "ref">;
8
+ export default AppSidebar;
@@ -0,0 +1,42 @@
1
+ <script lang="ts">
2
+ import { page } from "$app/stores";
3
+ import { derived } from "svelte/store";
4
+ import * as Breadcrumb from "../../ui/breadcrumb/index.js";
5
+
6
+ // Create a derived store to get breadcrumb items from the URL
7
+ const breadcrumbs = derived(page, ($page) => {
8
+ const path = $page.url.pathname;
9
+ const segments = path.split("/").filter(Boolean); // split path and remove empty segments
10
+ const breadcrumbItems = segments.map((segment, index) => {
11
+ // Construct the path up to this segment
12
+ const href = "/" + segments.slice(0, index + 1).join("/");
13
+ return {
14
+ name: segment
15
+ .replace(/-/g, " ")
16
+ .replace(/\b\w/g, (char) => char.toUpperCase()),
17
+ href,
18
+ };
19
+ });
20
+ return breadcrumbItems;
21
+ });
22
+ </script>
23
+
24
+ <Breadcrumb.Root>
25
+ <Breadcrumb.List>
26
+ {#each $breadcrumbs as breadcrumb, i}
27
+ {#if i > 0}
28
+ <Breadcrumb.Separator class="hidden md:block" />
29
+ {/if}
30
+ <Breadcrumb.Item>
31
+ <!-- Check if it's the last breadcrumb item to render as Page instead of Link -->
32
+ {#if i === $breadcrumbs.length - 1}
33
+ <Breadcrumb.Page>{breadcrumb.name}</Breadcrumb.Page>
34
+ {:else}
35
+ <Breadcrumb.Link href={breadcrumb.href}
36
+ >{breadcrumb.name}</Breadcrumb.Link
37
+ >
38
+ {/if}
39
+ </Breadcrumb.Item>
40
+ {/each}
41
+ </Breadcrumb.List>
42
+ </Breadcrumb.Root>
@@ -0,0 +1,19 @@
1
+ import * as Breadcrumb from "../../ui/breadcrumb/index.js";
2
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
3
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
+ [evt: string]: CustomEvent<any>;
17
+ }, {}, {}, string>;
18
+ type Breadcrumb = InstanceType<typeof Breadcrumb>;
19
+ export default Breadcrumb;
@@ -1,60 +1,62 @@
1
1
  <script lang="ts">
2
- import { firekitAuth } from "../../firebase/auth/auth.js";
3
- import { toast } from "svelte-sonner";
2
+ import { firekitAuth } from "../../firebase/auth/auth.js";
3
+ import { toast } from "svelte-sonner";
4
4
 
5
- import Button from "../ui/button/button.svelte";
6
- let { label = "Sign in" }: { label: string } = $props();
5
+ import Button from "../ui/button/button.svelte";
6
+ import { goto } from "$app/navigation";
7
+ let { label = "Sign in with" }: { label: string } = $props();
7
8
 
8
- async function signInWithGoogle() {
9
- try {
10
- await firekitAuth.signInWithGoogle();
11
- } catch (error) {
12
- if (error instanceof Error) {
13
- toast.error(error.message);
14
- } else {
15
- toast.error("An error occurred");
16
- }
17
- }
18
- }
9
+ async function signInWithGoogle() {
10
+ try {
11
+ await firekitAuth.signInWithGoogle();
12
+ await goto("/dashboard");
13
+ } catch (error) {
14
+ if (error instanceof Error) {
15
+ toast.error(error.message);
16
+ } else {
17
+ toast.error("An error occurred");
18
+ }
19
+ }
20
+ }
19
21
  </script>
20
22
 
21
23
  <Button onclick={signInWithGoogle} class="w-full gap-2" variant="outline">
22
- <svg
23
- class="h-4 w-4 flex-shrink-0"
24
- width="33"
25
- height="32"
26
- viewBox="0 0 33 32"
27
- fill="none"
28
- xmlns="http://www.w3.org/2000/svg"
29
- >
30
- <g clip-path="url(#clip0_4132_5805)">
31
- <path
32
- d="M32.2566 16.36C32.2566 15.04 32.1567 14.08 31.9171 13.08H16.9166V19.02H25.7251C25.5454 20.5 24.5866 22.72 22.4494 24.22L22.4294 24.42L27.1633 28.1L27.4828 28.14C30.5189 25.34 32.2566 21.22 32.2566 16.36Z"
33
- fill="#4285F4"
34
- />
35
- <path
36
- d="M16.9166 32C21.231 32 24.8463 30.58 27.5028 28.12L22.4694 24.2C21.1111 25.14 19.3135 25.8 16.9366 25.8C12.7021 25.8 9.12677 23 7.84844 19.16L7.66867 19.18L2.71513 23L2.65521 23.18C5.2718 28.4 10.6648 32 16.9166 32Z"
37
- fill="#34A853"
38
- />
39
- <path
40
- d="M7.82845 19.16C7.48889 18.16 7.28915 17.1 7.28915 16C7.28915 14.9 7.48889 13.84 7.80848 12.84V12.62L2.81499 8.73999L2.6552 8.81999C1.55663 10.98 0.937439 13.42 0.937439 16C0.937439 18.58 1.55663 21.02 2.63522 23.18L7.82845 19.16Z"
41
- fill="#FBBC05"
42
- />
43
- <path
44
- d="M16.9166 6.18C19.9127 6.18 21.9501 7.48 23.0886 8.56L27.6027 4.16C24.8263 1.58 21.231 0 16.9166 0C10.6648 0 5.27181 3.6 2.63525 8.82L7.80851 12.84C9.10681 8.98 12.6821 6.18 16.9166 6.18Z"
45
- fill="#EB4335"
46
- />
47
- </g>
48
- <defs>
49
- <clipPath id="clip0_4132_5805">
50
- <rect
51
- width="32"
52
- height="32"
53
- fill="white"
54
- transform="translate(0.937439)"
55
- />
56
- </clipPath>
57
- </defs>
58
- </svg>
59
- {label} with Google
24
+ <svg
25
+ class="h-4 w-4 flex-shrink-0"
26
+ width="33"
27
+ height="32"
28
+ viewBox="0 0 33 32"
29
+ fill="none"
30
+ xmlns="http://www.w3.org/2000/svg"
31
+ >
32
+ <g clip-path="url(#clip0_4132_5805)">
33
+ <path
34
+ d="M32.2566 16.36C32.2566 15.04 32.1567 14.08 31.9171 13.08H16.9166V19.02H25.7251C25.5454 20.5 24.5866 22.72 22.4494 24.22L22.4294 24.42L27.1633 28.1L27.4828 28.14C30.5189 25.34 32.2566 21.22 32.2566 16.36Z"
35
+ fill="#4285F4"
36
+ />
37
+ <path
38
+ d="M16.9166 32C21.231 32 24.8463 30.58 27.5028 28.12L22.4694 24.2C21.1111 25.14 19.3135 25.8 16.9366 25.8C12.7021 25.8 9.12677 23 7.84844 19.16L7.66867 19.18L2.71513 23L2.65521 23.18C5.2718 28.4 10.6648 32 16.9166 32Z"
39
+ fill="#34A853"
40
+ />
41
+ <path
42
+ d="M7.82845 19.16C7.48889 18.16 7.28915 17.1 7.28915 16C7.28915 14.9 7.48889 13.84 7.80848 12.84V12.62L2.81499 8.73999L2.6552 8.81999C1.55663 10.98 0.937439 13.42 0.937439 16C0.937439 18.58 1.55663 21.02 2.63522 23.18L7.82845 19.16Z"
43
+ fill="#FBBC05"
44
+ />
45
+ <path
46
+ d="M16.9166 6.18C19.9127 6.18 21.9501 7.48 23.0886 8.56L27.6027 4.16C24.8263 1.58 21.231 0 16.9166 0C10.6648 0 5.27181 3.6 2.63525 8.82L7.80851 12.84C9.10681 8.98 12.6821 6.18 16.9166 6.18Z"
47
+ fill="#EB4335"
48
+ />
49
+ </g>
50
+ <defs>
51
+ <clipPath id="clip0_4132_5805">
52
+ <rect
53
+ width="32"
54
+ height="32"
55
+ fill="white"
56
+ transform="translate(0.937439)"
57
+ />
58
+ </clipPath>
59
+ </defs>
60
+ </svg>
61
+ {label} Google
60
62
  </Button>
@@ -1,57 +1,59 @@
1
1
  <script lang="ts">
2
- import { goto } from "$app/navigation";
3
- import { firekitAuth } from "../../firebase/auth/auth.js";
2
+ import { goto } from "$app/navigation";
3
+ import { firekitAuth } from "../../firebase/auth/auth.js";
4
4
 
5
- import * as Form from "../ui/form/index.js";
6
- import { Input } from "../ui/input/index.js";
7
- import { resetPasswordSchema } from "../../schemas/reset-password.js";
8
- import { toast } from "svelte-sonner";
9
- import { superForm, defaults } from "sveltekit-superforms";
10
- import { valibot } from "sveltekit-superforms/adapters";
5
+ import * as Form from "../ui/form/index.js";
6
+ import { Input } from "../ui/input/index.js";
7
+ import { resetPasswordSchema } from "../../schemas/reset-password.js";
8
+ import { toast } from "svelte-sonner";
9
+ import { superForm, defaults } from "sveltekit-superforms";
10
+ import { valibot } from "sveltekit-superforms/adapters";
11
11
 
12
- const data = defaults(valibot(resetPasswordSchema));
12
+ let { redirect }: { redirect: string } = $props();
13
13
 
14
- const form = superForm(data, {
15
- validators: valibot(resetPasswordSchema),
16
- dataType: "json",
17
- SPA: true,
18
- resetForm: false,
19
- clearOnSubmit: "errors-and-message",
20
- async onUpdate({ form }) {
21
- if (!form.valid) return;
22
- try {
23
- const { data } = form;
24
- const { email } = data;
25
- await firekitAuth.sendPasswordReset(email);
26
- toast.success("Password reset email sent");
27
- goto("/sign-in");
28
- } catch (error) {
29
- if (error instanceof Error) {
30
- toast.error(error.message);
31
- } else {
32
- toast.error("An error occurred");
33
- }
34
- }
35
- },
36
- });
14
+ const data = defaults(valibot(resetPasswordSchema));
37
15
 
38
- const { form: formData, enhance } = form;
16
+ const form = superForm(data, {
17
+ validators: valibot(resetPasswordSchema),
18
+ dataType: "json",
19
+ SPA: true,
20
+ resetForm: false,
21
+ clearOnSubmit: "errors-and-message",
22
+ async onUpdate({ form }) {
23
+ if (!form.valid) return;
24
+ try {
25
+ const { data } = form;
26
+ const { email } = data;
27
+ await firekitAuth.sendPasswordReset(email);
28
+ toast.success("Password reset email sent");
29
+ goto(redirect);
30
+ } catch (error) {
31
+ if (error instanceof Error) {
32
+ toast.error(error.message);
33
+ } else {
34
+ toast.error("An error occurred");
35
+ }
36
+ }
37
+ },
38
+ });
39
+
40
+ const { form: formData, enhance } = form;
39
41
  </script>
40
42
 
41
43
  <form method="POST" use:enhance class="space-y-4">
42
- <Form.Field {form} name="email">
43
- <Form.Control>
44
- {#snippet children({ props })}
45
- <Form.Label>Email address</Form.Label>
46
- <Input
47
- {...props}
48
- bind:value={$formData.email}
49
- placeholder="you@email.com"
50
- />
51
- {/snippet}
52
- </Form.Control>
53
- <Form.FieldErrors />
54
- </Form.Field>
44
+ <Form.Field {form} name="email">
45
+ <Form.Control>
46
+ {#snippet children({ props })}
47
+ <Form.Label>Email address</Form.Label>
48
+ <Input
49
+ {...props}
50
+ bind:value={$formData.email}
51
+ placeholder="you@email.com"
52
+ />
53
+ {/snippet}
54
+ </Form.Control>
55
+ <Form.FieldErrors />
56
+ </Form.Field>
55
57
 
56
- <Form.Button class="w-full">Send Email</Form.Button>
58
+ <Form.Button class="w-full">Send Email</Form.Button>
57
59
  </form>
@@ -1,18 +1,4 @@
1
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
- $$bindings?: Bindings;
4
- } & Exports;
5
- (internal: unknown, props: {
6
- $$events?: Events;
7
- $$slots?: Slots;
8
- }): Exports & {
9
- $set?: any;
10
- $on?: any;
11
- };
12
- z_$$bindings?: Bindings;
13
- }
14
- declare const ResetPasswordForm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
15
- [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
17
- type ResetPasswordForm = InstanceType<typeof ResetPasswordForm>;
1
+ declare const ResetPasswordForm: import("svelte").Component<{
2
+ redirect: string;
3
+ }, {}, "">;
18
4
  export default ResetPasswordForm;