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

package/dist/routes/dashboard/user-management/edit.astro

@@ -0,0 +1,593 @@
+---
+import { getUserData, verifyUserPermissionLevel } from 'studiocms:auth/lib/user';
+import { FormattedDate } from 'studiocms:components';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK from 'studiocms:sdk';
+import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { Button, Card, Center, Group, Icon, Input, Modal, Select } from 'studiocms:ui/components';
+import PageHeader from '../../../components/dashboard/PageHeader.astro';
+import {
+	providerData,
+	showOAuth,
+} from '../../../components/dashboard/islands/profile/oAuthButtonProviders';
+import InnerSidebarElement from '../../../components/dashboard/islands/user-mgmt/InnerSidebarElement.astro';
+import RankCheck from '../../../components/dashboard/islands/user-mgmt/RankCheck.astro';
+import SocialSignin from '../../../components/dashboard/islands/user-mgmt/SocialSignin.astro';
+import Layout from '../../../layouts/dashboard/Layout.astro';
+
+const lang = 'en-us';
+
+const urlParams = Astro.url.searchParams;
+const userId = urlParams.get('user') || '';
+
+const user = await studioCMS_SDK.GET.databaseEntry.users.byId(userId);
+
+const shouldShowOAuth = showOAuth && providerData.some(({ enabled }) => enabled);
+
+const userSession = await getUserData(Astro);
+
+const disableDelete = user?.permissionsData?.rank === 'owner' || user?.id === userSession.user?.id;
+
+const diffs = await studioCMS_SDK.diffTracking.get.byUserId.latest(userId, 5);
+
+const pages = await studioCMS_SDK_Cache.GET.pages();
+
+const {
+	data: { enableDiffs },
+} = await studioCMS_SDK_Cache.GET.siteConfig();
+
+const isAllowedAPITokens = await verifyUserPermissionLevel(userSession, 'editor');
+
+const userTokens = await studioCMS_SDK.REST_API.tokens.get(userId);
+---
+<Layout 
+  title="User Management"
+  requiredPermission='admin'
+  sidebar='double'
+  {lang}
+  >
+  {/*
+    Check if the user has the required permission to manage the user's rank level
+  */}
+  <RankCheck requiredPermission={user?.permissionsData?.rank} />
+
+  <div slot="double-sidebar" class="inner-sidebar-container">
+    <div class="sidebar-user-links-container">
+      <InnerSidebarElement />
+    </div>
+  </div>
+
+  <div slot="header">
+    <PageHeader title={user?.name || 'User Management'}>
+
+      <Group>
+        <Button id="delete-user-modal-trigger" color="danger" type="submit" size="sm" disabled={disableDelete} data-action={StudioCMSRoutes.endpointLinks.users}>
+          <Icon name="trash-20-solid" width={20} height={20} />
+          Delete
+        </Button>
+        <Button id="edit-user-button" variant="solid" size="sm"  color="primary" type="submit" form="edit-user-form">
+          <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+          Save Changes
+        </Button>
+      </Group>
+
+      <Modal
+        id="delete-user-modal"
+        isForm
+        cancelButton={{ label: 'Cancel', color: 'default' }}
+        actionButton={{ label: 'Delete', color: 'danger' }}
+        >
+        <h2 slot="header">Are you sure you want to delete this user?</h2>
+        <Center>
+          <div class="modal-body">
+            <input type="hidden" name="user-id" value={userId} />
+            <input type="hidden" name="user-username" value={user?.username} />
+
+            <span>Enter the user name <code>{user?.username}</code> to confirm</span>
+
+            <Input name="confirm-user-username" placeholder={`${user?.username.slice(0, user?.username.length-2)}...`} isRequired />
+          
+            <span style="color: hsl(var(--danger-base))">This action cannot be undone.</span>
+          </div>
+        </Center>
+      </Modal>
+
+    </PageHeader>
+  </div>
+
+  <div id="edit-user-container">
+
+    <div class="text-h3">User Information</div>
+
+    <Card class="user-information-block" fullWidth variant={'filled'}>
+      <table>
+        <tr> <td>Email</td> <td>{user?.email}</td> </tr>
+        <tr> <td>Username</td> <td>{user?.username}</td> </tr>
+        {user?.url && <tr> <td>Website</td> <td>{user?.url}</td> </tr> }
+        <tr> <td>Created at</td> <td><FormattedDate date={user?.createdAt!} /></td> </tr>
+        { user?.updatedAt && <tr> <td>Last Updated</td> <td><FormattedDate date={user?.updatedAt} /></td> </tr> }
+      </table>
+    </Card>
+
+    <div>
+      <Button id="password-reset-link-trigger" variant={'outlined'} color={'danger'} size="sm" disabled={disableDelete}>
+        <Icon name="lock-open-20-solid" width={20} height={20} />
+        Create Reset Link
+      </Button>
+      <Modal id='password-reset-link-modal'>
+        <h2 slot="header">Reset Password Link</h2>
+        <Center>
+          <div class="modal-body">
+            <span>Reset link for user <code>{user?.username}</code> has been created.</span>
+            <span>Link: </span>
+            <code id="reset-link-placeholder"></code>
+          </div>
+        </Center>
+      </Modal>
+    </div>
+
+    <form id="edit-user-form" action={StudioCMSRoutes.endpointLinks.users}>
+
+      <div class="text-h3">Role</div>
+
+      <input type="hidden" name="user-id" value={user?.id}>
+
+      <Select 
+        name="rank"  
+        isRequired 
+        fullWidth 
+        defaultValue={user?.permissionsData?.rank || 'visitor'}
+        options={[
+          { label: 'Owner', value: 'owner' },
+          { label: 'Administrator', value: 'admin' },
+          { label: 'Editor', value: 'editor' },
+          { label: 'Visitor', value: 'visitor' },
+        ]}
+        />
+
+    </form>
+
+    { shouldShowOAuth && ( 
+      <SocialSignin oAuthData={user?.oAuthData} />
+    )}
+
+    { isAllowedAPITokens && (
+      <div class="text-h3">API Tokens</div>
+
+      <div class="edit-card-list">
+        { 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={token.userId} 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>
+                    <span class="description">No API tokens found.</span>
+                </Center>
+            </Card>
+        ) }
+      </div>
+    )}
+
+    { enableDiffs && ( 
+      <div class="text-h3">Last edited pages</div>
+  
+      <div class="edit-card-list">
+  
+        {
+          diffs.length > 0 ? (
+            diffs.map((diff) => (
+              <Card fullWidth class={'edit-card'}>
+                <div class="card-row">
+                  <span class="card-title">{pages.find((page) => page.data.id === diff.pageId)?.data.title}</span>
+                  <span class="card-date">Edited: <FormattedDate date={diff.timestamp!} /></span>
+                </div>
+  
+                <div class="card-row">
+                  <span class="card-description">{pages.find((page) => page.data.id === diff.pageId)?.data.description}</span>
+                  <Button size='sm' as='a' href={StudioCMSRoutes.mainLinks.contentManagementDiff + `?diff=${diff.id}`}>
+                    <Icon name="eye" width={24} height={24} class="card-icon" />
+                  </Button>
+                </div>
+              </Card>
+            ))
+          ) : (
+            <Card fullWidth style="background-color: hsl(var(--background-step-1));">
+              <Center>No history found.</Center>
+            </Card>
+          )
+        }
+  
+      </div>
+    )}
+
+  </div>
+
+  <div style="display: none;" id="reset-link-selector" data-link={StudioCMSRoutes.endpointLinks.createResetLink} data-userid={user?.id} data-dashboard={StudioCMSRoutes.mainLinks.dashboardIndex}></div>
+
+  <div 
+      id="token-api-links" style="display: none;"
+      data-token_api={StudioCMSRoutes.endpointLinks.apiTokens}
+  ></div>
+
+  <script>
+    import { ModalHelper, toast } from 'studiocms:ui/components';
+
+    const resetLinkModal = new ModalHelper('password-reset-link-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!;
+
+    const editUserForm = document.getElementById('edit-user-form') as HTMLFormElement;
+
+    const deleteUserAction = (document.getElementById('delete-user-modal-trigger') as HTMLButtonElement).dataset.action;
+
+    const userDeleteModal = new ModalHelper('delete-user-modal', 'delete-user-modal-trigger');
+
+    const passwordResetLinkTrigger = document.getElementById('password-reset-link-trigger') as HTMLButtonElement;
+    const resetLinkPlaceholder = document.getElementById('reset-link-placeholder') as HTMLElement;
+
+    const resetLinkAPI = (document.getElementById('reset-link-selector') as HTMLDivElement).dataset.link;
+    const userId = (document.getElementById('reset-link-selector') as HTMLDivElement).dataset.userid;
+    const dashboardIndex = (document.getElementById('reset-link-selector') as HTMLDivElement).dataset.dashboard;
+
+    function generateResetLink(token: {
+      id: string;
+      userId: string;
+      token: string;
+    }) {
+      return `${window.location.origin}${dashboardIndex}/reset-password?userid=${token.userId}&token=${token.token}&id=${token.id}`;
+    }
+
+    passwordResetLinkTrigger.addEventListener('click', async (e) => {
+      e.preventDefault();
+
+      const apiRes = await fetch(resetLinkAPI!, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ userId: userId })
+      });
+
+      const token = await apiRes.json();
+
+      if (!apiRes.ok) {
+        console.error('Failed to create reset link');
+        toast({
+          title: 'Error',
+          description: token.error,
+          type: 'danger'
+        })
+        return;
+      }
+
+      resetLinkPlaceholder.innerText = generateResetLink(token);
+
+      resetLinkModal.show();
+    })
+    
+    userDeleteModal.registerConfirmCallback(async (formData) => {
+      if (!formData) {
+        console.error('No form data provided') 
+        return
+      };
+
+      const data = {
+        userId: formData.get('user-id')?.toString(), 
+        username: formData.get('user-username')?.toString(), 
+        usernameConfirm: formData.get('confirm-user-username')?.toString()
+      }
+
+      const response = await fetch(deleteUserAction!, {
+        method: 'DELETE',
+        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'
+        })
+      }
+    })
+
+    editUserForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      const formData = new FormData(editUserForm);
+
+      const data = {
+        id: formData.get('user-id')?.toString(),
+        rank: formData.get('rank')?.toString(),
+      }
+
+      const response = await fetch(editUserForm.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'
+        })
+      }
+    })
+
+    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>
+
+</Layout>
+
+<style>
+
+  .sidebar-user-links-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .inner-sidebar-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    height: 100%;
+    width: 100%;
+    padding-top: 1.5rem;
+    background-color: hsl(var(--background-base));
+  }
+
+  .placeholder-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 40vh;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 30vh;
+    z-index: -1;
+
+    p {
+      font-size: 1.25rem;
+      color: hsl(var(--text-muted));
+    }
+  }
+
+  #edit-user-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  #edit-user-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    span {
+        font-size: .875rem;
+    }
+
+    code {
+        background-color: hsl(var(--background-step-3));
+        padding: .25rem;
+        border-radius: 4px;
+    }
+  }
+
+  #password-reset-link-modal {
+
+    & .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;
+      }
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    tr {
+      border-bottom: 2px solid hsl(var(--background-step-1));
+    }
+
+    tr:nth-child(even) {
+      background-color: hsl(var(--background-step-2));
+    }
+
+    tr:last-child {
+      border-bottom: none;
+    }
+
+    td {
+      padding: .5rem;
+    }
+  }
+
+  .edit-card-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.875rem;
+  }
+
+  .edit-card {
+    display: flex;
+    flex-direction: column;
+    background-color: hsl(var(--background-step-2));
+    
+    & .card-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & .card-title {
+        font-weight: 600;
+        font-size: 1.25rem;
+      }
+
+      & .card-date {
+        color: hsl(var(--text-muted));
+        font-size: .8rem;
+      }
+
+      & .card-description {
+        font-size: 1rem;
+        color: hsl(var(--text-muted));
+        line-clamp: 1;
+      }
+
+      & .card-icon {
+        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/routes/dashboard/user-management/index.astro

@@ -0,0 +1,67 @@
+---
+import PageHeader from '../../../components/dashboard/PageHeader.astro';
+import InnerSidebarElement from '../../../components/dashboard/islands/user-mgmt/InnerSidebarElement.astro';
+import Layout from '../../../layouts/dashboard/Layout.astro';
+
+const lang = 'en-us';
+---
+<Layout 
+  title="User Management"
+  requiredPermission='admin'
+  sidebar='double'
+  {lang}
+  >
+
+  <div slot="double-sidebar" class="inner-sidebar-container">
+    <div class="sidebar-user-links-container">
+      <InnerSidebarElement />
+    </div>
+  </div>
+
+  <div slot="header">
+    <PageHeader title="User Management" />
+  </div>
+
+  <div id="placeholder-info" class="placeholder-info">
+    <p>Select a user get started!</p>
+  </div>
+
+</Layout>
+
+<style>
+
+  .sidebar-user-links-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+  }
+
+  .inner-sidebar-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    height: 100%;
+    width: 100%;
+    padding-top: 1.5rem;
+    background-color: hsl(var(--background-base));
+  }
+
+  .placeholder-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 40vh;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 30vh;
+    z-index: -1;
+
+    p {
+      font-size: 1.25rem;
+      color: hsl(var(--text-muted));
+    }
+  }
+</style>

