studiocms 0.1.0-beta.10

package/dist/components/dashboard/islands/profile/oAuthButtonProviders.js

@@ -0,0 +1,35 @@
+import { authEnvCheck } from "studiocms:auth/utils/authEnvCheck";
+import { AuthConfig } from "studiocms:config";
+import { StudioCMSRoutes } from "studiocms:lib";
+const authEnv = await authEnvCheck(AuthConfig.providers);
+const showOAuth = authEnv.SHOW_OAUTH;
+const providerData = [
+  {
+    enabled: authEnv.GITHUB.ENABLED,
+    href: StudioCMSRoutes.authLinks.githubIndex,
+    label: "GitHub",
+    image: `<svg width="24px" height="24px" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg" class="oauth-logo"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/></svg>`
+  },
+  {
+    enabled: authEnv.DISCORD.ENABLED,
+    href: StudioCMSRoutes.authLinks.discordIndex,
+    label: "Discord",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 256 199" class="oauth-logo"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"/></svg>`
+  },
+  {
+    enabled: authEnv.GOOGLE.ENABLED,
+    href: StudioCMSRoutes.authLinks.googleIndex,
+    label: "Google",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 256 262" class="oauth-logo"><path fill="#4285f4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"/><path fill="#34a853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"/><path fill="#fbbc05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"/><path fill="#eb4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"/></svg>`
+  },
+  {
+    enabled: authEnv.AUTH0.ENABLED,
+    href: StudioCMSRoutes.authLinks.auth0Index,
+    label: "Auth0",
+    image: `<svg xmlns="http://www.w3.org/2000/svg"  width="24px" height="24px" viewBox="0 0 32 32" class="oauth-logo"><path fill="currentColor" d="M29.307 9.932L26.161 0H5.796L2.692 9.932c-1.802 5.75.042 12.271 5.089 16.021L16.01 32l8.208-6.068c5.005-3.75 6.911-10.25 5.089-16.021l-8.214 6.104l3.12 9.938l-8.208-6.13l-8.208 6.104l3.141-9.911l-8.25-6.063l10.177-.063l3.146-9.891l3.141 9.87z"/></svg>`
+  }
+];
+export {
+  providerData,
+  showOAuth
+};

package/dist/components/dashboard/islands/sidebar/UserAccount.astro

@@ -0,0 +1,23 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import { getLabelForPermissionLevel } from 'studiocms:auth/utils/getLabelForPermissionLevel';
+import { User } from 'studiocms:ui/components';
+
+const data = await getUserData(Astro);
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+type PropsOf<T extends (...args: any[]) => any> = Parameters<T>[0];
+
+type UserProps = PropsOf<typeof User>;
+
+const userProps: UserProps = {
+	name: data.user?.name || 'Visitor',
+	description: getLabelForPermissionLevel(data.permissionLevel),
+	loading: 'eager',
+};
+
+if (data.user?.avatar) {
+	userProps.avatar = data.user.avatar;
+}
+---
+<User {...userProps} />

package/dist/components/dashboard/islands/sidebar/VersionCheck.astro

