studiocms 0.1.0-beta.10

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

@@ -0,0 +1,631 @@
+---
+import { getUserData, verifyUserPermissionLevel } from 'studiocms:auth/lib/user';
+import { FormattedDate } from 'studiocms:components';
+import { useTranslations } from 'studiocms:i18n';
+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 t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-edit');
+
+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={t('title')}
+  description={t('description')}
+  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 {lang} />
+    </div>
+  </div>
+
+  <div slot="header">
+    <PageHeader title={user?.name || t('header')}>
+
+      <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} />
+          <t-users-edit key="header-delete-button">{t('header-delete-button')}</t-users-edit>
+        </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} />
+          <t-users-edit key="header-save-button">{t('header-save-button')}</t-users-edit>
+        </Button>
+      </Group>
+
+      <Modal
+        id="delete-user-modal"
+        isForm
+        cancelButton={{ label: 'Cancel', color: 'default' }}
+        actionButton={{ label: 'Delete', color: 'danger' }}
+        >
+        <h2 slot="header">
+          <t-users-edit key="delete-modal-header">{t('delete-modal-header')}</t-users-edit>
+        </h2>
+        <Center>
+          <div class="modal-body">
+            <input type="hidden" name="user-id" value={userId} />
+            <input type="hidden" name="user-username" value={user?.username} />
+
+            <span><t-users-edit key="delete-modal-desc-1">{t('delete-modal-desc-1')}</t-users-edit> <code>{user?.username}</code> <t-users-edit key="delete-modal-desc-2">{t('delete-modal-desc-2')}</t-users-edit></span>
+
+            <Input name="confirm-user-username" placeholder={`${user?.username.slice(0, user?.username.length-2)}...`} isRequired />
+          
+            <span style="color: hsl(var(--danger-base))"><t-users-edit key="delete-modal-warning">{t('delete-modal-warning')}</t-users-edit></span>
+          </div>
+        </Center>
+      </Modal>
+
+    </PageHeader>
+  </div>
+
+  <div id="edit-user-container">
+
+    <div class="text-h3">
+      <t-users-edit key="user-info-header">{t('user-info-header')}</t-users-edit>
+    </div>
+
+    <Card class="user-information-block" fullWidth variant={'filled'}>
+      <table>
+        <tr> <td><t-users-edit key="user-info-email">{t('user-info-email')}</t-users-edit></td> <td>{user?.email}</td> </tr>
+        <tr> <td><t-users-edit key="user-info-username">{t('user-info-username')}</t-users-edit></td> <td>{user?.username}</td> </tr>
+        {user?.url && <tr> <td><t-users-edit key="user-info-website">{t('user-info-website')}</t-users-edit></td> <td>{user?.url}</td> </tr> }
+        <tr> <td><t-users-edit key="user-info-created-at">{t('user-info-created-at')}</t-users-edit></td> <td><FormattedDate date={user?.createdAt!} /></td> </tr>
+        { user?.updatedAt && <tr> <td><t-users-edit key="user-info-updated-at">{t('user-info-updated-at')}</t-users-edit></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} />
+        <t-users-edit key="password-reset-button">{t('password-reset-button')}</t-users-edit>
+      </Button>
+      <Modal id='password-reset-link-modal'>
+        <h2 slot="header">
+          <t-users-edit key="password-reset-modal-header">{t('password-reset-modal-header')}</t-users-edit>
+        </h2>
+        <Center>
+          <div class="modal-body">
+            <span><t-users-edit key="password-reset-modal-desc-1">{t('password-reset-modal-desc-1')}</t-users-edit> <code>{user?.username}</code> <t-users-edit key="password-reset-modal-desc-2">{t('password-reset-modal-desc-2')}</t-users-edit></span>
+            <span><t-users-edit key="password-reset-modal-link">{t('password-reset-modal-link')}</t-users-edit>: </span>
+            <code id="reset-link-placeholder"></code>
+          </div>
+        </Center>
+      </Modal>
+    </div>
+
+    <form id="edit-user-form" action={StudioCMSRoutes.endpointLinks.users}>
+
+      <div class="text-h3"><t-users-edit key="edit-role-header">{t('edit-role-header')}</t-users-edit></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} {lang} />
+    )}
+
+    { isAllowedAPITokens && (
+      <div class="text-h3"><t-users-edit key="api-tokens-header">{t('api-tokens-header')}</t-users-edit></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} />
+                            <t-users-edit key="api-tokens-delete-button">{t('api-tokens-delete-button')}</t-users-edit>
+                        </Button>
+                    </div>
+                </div>
+
+                <div class="token-list-item-content">
+                    <div class="token-list-item-content-row">
+                        <span class="created-at"><t-users-edit key="api-tokens-created">{t('api-tokens-created')}</t-users-edit> - <FormattedDate date={token.creationDate} /></span>
+                    </div>
+                </div>
+            </Card>
+        )) : (
+            <Card fullWidth class="token-list-item">
+                <Center>
+                    <span class="description"><t-users-edit key="api-tokens-no-tokens">{t('api-tokens-no-tokens')}</t-users-edit></span>
+                </Center>
+            </Card>
+        ) }
+      </div>
+    )}
+
+    { enableDiffs && ( 
+      <div class="text-h3"><t-users-edit key="last-edit-pages-header">{t('last-edit-pages-header')}</t-users-edit></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"><t-users-edit key="last-edit-pages-edited">{t('last-edit-pages-edited')}</t-users-edit>: <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><t-users-edit key="last-edit-pages-no-edits">{t('last-edit-pages-no-edits')}</t-users-edit></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 { 
+          $i18n,
+          $localeSettings,
+          baseTranslation,
+          defaultLang,
+          documentUpdater,
+          makeTranslation,
+      } from 'studiocms:i18n/client';
+  
+      const currentPage = '@studiocms/dashboard:user-mngmt-edit';
+  
+      let lang = defaultLang;
+  
+      const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+  
+      $localeSettings.subscribe((locale) => {
+          lang = locale || defaultLang;
+      });
+      
+      i18n.subscribe(comp => {
+        documentUpdater(comp, lang)
+      });
+      
+      if (!customElements.get('t-users-edit')) {
+          customElements.define('t-users-edit', makeTranslation(currentPage, i18n));
+      }
+  </script>
+
+  <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>