svelte-firekit 0.0.10 → 0.0.12

package/dist/components/auth/sign-in-form.svelte

@@ -6,6 +6,20 @@
 	import Button from "../ui/button/button.svelte";
 	import { valibot } from "sveltekit-superforms/adapters";
 
+	let {
+    labelEmail = "Email",
+    labelPassword = "Password",
+    labellLinkEmailForm = "I forgot my password",
+    linkForgetPassword = "/reset-password",
+    labelBtnFormEmail = "Sign",
+  }: {
+    labelEmail: string;
+    labelPassword: string;
+    labellLinkEmailForm: string;
+    linkForgetPassword: string;
+    labelBtnFormEmail: string;
+  } = $props();
+
 	const data = defaults(valibot(signInSchema));
 
 	import * as Form from "../ui/form/index.js";
@@ -35,13 +49,15 @@
 	});
 
 	const { form: formData, enhance } = form;
+
+	
 </script>
 
 <form method="POST" use:enhance class="space-y-2">
 	<Form.Field {form} name="email">
 		<Form.Control>
 			{#snippet children({ props })}
-				<Form.Label>Email</Form.Label>
+				<Form.Label>{labelEmail}</Form.Label>
 				<Input
 					{...props}
 					bind:value={$formData.email}
@@ -55,13 +71,13 @@
 		<Form.Control>
 			{#snippet children({ props })}
 				<div class="flex w-full items-center justify-between">
-					<Form.Label>Password</Form.Label>
+					<Form.Label>{labelPassword}</Form.Label>
 					<Button
 						variant="link"
 						class="text-sm"
-						href="/reset-password "
+						href={linkForgetPassword}
 					>
-						I forgot my password
+						{labellLinkEmailForm}
 					</Button>
 				</div>
 				<Input
@@ -74,5 +90,5 @@
 		</Form.Control>
 		<Form.FieldErrors />
 	</Form.Field>
-	<Form.Button class="w-full">Sign In</Form.Button>
+	<Form.Button class="w-full">{labelBtnFormEmail}</Form.Button>
 </form>

package/dist/components/auth/sign-in-form.svelte.d.ts

@@ -1,18 +1,8 @@
-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> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SignInForm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SignInForm = InstanceType<typeof SignInForm>;
+declare const SignInForm: import("svelte").Component<{
+    labelEmail: string;
+    labelPassword: string;
+    labellLinkEmailForm: string;
+    linkForgetPassword: string;
+    labelBtnFormEmail: string;
+}, {}, "">;
 export default SignInForm;

package/dist/components/auth/sign-up-form.svelte

@@ -1,119 +1,136 @@
 <script lang="ts">
-	import { firekitAuth } from "../../firebase/auth/auth.js";
+  import { firekitAuth } from "../../firebase/auth/auth.js";
 
-	import * as Form from "../ui/form/index.js";
-	import { Input } from "../ui/input/index.js";
-	import { signUpSchema } from "../../schemas/sign-up.js";
-	import { toast } from "svelte-sonner";
-	import { superForm, defaults } from "sveltekit-superforms";
-	import { valibot } from "sveltekit-superforms/adapters";
-	import Button from "../ui/button/button.svelte";
-	import Checkbox from "../ui/checkbox/checkbox.svelte";
-	const data = defaults(valibot(signUpSchema));
+  import * as Form from "../ui/form/index.js";
+  import { Input } from "../ui/input/index.js";
+  import { signUpSchema } from "../../schemas/sign-up.js";
+  import { toast } from "svelte-sonner";
+  import { superForm, defaults } from "sveltekit-superforms";
+  import { valibot } from "sveltekit-superforms/adapters";
+  import Button from "../ui/button/button.svelte";
+  import Checkbox from "../ui/checkbox/checkbox.svelte";
 
-	const form = superForm(data, {
-		validators: valibot(signUpSchema),
-		dataType: "json",
-		SPA: true,
-		resetForm: false,
-		clearOnSubmit: "errors-and-message",
-		async onUpdate({ form }) {
-			if (!form.valid) return;
-			try {
-				const { data } = form;
-				const { email, password, firstName, lastName } = data;
-				const displayName = `${firstName} ${lastName}`;
-				await firekitAuth.registerWithEmail(
-					email,
-					password,
-					displayName,
-				);
-				toast.success("Account created successfully");
-			} catch (error) {
-				if (error instanceof Error) {
-					toast.error(error.message);
-				} else {
-					toast.error("An error occurred");
-				}
-			}
-		},
-	});
+  let {
+    labelFisrtName,
+    labelLastName,
+    labelEmail,
+    labelPassword,
+    linkTerms,
+	labelTerms,
+	labelLinkTerms,
+    labelBtnFormEmail,
+  }: {
+    labelFisrtName: string;
+    labelLastName: string;
+    labelEmail: string;
+    labelPassword: string;
+    linkTerms: string;
+    labelTerms: string;
+    labelLinkTerms: string;
+    labelBtnFormEmail: string;
+  } = $props();
 
-	const { form: formData, enhance } = form;
+  const data = defaults(valibot(signUpSchema));
+
+  const form = superForm(data, {
+    validators: valibot(signUpSchema),
+    dataType: "json",
+    SPA: true,
+    resetForm: false,
+    clearOnSubmit: "errors-and-message",
+    async onUpdate({ form }) {
+      if (!form.valid) return;
+      try {
+        const { data } = form;
+        const { email, password, firstName, lastName } = data;
+        const displayName = `${firstName} ${lastName}`;
+        await firekitAuth.registerWithEmail(email, password, displayName);
+        toast.success("Account created successfully");
+      } catch (error) {
+        if (error instanceof Error) {
+          toast.error(error.message);
+        } else {
+          toast.error("An error occurred");
+        }
+      }
+    },
+  });
+
+  const { form: formData, enhance } = form;
+
+  
 </script>
 
 <form method="POST" use:enhance class="space-y-2">
-	<div class="grid grid-cols-2 gap-4">
-		<Form.Field {form} name="firstName">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>First Name</Form.Label>
-					<Input
-						{...props}
-						bind:value={$formData.firstName}
-						placeholder="John"
-					/>
-				{/snippet}
-			</Form.Control>
-			<Form.FieldErrors />
-		</Form.Field>
-		<Form.Field {form} name="lastName">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>First Name</Form.Label>
-					<Input
-						{...props}
-						bind:value={$formData.lastName}
-						placeholder="Smith"
-					/>
-				{/snippet}
-			</Form.Control>
-			<Form.FieldErrors />
-		</Form.Field>
-	</div>
-	<Form.Field {form} name="email">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Email</Form.Label>
-				<Input
-					{...props}
-					bind:value={$formData.email}
-					placeholder="you@email.com"
-				/>
-			{/snippet}
-		</Form.Control>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="password">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Password</Form.Label>
-				<Input
-					{...props}
-					bind:value={$formData.password}
-					placeholder="*********"
-					type="password"
-				/>
-			{/snippet}
-		</Form.Control>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="agreeToTerms">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Checkbox {...props} bind:checked={$formData.agreeToTerms} />
+  <div class="grid grid-cols-2 gap-4">
+    <Form.Field {form} name="firstName">
+      <Form.Control>
+        {#snippet children({ props })}
+          <Form.Label>{labelFisrtName}</Form.Label>
+          <Input
+            {...props}
+            bind:value={$formData.firstName}
+            placeholder="John"
+          />
+        {/snippet}
+      </Form.Control>
+      <Form.FieldErrors />
+    </Form.Field>
+    <Form.Field {form} name="lastName">
+      <Form.Control>
+        {#snippet children({ props })}
+          <Form.Label>{labelLastName}</Form.Label>
+          <Input
+            {...props}
+            bind:value={$formData.lastName}
+            placeholder="Smith"
+          />
+        {/snippet}
+      </Form.Control>
+      <Form.FieldErrors />
+    </Form.Field>
+  </div>
+  <Form.Field {form} name="email">
+    <Form.Control>
+      {#snippet children({ props })}
+        <Form.Label>{labelEmail}</Form.Label>
+        <Input
+          {...props}
+          bind:value={$formData.email}
+          placeholder="you@email.com"
+        />
+      {/snippet}
+    </Form.Control>
+    <Form.FieldErrors />
+  </Form.Field>
+  <Form.Field {form} name="password">
+    <Form.Control>
+      {#snippet children({ props })}
+        <Form.Label>{labelPassword}</Form.Label>
+        <Input
+          {...props}
+          bind:value={$formData.password}
+          placeholder="*********"
+          type="password"
+        />
+      {/snippet}
+    </Form.Control>
+    <Form.FieldErrors />
+  </Form.Field>
+  <Form.Field {form} name="agreeToTerms">
+    <Form.Control>
+      {#snippet children({ props })}
+        <Checkbox {...props} bind:checked={$formData.agreeToTerms} />
 
-				<Form.Label>
-					I accept the
-					<Button
-						variant="link"
-						href="/terms-and-conditions"
-						class="p-0">Terms and Conditions</Button
-					>
-				</Form.Label>
-			{/snippet}
-		</Form.Control>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Button class="w-full">Sign Up</Form.Button>
+        <Form.Label>
+          {labelTerms}
+          <Button variant="link" href={linkTerms} class="p-0"
+            >{labelLinkTerms}</Button
+          >
+        </Form.Label>
+      {/snippet}
+    </Form.Control>
+    <Form.FieldErrors />
+  </Form.Field>
+  <Form.Button class="w-full">{labelBtnFormEmail}</Form.Button>
 </form>

package/dist/components/auth/sign-up-form.svelte.d.ts

@@ -1,18 +1,11 @@
-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> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SignUpForm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SignUpForm = InstanceType<typeof SignUpForm>;
+declare const SignUpForm: import("svelte").Component<{
+    labelFisrtName: string;
+    labelLastName: string;
+    labelEmail: string;
+    labelPassword: string;
+    linkTerms: string;
+    labelTerms: string;
+    labelLinkTerms: string;
+    labelBtnFormEmail: string;
+}, {}, "">;
 export default SignUpForm;

package/dist/components/auth/user-button/profile-section/avatar-user.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import * as Avatar from "../../../ui/avatar/index.js";
+  import { firekitAuthManager } from "../../../../firebase/auth/auth-manager.svelte.js";
+
+  import { firekitUploadTask } from "../../../../firebase/storage/upload-task.svelte.js";
+  import { getInitials } from "../../../../utils.js";
+
+  $effect(() => {
+    console.log(progress);
+    if (progress === 100 && uploadTask?.downloadURL) {
+      console.log("updated data");
+      firekitAuthManager.updateUserData({ photoURL: uploadTask?.downloadURL });
+      firekitAuthManager.updateProfileInfo({
+        displayName: firekitAuthManager.data?.displayName as string,
+        photoURL: uploadTask?.downloadURL,
+      });
+      progress = 0;
+    }
+  });
+
+  // $effect(()=>{
+  //   console.log(uploadTask?.downloadURL)
+  // })
+
+  let uploadTask: any = $state(null);
+  let progress: number = $derived(uploadTask?.progress || 0 * 1);
+  let imageUrl: string = $state("");
+  let selectedImage: File | null = $state(null);
+  let inputfile: any;
+
+  async function handleImageUpload(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const file: File = target.files?.[0] as File;
+
+    if (file) {
+      imageUrl = URL.createObjectURL(file);
+      selectedImage = file;
+    }
+
+    uploadTask = firekitUploadTask(
+      `users-profile/${firekitAuthManager.uid}/profile`,
+      file
+    );
+    
+
+    // firekitAuthManager.updateUserData({ photoURL: uploadTask?.downloadURL });
+    // firekitAuthManager.updateProfileInfo({
+    //   displayName: firekitAuthManager.data?.displayName as string,
+    //   photoURL: uploadTask?.downloadURL,
+    // });
+  }
+</script>
+
+<section class="space-y-5 border-t-slate-200 border-t-[2px] pt-4">
+  <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
+    <div class="sm:col-span-4 xl:col-span-3">
+      <p class="sm:mt-2.5 inline-block text-sm text-foreground-500">Profile</p>
+    </div>
+
+    <div class="sm:col-span-8 xl:col-span-9">
+      <div class="flex flex-wrap justify-around items-center gap-3 sm:gap-5">
+        <div class="flex gap-2 items-center">
+          <button onclick={() => inputfile.click()}>
+            <Avatar.Root class="size-[70px]">
+              <Avatar.Image
+                src={firekitAuthManager.data?.photoURL}
+                alt="Avatar"
+              />
+              <Avatar.Fallback>
+                {getInitials(firekitAuthManager.data?.displayName)}
+              </Avatar.Fallback>
+            </Avatar.Root>
+          </button>
+          <input
+            bind:this={inputfile}
+            onchange={handleImageUpload}
+            type="file"
+            accept="image/*"
+            class="hidden"
+          />
+          <div class="grid flex-1 text-left text-sm leading-tight">
+            <span class="truncate font-semibold"
+              >{firekitAuthManager.data?.displayName}</span
+            >
+            <span class="truncate text-sm text-slate-400"
+              >{firekitAuthManager.data?.email}</span
+            >
+            {#if progress > 0 && !uploadTask?.completed}
+              <div
+                class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"
+              >
+                <div
+                  class="bg-blue-600 h-2.5 rounded-full"
+                  style="width: {progress}%"
+                ></div>
+              </div>
+              <p class="text-xs text-gray-500 mt-1">
+                Progress: {progress.toFixed(2)}%
+              </p>
+            {/if}
+          </div>
+        </div>
+        <div></div>
+      </div>
+    </div>
+  </div>
+</section>

package/dist/components/auth/user-button/profile-section/avatar-user.svelte.d.ts

@@ -0,0 +1,2 @@
+declare const AvatarUser: import("svelte").Component<Record<string, never>, {}, "">;
+export default AvatarUser;

package/dist/components/auth/user-button/profile-section/connect-user.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import Button from "../../../ui/button/button.svelte";
+    import { firekitAuthManager } from "../../../../firebase/auth/auth-manager.svelte.js";
+
+  import { Badge } from "../../../ui/badge/index.js";
+  import { Plus } from "lucide-svelte";
+  import TypeAccount from "../type-account.svelte";
+</script>
+
+<section class="space-y-5 border-t-slate-200 border-t-[2px] pt-4">
+  <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
+    <div class="sm:col-span-4 xl:col-span-3 ">
+      <p class="sm:mt-2.5 inline-block text-sm text-foreground-500">
+        Connected accounts
+      </p>
+    </div>
+
+    <div class="sm:col-span-8 xl:col-span-9">
+      <div class="flex flex-wrap justify-around items-center gap-3 sm:gap-5">
+        <div class="flex flex-col gap-2 text-sm leading-tight items-start">
+          <div class="flex gap-2 items-center">
+            <TypeAccount
+              account={firekitAuthManager?.user?.providerData[0]?.providerId || "None"}
+            ></TypeAccount>
+
+            <span class="truncate text-xs text-slate-600"
+              >{firekitAuthManager.email}</span
+            >
+
+            <Badge variant="outline">Primary</Badge>
+          </div>
+          <Button
+            variant="none"
+            class="flex justify-start px-0 hover:border-b-slate-500 hover:border-b-[2px] rounded-none"
+          >
+            <Plus class="size-4"></Plus>
+            Connect account
+          </Button>
+        </div>
+        <!-- <Button variant="ghost" size="sm">Edit Profile</Button> -->
+        <div></div>
+      </div>
+    </div>
+  </div>
+</section>

package/dist/components/auth/user-button/profile-section/connect-user.svelte.d.ts

@@ -0,0 +1,18 @@
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ConnectUser: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConnectUser = InstanceType<typeof ConnectUser>;
+export default ConnectUser;

package/dist/components/auth/user-button/profile-section/email-user.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import Button from "../../../ui/button/button.svelte";
+    import { firekitAuthManager } from "../../../../firebase/auth/auth-manager.svelte.js";
+
+  import Input from "../../../ui/input/input.svelte";
+  import { toast } from "svelte-sonner";
+
+  let email: string = $state("");
+  let haserror = $state(false);
+
+  $effect(() => {
+    email = firekitAuthManager.data?.email as string;
+  });
+
+  async function handleChangeEmail() {
+    console.log(email);
+    haserror = false;
+    console.log(firekitAuthManager.data?.email);
+    if (email === firekitAuthManager.data?.email) {
+      toast.error("The email is the same as your current email.");
+      haserror = true;
+      return;
+    }
+
+    if (!isValidEmail()) {
+      toast.error("Please enter a valid email address.");
+      haserror = true;
+      return;
+    }
+
+    await firekitAuthManager.updateEmailUser(email);
+    // toast.success("Email updated successfully!");
+    // setTimeout(async () => {
+    //   await firekitAuth.logOut();
+    // }, 4500);
+  }
+
+  function isValidEmail() {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }
+</script>
+
+<section class="space-y-5 border-t-slate-200 border-t-[2px] pt-4">
+  <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
+    <div class="sm:col-span-4 xl:col-span-3">
+      <p
+        class="sm:mt-2.5 inline-block text-sm {haserror
+          ? 'text-red-500'
+          : 'text-foreground-500'}"
+      >
+        Email address
+      </p>
+    </div>
+
+    <div class="sm:col-span-8 xl:col-span-9">
+      <div class="flex flex-wrap  items-center gap-3 sm:gap-5 ">
+        <div class="flex gap-2 items-center w-full  ">
+          <div class="flex flex-col gap-2 text-sm leading-tight w-[250px]">
+            <div class=" space-y-1 my-2 w-auto ">
+              <!-- <Label class={haserror ? "text-red-500" : ""}>Email:</Label> -->
+              <Input
+                class=" w-full {haserror ? 'border border-red-500' : ''}"
+                bind:value={email}
+                placeholder="Introduce email"
+              />
+            </div>
+            <Button
+              onclick={handleChangeEmail}
+              variant="default"
+              class="bg-blue-500 hover:bg-blue-600 text-white block ml-auto"
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+        <div></div>
+      </div>
+    </div>
+  </div>
+</section>

package/dist/components/auth/user-button/profile-section/email-user.svelte.d.ts

@@ -0,0 +1,2 @@
+declare const EmailUser: import("svelte").Component<Record<string, never>, {}, "">;
+export default EmailUser;