@@ -0,0 +1,127 @@
+---
+import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { Button } from 'studiocms:ui/components';
+import currentVersion from 'studiocms:version';
+import { compare } from 'semver';
+
+const latestVersion = await studioCMS_SDK_Cache.GET.latestVersion();
+
+const comparison = compare(currentVersion, latestVersion.version);
+
+const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'future';
+---
+<Button size="sm" variant="flat" class="version-container" id="version-modal-trigger" title="Click for more information" aria-label="Click for more information">
+    <code class="version-check">
+        <span>v{currentVersion}</span>
+        {status && <span class="status" class:list={[status]} />}
+    </code>
+</Button>
+
+<script>
+    import { ModalHelper } from 'studiocms:ui/components';
+    import { dateTimeListener } from '../../component-scripts/dateTimeListener';
+    import { dateWithTimeAndZone } from '../../component-scripts/dateWithTimeAndZone';
+    import { timeAgo } from '../../component-scripts/timeAgo';
+    import type { VersionCacheObject } from 'studiocms:sdk/cache';
+
+    function setupVersionChecker() {
+        const reloadButton = document.getElementById('version-modal-reload') as HTMLButtonElement;
+        const timeElem = document.getElementById('version-modal-last-checked-date') as HTMLTimeElement;
+        const latestUpdateCheck = document.getElementById('latest-update-check') as HTMLSpanElement;
+        const latestVersionElem = document.getElementById('latest-version') as HTMLElement;
+
+
+        if (document.getElementById('version-modal-trigger')) {
+                dateTimeListener('version-modal-last-checked-date')
+        }
+
+        document.addEventListener('astro:page-load', async () => {
+            new ModalHelper('version-modal', 'version-modal-trigger');
+        })
+
+        reloadButton.addEventListener('click', async () => {
+                const response = await fetch(reloadButton.dataset.link!);
+                if (response.ok) {
+                    const data: { success: boolean, latestVersion: VersionCacheObject } = await response.json();
+
+                    if (data.success) {
+                        latestVersionElem.textContent = `v${data.latestVersion.version}`;
+                        timeElem.dateTime = new Date(data.latestVersion.lastCacheUpdate).toISOString();
+                        timeElem.textContent = dateWithTimeAndZone(new Date(data.latestVersion.lastCacheUpdate));
+                        latestUpdateCheck.textContent = `(${timeAgo(new Date(data.latestVersion.lastCacheUpdate))})`;
+                    }
+                }
+            });
+    }
+
+    document.addEventListener('astro:page-load', setupVersionChecker);
+    setupVersionChecker();
+</script>
+
+<style>
+    .version-container {
+        width: 100%;
+    }
+
+    .version-check {
+        display: flex;
+        flex-direction: row;
+        gap: .375rem;
+        width: 100%;
+        text-align: center;
+        align-items: center;
+        align-content: center;
+        vertical-align: middle;
+        color: hsl(var(--text-muted));
+        font-weight: 700;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .version-check:hover {
+        color: hsl(var(--primary-base));
+        cursor: pointer;
+    }
+
+    .outdated {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775a5.25 5.25 0 0 1 10.233-2.33a3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5z'/%3E%3C/svg%3E");
+        background-color: hsl(var(--warning-base));
+        -webkit-mask-image: var(--svg);
+        mask-image: var(--svg);
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-size: 100% 100%;
+        mask-size: 100% 100%;
+    }
+
+    .latest {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4.5 12.75l6 6l9-13.5'/%3E%3C/svg%3E");
+        background-color: hsl(var(--success-base));
+        -webkit-mask-image: var(--svg);
+        mask-image: var(--svg);
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-size: 100% 100%;
+        mask-size: 100% 100%;
+    }
+
+    .future {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104q-.376.034-.75.082m.75-.082a24.3 24.3 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104q.377.034.75.082M19.8 15.3l-1.57.393A9.07 9.07 0 0 1 12 15a9.07 9.07 0 0 0-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.3 48.3 0 0 1 12 21a48 48 0 0 1-8.135-.687c-1.718-.293-2.3-2.379-1.067-3.61L5 14.5'/%3E%3C/svg%3E");
+        background-color: hsl(var(--primary-base));
+        -webkit-mask-image: var(--svg);
+        mask-image: var(--svg);
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-size: 100% 100%;
+        mask-size: 100% 100%;
+    }
+</style>

package/dist/components/dashboard/islands/sidebar/VersionCheckChangelog.astro

@@ -0,0 +1,107 @@
+---
+
+interface Props {
+	link: string;
+}
+
+const { link } = Astro.props;
+---
+
+<frame-button data-link={link}>
+    <slot />
+</frame-button>
+
+<script>
+    if (!customElements.get('frame-button')) {
+        
+        class FrameButton extends HTMLElement {
+            constructor() {
+                super();
+                // Get the slot element
+                const slot = document.createElement('slot');
+
+                const frameContainer = document.createElement('div');
+                frameContainer.style.position = 'absolute';
+                frameContainer.style.width = '100%';
+                frameContainer.style.height = '100%';
+                frameContainer.style.backgroundColor = 'hsl(var(--background-step-1))';
+                frameContainer.style.display = 'none';
+                frameContainer.style.justifyContent = 'center';
+                frameContainer.style.alignItems = 'center';
+                frameContainer.style.top = '0';
+                frameContainer.style.left = '0';
+                frameContainer.style.zIndex = '1000';
+                frameContainer.style.borderRadius = '1rem';
+                frameContainer.style.overflow = 'hidden';
+
+                const frameButton = document.createElement('button');
+                frameButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"></path></svg>';
+                frameButton.style.position = 'absolute';
+                frameButton.style.top = '1.5rem';
+                frameButton.style.right = '1.5rem';
+                frameButton.style.backgroundColor = 'transparent';
+                frameButton.style.border = 'none';
+                frameButton.style.cursor = 'pointer';
+                frameButton.style.borderRadius = '0.5rem';
+                frameButton.style.height = '1.5rem';
+                frameButton.style.padding = '0';
+                frameButton.style.width = '1.5rem';
+                frameButton.style.display = 'flex';
+                frameButton.style.justifyContent = 'center';
+                frameButton.style.alignItems = 'center';
+                frameButton.style.transition = 'background-color 0.15s ease-in-out';
+
+                const frameContent = document.createElement('div');
+                frameContent.style.padding = '1.5rem';
+                frameContent.style.width = '100%';
+                frameContent.style.height = '90%';
+                frameContent.style.overflowX = 'none';
+                frameContent.style.overflowWrap = 'break-word';
+                frameContent.style.overflowY = 'auto';
+                frameContent.style.scrollbarWidth = 'thin';
+                frameContent.style.scrollbarColor = 'hsl(var(--default-active)) hsl(var(--background-step-1))';
+
+                frameButton.addEventListener('mouseenter', () => {
+                    frameButton.style.backgroundColor = 'hsl(var(--default-base))';
+                });
+
+                frameButton.addEventListener('mouseleave', () => {
+                    frameButton.style.backgroundColor = 'transparent';
+                });
+
+                frameButton.addEventListener('click', () => {
+                    frameContainer.style.display = 'none';
+                });
+                
+                slot.addEventListener('click', async () => {
+                    const link = this.getAttribute('data-link')!;
+                    const { changelog } = await (await fetch(link, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ currentURLOrigin: window.location.origin }),
+                    })).json();
+
+                    frameContent.innerHTML = `
+                        <h1>Full Changelog</h1>
+                        <a href="${link}" target="_blank">See on GitHub ⤴</a>
+                        ${changelog}
+                    `;
+
+                    frameContainer.style.display = 'flex';
+                });
+
+                frameContainer.appendChild(frameButton);
+                frameContainer.appendChild(frameContent);
+
+                const shadow = this.attachShadow({ mode: 'open' });
+                shadow.appendChild(frameContainer);
+                shadow.appendChild(slot);
+            }
+        }
+
+        customElements.define('frame-button', FrameButton);
+
+    }
+</script>

