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

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

@@ -0,0 +1,151 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import studioCMS_SDK from 'studiocms:sdk';
+import type { CombinedUserData } from 'studiocms:sdk/types';
+import { Button, Card, Center, Icon } from 'studiocms:ui/components';
+import { providerData } from './oAuthButtonProviders.js';
+
+const { user } = await getUserData(Astro);
+
+let userOAuthData: CombinedUserData['oAuthData'] | undefined;
+
+if (user) {
+	const userFullData = await studioCMS_SDK.GET.databaseEntry.users.byId(user.id);
+
+	if (userFullData) {
+		userOAuthData = userFullData.oAuthData;
+	}
+}
+
+const hasOAuthData = userOAuthData && userOAuthData.length > 0;
+
+const connectedAccounts: { provider: string }[] = [];
+
+if (hasOAuthData) {
+	for (const provider in userOAuthData) {
+		connectedAccounts.push({ provider });
+	}
+}
+
+const socialProviders = providerData.map((providerData) => ({
+	...providerData,
+	connected: connectedAccounts.some(
+		({ provider }) => provider === providerData.label.toLowerCase()
+	),
+}));
+
+const connectedProviders = socialProviders.filter(({ connected }) => connected);
+const unconnectedProviders = socialProviders.filter(({ connected }) => !connected);
+---
+<Card fullWidth class="social-signin-options">
+
+    <div slot="header">
+        <h2>Social Sign-in Accounts</h2>
+    </div>
+
+    <div class="social-signin-cards">
+
+        <Card fullWidth class="social-signin-bg">
+    
+            <div slot="header">
+                <h3>Connected Accounts</h3>
+            </div>
+
+            <div class="button-holder">
+                {
+                    connectedProviders.map(({ enabled, href, image, label }) => enabled && (
+                        <Button as="a" href={href} variant="solid" size="md" fullWidth class="oauth-button">
+                            <div class="icon-and-label">
+                                <Fragment set:html={image} />
+                                <span>{label}</span>
+                            </div>
+                            <Icon name="minus-circle" width={24} height={24} />
+                        </Button>
+                    ))
+                }
+
+                {
+                    connectedProviders.length === 0 && (
+                        <Center><div>No connected accounts found.</div></Center>
+                    )
+                }
+            </div>
+    
+        </Card>
+    
+        <Card fullWidth class="social-signin-bg">
+    
+            <div slot="header">
+                <h3>Other Sign-In Options</h3>
+            </div>
+
+            <div class="button-holder">
+                {
+                    unconnectedProviders.map(({ enabled, href, image, label }) => enabled && (
+                        <Button as="a" href={href} variant="solid" size="md" fullWidth class="oauth-button">
+                            <div class="icon-and-label">
+                                <Fragment set:html={image} />
+                                <span>{label}</span>
+                            </div>
+                            <Icon name="plus-circle" width={24} height={24} />
+                        </Button>
+                    ))
+                }
+
+                {
+                    unconnectedProviders.length === 0 && (
+                        <Center><div>No other sign-in options found.</div></Center>
+                    )
+                }
+            </div>
+    
+        </Card>
+    
+    </div>
+
+</Card>
+
+<style>
+    .social-signin-options {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .social-signin-cards {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        height: 100%;
+    }
+
+    @media screen and (max-width: 768px) {
+        .social-signin-cards {
+            flex-direction: column;
+        }
+    }
+
+    .social-signin-bg {
+        background-color: hsl(var(--background-step-1));
+        height: auto;
+    }
+
+    .oauth-button {
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between !important;
+        width: 100%;
+        margin-button: 1rem;
+    }
+
+    .icon-and-label {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .button-holder {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+    }
+</style>

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

@@ -0,0 +1,83 @@
+---
+import { Card, Center } from 'studiocms:ui/components';
+---
+<Card fullWidth class="social-signin-options">
+
+    <div slot="header">
+        <h2>Social Sign-in Accounts</h2>
+    </div>
+
+    <div class="social-signin-cards">
+
+        <Card fullWidth class="social-signin-bg">
+    
+            <div slot="header">
+                <h3>Connected Accounts</h3>
+            </div>
+
+            <div class="button-holder">
+                <Center><div>No connected accounts found.</div></Center>
+            </div>
+    
+        </Card>
+    
+        <Card fullWidth class="social-signin-bg">
+    
+            <div slot="header">
+                <h3>Other Sign-In Options</h3>
+            </div>
+
+            <div class="button-holder">
+                <Center><div>No other sign-in options found.</div></Center>
+            </div>
+    
+        </Card>
+    
+    </div>
+
+</Card>
+
+<style>
+    .social-signin-options {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .social-signin-cards {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        height: 100%;
+    }
+
+    @media screen and (max-width: 768px) {
+        .social-signin-cards {
+            flex-direction: column;
+        }
+    }
+
+    .social-signin-bg {
+        background-color: hsl(var(--background-step-1));
+        height: auto;
+    }
+
+    .oauth-button {
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between !important;
+        width: 100%;
+        margin-button: 1rem;
+    }
+
+    .icon-and-label {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .button-holder {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+    }
+</style>

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

@@ -0,0 +1,137 @@
+---
+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);
+
+const userHasNoPassword = data.user?.password === null;
+---
+
+<Card fullWidth as="form" id="password-update-form" class="password-update-form" action={StudioCMSRoutes.endpointLinks.profile}>
+
+    <div slot="header">
+        <h2>{userHasNoPassword ? "Create" : "Update"} Password</h2>
+    
+        <div class="form-header">
+            <Button 
+                type='submit' 
+                variant='solid' 
+                color='primary' 
+                disabled={userHasNoPassword}
+                 size='sm'
+                >
+                <Icon slot="start-content" name="check" width={24} height={24} />
+                {userHasNoPassword ? "Set" : "Save"}
+            </Button> 
+        </div>
+    </div>
+
+    {userHasNoPassword && ( 
+        <p>
+            It looks like your account doesn't have a password set. You can set one by using the form below.
+        </p>
+    )}
+
+    <div class="password-form-entries">
+
+        <Input 
+            label='Current Password' 
+            type='password'
+            placeholder='********' 
+            isRequired={!userHasNoPassword}
+            disabled={userHasNoPassword}
+            name='current-password' 
+            autocomplete='current-password'
+            />
+
+        <Input 
+            label='New Password' 
+            type='password'
+            placeholder='********' 
+            isRequired 
+            autocomplete='password new_password'
+            name='new-password' 
+            />
+
+        <Input 
+            label='Confirm New Password' 
+            type='password'
+            placeholder='********' 
+            isRequired 
+            autocomplete='password new_password'
+            name='confirm-new-password' 
+            />
+
+    </div>
+</Card>
+
+<script>
+    import { toast } from "studiocms:ui/components";
+        const passwordUpdateForm = document.getElementById('password-update-form') as HTMLFormElement;
+
+        passwordUpdateForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(passwordUpdateForm);
+
+            const data = {
+                currentPassword: formData.get('current-password') ?? null,
+                newPassword: formData.get('new-password') as string,
+                confirmNewPassword: formData.get('confirm-new-password') as string,
+            }
+
+            const response = await fetch(passwordUpdateForm.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>
+    .password-update-form {
+        position: relative;
+    }
+
+    .password-update-form .password-form-entries {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: 1fr 1fr 1fr;
+
+        @media (max-width: 1024px) {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .form-header {
+        display: block;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
+</style>

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

@@ -0,0 +1,47 @@
+---
+import { Button, Card, Icon, Input } from 'studiocms:ui/components';
+---
+
+<Card fullWidth class="password-update-form">
+    <div slot="header">
+        <h2>Update Password</h2>
+        <div class="form-header">
+            <Button type='submit' variant='solid' color='primary' disabled size='sm'>
+                <Icon slot="start-content" name="check" width={24} height={24} />
+                Save
+            </Button> 
+        </div>
+    </div>
+    <div class="password-form-entries">
+        <Input label='Current Password' type='password' placeholder='********' isRequired disabled name='current-password' autocomplete='current-password' />
+        <Input label='New Password' type='password' placeholder='********' isRequired disabled autocomplete='password new_password' name='new-password' />
+        <Input label='Confirm New Password' type='password' placeholder='********' isRequired disabled autocomplete='password new_password' name='confirm-new-password' />
+    </div>
+</Card>
+
+<style>
+    .password-update-form {
+        position: relative;
+    }
+
+    .password-update-form .password-form-entries {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: 1fr 1fr 1fr;
+
+        @media (max-width: 1024px) {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .form-header {
+        display: block;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
+</style>

package/dist/components/dashboard/islands/profile/oAuthButtonProviders.d.ts

@@ -0,0 +1,8 @@
+export declare const showOAuth: boolean;
+export type ProviderData = {
+    enabled: boolean;
+    href: string;
+    label: string;
+    image: string;
+};
+export declare const providerData: ProviderData[];

package/dist/components/dashboard/islands/profile/oAuthButtonProviders.js

@@ -0,0 +1,35 @@
+import { authEnvCheck } from "studiocms:auth/utils/authEnvCheck";
+import { AuthConfig } from "studiocms:config";
+import { StudioCMSRoutes } from "studiocms:lib";
+const authEnv = await authEnvCheck(AuthConfig.providers);
+const showOAuth = authEnv.SHOW_OAUTH;
+const providerData = [
+  {
+    enabled: authEnv.GITHUB.ENABLED,
+    href: StudioCMSRoutes.authLinks.githubIndex,
+    label: "GitHub",
+    image: `<svg width="24px" height="24px" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg" class="oauth-logo"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/></svg>`
+  },
+  {
+    enabled: authEnv.DISCORD.ENABLED,
+    href: StudioCMSRoutes.authLinks.discordIndex,
+    label: "Discord",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 256 199" class="oauth-logo"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"/></svg>`
+  },
+  {
+    enabled: authEnv.GOOGLE.ENABLED,
+    href: StudioCMSRoutes.authLinks.googleIndex,
+    label: "Google",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 256 262" class="oauth-logo"><path fill="#4285f4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"/><path fill="#34a853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"/><path fill="#fbbc05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"/><path fill="#eb4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"/></svg>`
+  },
+  {
+    enabled: authEnv.AUTH0.ENABLED,
+    href: StudioCMSRoutes.authLinks.auth0Index,
+    label: "Auth0",
+    image: `<svg xmlns="http://www.w3.org/2000/svg"  width="24px" height="24px" viewBox="0 0 32 32" class="oauth-logo"><path fill="currentColor" d="M29.307 9.932L26.161 0H5.796L2.692 9.932c-1.802 5.75.042 12.271 5.089 16.021L16.01 32l8.208-6.068c5.005-3.75 6.911-10.25 5.089-16.021l-8.214 6.104l3.12 9.938l-8.208-6.13l-8.208 6.104l3.141-9.911l-8.25-6.063l10.177-.063l3.146-9.891l3.141 9.87z"/></svg>`
+  }
+];
+export {
+  providerData,
+  showOAuth
+};

package/dist/components/dashboard/islands/sidebar/Admin.astro

@@ -0,0 +1,103 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import { verifyUserPermissionLevel } from 'studiocms:auth/lib/user';
+import { useTranslations } from 'studiocms:i18n';
+import pluginList from 'studiocms:plugins';
+import { Divider } from 'studiocms:ui/components';
+import SidebarLink from '../../SidebarLink.astro';
+import SidebarPluginLink from '../../SidebarPluginLink.astro';
+import { getSidebarLinks } from '../../sidebarConfig.js';
+
+const lang = 'en-us';
+const t = useTranslations(lang, '@studiocms/dashboard:sidebar');
+
+const data = await getUserData(Astro);
+
+const isAdmin = await verifyUserPermissionLevel(data, 'admin');
+
+const isOwner = await verifyUserPermissionLevel(data, 'owner');
+
+const filteredPluginList = pluginList.filter((plugin) => !!plugin.settingsPage);
+
+const sidebar = getSidebarLinks(lang);
+
+Astro.response.headers.set('Cache-Control', 'max-age=604800');
+// 1. Set cookie if admin
+// 2. check on subsequent loads if cookie is there
+// 3. if yes, show static shit
+// 4. render server island
+---
+{isAdmin && (
+  <Divider background='background-step-1'>{t('category-2-header')}</Divider>
+  <div class="sidebar-link-group">
+    {
+      isOwner && sidebar.ownerLinks.map(({ href, icon, title}) => (
+        <SidebarLink {icon} {href}>{title}</SidebarLink>
+      ))
+    }
+    {
+      sidebar.adminLinks.map(({ href, icon, title }) => (
+        <SidebarLink {icon} {href}>{title}</SidebarLink>
+      ))
+    }
+  </div>
+  <Divider background='background-step-1'>{t('category-3-header')}</Divider>
+  <div class="sidebar-link-group">
+    { filteredPluginList.length > 0 
+      ? filteredPluginList.map(({ identifier, name }) => (
+        <SidebarPluginLink 
+          identifier={identifier}
+          name={name}
+        />
+      )) 
+      : ( 
+        <span class="empty-placeholder-span">
+          {t('category-3-empty-placeholder')}
+        </span>
+      )}
+  </div>
+)}
+
+<style>
+  .sidebar-link-group {
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    width: 100%;
+  }
+
+  .sidebar-link-group.hidden {
+    display: none;
+  }
+
+  .empty-placeholder-span {
+    width: 100%;
+    text-align: center;
+    color: hsl(var(--text-muted));
+    font-size: .875em;
+  }
+
+  .user-dropdown-trigger-container {
+    width: calc(280px - 3rem);
+    cursor: pointer;
+    border: 1px solid hsl(var(--border));
+    padding: .5rem;
+    border-radius: .5rem;
+    transition: all .15s ease;
+  }
+
+  .user-dropdown-trigger-container:hover {
+    background-color: hsla(var(--border) / .5);
+  }
+
+  .sidebar {
+    justify-content: space-between;
+  }
+
+  .sidebar-links-container {
+    gap: .75rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>

package/dist/components/dashboard/islands/sidebar/Editor.astro

@@ -0,0 +1,18 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import { verifyUserPermissionLevel } from 'studiocms:auth/lib/user';
+import SidebarLink from '../../SidebarLink.astro';
+import { getSidebarLinks } from '../../sidebarConfig.js';
+
+const lang = 'en-us';
+const sidebar = getSidebarLinks(lang);
+
+const data = await getUserData(Astro);
+
+const isEditor = await verifyUserPermissionLevel(data, 'editor');
+
+Astro.response.headers.set('Cache-Control', 'max-age=604800');
+---
+{ isEditor && sidebar.editorLinks.map(({ href, icon, title }) => (
+    <SidebarLink {icon} {href}>{title}</SidebarLink>
+))}

package/dist/components/dashboard/islands/sidebar/UserAccount.astro

@@ -0,0 +1,23 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import { getLabelForPermissionLevel } from 'studiocms:auth/utils/getLabelForPermissionLevel';
+import { User } from 'studiocms:ui/components';
+
+const data = await getUserData(Astro);
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+type PropsOf<T extends (...args: any[]) => any> = Parameters<T>[0];
+
+type UserProps = PropsOf<typeof User>;
+
+const userProps: UserProps = {
+	name: data.user?.name || 'Visitor',
+	description: getLabelForPermissionLevel(data.permissionLevel),
+	loading: 'eager',
+};
+
+if (data.user?.avatar) {
+	userProps.avatar = data.user.avatar;
+}
+---
+<User {...userProps} />