studiocms 0.1.0-beta.7 → 0.1.0-beta.8

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,298 @@
+---
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK from 'studiocms:sdk';
+import {
+	Button,
+	Center,
+	Divider,
+	Dropdown,
+	Icon,
+	Input,
+	Modal,
+	Select,
+} from 'studiocms:ui/components';
+import UserListItem from './UserListItem.astro';
+
+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 };
+});
+---
+<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='Search...' type='search' required />
+  </form>
+  <Dropdown
+    transition:persist
+    transition:persist-props
+    id='create-user-dropdown'
+    options={[
+      { label: 'Create New User', icon: 'user-plus', value: 'new-user' },
+      { label: 'Create User 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 { 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>

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

@@ -0,0 +1,49 @@
+---
+import { getUserData, verifyUserPermissionLevel } from 'studiocms:auth/lib/user';
+import { StudioCMSRoutes } from 'studiocms:lib';
+
+interface Props {
+	requiredPermission?: string;
+}
+
+const { requiredPermission } = Astro.props;
+
+const user = await getUserData(Astro);
+
+const isAuthorized = await verifyUserPermissionLevel(
+	user,
+	(requiredPermission as 'owner' | 'admin' | 'editor' | 'visitor' | 'unknown') ?? 'unknown'
+);
+
+if (!isAuthorized) {
+	return Astro.redirect(StudioCMSRoutes.mainLinks.userManagement);
+}
+---
+{/*
+
+// OLD CODE FOR STATIC/HYBRID Setup
+
+<rank-check
+    data-authorized={`${isAuthorized}`}
+    data-redirect={StudioCMSRoutes.mainLinks.userManagement}
+    style="display: hidden;" 
+></rank-check>
+
+<script>
+    if (!customElements.get('rank-check')) {
+        class RankCheck extends HTMLElement {
+            constructor() {
+                super();
+                const authorized = this.dataset.authorized;
+                const redirect = this.dataset.redirect;
+
+                if (authorized === 'false') {
+                    window.location.href = redirect!;
+                }
+            }
+        }
+
+        customElements.define('rank-check', RankCheck);
+    }
+</script>
+*/}

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

@@ -0,0 +1,88 @@
+---
+import { Button, Card, Center } from 'studiocms:ui/components';
+import { providerData } from '../profile/oAuthButtonProviders.js';
+
+interface Props {
+	oAuthData?: {
+		provider: string;
+		providerUserId: string;
+		userId: string;
+	}[];
+}
+
+const { oAuthData } = Astro.props;
+
+const hasOAuthData = oAuthData && oAuthData.length > 0;
+
+const connectedAccounts: { provider: string }[] = [];
+
+if (hasOAuthData) {
+	for (const provider in oAuthData) {
+		connectedAccounts.push({ provider });
+	}
+}
+
+const socialProviders = providerData.map((providerData) => ({
+	...providerData,
+	connected: connectedAccounts.some(
+		({ provider }) => provider === providerData.label.toLowerCase()
+	),
+}));
+
+const connectedProviders = socialProviders.filter(({ connected }) => connected);
+---
+    
+<div class="text-h3">Connected Accounts</div>
+
+<Card fullWidth class="social-signin-bg">
+
+
+    {
+        connectedProviders.length === 0 ? (
+            <Center>No connected accounts found.</Center>
+        ) : (
+            <div class="button-holder">
+                {
+                    connectedProviders.map(({ enabled, image, label }) => enabled && (
+                        <Button variant="solid" size="md" fullWidth class="oauth-button">
+                            <div class="icon-and-label">
+                                <Fragment set:html={image} />
+                                <span>{label}</span>
+                            </div>
+                        </Button>
+                    ))
+                }
+            </div>
+        )
+    }
+
+</Card>
+
+<style>
+    .social-signin-bg {
+        background-color: hsl(var(--background-step-1));
+        height: auto;
+        width: auto;
+
+        & .button-holder {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: .5rem;
+        }
+
+        & .oauth-button {
+            display: flex;
+            align-items: stretch;
+            justify-content: space-between !important;
+            width: 100%;
+            margin-button: 1rem;
+            cursor: default;
+
+            & .icon-and-label {
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+            }
+        }
+    }
+</style>