package/dist/routes/error-pages/404.astro

@@ -0,0 +1,35 @@
+---
+import '../../styles/404.css';
+import { Button } from 'studiocms:ui/components';
+import Layout from '../../layouts/dashboard/Layout.astro';
+
+// export const prerender = true;
+---
+
+<Layout 
+  title="Error 404" 
+  description="Error 404 - Page not found" 
+  sidebar={false} 
+  requiredPermission="none">
+  <div class="notfound-container">
+    <div class="notfound">
+      <svg viewBox="0 0 755 792" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="305" y="10" width="440" height="446" rx="22" stroke="currentColor" stroke-width="20"/>
+        <path d="M262 176V434C262 470.451 291.549 500 328 500H599.5V597C599.5 609.15 589.65 619 577.5 619H180C167.85 619 158 609.15 158 597V198C158 185.85 167.85 176 180 176H262Z" stroke="currentColor" stroke-width="20"/>
+        <path d="M114 339V597C114 633.451 143.549 663 180 663H451.5V760C451.5 772.15 441.65 782 429.5 782H32C19.8497 782 10 772.15 10 760V361C10 348.85 19.8497 339 32 339H114Z" stroke="currentColor" stroke-width="20"/>
+      </svg>
+      <h1>Error 404</h1>
+      <h2>Page not found</h2>
+      <p>The page you are looking for might have been removed, had its name changed or is temporarily unavailable.</p>
+      <Button id="back-button" variant={'outlined'} color="primary" class="return" fullWidth>
+        <span>Go back</span>
+      </Button>
+    </div>
+  </div>
+</Layout>
+
+<script>
+  document.getElementById('back-button')!.addEventListener('click', () => {
+    window.history.back();
+  });
+</script>