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

package/dist/components/dashboard/islands/content-mgmt/shared.d.ts

@@ -0,0 +1,27 @@
+interface PluginListItem {
+    label: string;
+    value: string;
+}
+export declare const PageFolderTree: import("../../../../sdk/types").FolderNode[];
+export declare const parentFolders: {
+    value: string;
+    label: string;
+}[];
+export declare const parentFolderOptions: {
+    value: string;
+    label: string;
+}[];
+export declare const pageTypeOptions: PluginListItem[];
+export declare const trueFalse: {
+    label: string;
+    value: string;
+}[];
+export declare const categoriesOptions: {
+    label: string;
+    value: string;
+}[];
+export declare const tagsOptions: {
+    label: string;
+    value: string;
+}[];
+export {};

package/dist/components/dashboard/islands/content-mgmt/shared.js

@@ -0,0 +1,31 @@
+import pluginsList from "studiocms:plugins";
+import studioCMS_SDK_Cache from "studiocms:sdk/cache";
+const { data: folderList } = await studioCMS_SDK_Cache.GET.folderList();
+const { data: PageFolderTree } = await studioCMS_SDK_Cache.GET.pageFolderTree(true);
+const parentFolders = folderList.map(({ id: value, name: label }) => ({ value, label }));
+const parentFolderOptions = [{ value: "null", label: "None" }, ...parentFolders];
+const pageTypeOptions = pluginsList.flatMap(({ pageTypes }) => {
+  const pageTypeOutput = [];
+  if (!pageTypes) {
+    return pageTypeOutput;
+  }
+  for (const { label, identifier } of pageTypes) {
+    pageTypeOutput.push({ label, value: identifier });
+  }
+  return pageTypeOutput;
+});
+const trueFalse = [
+  { label: "Yes", value: "true" },
+  { label: "No", value: "false" }
+];
+const categoriesOptions = [{ label: "None", value: "null" }];
+const tagsOptions = [{ label: "None", value: "null" }];
+export {
+  PageFolderTree,
+  categoriesOptions,
+  pageTypeOptions,
+  parentFolderOptions,
+  parentFolders,
+  tagsOptions,
+  trueFalse
+};

package/dist/components/dashboard/islands/dashboard/DashboardGrid.astro

@@ -0,0 +1,39 @@
+---
+import { getUserData, verifyUserPermissionLevel } from 'studiocms:auth/lib/user';
+import dashboardGridItems from 'studiocms:components/dashboard-grid-items';
+import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { Center } from 'studiocms:ui/components';
+import DashboardGridItem from './DashboardGridItem.astro';
+
+const { data } = await studioCMS_SDK_Cache.GET.siteConfig();
+
+let gridItems = dashboardGridItems;
+
+const allowedItems: string[] = (data.gridItems as string[]) ?? [];
+
+const filterItems = allowedItems.length > 0;
+
+if (filterItems) {
+	gridItems = dashboardGridItems.filter((item) => allowedItems.includes(item.name));
+}
+
+const currentUser = await getUserData(Astro);
+---
+<div class="dashboard-grid-container">
+
+    { 
+		gridItems.length > 0 
+		? gridItems.map(async (item) => {
+			if (item.requiresPermission) {
+				const allowed = await verifyUserPermissionLevel(currentUser, item.requiresPermission);
+				if (allowed) {
+					return <DashboardGridItem {...item} />
+				}
+			} else {
+				return <DashboardGridItem {...item} />
+			}
+		}) 
+		: <Center><p>There is nothing to display</p></Center> 
+	}
+
+</div>

package/dist/components/dashboard/islands/dashboard/DashboardGridItem.astro

@@ -0,0 +1,34 @@
+---
+import { Card, Icon } from 'studiocms:ui/components';
+import { createComponentProxy, transformHTML } from '../../../../runtime/AstroComponentProxy.js';
+import type { GridItem } from './shared.js';
+
+export interface Props extends GridItem {}
+
+const { span, variant, body, header, name } = Astro.props;
+
+// @ts-expect-error - `$$result` is a global variable injected by Astro's compiler during rendering
+const components = createComponentProxy($$result, body?.components);
+
+let html: string | undefined = undefined;
+
+if (body?.html) {
+	html = await transformHTML(body.html, components, body.sanitizeOpts);
+}
+---
+<Card
+    fullWidth
+    variant={variant}
+    class="grid-item"
+    class:list={[span > 1 && `span-${span}`]}
+    id={name}>
+    {header && (
+        <div slot="header">
+            <span class="grid-item-title">
+                {header.icon && <Icon name={header.icon} width={24} height={24}/>}
+                <span>{header.title}</span>
+            </span>
+        </div>
+    )}
+    { html && <Fragment set:html={html} /> }
+</Card>

