fix some CLS issues

withstudiocms · Dec 1, 2024 · e14ef67 · e14ef67
1 parent 4fbaf7a
commit e14ef67
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 58 deletions.
diff --git a/packages/studiocms_dashboard/src/components/DashboardPageHeader.astro b/packages/studiocms_dashboard/src/components/DashboardPageHeader.astro
@@ -0,0 +1,56 @@
+---
+import { getLangFromUrl, useTranslations } from 'studiocms:i18n';
+import DiscordLogo from '@studiocms/assets/svgs/discord.svg?raw';
+import { Button } from '@studiocms/ui/components';
+import Icon from '@studiocms/ui/utils/Icon.astro';
+import UserName from './islands/dashboard/UserName.astro';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang, '@studiocms/dashboard:index');
+---
+
+<header class="page-header">
+    <div class="page-title-container">
+      <h1 class="page-title">{t("welcome-title")}, <UserName server:defer><Fragment slot='fallback' set:text='User' /></UserName></h1>
+    </div>
+    <div class="page-actions-container">
+        <Button color='primary' variant='flat' as="a" href={'https://chat.studiocms.dev'} target='_blank' rel='noreferrer,noopener'>
+          <Fragment set:html={DiscordLogo} slot='start-content' />
+          {t("title-button:discord")}
+        </Button>
+        <Button color='success' variant='flat'>
+          <Icon name='chat-bubble-oval-left-ellipsis' width={24} height={24} />
+          {t("title-button:feedback")}
+        </Button>
+    </div>
+  </header>
+  <style>
+  .page-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    width: 100%;
+  }
+
+  .page-title-container {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    width: fit-content;
+  }
+
+  .page-title {
+    display: block;
+    width: fit-content;
+    margin: 0;
+  }
+
+  .page-actions-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+  </style>
diff --git a/packages/studiocms_dashboard/src/components/SingleSidebar.astro b/packages/studiocms_dashboard/src/components/SingleSidebar.astro
@@ -1,6 +1,6 @@
 ---
 import { getLangFromUrl, useTranslatedPath, useTranslations } from 'studiocms:i18n';
-import { Divider, Dropdown, Sidebar } from '@studiocms/ui/components';
+import { Divider, Dropdown, Sidebar, User } from '@studiocms/ui/components';
 import StudioCMSLogo from '../components/StudioCMSLogo.astro';
 import SidebarLink from './SidebarLink.astro';
 import Admin from './islands/sidebar/Admin.astro';
@@ -40,7 +40,9 @@ const tPath = useTranslatedPath(lang);
     offset={8}
   >
     <div class="user-dropdown-trigger-container">
-      <UserAccount server:defer />
+      <UserAccount server:defer>
+        <User slot="fallback" name={"Visitor"} description={'Unknown'} />
+      </UserAccount>
     </div>
   </Dropdown>
 </Sidebar>

diff --git a/packages/studiocms_dashboard/src/components/islands/LoginChecker.astro b/packages/studiocms_dashboard/src/components/islands/LoginChecker.astro
@@ -0,0 +1,35 @@
+---
+import { getUserData, verifyUserPermissionLevel } from 'studiocms:auth/lib/user';
+import { StudioCMSRoutes } from 'studiocms:helpers/routemap';
+
+interface Props {
+	requiredPermission: 'owner' | 'admin' | 'editor' | 'visitor' | 'unknown';
+}
+
+const { requiredPermission } = Astro.props;
+
+const user = await getUserData(Astro);
+
+const isAuthorized = await verifyUserPermissionLevel(user, requiredPermission);
+---
+
+<div 
+style="display: hidden;" 
+data-isLoggedIn={user.isLoggedIn}
+data-authorized={isAuthorized} 
+data-redirectprofile={StudioCMSRoutes.mainLinks.userProfile}
+data-redirectlogin={StudioCMSRoutes.authLinks.loginURL}
+/>
+
+<script>
+const authorized = document.querySelector('[data-authorized]') as HTMLDivElement;
+
+if (authorized && authorized.dataset.isLoggedIn === 'false') {
+    window.location.href = authorized.dataset.redirectlogin!;
+}
+
+if (authorized && authorized.dataset.authorized === 'false') {
+    window.location.href = authorized.dataset.redirectprofile!;
+}
+</script>
+
diff --git a/packages/studiocms_dashboard/src/components/islands/dashboard/PageHeader.astro b/packages/studiocms_dashboard/src/components/islands/dashboard/PageHeader.astro
diff --git a/packages/studiocms_dashboard/src/components/islands/dashboard/UserName.astro b/packages/studiocms_dashboard/src/components/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} />
diff --git a/packages/studiocms_dashboard/src/components/islands/sidebar/Admin.astro b/packages/studiocms_dashboard/src/components/islands/sidebar/Admin.astro
@@ -1,7 +1,6 @@
 ---
 import { getUserData } from 'studiocms:auth/lib/user';
 import { verifyUserPermissionLevel } from 'studiocms:auth/lib/user';
