studiocms 0.1.0-beta.10

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

@@ -0,0 +1,103 @@
+---
+import { useTranslations } from 'studiocms:i18n';
+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';
+const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-index');
+---
+<Layout 
+  title={t('title')}
+  description={t('description')}
+  requiredPermission='admin'
+  sidebar='double'
+  {lang}
+  >
+
+  <div slot="double-sidebar" class="inner-sidebar-container">
+    <div class="sidebar-user-links-container">
+      <InnerSidebarElement {lang} />
+    </div>
+  </div>
+
+  <div slot="header">
+    <PageHeader title={t('header')} />
+  </div>
+
+  <div id="placeholder-info" class="placeholder-info">
+    <p>
+      <t-users-index key="placeholder">{t('placeholder')}</t-users-index>
+    </p>
+  </div>
+
+</Layout>
+
+<script>
+    import { 
+        $i18n,
+        $localeSettings,
+        baseTranslation,
+        defaultLang,
+        documentUpdater,
+        makeTranslation,
+        pageHeaderUpdater,
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:user-mngmt-index';
+
+    let lang = defaultLang;
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+
+    $localeSettings.subscribe((locale) => {
+        lang = locale || defaultLang;
+    });
+    
+    i18n.subscribe(comp => {
+      documentUpdater(comp, lang)
+      pageHeaderUpdater(comp.header)
+    });
+    
+    if (!customElements.get('t-users-index')) {
+        customElements.define('t-users-index', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+<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,66 @@
+---
+import '../../styles/404.css';
+import { useTranslations } from 'studiocms:i18n';
+import { Button } from 'studiocms:ui/components';
+import Layout from '../../layouts/dashboard/Layout.astro';
+
+const lang = 'en-us';
+const t = useTranslations(lang, '@studiocms/dashboard:404');
+---
+
+<Layout 
+  title={t('title')}
+  description={t('description')}
+  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><t-four key="title">{t('title')}</t-four></h1>
+      <h2><t-four key="description">{t('description')}</t-four></h2>
+      <p><t-four key="sub-description">{t('sub-description')}</t-four></p>
+      <Button id="back-button" variant={'outlined'} color="primary" class="return" fullWidth>
+        <span><t-four key="back-button">{t('back-button')}</t-four></span>
+      </Button>
+    </div>
+  </div>
+</Layout>
+
+<script>
+    import { 
+        $i18n,
+        $localeSettings,
+        baseTranslation,
+        defaultLang,
+        documentUpdater,
+        makeTranslation,
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:404';
+
+    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-four')) {
+        customElements.define('t-four', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+<script>
+  document.getElementById('back-button')!.addEventListener('click', () => {
+    window.history.back();
+  });
+</script>

package/dist/routes/firstTimeSetupRoutes/1-start.astro

@@ -0,0 +1,253 @@
+---
+import { validImages } from 'studiocms:auth/utils/validImages';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import {
+	Accordion,
+	AccordionItem,
+	Button,
+	Card,
+	Divider,
+	Input,
+	Select,
+} from 'studiocms:ui/components';
+import LightVsDark from '../../components/dashboard/islands/configuration/LightVsDark.astro';
+import Layout from './components/Layout.astro';
+import PageHeader from './components/PageHeader.astro';
+
+const ogSelectOptions = validImages.map(({ label, name: value }) => ({ label, value }));
+
+const blobs = validImages.filter(({ name }) => name === 'studiocms-blobs')[0];
+const blocks = validImages.filter(({ name }) => name === 'studiocms-blocks')[0];
+const curves = validImages.filter(({ name }) => name === 'studiocms-curves')[0];
+---
+<Layout title="Welcome to StudioCMS">
+
+    <PageHeader title="Welcome to StudioCMS" badge={{ label: 'Step 1' }} />
+
+    <Card class='card' style="background-color: hsl(var(--background-step-1))" fullWidth>
+
+        <div slot="header">
+            <h2>Basic Site Information</h2>
+        </div>
+
+        <form id="setup-step-one" action={StudioCMSRoutes.fts.step1}>
+            <div class="form-content">
+
+                <div class="form-row">
+                    <Input label='Site Title' name='site-title' placeholder='My Awesome Website' isRequired />
+                    <Input label='Site Description' name='site-description' placeholder='Built with StudioCMS!' isRequired />
+                </div>
+        
+                <div class="form-row">
+                    <Input label="Default Open Graph Image" name="default-og-image" placeholder="'https://...' for local, or '/...' for public/ folder" />
+                    <Input label="Site Icon (Public facing Favicon)" name="site-icon" placeholder="'https://...' for local, or '/...' for public/ folder" />
+                </div>
+        
+                <div class="form-row">
+                    <Select label="Page Diff Tracking" name="diff-enabled" options={[{ label: 'Enabled', value: 'true' }, { label: 'Disabled', value: 'false' }]} fullWidth />
+                    <Input label="Page Diff Tracking Limit (per page)" name="diff-per-page" placeholder="10" />
+                </div>
+        
+                <Divider />
+        
+                <div class="form-row">
+                    <Select label='Login Page Background Image' name='login-page-background' defaultValue={'studiocms-curves'} options={ogSelectOptions} fullWidth />
+                    <Input label="Login Page Background Image (Custom)" name="login-page-background-custom" placeholder="'https://...' for local, or '/...' for public/ folder" />
+                </div>
+
+                
+                <Accordion>
+                    <AccordionItem>
+                        <div slot="summary">Login Page Preview</div>
+
+                        <Card class="login-preview-container">
+                            <div slot="header">
+                                <span>Login Page Preview (Dark/Light)</span>
+                            </div>
+                            <LightVsDark light={curves.light!} dark={curves.dark!} />
+                        </Card>
+                    </AccordionItem>
+                </Accordion>
+
+            </div>
+        </form>
+
+        <div slot="footer">
+            <div class="card-actions">
+                <Button type="submit" form="setup-step-one" color="primary">Continue</Button> 
+            </div>
+        </div>
+
+    </Card>
+
+    <script>
+        import { toast } from 'studiocms:ui/components';
+
+        const form = document.querySelector('#setup-step-one') as HTMLFormElement;
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(form);
+
+            const data = {
+                title: formData.get('site-title') as string,
+                description: formData.get('site-description') as string,
+                defaultOgImage: formData.get('default-og-image') as string,
+                siteIcon: formData.get('site-icon') as string,
+                enableDiffs: formData.get('diff-enabled') as string,
+                diffPerPage: formData.get('diff-per-page') as string,
+                loginPageBackground: formData.get('login-page-background') as string,
+                loginPageBackgroundCustom: formData.get('login-page-background-custom') as string,
+            }
+
+            const response = await fetch(form.action, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            })
+
+            const res = await response.json();
+
+            if (response.status === 200) {
+                toast({
+                    title: 'Success',
+                    description: 'Basic site information saved successfully!',
+                    type: 'success',
+                })
+                window.location.assign('/start/2');
+            }
+
+            if (response.status !== 200) {
+                toast({
+                    title: 'Error',
+                    description: res.error,
+                    type: 'danger',
+                })
+            }
+        })
+    </script>
+
+    <style>
+        .form-content {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+    
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+    
+        .login-preview-container {
+            width: min-content;
+            height: min-content;
+        }
+    
+        @media screen and (max-width: 768px) {
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .card {
+            margin-left: 20%;
+            margin-right: 20%;
+            width: 60%;
+        }
+
+        @media screen and (max-width: 768px) {
+            .card {
+                margin-left: 0;
+                margin-right: 0;
+                width: 100%;
+            }
+        }
+
+        .card-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 1rem;
+        }
+    </style>
+
+    <div id="login-page-bgs"
+        data-blobs-light={blobs?.light?.src} data-blobs-dark={blobs?.dark?.src}
+        data-blocks-light={blocks?.light?.src} data-blocks-dark={blocks?.dark?.src}
+        data-curves-light={curves?.light?.src} data-curves-dark={curves?.dark?.src}
+    ></div>
+
+    <script is:inline>
+    async function setupLoginPreview() {
+        // Selectors
+        const loginPageBgSelectOptions = document.querySelector('#login-page-background-dropdown').querySelectorAll('.sui-select-option');
+        const customInput = document.querySelector('input[name="login-page-background-custom"]');
+        const customInputLabel = document.querySelector('label[for="login-page-background-custom"]');
+        const previewContainer = document.querySelector('.login-preview-container');
+        const lightImageHolder = document.querySelector('.light-image-holder');
+        const darkImageHolder = document.querySelector('.dark-image-holder');
+
+        // Backgrounds
+        const loginPageBgs = document.querySelector('#login-page-bgs');
+
+        const blobs = {
+            light: loginPageBgs.getAttribute('data-blobs-light'),
+            dark: loginPageBgs.getAttribute('data-blobs-dark'),
+        }
+
+        const blocks = {
+            light: loginPageBgs.getAttribute('data-blocks-light'),
+            dark: loginPageBgs.getAttribute('data-blocks-dark'),
+        }
+
+        const curves = {
+            light: loginPageBgs.getAttribute('data-curves-light'),
+            dark: loginPageBgs.getAttribute('data-curves-dark'),
+        }
+
+        // Event Listeners
+        loginPageBgSelectOptions.forEach((option) => {
+            option.addEventListener('click', () => {
+                const selectedValue = option.getAttribute('value');
+
+                if (selectedValue === 'custom') {
+                    customInput.removeAttribute('disabled');
+                    customInputLabel.classList.remove('disabled');
+                } else {
+                    customInput.setAttribute('disabled', 'disabled');
+                    customInputLabel.classList.add('disabled');
+                }
+
+                if (selectedValue === 'custom') {
+                    previewContainer.style.display = 'none';
+                } else {
+                    previewContainer.style.display = 'block';
+
+                    if (selectedValue === 'studiocms-blobs') {
+                        lightImageHolder.src = blobs.light;
+                        darkImageHolder.src = blobs.dark;
+                    }
+
+                    if (selectedValue === 'studiocms-blocks') {
+                        lightImageHolder.src = blocks.light;
+                        darkImageHolder.src = blocks.dark;
+                    }
+
+                    if (selectedValue === 'studiocms-curves') {
+                        lightImageHolder.src = curves.light;
+                        darkImageHolder.src = curves.dark;
+                    }
+
+                }
+            });
+        });
+    }
+
+    setupLoginPreview();
+    </script>
+
+</Layout>

package/dist/routes/firstTimeSetupRoutes/2-next.astro

@@ -0,0 +1,208 @@
+---
+import { authEnvCheck } from 'studiocms:auth/utils/authEnvCheck';
+import { AuthConfig } from 'studiocms:config';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import { Button, Card, Center, Input } from 'studiocms:ui/components';
+import Layout from './components/Layout.astro';
+import PageHeader from './components/PageHeader.astro';
+import TabItem from './components/TabItem.astro';
+import Tabs from './components/Tabs.astro';
+
+const { providers } = AuthConfig;
+
+const { SHOW_OAUTH, AUTH0, DISCORD, GITHUB, GOOGLE } = await authEnvCheck(providers);
+
+const githubEnabled = GITHUB.ENABLED && providers.github;
+const discordEnabled = DISCORD.ENABLED && providers.discord;
+const googleEnabled = GOOGLE.ENABLED && providers.google;
+const auth0Enabled = AUTH0.ENABLED && providers.auth0;
+---
+<Layout title="Welcome to StudioCMS">
+
+    <PageHeader title="Welcome to StudioCMS" badge={{ label: 'Step 2' }} />
+
+    <Card class='card' style="background-color: hsl(var(--background-step-1))" fullWidth>
+
+        <div slot="header">
+            <h2>Create an Administrator</h2>
+        </div>
+
+        <Tabs variant='starlight'>
+            <TabItem label='Username and Password'>
+                <form id="setup-step-two" action={StudioCMSRoutes.fts.step2}>
+                    <div class="form-content">
+                        
+                        <Input 
+                            label='Username' 
+                            name='username' 
+                            placeholder='john' 
+                            isRequired 
+                            />
+                        
+                        <Input 
+                            label='Display Name' 
+                            name='displayname' 
+                            placeholder='John Doe' 
+                            isRequired 
+                            />
+                        
+                        <Input 
+                            label='Email' 
+                            name='email' 
+                            placeholder='john@doe.com' 
+                            isRequired 
+                            />
+
+                        <Input 
+                            label='Password' 
+                            name='password' 
+                            placeholder='password' 
+                            type="password" 
+                            isRequired 
+                            />
+
+                        <Input 
+                            label='Confirm Password' 
+                            name='confirm-password' 
+                            placeholder='password' 
+                            type="password" 
+                            isRequired 
+                            />
+
+                    </div>
+                </form>
+            </TabItem>
+
+            {
+                SHOW_OAUTH && githubEnabled && (
+                    <TabItem label='GitHub' icon="simple-icons:github">
+                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.githubIndex}>Connect to GitHub</Button></Center>
+                    </TabItem>
+                )
+            }
+            {
+                SHOW_OAUTH && discordEnabled && (
+                    <TabItem label='Discord' icon="simple-icons:discord">
+                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.discordIndex}>Connect to Discord</Button></Center>
+                    </TabItem>
+                )
+            }
+            {
+                SHOW_OAUTH && googleEnabled && (
+                    <TabItem label='Google' icon="flat-color-icons:google">
+                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.googleIndex}>Connect to Google</Button></Center>
+                    </TabItem>
+                )
+            }
+            {
+                SHOW_OAUTH && auth0Enabled && (
+                    <TabItem label='Auth0' icon="simple-icons:auth0">
+                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.auth0Index}>Connect to Auth0</Button></Center>
+                    </TabItem>
+                )
+            }
+
+        </Tabs>
+
+        <div slot="footer">
+            <div class="card-actions">
+                <Button type="submit" form="setup-step-two" color="primary">Continue</Button> 
+            </div>
+        </div>
+
+    </Card>
+
+    <script>
+        import { toast } from 'studiocms:ui/components';
+
+        const form = document.querySelector('#setup-step-two') as HTMLFormElement;
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(form);
+
+            const data = {
+                username: formData.get('username') as string,
+                displayname: formData.get('displayname') as string,
+                email: formData.get('email') as string,
+                password: formData.get('password') as string,
+                confirmPassword: formData.get('confirm-password') as string,
+            }
+
+            if (data.password !== data.confirmPassword) {
+                toast({
+                    title: 'Passwords do not match',
+                    description: 'Please make sure the passwords match',
+                    type: 'danger'
+                });
+                return;
+            }
+
+            const response = await fetch(form.action, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+
+            if (response.ok) {
+                window.location.assign('/done');
+            } else {
+                const error = await response.json();
+                toast({
+                    title: 'Error',
+                    description: error.error,
+                    type: 'danger',
+                });
+            }
+        });
+    </script>
+
+    <style>
+        .form-content {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+    
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+    
+        .login-preview-container {
+            width: min-content;
+            height: min-content;
+        }
+    
+        @media screen and (max-width: 768px) {
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .card {
+            margin-left: 20%;
+            margin-right: 20%;
+            width: 60%;
+        }
+
+        @media screen and (max-width: 768px) {
+            .card {
+                margin-left: 0;
+                margin-right: 0;
+                width: 100%;
+            }
+        }
+
+        .card-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 1rem;
+        }
+    </style>
+
+</Layout>