studiocms 0.1.0-beta.10

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,109 @@
+---
+import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
+import { Button, Card, Center } from 'studiocms:ui/components';
+import { providerData } from '../profile/oAuthButtonProviders.js';
+
+interface Props {
+	lang: UiLanguageKeys;
+	oAuthData?: {
+		provider: string;
+		providerUserId: string;
+		userId: string;
+	}[];
+}
+
+const { oAuthData, lang } = 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);
+const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-edit');
+---
+    
+<div class="text-h3">
+    <t-users-edit-socials key="social-accounts-header">{t('social-accounts-header')}</t-users-edit-socials>
+</div>
+
+<Card fullWidth class="social-signin-bg">
+
+
+    {
+        connectedProviders.length === 0 ? (
+            <Center><t-users-edit-socials key="social-accounts-non">{t('social-accounts-non')}</t-users-edit-socials></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>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        makeTranslation,
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:user-mngmt-edit';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+    
+    if (!customElements.get('t-users-edit-socials')) {
+        customElements.define('t-users-edit-socials', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+<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>

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

@@ -0,0 +1,60 @@
+---
+import { getLabelForPermissionLevel } from 'studiocms:auth/utils/getLabelForPermissionLevel';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import { Divider, Icon, User } from 'studiocms:ui/components';
+
+interface Props {
+	user: {
+		id: string;
+		name: string;
+		email: string | null;
+		avatar: string | null;
+		username: string;
+		permissionsData:
+			| {
+					user: string;
+					rank: string;
+			  }
+			| undefined;
+	};
+	searchQuery?: string;
+}
+
+const { user, searchQuery } = Astro.props;
+---
+<a class="sidebar-user" href={`${StudioCMSRoutes.mainLinks.userManagementEdit}/?user=${user.id}${searchQuery ? `&search=${searchQuery}` : ''}`} data-astro-reload>
+    <User 
+        name={user.name}
+        avatar={user.avatar ?? undefined} 
+        description={getLabelForPermissionLevel(user.permissionsData?.rank!)} 
+        loading='eager',
+        />
+    <Icon name="chevron-right" width={24} height={24} />
+</a>
+<Divider background={'background-step-1'}></Divider>
+
+<script is:inline data-astro-rerun>
+    function setUserLinks() {
+        const userLinks = document.querySelectorAll('.sidebar-user');
+        
+        const setActive = (link) => {
+            userLinks.forEach((link) => {
+                link.classList.remove('active');
+            });
+            link.classList.add('active');
+        };
+        const CurrentQueryParams = new URL(window.location.href).searchParams.get('user');
+
+        userLinks.forEach((link) => {
+            const LinkQueryParams = new URL(link.href).searchParams.get('user');
+
+            if (LinkQueryParams === CurrentQueryParams) {
+                setActive(link);
+            }
+
+        })
+    }
+
+    document.addEventListener('astro:page-load', setUserLinks);
+    setUserLinks();
+</script>

package/dist/components/dashboard/sidebar-modals/UserManagementModals.astro

@@ -0,0 +1,103 @@
+---
+import { Button, Center, Icon, Input, Modal, Select } from 'studiocms:ui/components';
+---
+<Modal
+  id='create-new-user-modal'
+  cancelButton={{ label: 'Cancel', color: 'default' }}
+  actionButton={{ label: 'Confirm', color: 'danger' }}
+  isForm
+>
+  <h2 slot='header'>Create New User</h2>
+  <div class="modal-body">
+    <p>Please save this information now. It will not be shown to you again.</p>
+    <Input label="Username" name="username" type="text" isRequired />
+    <Input label="Email Address" name="email" type="email" isRequired />
+    <Input label="Display Name" name="display_name" type="text" isRequired />
+    <Input label="Password" name="password" type="password" />
+    <Select fullWidth name='rank' label='User Rank' defaultValue='visitor' options={[
+      { label: 'Visitor', value: 'visitor' },
+      { label: 'Editor', value: 'editor' },
+      { label: 'Administrator', value: 'admin' },
+      { label: 'Owner', value: 'owner' },
+    ]} />
+  </div>
+</Modal>
+
+<Modal
+  id='create-user-invite-modal'
+  cancelButton={{ label: 'Cancel', color: 'default' }}
+  actionButton={{ label: 'Confirm', color: 'danger' }}
+  isForm
+>
+  <h2 slot='header'>Create User Invite</h2>
+  <div class="modal-body">
+    <Input label="Username" name="username" type="text" isRequired />
+    <Input label="Email Address" name="email" type="email" isRequired />
+    <Input label="Display Name" name="display_name" type="text" isRequired />
+    <Select fullWidth name='rank' label='User Rank' defaultValue='visitor' options={[
+      { label: 'Visitor', value: 'visitor' },
+      { label: 'Editor', value: 'editor' },
+      { label: 'Administrator', value: 'admin' },
+      { label: 'Owner', value: 'owner' },
+    ]} />
+  </div>
+</Modal>
+
+<Modal id='invite-response-modal'>
+  <h2 slot="header">Invite Link</h2>
+  <Center>
+    <div class="modal-body">
+      <span>This will only be shown once, please save this information.</span>
+      <div class="link-container">
+        <code id="invite-response-placeholder"></code>
+        <Button color="primary" size="sm" class="copy-btn">
+          <Icon name="document-duplicate-20-solid" width={20} height={20} />
+        </Button>
+      </div>
+    </div>
+  </Center>
+</Modal>
+
+<style>
+  .modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+
+    span {
+      font-size: .875rem;
+    }
+
+    code {
+      background-color: hsl(var(--background-step-3));
+      padding: .25rem;
+      border-radius: 4px;
+    }
+
+    p {
+      text-align: center;
+    }
+  }
+
+  .link-container {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  #invite-response-placeholder {
+    white-space: nowrap;
+    overflow: auto;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    height: 32px;
+    display: flex;
+    align-items: center;
+  }
+
+  .copy-btn {
+    width: 32px !important;
+    height: 32px !important;
+  }
+</style>

package/dist/components/dashboard/sidebar-modals/VersionModal.astro

@@ -0,0 +1,267 @@
+---
+import changelog from 'studiocms:changelog';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import { StudioCMSRenderer } from 'studiocms:renderer';
+import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { Modal } from 'studiocms:ui/components';
+import currentVersion from 'studiocms:version';
+import { dateWithTimeAndZone } from '../component-scripts/dateWithTimeAndZone';
+import { timeAgo } from '../component-scripts/timeAgo';
+import VersionCheckChangelog from '../islands/sidebar/VersionCheckChangelog.astro';
+
+const latestVersion = await studioCMS_SDK_Cache.GET.latestVersion();
+
+const lastChecked = latestVersion.lastCacheUpdate;
+---
+<!-- The modals in this file are needed inside of the sidebar but cannot be positioned there due to issues with positioning. -->
+<Modal id="version-modal" size="lg">
+
+    <h2 slot="header" class="inline-title">
+        <span>Version Information</span>
+        <button data-link={StudioCMSRoutes.sdk.updateLatestVersionCache} 
+            id="version-modal-reload"
+            class="reload-button" 
+            title="Check for updates" 
+            aria-label="Check for updates"
+            ><span class="reload"></span>
+        </button>
+    </h2>
+
+    <div>
+        <div class="version-modal-top-row">
+            <div class="version-modal-col">
+                <span class="version-modal-col-title">Current Version</span>
+                <code class="version-modal-col-value">v{currentVersion}</code>
+            </div>
+
+            <div class="version-modal-col">
+                <span class="version-modal-col-title">Latest Version</span>
+                <code id="latest-version" class="version-modal-col-value">v{latestVersion.version}</code>
+            </div>
+
+            <div class="version-modal-col">
+                <span class="version-modal-col-title">Last Update Check</span>
+                <span class="version-modal-col-value">
+                    <time id="version-modal-last-checked-date" datetime={lastChecked.toISOString()}>{dateWithTimeAndZone(lastChecked)}</time>
+                    <span id="latest-update-check" class="latest-update-check">({timeAgo(lastChecked)})</span>
+                </span>
+            </div>
+        </div>
+
+        <div class="version-modal-release-notes">
+            <div><StudioCMSRenderer content={changelog} /></div>
+            <span class="release-notes-read-more">
+                <VersionCheckChangelog link="/studiocms_api/sdk/full-changelog.json"><span class="read-more-text">Full Changelog</span></VersionCheckChangelog>
+            </span>
+        </div>
+
+        <div class="version-modal-links">
+            <span class="version-modal-row-title">View on</span>
+            <a href="https://github.com/withstudiocms/studiocms/releases" 
+                target="_blank" 
+                class="version-link"
+                title="View Releases on GitHub"
+                aria-label="View Releases on GitHub"
+                ><span class="brand--github"></span>
+            </a>
+            <a href="https://npm.im/studiocms" 
+                target="_blank" 
+                class="version-link"
+                title="View on NPM"
+                aria-label="View on NPM"
+                ><span class="brand--npm"></span>
+            </a>
+        </div>
+    </div>
+</Modal>
+<style>
+	.version-modal-top-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr 2fr;
+        gap: 1rem;
+    }
+
+    @media screen and (max-width: 768px) {
+        .version-modal-top-row {
+            grid-template-columns: 1fr;
+        }
+        
+    }
+
+    .release-notes-read-more {
+        display: flex;
+        flex-direction: row-reverse;
+        margin-top: 1rem;
+        font-size: 1rem;
+
+        .read-more-text {
+            color: hsl(var(--text-muted));
+            text-align: end;
+            font-weight: 400;
+            cursor: pointer;
+        }
+
+        .read-more-text:hover {
+            color: hsl(var(--primary-base));
+            text-decoration: underline;
+        }
+
+        a {
+            color: hsl(var(--text-muted));
+            text-decoration: none;
+            font-weight: 700;
+        }
+
+        a:hover {
+            color: hsl(var(--primary-base));
+        }
+    }
+
+    .version-modal-col {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .version-modal-col-title {
+        font-weight: 500;
+    }
+
+    .version-modal-row-title {
+        font-weight: 500;
+        color: hsl(var(--text-muted));
+    }
+
+    .version-modal-col-value {
+        font-weight: 500;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        gap: .5rem;
+    }
+
+    #version-modal-last-checked-date {
+        font-weight: 500;
+        font-family: monospace;
+        font-size: 1em;
+        height: 15px;
+    }
+
+    .version-modal-release-notes {
+        border: 1px solid hsl(var(--border));
+        border-radius: 0.5rem;
+        padding: 1rem;
+        overflow: auto;
+        max-height: 50vh;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .latest-update-check {
+        color: hsl(var(--text-muted));
+        font-size: .7em;
+        font-weight: 700;
+        text-align: center;
+    }
+
+    .version-link {
+        text-decoration: none !important;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    a:-webkit-any-link:hover {
+        text-decoration: underline;
+        color: hsl(var(--primary-base));
+    }
+
+    a:-webkit-any-link {
+        color: hsl(var(--text-muted));
+        text-decoration: none;
+    }
+
+    .version-modal-links {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        align-items: center;
+        vertical-align: middle;
+    }
+
+    .reload-button {
+        display: flex;
+        padding: 0.125rem;
+        border: 2px solid hsl(var(--border));
+        border-radius: 0.5rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        margin-left: 0.25rem;
+        &:hover {
+            background-color: hsl(var(--border));
+
+            .reload {
+                background-color: hsl(var(--primary-base));
+            }
+        }
+    }
+
+    .reload {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        --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='M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99'/%3E%3C/svg%3E");
+        background-color: hsl(var(--text-muted));
+        -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%;
+    }
+
+    .brand--github {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'/%3E%3C/svg%3E");
+        background-color: currentColor;
+        -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%;
+    }
+
+    .brand--npm {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 10v4h2v-3h1v3h1v-4zm5 0v5h2v-1h2v-4zm3 1v2h-1v-2zm2-1v4h2v-3h1v3h1v-3h1v3h1v-4zM3 9h18v6h-9v1H8v-1H3z'/%3E%3C/svg%3E");
+        background-color: currentColor;
+        -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%;
+    }
+
+    .inline-title {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        align-items: center;
+        justify-content: start;
+    }
+</style>

package/dist/components/dashboard/sidebarConfig.d.ts

@@ -0,0 +1,32 @@
+import type { UiLanguageKeys } from 'studiocms:i18n';
+import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
+/**
+ * Represents a link in the sidebar of the dashboard.
+ */
+interface SidebarLink {
+    title?: string;
+    key?: string;
+    icon: HeroIconName;
+    href: string;
+}
+/**
+ * Represents the return value of the `getSidebarLinks` function.
+ */
+interface GetSidebarLinksReturn {
+    baseLinks: SidebarLink[];
+    editorLinks: SidebarLink[];
+    adminLinks: SidebarLink[];
+    ownerLinks: SidebarLink[];
+}
+/**
+ * Generates the sidebar links for the dashboard based on the user's language and role.
+ *
+ * @param {UiLanguageKeys} lang - The language key for translations.
+ * @returns {GetSidebarLinksReturn} An object containing arrays of sidebar links categorized by user roles:
+ * - `baseLinks`: Links accessible to all users.
+ * - `editorLinks`: Links accessible to users with editor role.
+ * - `adminLinks`: Links accessible to users with admin role.
+ * - `ownerLinks`: Links accessible to users with owner role.
+ */
+export declare function getSidebarLinks(lang: UiLanguageKeys): GetSidebarLinksReturn;
+export {};