-import { StudioCMSRoutes } from 'studiocms:helpers/routemap';
 import { getLangFromUrl, useTranslatedPath, useTranslations } from 'studiocms:i18n';
 import pluginList from 'studiocms:plugins';
 import { Divider } from '@studiocms/ui/components';
@@ -14,10 +13,6 @@ const tPath = useTranslatedPath(lang);
 
 const data = await getUserData(Astro);
 
-if (!data.user) {
-	return Astro.redirect(StudioCMSRoutes.authLinks.loginURL);
-}
-
 const isAdmin = await verifyUserPermissionLevel(data, 'admin');
 
 const filteredPluginList = pluginList.filter((plugin) => !!plugin.settingsPage);

diff --git a/packages/studiocms_dashboard/src/components/islands/sidebar/UserAccount.astro b/packages/studiocms_dashboard/src/components/islands/sidebar/UserAccount.astro
@@ -1,13 +1,8 @@
 ---
 import { getUserData } from 'studiocms:auth/lib/user';
 import { getLabelForPermissionLevel } from 'studiocms:auth/utils/getLabelForPermissionLevel';
-import { StudioCMSRoutes } from 'studiocms:helpers/routemap';
 import { User } from '@studiocms/ui/components';
 
 const data = await getUserData(Astro);
-
-if (!data.user) {
-	return Astro.redirect(StudioCMSRoutes.authLinks.loginURL);
-}
 ---
-<User name={data.user.name} description={getLabelForPermissionLevel(data.permissionLevel)} />
+<User name={data.user?.name || "Visitor"} description={getLabelForPermissionLevel(data.permissionLevel)} />
diff --git a/packages/studiocms_dashboard/src/routes/index.astro b/packages/studiocms_dashboard/src/routes/index.astro
@@ -4,7 +4,8 @@ import { getSiteConfig } from 'studiocms:helpers/contentHelper';
 import { getLangFromUrl, staticPaths, useTranslatedPath, useTranslations } from 'studiocms:i18n';
 import type { GetStaticPaths } from 'astro';
 import { Layout } from '../components';
-import PageHeader from '../components/islands/dashboard/PageHeader.astro';
+import PageHeader from '../components/DashboardPageHeader.astro';
+import LoginChecker from '../components/islands/LoginChecker.astro';
 import { makePageTitle } from '../utils/makePageTitle';
 
 const contextConfig = await getSiteConfig();
@@ -22,11 +23,13 @@ export const getStaticPaths = (() => {
 // const webVitals = await getWebVitals();
 ---
 
+<LoginChecker server:defer requiredPermission='editor' />
+
 <Layout 
   sideBarActiveItemID="dashboard" 
   title={makePageTitle(t('title'), contextConfig)}
   description={contextConfig.description}
 >
-  <PageHeader server:defer />
+  <PageHeader />
   <span>{t('sub-header')}</span>
 </Layout>