package/dist/components/dashboard/islands/user-mgmt/InnerSidebarElement.astro

@@ -0,0 +1,348 @@
+---
+import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK from 'studiocms:sdk';
+import { Button, Divider, Dropdown, Icon, Input } from 'studiocms:ui/components';
+import UserListItem from './UserListItem.astro';
+
+interface Props {
+	lang: UiLanguageKeys;
+}
+
+const { lang } = Astro.props;
+
+const Users = await studioCMS_SDK.GET.database.users();
+
+const safeUsers: {
+	id: string;
+	name: string;
+	email: string | null;
+	avatar: string | null;
+	username: string;
+	permissionsData:
+		| {
+				user: string;
+				rank: string;
+		  }
+		| undefined;
+}[] = Users.map(({ avatar, email, id, name, username, permissionsData }) => {
+	return { avatar, email, id, name, username, permissionsData };
+});
+
+const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
+---
+<div class="inner-user-sidebar-header">
+  <Button variant="solid" color="primary" size='md' id="back-to-outer" class="mobile-btn mid-size-btn">
+    <Icon name="arrow-left" width={24} height={24} slot="start-content" />
+  </Button>
+  <form id="search-form">
+    <Input name='search' placeholder={t('input-placeholder-search')} type='search' required />
+  </form>
+  <Dropdown
+    transition:persist
+    transition:persist-props
+    id='create-user-dropdown'
+    options={[
+      { label: t('dropdown-create-user'), icon: 'user-plus', value: 'new-user' },
+      { label: t('dropdown-create-invite'), icon: 'inbox-arrow-down', value: 'new-invite' },
+    ]}
+    align={'end'}
+    offset={8}
+  >
+    <Button variant="solid" color="primary" size='md' class="add-button">
+      <Icon name="plus" width={24} height={24} />
+    </Button>
+  </Dropdown>
+  <Button variant="solid" color="primary" size='md' class="mobile-btn" id="show-page">
+    <Icon name="x-mark" width={24} height={24} slot="start-content" />
+  </Button>
+</div>
+
+<Divider background={'background-step-1'}></Divider>
+
+<div id="user-list"
+    class="inner-sidebar-users scrollbar" 
+    data-userpartial={StudioCMSRoutes.endpointLinks.partials.userListItems}
+    data-users={JSON.stringify(safeUsers)}
+    >
+    { Users.map((user) => <UserListItem user={user} />) }
+</div>
+
+<div id="search-list"
+    class="inner-sidebar-users scrollbar" 
+    style="display: none;"
+    data-userpartial={StudioCMSRoutes.endpointLinks.partials.userListItems}
+    data-users={JSON.stringify(safeUsers)}
+    >
+</div>
+
+<div id="new-users-links"
+  style="display: none;"
+  data-create_user={StudioCMSRoutes.endpointLinks.newUsers.create}
+  data-create_invite={StudioCMSRoutes.endpointLinks.newUsers.invite}
+  ></div>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        updateElmPlaceholder,
+    } from 'studiocms:i18n/client';
+
+    const dropdownKeys: Record<string, string> = {
+        'new-user': 'dropdown-create-user',
+        'new-invite': 'dropdown-create-invite',
+    }
+
+    const getDropdownOptions = () => {
+        const dropdownElm = document.getElementById('create-user-dropdown-dropdown') as HTMLUListElement;
+        const options = dropdownElm?.querySelectorAll('.sui-dropdown-option') as NodeListOf<HTMLLIElement>;
+
+        const returnData: Record<string, HTMLSpanElement> = {};
+
+        for (const option of options) {
+            const value = option.dataset.value as string;
+            const key = dropdownKeys[value];
+
+            if (!key) continue;
+
+            const SelectedElm = (option.querySelector('.sui-dropdown-line-container') as HTMLDivElement).querySelector('span');
+
+            if (!SelectedElm) continue;
+
+            returnData[key] = SelectedElm;
+        }
+
+        return returnData;
+    }
+  
+    const currentPage = '@studiocms/dashboard:user-mngmt-sidebar';
+  
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+      
+    i18n.subscribe(comp => {
+        updateElmPlaceholder('search', comp['input-placeholder-search']);
+
+        const dropdownOptions = getDropdownOptions();
+
+        for (const [key, elm] of Object.entries(dropdownOptions)) {
+            // @ts-ignore
+            elm.textContent = comp[key];
+        }
+    });
+</script>
+
+<script>
+    import { DropdownHelper, ModalHelper, toast } from 'studiocms:ui/components';
+  
+    const createNewDropdown = new DropdownHelper('create-user-dropdown');
+    const createNewUserModal = new ModalHelper('create-new-user-modal');
+    const createUserInviteModal = new ModalHelper('create-user-invite-modal');
+
+    const inviteResponseModal = new ModalHelper('invite-response-modal');
+
+    const inviteResponsePlaceholder = document.getElementById('invite-response-placeholder') as HTMLElement;
+
+    const newUsersLinks = document.getElementById('new-users-links') as HTMLDivElement;
+
+    const createNewUserLink = newUsersLinks.dataset.create_user as string;
+    const createUserInviteLink = newUsersLinks.dataset.create_invite as string;
+    
+    createNewDropdown.registerClickCallback((value) => {
+        if (value === 'new-user') {
+            createNewUserModal.show();
+        } else if (value === 'new-invite') {
+            createUserInviteModal.show();
+        }
+    });
+
+    createNewUserModal.registerConfirmCallback(async (formData) => {
+        const username = formData?.get('username');
+        const email = formData?.get('email');
+        const password = formData?.get('password');
+        const displayname = formData?.get('display_name');
+        const rank = formData?.get('rank');
+
+        const data = {
+            username,
+            email,
+            password,
+            displayname, 
+            rank
+        };
+
+        const apiResponse = await fetch(createNewUserLink, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
+
+        const response = await apiResponse.json();
+
+        if (!apiResponse.ok) {
+            console.error('Failed to create new user');
+            toast({
+                title: 'Failed to create new user',
+                description: response.error,
+                type: 'danger',
+            })
+            return;
+        }
+
+        createNewUserModal.hide();
+        toast({
+            title: 'User created successfully.',
+            type: 'success',
+        });
+    });
+
+    createUserInviteModal.registerConfirmCallback(async (formData) => {
+        const username = formData?.get('username');
+        const email = formData?.get('email');
+        const displayname = formData?.get('display_name');
+        const rank = formData?.get('rank');
+
+        const data = {
+            username,
+            email,
+            displayname, 
+            rank,
+            originalUrl: window.location.origin
+        };
+
+        const apiResponse = await fetch(createUserInviteLink, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
+
+        const response = await apiResponse.json();
+
+        if (!apiResponse.ok) {
+            console.error('Failed to create new user invite');
+            toast({
+                title: 'Failed to create new user invite',
+                description: response.error,
+                type: 'danger',
+            })
+            return;
+        }
+
+        inviteResponsePlaceholder.innerText = response.link;
+
+        createUserInviteModal.hide();
+        inviteResponseModal.show();
+    });
+</script>
+
+<script>
+    import DOMPurify from "dompurify";
+    import Fuse from "fuse.js";
+
+    type User = {
+            id: string;
+            name: string;
+            email: string | null;
+            avatar: string | null;
+            username: string;
+            permissionsData:
+                | {
+                        user: string;
+                        rank: string;
+                }
+                | undefined;
+        };
+
+    type Users = User[];
+
+    function clearSearchParams(userListElm: HTMLDivElement, ActualList: HTMLDivElement) {
+        const url = new URL(window.location.href);
+        url.searchParams.delete('search');
+        window.history.pushState({}, '', url);
+        userListElm.style.display = 'none';
+        ActualList.style.display = 'flex';
+    }
+
+    async function runSearch(form: HTMLFormElement, userListElm: HTMLDivElement, users: Users, userListItemsPartial: string, ActualList: HTMLDivElement) {
+        const formData = new FormData(form);
+        
+        const searchTerm = DOMPurify.sanitize(formData.get('search')?.toString() || '');
+
+        if (!searchTerm || searchTerm.length === 0) return;
+
+        const url = new URL(window.location.href);
+        url.searchParams.set('search', searchTerm);
+        window.history.pushState({}, '', url);
+
+        const searchList = users;
+
+        const fuse = new Fuse(searchList, {
+            keys: ['name', 'username'],
+            isCaseSensitive: false,
+            threshold: 0.5,
+        });
+
+        const results = fuse.search(searchTerm);
+
+        const res = await fetch(userListItemsPartial, {
+            method: 'POST',
+            body: JSON.stringify({ users: results.map((item) => item.item), searchQuery: searchTerm }),
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        });
+
+        if (!res.ok) {
+            console.error('Failed to fetch search list');
+            return [];
+        }
+
+        const html = await res.text();
+
+        userListElm.innerHTML = html;
+        userListElm.style.display = 'flex';
+        ActualList.style.display = 'none';
+    }
+
+    async function searchSetup() {
+        const searchForm = document.getElementById('search-form') as HTMLFormElement;
+        const searchInput = searchForm.querySelector('input[name="search"]') as HTMLInputElement;
+
+        const ActualUserList = document.querySelector('#user-list') as HTMLDivElement;
+        
+        const userListElm = document.querySelector('#search-list') as HTMLDivElement;
+        const users: Users = JSON.parse(userListElm.dataset.users!);
+        const userListItemsPartial = userListElm.dataset.userpartial!;
+
+        const url = new URL(window.location.href);
+
+        const searchTerm = url.searchParams.get('search');
+
+        if (searchTerm) {
+            const input = searchInput;
+            input.value = searchTerm;
+            await runSearch(searchForm, userListElm, users, userListItemsPartial, ActualUserList);
+        }
+
+        searchForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            await runSearch(searchForm, userListElm, users, userListItemsPartial, ActualUserList);
+        });
+
+        let timeout: NodeJS.Timeout;
+        searchInput.addEventListener('input', () => {
+            clearTimeout(timeout);
+            timeout = setTimeout(async () => await runSearch(searchForm, userListElm, users, userListItemsPartial, ActualUserList), 500);
+        });
+
+        searchInput.addEventListener('search', () => {
+            clearSearchParams(userListElm, ActualUserList);
+        });
+    }
+
+searchSetup();
+</script>