svelte-firekit 0.0.10 → 0.0.12

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

@@ -0,0 +1,122 @@
+<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";
+  import intlTelInput from "intl-tel-input";
+  import { onMount } from "svelte";
+
+  let phoneNumber = ""; // Inicializa como una cadena vacía
+  let haserror = false;
+  let it: any = null;
+  let _phone: any = { valid: false, value: "", error: "" };
+
+  onMount(() => {
+    const input: HTMLInputElement | null =
+      document.querySelector("#phonenumberuser");
+    if (input) {
+      it = intlTelInput(input, {
+        utilsScript:
+          "https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/js/utils.js",
+        separateDialCode: true,
+      });
+
+      // Si ya existe un número de teléfono, configúralo visualmente en el input
+      if (firekitAuthManager.data?.phoneNumber) {
+        it.setNumber(firekitAuthManager.data.phoneNumber);
+        phoneNumber = firekitAuthManager.data.phoneNumber;
+      }
+    }
+  });
+
+  $effect(() => {
+    if (firekitAuthManager.data?.phoneNumber) {
+      _phone.value = firekitAuthManager.data.phoneNumber;
+      phoneNumber = firekitAuthManager.data.phoneNumber;
+
+      // Si intlTelInput está inicializado, actualiza el input con el valor
+      if (it) {
+        it.setNumber(firekitAuthManager.data.phoneNumber);
+      }
+    }
+  });
+
+  async function handleChangePhoneNumber() {
+    if (it) {
+      _phone.value = it.getNumber();
+      _phone.error = it.getValidationError();
+      _phone.valid = it.isValidNumber();
+    }
+
+    if (!_phone.valid) {
+      toast.error("Phone number invalid.");
+      haserror = true;
+      return;
+    }
+
+    if (_phone.value === firekitAuthManager.data?.phoneNumber) {
+      toast.error("The phone number is the same as your current phone number.");
+      haserror = true;
+      return;
+    }
+
+    await firekitAuthManager.updateUserData({ phoneNumber: _phone.value });
+    await firekitAuthManager.updateProfileInfo({});
+    toast.success("Phone number updated successfully.");
+    haserror = false;
+  }
+</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'}"
+      >
+        Phone number
+      </p>
+    </div>
+
+    <div class="sm:col-span-8 xl:col-span-9">
+      <div class="flex flex-wrap j 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">
+            <div id="contentphone" class=" space-y-1 my-2">
+              <!-- <Label class={haserror ? "text-red-500" : ""}>Phone number:</Label
+              > -->
+              <!-- oninput={changePhone} -->
+              <Input
+                id={"phonenumberuser"}
+                bind:value={phoneNumber}
+                name="phone"
+                type="tel"
+                class="input input-bordered w-full rounded  bg-transparent px-3  text-md border-[#DBDEE2]"
+                onbeforeinput={(e:any) => {
+                  if (
+                    !/^\d*$/.test(e.data) &&
+                    e.inputType !== "deleteContentBackward" &&
+                    e.inputType !== "deleteContentForward"
+                  ) {
+                    e.preventDefault();
+                  }
+                }}
+                placeholder="Phone number"
+              />
+            </div>
+            <Button
+              onclick={handleChangePhoneNumber}
+              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/phone-user.svelte.d.ts

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

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { firekitAuthManager } from "../../../../firebase/auth/auth-manager.svelte.js";
+
+  import AvatarUser from "./avatar-user.svelte";
+  import ConnectUser from "./connect-user.svelte";
+  import EmailUser from "./email-user.svelte";
+  import PhoneUser from "./phone-user.svelte";
+</script>
+
+<h2 class=" pb-3 text-lg font-semibold">Profile Details</h2>
+
+<AvatarUser></AvatarUser>
+{#if firekitAuthManager.user?.providerData[0]?.providerId !== "google.com"}
+  <EmailUser></EmailUser>
+{/if}
+<PhoneUser></PhoneUser>
+<ConnectUser></ConnectUser>

package/dist/components/auth/user-button/profile-section/profile-section.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 ProfileSection: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProfileSection = InstanceType<typeof ProfileSection>;
+export default ProfileSection;

package/dist/components/auth/user-button/settings-dialog.svelte

@@ -1,95 +1,88 @@
 <script lang="ts">
-	import * as Breadcrumb from "../../ui/breadcrumb/index.js";
-	import { Button } from "../../ui/button/index.js";
-	import * as Dialog from "../../ui/dialog/index.js";
-	import * as Sidebar from "../../ui/sidebar/index.js";
+  import * as Breadcrumb from "../../ui/breadcrumb/index.js";
+  import { Button } from "../../ui/button/index.js";
+  import * as Dialog from "../../ui/dialog/index.js";
+  import * as Sidebar from "../../ui/sidebar/index.js";
 
-	import Lock from "lucide-svelte/icons/lock";
+  import Lock from "lucide-svelte/icons/lock";
+  import { User2 } from "lucide-svelte";
+  import ProfileSection from "./profile-section/profile-section.svelte";
 
-	import { firekitUser } from "../../../firebase/auth/user.svelte.js";
-	import { User2 } from "lucide-svelte";
+  const data = {
+    nav: [
+      { name: "Profile", icon: User2 },
+      { name: "Security", icon: Lock },
+    ],
+  };
 
-	const data = {
-		nav: [
-			{ name: "Profile", icon: User2 },
-			{ name: "Security", icon: Lock },
-		],
-	};
-
-	let open = $state(false);
+  let open = $state(false);
+  let section = $state("Profile");
 </script>
 
 <Dialog.Root bind:open>
-	<Dialog.Trigger>
-		{#snippet child({ props })}
-			<Button size="sm" {...props}>Profile</Button>
-		{/snippet}
-	</Dialog.Trigger>
-	<Dialog.Content
-		class="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]"
-	>
-		<Dialog.Title class="sr-only">Settings</Dialog.Title>
-		<Dialog.Description class="sr-only"
-			>Customize your settings here.</Dialog.Description
-		>
-		<Sidebar.Provider class="items-start">
-			<Sidebar.Root collapsible="none" class="hidden md:flex">
-				<Sidebar.Content>
-					<Sidebar.Group>
-						<Sidebar.GroupContent>
-							<Sidebar.Menu>
-								{#each data.nav as item (item.name)}
-									<Sidebar.MenuItem>
-										<Sidebar.MenuButton
-											isActive={item.name ===
-												"Messages & media"}
-										>
-											{#snippet child({ props })}
-												<a href="##" {...props}>
-													<item.icon />
-													<span>{item.name}</span>
-												</a>
-											{/snippet}
-										</Sidebar.MenuButton>
-									</Sidebar.MenuItem>
-								{/each}
-							</Sidebar.Menu>
-						</Sidebar.GroupContent>
-					</Sidebar.Group>
-				</Sidebar.Content>
-			</Sidebar.Root>
-			<main class="flex h-[480px] flex-1 flex-col overflow-hidden">
-				<header
-					class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
-				>
-					<div class="flex items-center gap-2 px-4">
-						<Breadcrumb.Root>
-							<Breadcrumb.List>
-								<Breadcrumb.Item class="hidden md:block">
-									<Breadcrumb.Link href="#"
-										>Settings</Breadcrumb.Link
-									>
-								</Breadcrumb.Item>
-								<Breadcrumb.Separator class="hidden md:block" />
-								<Breadcrumb.Item>
-									<Breadcrumb.Page
-										>Messages & media</Breadcrumb.Page
-									>
-								</Breadcrumb.Item>
-							</Breadcrumb.List>
-						</Breadcrumb.Root>
-					</div>
-				</header>
-				<div
-					class="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0"
-				>
-					{#each Array.from({ length: 10 }) as _, i (i)}
-						<div
-							class="bg-muted/50 aspect-video max-w-3xl rounded-xl"
-						></div>
-					{/each}
-				</div>
-			</main>
-		</Sidebar.Provider>
-	</Dialog.Content>
+  <Dialog.Trigger>
+    {#snippet child({ props })}
+      <Button size="sm" {...props}>Profile</Button>
+    {/snippet}
+  </Dialog.Trigger>
+  <Dialog.Content
+    class="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]"
+  >
+    <Dialog.Title class="sr-only">Settings</Dialog.Title>
+    <Dialog.Description class="sr-only"
+      >Customize your settings here.</Dialog.Description
+    >
+    <Sidebar.Provider class="items-start">
+      <Sidebar.Root collapsible="none" class="hidden md:flex">
+        <Sidebar.Content>
+          <Sidebar.Group>
+            <Sidebar.GroupContent>
+              <Sidebar.Menu>
+                {#each data.nav as item (item.name)}
+                  <Sidebar.MenuItem>
+                    <Sidebar.MenuButton
+                      isActive={item.name === section}
+                      onclick={() => (section = item.name)}
+                    >
+                      {#snippet child({ props })}
+                        <a href="##" {...props}>
+                          <item.icon />
+                          <span>{item.name}</span>
+                        </a>
+                      {/snippet}
+                    </Sidebar.MenuButton>
+                  </Sidebar.MenuItem>
+                {/each}
+              </Sidebar.Menu>
+            </Sidebar.GroupContent>
+          </Sidebar.Group>
+        </Sidebar.Content>
+      </Sidebar.Root>
+      <main class="flex h-[480px] flex-1 flex-col overflow-hidden">
+        <header
+          class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
+        >
+          <div class="flex items-center gap-2 px-4">
+            <Breadcrumb.Root>
+              <Breadcrumb.List>
+                <Breadcrumb.Item class="hidden md:block">
+                  <Breadcrumb.Link href="#">Settings</Breadcrumb.Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator class="hidden md:block" />
+                <Breadcrumb.Item>
+                  <Breadcrumb.Page>{section}</Breadcrumb.Page>
+                </Breadcrumb.Item>
+              </Breadcrumb.List>
+            </Breadcrumb.Root>
+          </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+          {#if section === "Profile"}
+            <ProfileSection></ProfileSection>
+          {/if}
+          
+        </div>
+      </main>
+    </Sidebar.Provider>
+  </Dialog.Content>
 </Dialog.Root>

package/dist/components/auth/user-button/type-account.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  const { account }: { account: string } = $props();
+  import { Mail } from "lucide-svelte";
+
+</script>
+
+{#if account === "google.com"}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width="18"
+    height="18"
+    viewBox="0 0 48 48"
+  >
+    <path
+      fill="#4caf50"
+      d="M45,16.2l-5,2.75l-5,4.75L35,40h7c1.657,0,3-1.343,3-3V16.2z"
+    ></path><path
+      fill="#1e88e5"
+      d="M3,16.2l3.614,1.71L13,23.7V40H6c-1.657,0-3-1.343-3-3V16.2z"
+    ></path><polygon
+      fill="#e53935"
+      points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17"
+    ></polygon><path
+      fill="#c62828"
+      d="M3,12.298V16.2l10,7.5V11.2L9.876,8.859C9.132,8.301,8.228,8,7.298,8h0C4.924,8,3,9.924,3,12.298z"
+    ></path><path
+      fill="#fbc02d"
+      d="M45,12.298V16.2l-10,7.5V11.2l3.124-2.341C38.868,8.301,39.772,8,40.702,8h0 C43.076,8,45,9.924,45,12.298z"
+    ></path>
+  </svg>
+{:else}
+  <Mail class="size-4" />
+{/if}

package/dist/components/auth/user-button/type-account.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const TypeAccount: import("svelte").Component<{
+    account: string;
+}, {}, "">;
+export default TypeAccount;

package/dist/components/auth/user-button/user-button.svelte

@@ -1,121 +1,131 @@
 <script lang="ts">
-    import * as DropdownMenu from "../../ui/dropdown-menu/index.js";
-    import * as Avatar from "../../ui/avatar/index.js";
-    import { getInitials } from "../../../utils.js";
-    import type { NavItem } from "../../../types/nav.js";
-    let { nav }: { nav?: NavItem[] } = $props();
-    import * as AlertDialog from "../../ui/alert-dialog/index.js";
-    import Button from "../../ui/button/button.svelte";
-    import { firekitUser } from "../../../firebase/auth/user.svelte.js";
-    import { firekitAuth } from "../../../firebase/auth/auth.js";
-    import { LogOut } from "lucide-svelte";
-    import SettingsDialog from "./settings-dialog.svelte";
-    let isOpen = $state(false);
+  import SettingsDialog from "./settings-dialog.svelte";
+  import * as DropdownMenu from "../../ui/dropdown-menu/index.js";
+  import * as Avatar from "../../ui/avatar/index.js";
+  import { getInitials } from "../../../utils.js";
+  import type { NavItem } from "../../../types/nav.js";
+  import * as AlertDialog from "../../ui/alert-dialog/index.js";
+  import Button from "../../ui/button/button.svelte";
+  import { firekitAuth } from "../../../firebase/auth/auth.js";
+  import { LogOut } from "lucide-svelte";
+  import { firekitAuthManager } from "../../../firebase/auth/auth-manager.svelte.js";
+  import { Skeleton } from "../../ui/skeleton/index.js";
 
-    async function handleLogout() {
-        await firekitAuth.logOut();
-    }
+  let isOpen = $state(false);
+
+  let { nav }: { nav?: NavItem[] } = $props();
+  async function handleLogout() {
+    await firekitAuth.logOut();
+  }
 </script>
 
-{#if firekitUser.user}
-    <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
+{#if !firekitAuthManager.initialized}
+  <div class="flex gap-2 items-center mx-4">
+    <Skeleton class="size-12 rounded-full" />
+    <div class="space-y-2">
+      <Skeleton class="h-3 w-[100px]" />
+      <Skeleton class="h-3 w-[150px]" />
+    </div>
+  </div>
+{:else if firekitAuthManager.data}
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      <Avatar.Root>
+        <Avatar.Image src={firekitAuthManager.data?.photoURL} alt="Avatar" />
+        <Avatar.Fallback>
+          {getInitials(firekitAuthManager.data?.displayName)}
+        </Avatar.Fallback>
+      </Avatar.Root>
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+      <DropdownMenu.Group>
+        <DropdownMenu.GroupHeading>
+          <div class="flex items-center gap-3">
             <Avatar.Root>
-                <Avatar.Image src={firekitUser.photoURL} alt="Avatar" />
-                <Avatar.Fallback>
-                    {getInitials(firekitUser.displayName)}
-                </Avatar.Fallback>
+              <Avatar.Image
+                src={firekitAuthManager.data?.photoURL}
+                alt="Avatar"
+              />
+              <Avatar.Fallback>
+                {getInitials(firekitAuthManager.data?.displayName)}
+              </Avatar.Fallback>
             </Avatar.Root>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-            <DropdownMenu.Group>
-                <DropdownMenu.GroupHeading>
-                    <div class="flex items-center gap-3">
-                        <Avatar.Root>
-                            <Avatar.Image
-                                src={firekitUser.photoURL}
-                                alt="Avatar"
-                            />
-                            <Avatar.Fallback>
-                                {getInitials(firekitUser.displayName)}
-                            </Avatar.Fallback>
-                        </Avatar.Root>
-                        <div class="grow">
-                            <span
-                                class="block font-medium text-sm text-gray-800 dark:text-neutral-200"
-                            >
-                                {firekitUser.displayName}
-                            </span>
-                            <p class="text-xs text-foreground-500">
-                                {firekitUser.email}
-                            </p>
-                        </div>
-                    </div>
-                </DropdownMenu.GroupHeading>
-                <DropdownMenu.Separator />
-                <DropdownMenu.Item onclick={() => (isOpen = true)}>
-                    {#snippet child({ props })}
-                        <SettingsDialog child({ props }) />
-                    {/snippet}
-                </DropdownMenu.Item>
-                {#if nav}
-                    {#each nav as { href, label }}
-                        <DropdownMenu.Item>
-                            <a {href}>
-                                {label}
-                            </a>
-                        </DropdownMenu.Item>
-                    {/each}
-                {/if}
+            <div class="grow">
+              <span
+                class="block font-medium text-sm text-gray-800 dark:text-neutral-200"
+              >
+                {firekitAuthManager.data?.displayName}
+              </span>
+              <p class="text-xs text-foreground-500">
+                {firekitAuthManager.data?.email}
+              </p>
+            </div>
+          </div>
+        </DropdownMenu.GroupHeading>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onclick={() => (isOpen = true)}>
+          {#snippet child({ props })}
+            <SettingsDialog child({ props }) />
+          {/snippet}
+        </DropdownMenu.Item>
+        {#if nav}
+          {#each nav as { href, label }}
+            <DropdownMenu.Item>
+              <a {href}>
+                {label}
+              </a>
+            </DropdownMenu.Item>
+          {/each}
+        {/if}
 
-                <DropdownMenu.Separator />
-                <DropdownMenu.Item onclick={handleLogout}>
-                    <LogOut /> Logout
-                </DropdownMenu.Item>
-            </DropdownMenu.Group>
-        </DropdownMenu.Content>
-    </DropdownMenu.Root>
-    <AlertDialog.Root bind:open={isOpen}>
-        <AlertDialog.Content>
-            <AlertDialog.Header>
-                <AlertDialog.Title>
-                    <div class="flex justify-between items-center">
-                        <div class="flex items-center gap-3">
-                            <Avatar.Root>
-                                <Avatar.Image
-                                    src={firekitUser.photoURL}
-                                    alt="Avatar"
-                                />
-                                <Avatar.Fallback>
-                                    {getInitials(firekitUser.displayName)}
-                                </Avatar.Fallback>
-                            </Avatar.Root>
-                            <div class="grow">
-                                <span
-                                    class="block font-medium text-sm text-gray-800 dark:text-neutral-200"
-                                >
-                                    {firekitUser.displayName}
-                                </span>
-                                <p class="text-xs text-foreground-500">
-                                    {firekitUser.email}
-                                </p>
-                            </div>
-                        </div>
-                        <Button onclick={handleLogout} variant="link">
-                            <LogOut />Logout
-                        </Button>
-                    </div>
-                </AlertDialog.Title>
-                <AlertDialog.Description>
-                    Manage your name, password and account settings.
-                </AlertDialog.Description>
-            </AlertDialog.Header>
-            <AlertDialog.Footer>
-                <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-                <AlertDialog.Action>Continue</AlertDialog.Action>
-            </AlertDialog.Footer>
-        </AlertDialog.Content>
-    </AlertDialog.Root>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onclick={handleLogout}>
+          <LogOut /> Logout
+        </DropdownMenu.Item>
+      </DropdownMenu.Group>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+  <AlertDialog.Root bind:open={isOpen}>
+    <AlertDialog.Content>
+      <AlertDialog.Header>
+        <AlertDialog.Title>
+          <div class="flex justify-between items-center">
+            <div class="flex items-center gap-3">
+              <Avatar.Root>
+                <Avatar.Image
+                  src={firekitAuthManager.data?.photoURL}
+                  alt="Avatar"
+                />
+                <Avatar.Fallback>
+                  {getInitials(firekitAuthManager.data?.displayName)}
+                </Avatar.Fallback>
+              </Avatar.Root>
+              <div class="grow">
+                <span
+                  class="block font-medium text-sm text-gray-800 dark:text-neutral-200"
+                >
+                  {firekitAuthManager.data?.displayName}
+                </span>
+                <p class="text-xs text-foreground-500">
+                  {firekitAuthManager.data?.email}
+                </p>
+              </div>
+            </div>
+            <Button onclick={handleLogout} variant="link">
+              <LogOut />Logout
+            </Button>
+          </div>
+        </AlertDialog.Title>
+        <AlertDialog.Description>
+          Manage your name, password and account settings.
+        </AlertDialog.Description>
+      </AlertDialog.Header>
+      <AlertDialog.Footer>
+        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+        <AlertDialog.Action>Continue</AlertDialog.Action>
+      </AlertDialog.Footer>
+    </AlertDialog.Content>
+  </AlertDialog.Root>
 {:else}
-    <Button href="/login">Login</Button>
+  <Button href="/login">Login</Button>
 {/if}