package/dist/components/dashboard/islands/dashboard/Test.astro

@@ -0,0 +1,5 @@
+---
+---
+<div>
+    <span>This is only a test!</span>
+</div>

package/dist/components/dashboard/islands/dashboard/UserName.astro

@@ -0,0 +1,6 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+
+const user = await getUserData(Astro);
+---
+<Fragment set:text={user.user?.name} />

package/dist/components/dashboard/islands/dashboard/shared.d.ts

@@ -0,0 +1,2 @@
+import type { GridItemUsable } from '../../../../lib/dashboardGrid.js';
+export type GridItem = GridItemUsable;

package/dist/components/dashboard/islands/plugins/SettingsRenderer.astro

@@ -0,0 +1,29 @@
+---
+import type { SettingsField } from 'studiocms:plugin-helpers';
+import { Row } from 'studiocms:ui/components';
+import { Checkbox, Input, RadioGroup, Select, Textarea } from 'studiocms:ui/components';
+
+interface Props {
+	fields: SettingsField[];
+}
+
+const { fields } = Astro.props;
+---
+{
+  fields.map((field) => {
+    switch (field.input) {
+      case 'checkbox':
+        return <Checkbox label={field.label} size={field.size} color={field.color} defaultChecked={field.defaultChecked} disabled={field.readOnly} name={field.name} isRequired={field.required} />
+      case 'input':
+        return <Input label={field.label} type={field.type} placeholder={field.placeholder} isRequired={field.required} name={field.name} disabled={field.readOnly} defaultValue={field.defaultValue} />
+      case 'textarea':
+        return <Textarea label={field.label} placeholder={field.placeholder} isRequired={field.required} name={field.name} disabled={field.readOnly} defaultValue={field.defaultValue} />
+      case 'radio':
+        return <RadioGroup label={field.label} name={field.name} options={field.options} isRequired={field.required} disabled={field.readOnly} color={field.color} defaultValue={field.defaultValue} horizontal={field.direction === 'horizontal'} />
+      case 'select':
+        return <Select label={field.label} name={field.name} options={field.options} isRequired={field.required} disabled={field.readOnly} defaultValue={field.defaultValue} />
+      case 'row':
+        return <Row alignCenter={field.alignCenter} gapSize={field.gapSize}><Astro.self fields={field.fields} /></Row>
+      }
+    })
+}

package/dist/components/dashboard/islands/profile/APITokens.astro

