@lobb-js/lobb-ext-auth 0.2.2 → 0.3.0

package/dist/auth.d.ts

@@ -0,0 +1,13 @@
+import type { ExtensionUtils } from "@lobb-js/studio";
+interface LoginPayload {
+    email: string;
+    password: string;
+}
+export declare class Auth {
+    private utils;
+    constructor(utils: ExtensionUtils);
+    getSession(): any;
+    login(payload: LoginPayload): Promise<void>;
+    logout(): Promise<void>;
+}
+export {};

package/dist/auth.js

@@ -0,0 +1,44 @@
+export class Auth {
+    utils;
+    constructor(utils) {
+        this.utils = utils;
+    }
+    getSession() {
+        const lobbSession = localStorage.getItem("lobb_session");
+        if (lobbSession) {
+            const parsedLobbSession = JSON.parse(lobbSession);
+            this.utils.lobb.setHeaders({
+                Authorization: `Bearer ${parsedLobbSession.access_token.token}`,
+            });
+            return parsedLobbSession;
+        }
+    }
+    async login(payload) {
+        const response = await this.utils.lobb.request({
+            method: "POST",
+            route: "/api/collections/auth_sessions",
+            payload: {
+                data: payload,
+            },
+        });
+        if (response.status >= 400) {
+            return;
+        }
+        const result = await response.json();
+        const session = result.data;
+        localStorage.setItem("lobb_session", JSON.stringify(session));
+        this.utils.ctx.extensions.auth.session = session;
+        this.utils.lobb.setHeaders({
+            Authorization: `Bearer ${session.access_token.token}`,
+        });
+        this.utils.location.navigate("/studio");
+    }
+    async logout() {
+        await this.utils.lobb.request({
+            method: "DELETE",
+            route: "/api/extensions/auth/logout",
+        });
+        localStorage.removeItem("lobb_session");
+        this.utils.location.navigate("/studio/extensions/auth/login_page");
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import type { Extension, ExtensionUtils } from "@lobb-js/studio";
+export default function extension(utils: ExtensionUtils): Extension;

package/dist/index.js

@@ -0,0 +1,52 @@
+import { Auth } from "./auth";
+import { onStartup } from "./onStartup";
+import LoginPage from "./lib/components/pages/loginPage/index.svelte";
+import UserSettings from "./lib/components/pages/userSettings/index.svelte";
+import Settings from "./lib/components/pages/settings/index.svelte";
+// TODO we should export the extension object directly without a function at all. because we dont set configuration in here
+export default function extension(utils) {
+    return {
+        name: "auth",
+        onStartup: onStartup,
+        components: {
+            "pages.login_page": LoginPage,
+            "pages.user_settings": UserSettings,
+            "pages.settings": Settings,
+        },
+        dashboardNavs: {
+            middle: [
+                {
+                    label: "Auth",
+                    icon: utils.components.Icons.Key,
+                    href: "/studio/extensions/auth/settings/users",
+                },
+            ],
+            bottom: [
+                {
+                    label: "My User",
+                    icon: utils.components.Icons.User,
+                    onclick: () => {
+                        utils.location.navigate("/studio/extensions/auth/user_settings");
+                    },
+                    navs: [
+                        {
+                            label: "User Settings",
+                            icon: utils.components.Icons.Settings,
+                            onclick: () => {
+                                utils.location.navigate("/studio/extensions/auth/user_settings");
+                            },
+                        },
+                        {
+                            label: "Logout",
+                            icon: utils.components.Icons.LogOut,
+                            onclick: () => {
+                                const auth = new Auth(utils);
+                                auth.logout();
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    };
+}

package/dist/lib/components/pages/loginPage/index.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import type { ExtensionProps } from "@lobb-js/studio";
+    import { Auth } from "../../../../auth";
+
+    const { utils }: ExtensionProps = $props();
+
+    let formData = {
+        email:
+            window.location.hostname === "demo.lobb.app"
+                ? "admin@example.com"
+                : "",
+        password: window.location.hostname === "demo.lobb.app" ? "admin" : "",
+    };
+
+    async function handleOnSubmit(e: Event) {
+        e.preventDefault();
+        if (!formData.email && !formData.password) {
+            utils.toast.error("Please complete all fields");
+            return;
+        }
+
+        const auth = new Auth(utils);
+        await auth.login(formData);
+    }
+</script>
+
+<div
+    class="fixed left-0 top-0 flex h-screen w-screen items-center justify-center bg-muted"
+>
+    <div class="flex w-full max-w-[25rem] flex-col gap-6 p-6">
+        <div>
+            <div class="text-4xl">Welcome back</div>
+            <div>Sign in to your account</div>
+        </div>
+        <form
+            class="flex flex-col gap-6 rounded-md border bg-white p-6"
+            onsubmit={handleOnSubmit}
+        >
+            <div class="flex flex-col gap-2">
+                <div>
+                    <div class="mb-1 text-sm font-medium">Email</div>
+                    <utils.components.Input
+                        bind:value={formData.email}
+                        autocomplete="email"
+                        placeholder="email@example.com"
+                    />
+                </div>
+                <div>
+                    <div class="mb-1 text-sm font-medium">Password</div>
+                    <utils.components.Input
+                        bind:value={formData.password}
+                        type="password"
+                        autocomplete="current-password"
+                        placeholder="••••••••"
+                    />
+                </div>
+            </div>
+            <utils.components.Button type="submit">
+                Sign In
+            </utils.components.Button>
+            <div class="text-sm underline">Forgot Password?</div>
+        </form>
+    </div>
+</div>

package/dist/lib/components/pages/loginPage/index.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponentTyped<IndexProps, IndexEvents, IndexSlots> {
+}
+export {};

package/dist/lib/components/pages/settings/index.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+    import Users from "./pages/users.svelte";
+    import RolesAndPermissions from "./pages/rolesAndPermissions.svelte";
+    import ActivityFeed from "./pages/activityFeed.svelte";
+
+	const props: ExtensionProps = $props();
+	const components = props.utils.components;
+	const { Sidebar } = components;
+	const { Icons } = components;
+	const auth_settings_page = $derived(props.utils.location.url.pathname.split("/")[5]);
+	const isSmall = $derived(!props.utils.mediaQueries.sm.current);
+</script>
+
+<!-- TODO: add the sidebar in here to add these pages
+	- users
+	- roles and permissions
+	- invitation page
+	- activity feed
+-->
+
+<Sidebar
+	title="Auth settings"
+	showSearch={false}
+	isSelected={(element: any) => {
+		const element_page = element.href?.split("/")[5];
+		return element_page === auth_settings_page;
+	}}
+	data={[
+		{
+			name: "Users",
+			href: "/studio/extensions/auth/settings/users",
+			icon: Icons.Users
+		},
+		{
+			name: "roles and permissions",
+			href: "/studio/extensions/auth/settings/roles_and_permissions",
+			icon: Icons.ShieldUser
+		},
+		{
+			name: "activity feed",
+			href: "/studio/extensions/auth/settings/activity_feed",
+			icon: Icons.ClipboardList
+		},
+	]} >
+	{#if auth_settings_page === 'users'}
+		<Users {...props} />
+	{:else if auth_settings_page === 'roles_and_permissions'}
+		<RolesAndPermissions {...props} />
+	{:else if auth_settings_page === 'activity_feed'}
+		<ActivityFeed {...props} />
+	{/if}
+</Sidebar>

package/dist/lib/components/pages/settings/index.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponentTyped<IndexProps, IndexEvents, IndexSlots> {
+}
+export {};

package/dist/lib/components/pages/settings/pages/activityFeed.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+
+	const { utils }: ExtensionProps = $props();
+	const components = utils.components;
+</script>
+
+<div class="flex flex-col gap-4 p-4 h-full">
+	<div>
+		<div class="text-xl font-bold">Activity Feed</div>
+		<div class="text-sm text-muted-foreground">
+			Monitor your users Activity Feed.
+		</div>
+	</div>
+	<components.Separator />
+	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-muted/30">
+        <components.DataTable
+            collectionName="auth_activity_feed"
+        />
+	</div>
+</div>

package/dist/lib/components/pages/settings/pages/activityFeed.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ActivityFeedProps = typeof __propDef.props;
+export type ActivityFeedEvents = typeof __propDef.events;
+export type ActivityFeedSlots = typeof __propDef.slots;
+export default class ActivityFeed extends SvelteComponentTyped<ActivityFeedProps, ActivityFeedEvents, ActivityFeedSlots> {
+}
+export {};

package/dist/lib/components/pages/settings/pages/rolesAndPermissions.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+
+	const { utils }: ExtensionProps = $props();
+	const components = utils.components;
+</script>
+
+<div class="flex flex-col gap-4 p-4 h-full">
+	<div>
+		<div class="text-xl font-bold">Roles and Permissions</div>
+		<div class="text-sm text-muted-foreground">
+			Manage the Roles and Permissions of the system.
+		</div>
+	</div>
+	<components.Separator />
+	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-muted/30">
+        <components.DataTable
+            collectionName="auth_roles"
+        />
+	</div>
+</div>

package/dist/lib/components/pages/settings/pages/rolesAndPermissions.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RolesAndPermissionsProps = typeof __propDef.props;
+export type RolesAndPermissionsEvents = typeof __propDef.events;
+export type RolesAndPermissionsSlots = typeof __propDef.slots;
+export default class RolesAndPermissions extends SvelteComponentTyped<RolesAndPermissionsProps, RolesAndPermissionsEvents, RolesAndPermissionsSlots> {
+}
+export {};

package/dist/lib/components/pages/settings/pages/users.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+
+	const { utils }: ExtensionProps = $props();
+	const components = utils.components;
+</script>
+
+<div class="flex flex-col gap-4 p-4 h-full">
+	<div>
+		<div class="text-xl font-bold">Users</div>
+		<div class="text-sm text-muted-foreground">
+			Manage the users of the system.
+		</div>
+	</div>
+	<components.Separator />
+	<div class="flex gap-4 border rounded-md overflow-hidden h-full bg-muted/30">
+        <components.DataTable
+            collectionName="auth_users"
+        />
+	</div>
+</div>

package/dist/lib/components/pages/settings/pages/users.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UsersProps = typeof __propDef.props;
+export type UsersEvents = typeof __propDef.events;
+export type UsersSlots = typeof __propDef.slots;
+export default class Users extends SvelteComponentTyped<UsersProps, UsersEvents, UsersSlots> {
+}
+export {};

package/dist/lib/components/pages/userSettings/components/account.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+	import { onMount } from "svelte";
+
+	const { utils }: ExtensionProps = $props();
+
+	let user = $state({
+		old_password: "",
+		new_password: "",
+	});
+	const icons = utils.components.Icons;
+
+	// @ts-ignore: Im sure the session object exist
+	const currentUserId = utils.ctx.extensions.auth.session.user.id;
+	let loaded = $state(false);
+	onMount(async () => {
+		const response = await utils.lobb.findOne("auth_users", currentUserId);
+		const result = await response.json();
+		user = result.data;
+		loaded = true;
+	});
+
+	async function onUpdateCLick() {
+		if (!user.new_password) {
+			utils.toast.error("Make sure you fill the new password");
+			return;
+		} else if (!user.old_password) {
+			utils.toast.error("Make sure you fill the old password");
+			return;
+		}
+
+		const result = await utils.lobb.request({
+			method: "POST",
+			route: "/api/extensions/auth/change_password",
+			payload: {
+				old_password: user.old_password,
+				new_password: user.new_password,
+			},
+		});
+
+		if (result.status >= 400) {
+			return;
+		}
+
+		utils.toast.success("Account updated successfully.");
+	}
+</script>
+
+{#if loaded}
+	<div class="flex max-w-[40rem] flex-1 flex-col gap-4 overflow-y-visible">
+		<div>
+			<div class="text-lg font-semibold">Account</div>
+			<div class="text-sm text-muted-foreground">
+				Update your account settings.
+			</div>
+		</div>
+		<utils.components.Separator />
+		<!-- TODO: add prefered language here too -->
+		<div class="flex flex-col gap-2">
+			<div class="text-sm">Change Password</div>
+			<div class="flex gap-4">
+				<utils.components.Input
+					bind:value={user.old_password}
+					placeholder="Old password"
+					type="password"
+				/>
+				<utils.components.Input
+					bind:value={user.new_password}
+					placeholder="New password"
+					type="password"
+				/>
+			</div>
+			<div class="text-xs text-muted-foreground">
+				This is where you can change your password.
+			</div>
+		</div>
+		<utils.components.Button
+			class="self-start"
+			onclick={onUpdateCLick}
+			Icon={icons.Pencil}
+		>
+			Update Account
+		</utils.components.Button>
+	</div>
+{:else}
+	<div class="flex max-w-[40rem] flex-1 flex-col gap-8 overflow-y-visible">
+		<div class="grid gap-2">
+			<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+		<utils.components.Separator />
+		<div class="flex flex-col gap-2">
+			<utils.components.Skeleton class="h-4 w-full max-w-36" />
+			<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+		<div class="flex flex-col gap-2">
+			<utils.components.Skeleton class="h-4 w-full max-w-36" />
+			<div class="flex gap-4">
+				<utils.components.Skeleton class="h-8 w-full max-w-60" />
+				<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			</div>
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+	</div>
+{/if}

package/dist/lib/components/pages/userSettings/components/account.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AccountProps = typeof __propDef.props;
+export type AccountEvents = typeof __propDef.events;
+export type AccountSlots = typeof __propDef.slots;
+export default class Account extends SvelteComponentTyped<AccountProps, AccountEvents, AccountSlots> {
+}
+export {};

package/dist/lib/components/pages/userSettings/components/profile.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+	import { onMount } from "svelte";
+
+	const { utils }: ExtensionProps = $props();
+
+	let user = $state({
+		name: "",
+	});
+	const icons = utils.components.Icons;
+
+	// @ts-ignore: Im sure the session object exist
+	const currentUserId = utils.ctx.extensions.auth.session.user.id;
+	let loaded = $state(false);
+	onMount(async () => {
+		const response = await utils.lobb.findOne("auth_users", currentUserId);
+		const result = await response.json();
+		user = result.data;
+		loaded = true;
+	});
+
+	async function onUpdateCLick() {
+		// TODO: add the logic of updating some of the current user's information
+		const updateObject: any = {};
+		updateObject["name"] = user.name;
+		const response = await utils.lobb.updateOne(
+			"auth_users",
+			currentUserId,
+			updateObject,
+		);
+		if (response.status >= 400) {
+			const result = await response.json();
+			utils.toast.error(result.message);
+			return;
+		}
+		utils.toast.success("Profile updated successfully.");
+	}
+</script>
+
+{#if loaded}
+	<div class="flex max-w-[40rem] flex-1 flex-col gap-4 overflow-y-visible">
+		<div>
+			<div class="text-lg font-semibold">Profile</div>
+			<div class="text-sm text-muted-foreground">
+				Edit information that others will see.
+			</div>
+		</div>
+		<utils.components.Separator />
+		<!-- TODO: you should add name and other stuff like phone number and stuff like that -->
+		<div class="flex flex-col gap-2">
+			<div class="text-sm">Full Name</div>
+			<utils.components.Input
+				placeholder="Full Name"
+				bind:value={user.name}
+			/>
+			<div class="text-xs text-muted-foreground">
+				This is your public display name. It can be your real name or a
+				pseudonym.
+			</div>
+		</div>
+		<utils.components.Button
+			class="self-start"
+			onclick={onUpdateCLick}
+			Icon={icons.Pencil}
+		>
+			Update Profile
+		</utils.components.Button>
+	</div>
+{:else}
+	<div class="flex max-w-[40rem] flex-1 flex-col gap-8 overflow-y-visible">
+		<div class="grid gap-2">
+			<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+		<utils.components.Separator />
+		<div class="flex flex-col gap-2">
+			<utils.components.Skeleton class="h-4 w-full max-w-36" />
+			<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+		<div class="flex flex-col gap-2">
+			<utils.components.Skeleton class="h-4 w-full max-w-36" />
+			<utils.components.Skeleton class="h-8 w-full max-w-60" />
+			<utils.components.Skeleton class="h-4 w-full max-w-96" />
+		</div>
+	</div>
+{/if}

package/dist/lib/components/pages/userSettings/components/profile.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ProfileProps = typeof __propDef.props;
+export type ProfileEvents = typeof __propDef.events;
+export type ProfileSlots = typeof __propDef.slots;
+export default class Profile extends SvelteComponentTyped<ProfileProps, ProfileEvents, ProfileSlots> {
+}
+export {};

package/dist/lib/components/pages/userSettings/index.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { ExtensionProps } from "@lobb-js/studio";
+	import Profile from "./components/profile.svelte";
+	import Account from "./components/account.svelte";
+
+	const props: ExtensionProps = $props();
+	const components = props.utils.components;
+	const isSmall = $derived(!props.utils.mediaQueries.sm.current);
+
+	let selectedView: "profile" | "account" = $state("profile");
+</script>
+
+<div class="flex flex-col gap-4 p-4">
+	<div>
+		<div class="text-xl font-bold">User Settings</div>
+		<div class="text-sm text-muted-foreground">
+			Manage your user settings.
+		</div>
+	</div>
+	<components.Separator />
+	<div class="flex gap-4 {isSmall ? "flex-col" : ""}">
+		<div class="flex w-64 {isSmall ? "" : "flex-col"}">
+			<components.Button
+				onclick={() => (selectedView = "profile")}
+				variant="ghost"
+				class="flex justify-start text-muted-foreground hover:underline"
+			>
+				Profile
+			</components.Button>
+			<components.Button
+				onclick={() => (selectedView = "account")}
+				variant="ghost"
+				class="flex justify-start text-muted-foreground hover:underline"
+			>
+				Account
+			</components.Button>
+		</div>
+		{#if selectedView === "profile"}
+			<Profile {...props} />
+		{:else if selectedView === "account"}
+			<Account {...props} />
+		{:else}
+			<div class="font-bold text-red-500">
+				The "{selectedView}" view doesnt exist
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/lib/components/pages/userSettings/index.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponentTyped<IndexProps, IndexEvents, IndexSlots> {
+}
+export {};

package/dist/lib/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// place files you want to import through the `$lib` alias in this folder.