studiocms 0.2.0 → 0.4.0

package/frontend/components/dashboard/user-mgmt/InnerSidebarElement.astro

@@ -71,7 +71,6 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 
 <div id="user-list"
     class="inner-sidebar-users scrollbar" 
-    data-userpartial={Astro.locals.StudioCMS.routeMap.endpointLinks.partials.userListItems}
     data-users={JSON.stringify(safeUsers)}
     >
     { Users.map((user) => <UserListItem user={user} />) }
@@ -80,17 +79,10 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 <div id="search-list"
     class="inner-sidebar-users scrollbar" 
     style="display: none;"
-    data-userpartial={Astro.locals.StudioCMS.routeMap.endpointLinks.partials.userListItems}
     data-users={JSON.stringify(safeUsers)}
     >
 </div>
 
-<div id="new-users-links"
-  style="display: none;"
-  data-create_user={Astro.locals.StudioCMS.routeMap.endpointLinks.newUsers.create}
-  data-create_invite={Astro.locals.StudioCMS.routeMap.endpointLinks.newUsers.invite}
-  ></div>
-
 <script>
     import { 
         $i18n,
@@ -145,6 +137,9 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
     import { DropdownHelper } from 'studiocms:ui/components/dropdown/client';
     import { ModalHelper } from 'studiocms:ui/components/modal/client';
     import { toast } from 'studiocms:ui/components/toaster/client';
+    import { dashboardClient, dashboardSharedCatchTags } from "studiocms:client/apiClients";
+    import * as Effect from "effect/Effect";
+    import { availablePermissionRanks, type AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
 
     const createNewDropdown = new DropdownHelper('create-user-dropdown');
     const createNewUserModal = new ModalHelper('create-new-user-modal');
@@ -154,10 +149,9 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 
     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;
+    const isValidRank = (rank: string): rank is AvailablePermissionRanks => {
+        return availablePermissionRanks.includes(rank as AvailablePermissionRanks);
+    }
     
     createNewDropdown.registerClickCallback((value) => {
         if (value === 'new-user') {
@@ -168,107 +162,122 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
     });
 
     createNewUserModal.registerConfirmCallback(async (formData) => {
-        const username = formData?.get('create-new-username');
-        const email = formData?.get('create-new-email');
-        const password = formData?.get('create-new-password');
-        const displayname = formData?.get('create-new-display_name');
-        const rank = formData?.get('create-new-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 username = formData?.get('create-new-username')?.toString() as string | null;
+        const email = formData?.get('create-new-email')?.toString() as string | null;
+        const password = formData?.get('create-new-password')?.toString() as string | null;
+        const displayname = formData?.get('create-new-display_name')?.toString() as string | null;
+        const rank = formData?.get('create-new-rank')?.toString() as string | null;
 
-        const response = await apiResponse.json();
+        if (!username || !email || !password || !displayname || !rank) {
+            toast({
+                title: 'Please fill out all fields.',
+                type: 'warning',
+            });
+            return;
+        }
 
-        if (!apiResponse.ok) {
-            console.error('Failed to create new user');
+        if (!isValidRank(rank)) {
+            toast({
+                title: 'Invalid rank provided.',
+                type: 'danger',
+            });
+            return;
+        }
+
+        const response = await dashboardClient.pipe(
+            Effect.flatMap((client) => client.create.createUser({
+                payload: {
+                    username,
+                    email,
+                    password,
+                    displayname, 
+                    rank,
+                    originalUrl: window.location.origin
+                }
+            })),
+            Effect.catchTags(dashboardSharedCatchTags),
+            Effect.runPromise
+        );
+
+        if ('error' in response) {
+            console.error('Failed to create new user', response.error);
             toast({
                 title: 'Failed to create new user',
                 description: response.error,
                 type: 'danger',
             })
             return;
+        } else {
+            createNewUserModal.hide();
+            toast({
+                title: 'User created successfully.',
+                type: 'success',
+            });
+            return;
         }
-
-        createNewUserModal.hide();
-        toast({
-            title: 'User created successfully.',
-            type: 'success',
-        });
     });
 
     createUserInviteModal.registerConfirmCallback(async (formData) => {
-        const username = formData?.get('create-user-invite-username');
-        const email = formData?.get('create-user-invite-email');
-        const displayname = formData?.get('create-user-invite-display_name');
-        const rank = formData?.get('create-user-invite-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 username = formData?.get('create-user-invite-username')?.toString() as string | null;
+        const email = formData?.get('create-user-invite-email')?.toString() as string | null;
+        const displayname = formData?.get('create-user-invite-display_name')?.toString() as string | null;
+        const rank = formData?.get('create-user-invite-rank')?.toString() as string | null;
 
-        const response = await apiResponse.json();
+        if (!username || !email || !displayname || !rank) {
+            toast({
+                title: 'Please fill out all fields.',
+                type: 'warning',
+            });
+            return;
+        }
+
+        if (!isValidRank(rank)) {
+            toast({
+                title: 'Invalid rank provided.',
+                type: 'danger',
+            });
+            return;
+        }
+
+        const response = await dashboardClient.pipe(
+            Effect.flatMap((client) => client.create.createUserInvite({
+                payload: {
+                    username,
+                    email,
+                    displayname, 
+                    rank,
+                    originalUrl: window.location.origin
+                }
+            })),
+            Effect.catchTags(dashboardSharedCatchTags),
+            Effect.runPromise
+        );
 
-        if (!apiResponse.ok) {
-            console.error('Failed to create new user invite');
+        if ('error' in response) {
+            console.error('Failed to create new user invite', response.error);
             toast({
                 title: 'Failed to create new user invite',
                 description: response.error,
                 type: 'danger',
             })
             return;
+        } else {
+            inviteResponsePlaceholder.innerText = response.message;
+            createUserInviteModal.hide();
+            inviteResponseModal.show();
+            return;
         }
-
-        inviteResponsePlaceholder.innerText = response.message;
-
-        createUserInviteModal.hide();
-        inviteResponseModal.show();
     });
 </script>
 
 <script>
     import DOMPurify from "dompurify";
     import Fuse from "fuse.js";
+    import { sdkClient } from "studiocms:client/apiClients";
+    import * as Effect from "effect/Effect";
+    import type { CombinedUserData } from "studiocms:sdk/types";
 
-    type User = {
-            id: string;
-            name: string;
-            email: string | null;
-            avatar: string | null;
-            username: string;
-            permissionsData:
-                | {
-                        user: string;
-                        rank: string;
-                }
-                | undefined;
-        };
-
-    type Users = User[];
+    type Users = Pick<CombinedUserData, 'id' | 'name' | 'email' | 'avatar' | 'username' | 'permissionsData'>[];
 
     function clearSearchParams(userListElm: HTMLDivElement, ActualList: HTMLDivElement) {
         const url = new URL(window.location.href);
@@ -278,7 +287,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
         ActualList.style.display = 'flex';
     }
 
-    async function runSearch(form: HTMLFormElement, userListElm: HTMLDivElement, users: Users, userListItemsPartial: string, ActualList: HTMLDivElement) {
+    async function runSearch(form: HTMLFormElement, userListElm: HTMLDivElement, users: Users, ActualList: HTMLDivElement) {
         const formData = new FormData(form);
         
         const searchTerm = DOMPurify.sanitize(formData.get('search')?.toString() || '');
@@ -299,20 +308,19 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 
         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();
+        const html = await sdkClient.pipe(
+            Effect.flatMap((client) =>
+                client.utils.userListItems({
+                    payload: {
+                        users: results.map(({ item }) => item),
+                        searchQuery: searchTerm,
+                    }
+                })
+            ),
+            Effect.tapError(Effect.logError),
+            Effect.map((res) => res.html),
+            Effect.runPromise
+        );
 
         userListElm.innerHTML = html;
         userListElm.style.display = 'flex';
@@ -327,7 +335,6 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
         
         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);
 
@@ -336,18 +343,18 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
         if (searchTerm) {
             const input = searchInput;
             input.value = searchTerm;
-            await runSearch(searchForm, userListElm, users, userListItemsPartial, ActualUserList);
+            await runSearch(searchForm, userListElm, users, ActualUserList);
         }
 
         searchForm.addEventListener('submit', async (e) => {
             e.preventDefault();
-            await runSearch(searchForm, userListElm, users, userListItemsPartial, ActualUserList);
+            await runSearch(searchForm, userListElm, users, ActualUserList);
         });
 
         let timeout: NodeJS.Timeout;
         searchInput.addEventListener('input', () => {
             clearTimeout(timeout);
-            timeout = setTimeout(async () => await runSearch(searchForm, userListElm, users, userListItemsPartial, ActualUserList), 500);
+            timeout = setTimeout(async () => await runSearch(searchForm, userListElm, users, ActualUserList), 500);
         });
 
         searchInput.addEventListener('search', () => {

package/frontend/components/dashboard/user-mgmt/UserListItem.astro

@@ -1,41 +1,28 @@
 ---
+import config from 'studiocms:config';
 import { useTranslations } from 'studiocms:i18n';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import type { CombinedUserData } from 'studiocms:sdk/types';
 import { Divider } from 'studiocms:ui/components/divider';
 import { Icon } from 'studiocms:ui/components/icon';
-import type { AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
 import User from '../../shared/SSRUser.astro';
 
 interface Props {
-	user: {
-		id: string;
-		name: string;
-		email: string | null | undefined;
-		avatar: string | null | undefined;
-		username: string;
-		permissionsData:
-			| {
-					user: string;
-					rank: AvailablePermissionRanks;
-			  }
-			| undefined;
-	};
+	user: Pick<CombinedUserData, 'id' | 'name' | 'email' | 'avatar' | 'username' | 'permissionsData'>;
 	searchQuery?: string;
 }
 
 const { user, searchQuery } = Astro.props;
 
-const lang = Astro.locals.StudioCMS.defaultLang;
+const lang = Astro.locals?.StudioCMS?.defaultLang || config.locale.i18n.defaultLocale;
 const t = useTranslations(lang, '@studiocms/dashboard:user-component');
 
-const userListItemHref = new URL(
-	Astro.locals.StudioCMS.routeMap.mainLinks.userManagementEdit,
-	Astro.url.origin
-);
-userListItemHref.searchParams.set('user', user.id);
+const userListItemSearch = new URLSearchParams({ user: user.id });
+
 if (searchQuery) {
-	userListItemHref.searchParams.set('search', searchQuery);
+	userListItemSearch.set('search', searchQuery);
 }
-const userListItemHrefString = userListItemHref.toString();
+const userListItemHrefString = `${StudioCMSRoutes.mainLinks.userManagementEdit}?${userListItemSearch.toString()}`;
 
 const id = `user-mngmt-user-account-${user.id || 'unknown'}`;
 

package/frontend/components/dashboard/user-mgmt/UserListItems.astro

@@ -0,0 +1,18 @@
+---
+import type { CombinedUserData } from 'studiocms:sdk/types';
+import UserListItem from './UserListItem.astro';
+
+interface Props {
+	users: Pick<
+		CombinedUserData,
+		'id' | 'name' | 'email' | 'avatar' | 'username' | 'permissionsData'
+	>[];
+	searchQuery?: string;
+}
+
+const { users, searchQuery } = Astro.props;
+---
+
+{users.map((user) => (
+	<UserListItem user={user} searchQuery={searchQuery} />
+))}

package/frontend/components/first-time-setup/snippets/{opt2-studiocms.config.diff → studiocms.config.diff}

@@ -1,3 +1,4 @@
+
 import { defineStudioCMSConfig } from 'studiocms/config';
 
 export default defineStudioCMSConfig({

package/frontend/components/shared/Code.astro

@@ -39,10 +39,7 @@ if (ins) {
 const id = __test_mode ? 'test-id' : Math.random().toString(36).substring(2, 9);
 ---
 
-<pre
-	class="code-container scrollbar">
-  <code id={id} class:list={["custom-code", (del || ins) ? 'diff' : '']} {...props} set:html={htmlCode} />
-</pre>
+<pre class="code-container scrollbar"><code id={id} class:list={["custom-code", (del || ins) ? 'diff' : '']} {...props} set:html={htmlCode} /></pre>
 <script is:inline define:vars={{ id: id }}>
 	const codesWithDiff = document.getElementById(id);
 

package/frontend/components/shared/DynamicSettingsRenderer.astro

@@ -8,7 +8,7 @@ import { Select } from 'studiocms:ui/components/select';
 import { Textarea } from 'studiocms:ui/components/textarea';
 
 export interface Props {
-	fields: SettingsField[];
+	fields: readonly SettingsField[];
 }
 
 const { fields } = Astro.props;

package/frontend/components/shared/SSRUser.astro

@@ -90,7 +90,6 @@ const {
 			const avatarUrl = this.dataset.avatarUrl;
 			const timeoutDelay = parseInt(this.dataset.avatarTimeout || '3000', 10);
 			const fallbackDataUri = this.dataset.avatarFallback;
-			const avatarName = this.dataset.avatarName || 'User';
 
 			if (!avatarUrl) return;
 			if (!fallbackDataUri) return;
@@ -98,7 +97,7 @@ const {
 			const img = this.querySelector('img');
 			if (!img) return;
 
-			this.loadAvatar(img, avatarUrl, timeoutDelay, fallbackDataUri, avatarName);
+			this.loadAvatar(img, avatarUrl, timeoutDelay, fallbackDataUri);
 		}
 
 		isValidAvatarUrl(url: string): boolean {
@@ -153,8 +152,7 @@ const {
 			img: HTMLImageElement,
 			url: string,
 			timeoutMs: number,
-			fallbackDataUri: string,
-			name: string
+			fallbackDataUri: string
 		): Promise<void> {
 			if (!this.isValidAvatarUrl(url)) {
 				this.showFallbackIcon(img, fallbackDataUri);

package/frontend/components/shared/foldertree/FolderTreeNode.astro

@@ -35,12 +35,6 @@ const t = useTranslations(lang, '@studiocms/dashboard:file-tree-renderer');
             aria-controls={contentId}
             aria-label={`Toggle ${node.name} folder`}
         >
-            {/*<Icon
-                name="heroicons:chevron-right"
-                class="chevron-icon"
-                width={16}
-                height={16}
-            />*/}
         </button>
         <div class="tree-node-content">
             <Icon

package/frontend/components/shared/storage-manager/StorageCopyOutput.astro

@@ -2,7 +2,6 @@
 import { useTranslations } from 'studiocms:i18n';
 import { isDefaultManager } from 'studiocms:storage-manager/name';
 import { Button } from 'studiocms:ui/components/button';
-import { Divider } from 'studiocms:ui/components/divider';
 import { Icon } from 'studiocms:ui/components/icon';
 import { Input } from 'studiocms:ui/components/input';
 

package/frontend/components/shared/taxonomy/TaxonomyTreeNode.astro

@@ -39,12 +39,6 @@ const t = useTranslations(lang, '@studiocms/dashboard:taxonomy-tree-renderer');
                     aria-controls={contentId}
                     aria-label={`Toggle ${node.name}`}
                 >
-                    {/*<Icon
-                        name="heroicons:chevron-right"
-                        class="chevron-icon"
-                        width={16}
-                        height={16}
-                    />*/}
                 </button>
             )
         }

package/frontend/layouts/DashboardLayout.astro

@@ -4,12 +4,10 @@ import '../styles/dashboard-base.css';
 import '../styles/dashboard-diff.css';
 import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { defaultLang } from 'studiocms:i18n';
-import type { AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
 import type { DynamicConfigEntry, StudioCMSSiteConfig } from '@withstudiocms/sdk/types';
 import type { ComponentProps } from 'astro/types';
 import Ambients from '../components/Ambients.astro';
 import DoubleSidebar from '../components/dashboard/DoubleSidebar.astro';
-import LoginChecker from '../components/dashboard/LoginChecker.astro';
 import SidebarModals from '../components/dashboard/SidebarModals.astro';
 import SingleSidebar from '../components/dashboard/SingleSidebar.astro';
 import BaseLayout from './BaseLayout.astro';
@@ -27,9 +25,8 @@ const makePageTitle = (
 };
 
 interface Props extends ComponentProps<typeof BaseLayout> {
-	config: DynamicConfigEntry<StudioCMSSiteConfig>;
+	config: DynamicConfigEntry<Pick<StudioCMSSiteConfig, 'title' | 'description'>>;
 	sidebar?: false | 'single' | 'double';
-	requiredPermission?: AvailablePermissionRanks | 'none';
 	currentUser: UserSessionData | null;
 }
 
@@ -38,7 +35,6 @@ const {
 	title: propTitle,
 	description: propDescription,
 	lang = defaultLang,
-	requiredPermission = 'unknown',
 	sidebar = 'single',
 	currentUser,
 } = Astro.props;
@@ -50,11 +46,6 @@ const description = propDescription ?? config.data.description;
 <BaseLayout {lang} {title} {description}>
   <Ambients />
   <SidebarModals {lang} />
-  {
-    requiredPermission !== 'none' && (
-      <LoginChecker {requiredPermission} {currentUser} />
-    )
-  }
   {
     sidebar === 'single' && (
       <SingleSidebar {currentUser} />

package/frontend/layouts/TaxonomyLayout.astro

@@ -67,7 +67,6 @@ if (type === 'categories') {
 <DashboardLayout
     title={t("title")}
     description={t("description")}
-    requiredPermission="editor"
     sidebar="double"
     {lang}
     {config}