@@ -0,0 +1,267 @@
+---
+import type { UserSessionData } from 'studiocms:auth/lib/types';
+import { FormattedDate } from 'studiocms:components';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK from 'studiocms:sdk';
+import { Button, Card, Center, Icon, Input, Modal } from 'studiocms:ui/components';
+
+interface Props {
+	userSession: UserSessionData;
+}
+
+const { userSession } = Astro.props;
+
+const { user } = userSession;
+
+if (!user) {
+	throw new Error('User not found');
+}
+
+const userTokens = await studioCMS_SDK.REST_API.tokens.get(user.id);
+---
+<Card fullWidth class="api-tokens">
+    <div slot="header">
+        <h2>API Tokens</h2>
+    
+        <div class="form-header">
+            <Button 
+                type='submit' 
+                id="create-api-token"
+                variant='solid' 
+                color='primary'
+                size='sm'
+                >
+                <Icon slot="start-content" name="plus" width={24} height={24} />
+                Create API Token
+            </Button> 
+        </div>
+    </div>
+    <div class="api-tokens-content">
+        <span class="description">API tokens are used to authenticate with the StudioCMS REST API.</span>
+
+        { userTokens.length > 0 ? userTokens.map((token) => (
+            <Card fullWidth class="token-list-item">
+                <div slot="header" class="token-list-item-header">
+                    <div class="token-list-item-header-row">
+                        <h4>
+                            <Icon name="key" width={24} height={24} />
+                            {token.description}
+                        </h4>
+                        <Button type="submit" variant="solid" color="danger" size="sm" data-token={token.id} data-user={user.id} disabled>
+                            <Icon slot="start-content" name="trash" width={24} height={24} />
+                            Delete
+                        </Button>
+                    </div>
+                </div>
+
+                <div class="token-list-item-content">
+                    <div class="token-list-item-content-row">
+                        <span class="created-at">Created - <FormattedDate date={token.creationDate} /></span>
+                    </div>
+                </div>
+            </Card>
+        )) : (
+            <Card fullWidth class="token-list-item">
+                <Center>
+                    <p class="description">No API tokens found.</p>
+                </Center>
+            </Card>
+        ) }
+    </div>
+    
+</Card>
+<Modal
+  id='create-api-token-modal'
+  cancelButton={{ label: 'Cancel', color: 'default' }}
+  actionButton={{ label: 'Confirm', color: 'primary' }}
+  isForm
+>
+  <h2 slot='header'>Create New API Token</h2>
+  <div class="modal-body">
+    <Input label="Description" name="description" type="text" isRequired />
+    <input type="hidden" name="user" value={user.id} />
+  </div>
+</Modal>
+
+<Modal id='create-token-response-modal'>
+  <h2 slot="header">New Token</h2>
+  <Center>
+    <div class="modal-body">
+        <span>This will only be shown once, please save this information.</span>
+      <code id="create-token-response-placeholder"></code>
+    </div>
+  </Center>
+</Modal>
+
+<div 
+    id="token-api-links" style="display: none;"
+    data-token_api={StudioCMSRoutes.endpointLinks.apiTokens}
+></div>
+
+<script>
+    import { ModalHelper, toast } from 'studiocms:ui/components';
+
+    const createAPITokenModal = new ModalHelper('create-api-token-modal', 'create-api-token');
+    const createTokenResponseModal = new ModalHelper('create-token-response-modal');
+    const deleteButtons = document.querySelectorAll('[data-token]') as NodeListOf<HTMLButtonElement>;
+
+    const tokenAPILinks = document.getElementById('token-api-links') as HTMLDivElement;
+
+    const tokenAPI = tokenAPILinks.dataset.token_api!;
+
+    createAPITokenModal.registerConfirmCallback(async (formData) => {
+        const description = formData?.get('description');
+        const user = formData?.get('user');
+
+        if (!description) {
+            toast({
+                title: 'Error',
+                description: 'Description is required',
+                type: 'danger',
+                duration: 5000
+            })
+            return;
+        }
+
+        if (!user) {
+            toast({
+                title: 'Error',
+                description: 'User ID not found',
+                type: 'danger',
+                duration: 5000
+            })
+            return;
+        }
+
+        const response = await fetch(tokenAPI, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                description,
+                user
+            })
+        });
+
+        const res = await response.json();
+
+        if (!response.ok) {
+            toast({
+                title: 'Error',
+                description: res.error,
+                type: 'danger',
+                duration: 5000
+            })
+            return;
+        }
+
+        createTokenResponseModal.show();
+        document.getElementById('create-token-response-placeholder')!.innerText = res.token;
+
+    })
+
+    deleteButtons.forEach((button) => {
+        button.addEventListener('click', async (event) => {
+            event.preventDefault();
+            const tokenID = button.getAttribute('data-token');
+            const userID = button.getAttribute('data-user');
+
+            const response = await fetch(tokenAPI, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    tokenID,
+                    userID
+                })
+            });
+
+            const res = await response.json();
+
+            if (!response.ok) {
+                toast({
+                    title: 'Error',
+                    description: res.error,
+                    type: 'danger',
+                    duration: 5000
+                })
+                return;
+            }
+
+            toast({
+                title: 'Success',
+                description: res.message,
+                type: 'success',
+                duration: 5000
+            })
+
+            setTimeout(() => {
+                window.location.reload();
+            }, 1000);
+        });
+    });
+</script>
+
+<style>
+    .api-tokens {
+        position: relative;
+    }
+
+    .form-header {
+        display: block;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
+
+    .api-tokens-content {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+
+        .description {
+            color: hsl(var(--text-muted));
+        }
+
+        .token-list-item {
+            display: flex;
+            flex-direction: column;
+            background-color: hsl(var(--background-step-2));
+
+            .token-list-item-header {
+                display: flex;
+                flex-direction: column;
+
+                .token-list-item-header-row {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    h4 {
+                        display: flex;
+                        align-items: center;
+                        gap: 0.5rem;
+                    }
+                }
+            }
+
+            .token-list-item-content {
+                display: flex;
+                flex-direction: column;
+
+                .token-list-item-content-row {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .created-at {
+                        font-size: 0.75rem;
+                        color: hsl(var(--text-muted));
+                    }
+                }
+            }
+        }
+    }
+</style>

package/dist/components/dashboard/islands/profile/BasicInfo.astro

@@ -0,0 +1,107 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import { Button, Card, Icon, Input } from 'studiocms:ui/components';
+
+const data = await getUserData(Astro);
+---
+
+<Card fullWidth as="form" id="basic-info-form" class="basic-info-form" action={StudioCMSRoutes.endpointLinks.profile}>
+
+    <div slot="header">
+        <h2>Basic Info</h2>
+    
+        <div class="form-header">
+            <Button type='submit' size='sm' variant={'solid'} color='primary'>
+                <Icon slot="start-content" name="check" width={24} height={24} />
+                Save
+            </Button> 
+        </div>
+    </div>
+
+    <div class="form-inputs">
+
+        <Input label='Display Name' placeholder='John Doe' value={data.user?.name} isRequired name='display-name' />
+
+        <Input label='Username' placeholder='johndoe' value={data.user?.username} isRequired name='username' />
+    
+        <Input label='Email' placeholder='john@doe.com' value={data.user?.email} isRequired name='email' />
+    
+        <Input label='Website' placeholder='https://doe.com' value={data.user?.url} name='account-url' />
+
+    </div>
+
+</Card>
+
+<script>
+    import { toast } from "studiocms:ui/components";
+
+    const basicInfoForm = document.getElementById('basic-info-form') as HTMLFormElement;
+        basicInfoForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(basicInfoForm);
+
+            const data = {
+                mode: 'basic',
+                data: {
+                    name: formData.get('display-name') as string,
+                    username: formData.get('username') as string,
+                    email: formData.get('email') as string,
+                    url: formData.get('account-url') ?? null,
+                }
+            }
+
+            const response = await fetch(basicInfoForm.action, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data)
+            })
+
+            const res = await response.json();
+
+            if (response.status !== 200) {
+                toast({
+                    title: 'Error',
+                    description: res.error,
+                    type: 'danger'
+                })
+            }
+
+            if (response.status === 200) {
+                toast({
+                    title: 'Success',
+                    description: res.message,
+                    type: 'success'
+                })
+            }
+
+        });
+</script>
+
+<style>
+
+    .basic-info-form {
+        position: relative;
+    }
+
+    .basic-info-form .form-inputs {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+
+        @media screen and (max-width: 768px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .form-header {
+        display: block;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
+
+</style>

package/dist/components/dashboard/islands/profile/BasicInfoFallback.astro

@@ -0,0 +1,43 @@
+---
+import { Button, Card, Icon, Input } from 'studiocms:ui/components';
+---
+<Card fullWidth class="basic-info-form">
+    <div slot="header">
+        <h2>Basic Info</h2>
+        <div class="form-header">
+            <Button type='submit' size='sm' variant={'solid'} color='primary' disabled>
+                <Icon slot="start-content" name="check" width={24} height={24} />
+                Save
+            </Button> 
+        </div>
+    </div>
+    <div class="form-inputs">
+        <Input label='Display Name' placeholder='John Doe' disabled isRequired name='display-name' />
+        <Input label='Username' placeholder='johndoe' disabled isRequired name='username' />
+        <Input label='Email' placeholder='john@doe.com' disabled isRequired name='email' />        
+        <Input label='Website' placeholder='https://doe.com' disabled name='account-url' />
+    </div>
+</Card>
+
+<style>
+    .basic-info-form {
+        position: relative;
+    }
+    
+    .basic-info-form .form-inputs {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+    
+        @media screen and (max-width: 768px) {
+        grid-template-columns: 1fr;
+        }
+    }
+    
+    .form-header {
+        display: block;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
+</style>