studiocms 0.2.0 → 0.4.0

package/frontend/pages/[dashboard]/login.astro

@@ -20,7 +20,7 @@ let DemoMode: {
 	enabled: false,
 };
 
-if (developerConfig.demoMode) {
+if (typeof developerConfig.demoMode === 'object') {
 	DemoMode = {
 		enabled: true,
 		username: developerConfig.demoMode.username,
@@ -216,13 +216,66 @@ if (usernameAndPassword && SHOW_OAUTH) {
 </script>
 
 <script>
-    import { formListener } from '../../scripts/auth/formListener.js';
     import { ModalHelper } from 'studiocms:ui/components/modal/client';
     import { toast } from 'studiocms:ui/components/toaster/client';
+    import * as Effect from 'effect/Effect';
+    import { authClient, sharedAuthCatchTags } from 'studiocms:client/apiClients';
     
     const loginForm = document.getElementById('login-form') as HTMLFormElement | null;
     if (loginForm) {
-        loginForm.addEventListener('submit', (event) => formListener(event, loginForm, 'login'));
+        loginForm.addEventListener('submit', async (event) => {
+            event.preventDefault();
+
+            const formData = new FormData(loginForm);
+
+            const username = formData.get('username')?.toString();
+            const password = formData.get('password')?.toString();
+
+            const response = await authClient.pipe(
+                Effect.flatMap((client) => client.auth.login({
+                    payload: {
+                        username: username || '',
+                        password: password || '',
+                    }
+                })),
+                Effect.catchTags(sharedAuthCatchTags),
+                Effect.catchTag('AuthAPIError', (err) => Effect.succeed({
+                    ok: false as const,
+                    error: {
+                        title: err._tag,
+                        description: err.message,
+                    },
+                })),
+                Effect.runPromise
+            )
+
+            if (response.ok) {
+                toast({
+                    title: 'Login successful',
+                    description: 'Redirecting to dashboard...',
+                    type: 'success',
+                })
+                if (typeof window !== 'undefined') {
+                    window.location.reload();
+                }
+                return;
+            } else if ('error' in response) {
+                toast({
+                    title: response.error.title,
+                    description: response.error.description,
+                    type: 'danger',
+                })
+                return;
+            } else {
+                toast({
+                    title: 'Error',
+                    description: 'An unknown error occurred',
+                    type: 'danger',
+                })
+                return;
+            }
+        })
+
     }
 
     const forgotPasswordLink = document.getElementById('forgot-password') as HTMLDivElement;
@@ -232,35 +285,43 @@ if (usernameAndPassword && SHOW_OAUTH) {
 
         forgotPasswordModal.registerConfirmCallback(async (formData) => {
             if (!formData) return;
+            const email = formData.get('email')?.toString()
 
-            const actionUrl = formData.get('action-url')?.toString() as string;
-
-            const data = {
-                email: formData.get('email')?.toString(),
-            };
-
-            const response = await fetch(actionUrl, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(data),
-            });
-
-            const result = await response.json();
+            if (!email) {
+                toast({
+                    title: 'Error',
+                    description: 'Email is required',
+                    type: 'danger',
+                })
+                return;
+            }
 
-            if (response.ok) {
+            const response = await authClient.pipe(
+                Effect.flatMap((client) => client.auth.forgotPassword({
+                    payload: { email },
+                })),
+                Effect.catchTags(sharedAuthCatchTags),
+                Effect.catchTag('AuthAPIError', (err) => Effect.succeed({
+                    error: {
+                        title: err._tag,
+                        description: err.message,
+                    },
+                })),
+                Effect.runPromise
+            )
+
+            if ('error' in response) {
                 toast({
-                    title: 'Success',
-                    description: result.message,
-                    type: 'success',
+                    title: response.error.title,
+                    description: response.error.description,
+                    type: 'danger',
                 })
                 return;
             } else {
                 toast({
-                    title: 'Error',
-                    description: result.error || 'An error occurred',
-                    type: 'danger',
+                    title: 'Success',
+                    description: response.message,
+                    type: 'success',
                 })
                 return;
             }

package/frontend/pages/[dashboard]/password-reset.astro

@@ -6,6 +6,7 @@ import { Button } from 'studiocms:ui/components/button';
 import { Card } from 'studiocms:ui/components/card';
 import { Icon } from 'studiocms:ui/components/icon';
 import { Input } from 'studiocms:ui/components/input';
+import { setDataContext } from '@withstudiocms/effect/astro/data-middleware';
 import Layout from '../../layouts/DashboardLayout.astro';
 
 const { siteConfig: config, defaultLang: lang, security } = Astro.locals.StudioCMS;
@@ -38,12 +39,16 @@ if (!lookupToken) {
 	logger.warn('Missing - token');
 	return new Response(null, { status: 404 });
 }
+
+setDataContext(Astro, {
+	key: 'x-required-role',
+	value: 'none',
+});
 ---
 
 <Layout
     title={t("title")}
     description={t("description")}
-    requiredPermission={"none"}
     sidebar={false}
     {lang}
     {config}
@@ -156,6 +161,8 @@ if (!lookupToken) {
 
     <script>
         import { toast } from "studiocms:ui/components/toaster/client";
+        import { dashboardClient, dashboardSharedCatchTags } from "studiocms:client/apiClients";
+        import * as Effect from "effect/Effect";
 
         const resetForm = document.getElementById(
             "reset-password-form",
@@ -176,28 +183,27 @@ if (!lookupToken) {
                 ) as string,
             };
 
-            const response = await fetch(resetForm.action, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify(data),
-            });
-
-            const res = await response.json();
+            const response = await dashboardClient.pipe(
+                Effect.flatMap((client) =>
+                    client.resetPassword.resetPassword({
+                        payload: data,
+                    })
+                ),
+                Effect.catchTags(dashboardSharedCatchTags),
+                Effect.runPromise
+            );
 
-            if (response.status !== 200) {
+            if ("error" in response) {
                 toast({
                     title: "Error",
-                    description: res.error,
+                    description: response.error,
                     type: "danger",
                 });
-            }
-
-            if (response.status === 200) {
+                return;
+            } else {
                 toast({
                     title: "Success",
-                    description: res.message,
+                    description: "Your password has been reset successfully.",
                     type: "success",
                 });
             }

package/frontend/pages/[dashboard]/plugins/[plugin].astro

@@ -3,6 +3,7 @@ import { useTranslations } from 'studiocms:i18n';
 import pluginList from 'studiocms:plugins';
 import { Button } from 'studiocms:ui/components/button';
 import { Icon } from 'studiocms:ui/components/icon';
+import { setDataContext } from '@withstudiocms/effect/astro/data-middleware';
 import PageHeader from '../../../components/dashboard/PageHeader.astro';
 import SettingsRenderer from '../../../components/dashboard/plugins/SettingsRenderer.astro';
 import Layout from '../../../layouts/DashboardLayout.astro';
@@ -26,12 +27,20 @@ const pluginData = filteredPluginList.find((p) => p.identifier === plugin);
 if (!pluginData) {
 	return new Response(null, { status: 404 });
 }
+
+setDataContext(Astro, {
+	key: 'x-required-role',
+	value: 'editor',
+});
+setDataContext(Astro, {
+	key: 'x-redirect-url',
+	value: Astro.locals.StudioCMS.routeMap.mainLinks.dashboardIndex,
+});
 ---
 
 <Layout 
   title={t('title')}
   description={t('description')}
-  requiredPermission='editor'
   {lang}
   {config}
   {currentUser}

package/frontend/pages/[dashboard]/profile.astro

@@ -1,6 +1,7 @@
 ---
 import { authConfig } from 'studiocms:config';
 import { useTranslations } from 'studiocms:i18n';
+import { setDataContext } from '@withstudiocms/effect/astro/data-middleware';
 import PageHeader from '../../components/dashboard/PageHeader.astro';
 import APITokens from '../../components/dashboard/profile/APITokens.astro';
 import BasicInfo from '../../components/dashboard/profile/BasicInfo.astro';
@@ -23,12 +24,20 @@ const {
 const shouldShowOAuth = showOAuth && providerData.some(({ enabled }) => enabled);
 
 const isAllowedAPITokens = Astro.locals.StudioCMS.security?.userPermissionLevel.isEditor ?? false;
+
+setDataContext(Astro, {
+	key: 'x-required-role',
+	value: 'visitor',
+});
+setDataContext(Astro, {
+	key: 'x-redirect-url',
+	value: Astro.locals.StudioCMS.routeMap.authLinks.logoutURL,
+});
 ---
 
 <Layout 
   title={t('title')}
   description={t('description')}
-  requiredPermission="visitor"
   {lang}
   {config}
   {currentUser}

package/frontend/pages/[dashboard]/signup.astro

@@ -34,54 +34,81 @@ if (usernameAndPassword && SHOW_OAUTH) {
 	paragraph = 'sub-header-noprovider';
 }
 ---
-<AuthLayout 
-    title={t('title')} 
-    description={t('description')} 
-    {lang} 
-    checkLogin
-    >
-    
+
+<AuthLayout title={t("title")} description={t("description")} {lang} checkLogin>
     <div slot="header" class="form-header">
         <h1>
-            <t-signup key="header">{t('header')}</t-signup>
+            <t-signup key="header">{t("header")}</t-signup>
         </h1>
         <p>
             <t-signup key={paragraph}>{t(paragraph)}</t-signup>
         </p>
     </div>
 
-    { usernameAndPassword && (
-        <form class="form" id="sign-up-form" method="post" action={Astro.locals.StudioCMS.routeMap.authLinks.registerAPI}>
-
-            <Input label={t('username-label')} name="username" type="text" />
-            <Input label={t('email-label')} name="email" type="email" />
-            <Input label={t('displayname-label')} name="displayname" type="text" />
-            <Input label={t('password-label')} name="password" type="password" />
-            <Input label={t('confirm-password-label')} name="confirm-password" type="password" />
-
-            <Button fullWidth type="submit" as="button" type="submit" color='primary' variant='solid'>
-                <t-signup key="create-account-button">{t('create-account-button')}</t-signup>
-            </Button>
-        </form>
-    )}
-
-    { allowUserRegistration && (
-        <p slot="footer">
-            <t-signup key="allow-login-haveaccount">
-                {t('allow-login-haveaccount')}
-            </t-signup> 
-            <a href={Astro.locals.StudioCMS.routeMap.authLinks.loginURL}>
-                <t-signup key="allow-login-login">
-                    {t('allow-login-login')}
-                </t-signup>
-            </a>
-        </p>
-    )}
+    {
+        usernameAndPassword && (
+            <form
+                class="form"
+                id="sign-up-form"
+                method="post"
+                action={Astro.locals.StudioCMS.routeMap.authLinks.registerAPI}
+            >
+                <Input
+                    label={t("username-label")}
+                    name="username"
+                    type="text"
+                />
+                <Input label={t("email-label")} name="email" type="email" />
+                <Input
+                    label={t("displayname-label")}
+                    name="displayname"
+                    type="text"
+                />
+                <Input
+                    label={t("password-label")}
+                    name="password"
+                    type="password"
+                />
+                <Input
+                    label={t("confirm-password-label")}
+                    name="confirm-password"
+                    type="password"
+                />
+
+                <Button
+                    fullWidth
+                    type="submit"
+                    as="button"
+                    type="submit"
+                    color="primary"
+                    variant="solid"
+                >
+                    <t-signup key="create-account-button">
+                        {t("create-account-button")}
+                    </t-signup>
+                </Button>
+            </form>
+        )
+    }
 
+    {
+        allowUserRegistration && (
+            <p slot="footer">
+                <t-signup key="allow-login-haveaccount">
+                    {t("allow-login-haveaccount")}
+                </t-signup>
+                <a href={Astro.locals.StudioCMS.routeMap.authLinks.loginURL}>
+                    <t-signup key="allow-login-login">
+                        {t("allow-login-login")}
+                    </t-signup>
+                </a>
+            </p>
+        )
+    }
 </AuthLayout>
 
 <script>
-    import { 
+    import {
         $i18n,
         $localeSettings,
         baseTranslation,
@@ -89,9 +116,9 @@ if (usernameAndPassword && SHOW_OAUTH) {
         documentUpdater,
         makeTranslation,
         updateElmLabel,
-    } from 'studiocms:i18n/client';
+    } from "studiocms:i18n/client";
 
-    const currentPage = '@studiocms/auth:signup';
+    const currentPage = "@studiocms/auth:signup";
 
     let lang = defaultLang;
 
@@ -100,24 +127,98 @@ if (usernameAndPassword && SHOW_OAUTH) {
     $localeSettings.subscribe((locale) => {
         lang = locale || defaultLang;
     });
-    
-    i18n.subscribe(comp => {
-        documentUpdater(comp, lang)
-        updateElmLabel('username', comp['username-label']);
-        updateElmLabel('email', comp['email-label']);
-        updateElmLabel('displayname', comp['displayname-label']);
-        updateElmLabel('password', comp['password-label']);
-        updateElmLabel('confirm-password', comp['confirm-password-label']);
+
+    i18n.subscribe((comp) => {
+        documentUpdater(comp, lang);
+        updateElmLabel("username", comp["username-label"]);
+        updateElmLabel("email", comp["email-label"]);
+        updateElmLabel("displayname", comp["displayname-label"]);
+        updateElmLabel("password", comp["password-label"]);
+        updateElmLabel("confirm-password", comp["confirm-password-label"]);
     });
 
-    if (!customElements.get('t-signup')) {
-        customElements.define('t-signup', makeTranslation(currentPage, i18n));
+    if (!customElements.get("t-signup")) {
+        customElements.define("t-signup", makeTranslation(currentPage, i18n));
     }
 </script>
 
 <script>
-    import { formListener } from '../../scripts/auth/formListener.js';
-    const signUpForm = document.getElementById('sign-up-form') as HTMLFormElement;
-
-    signUpForm.addEventListener('submit', async (event) => formListener(event, signUpForm, 'register'));
+    import { toast } from "studiocms:ui/components/toaster/client";
+    import * as Effect from "effect/Effect";
+    import { authClient, sharedAuthCatchTags } from "studiocms:client/apiClients";
+
+    const signUpForm = document.getElementById(
+        "sign-up-form",
+    ) as HTMLFormElement | null;
+
+    signUpForm?.addEventListener("submit", async (event) => {
+        event.preventDefault();
+
+        const formData = new FormData(signUpForm);
+
+        const username = formData.get("username") as string;
+        const email = formData.get("email") as string;
+        const displayname = formData.get("displayname") as string;
+        const password = formData.get("password") as string;
+        const confirmPassword = formData.get("confirm-password") as string;
+
+        if (password !== confirmPassword) {
+            toast({
+                title: "Error",
+                description: "Passwords do not match",
+                type: "danger",
+            });
+            return;
+        }
+
+        const response = await authClient.pipe(
+            Effect.flatMap((client) =>
+                client.auth.register({
+                    payload: {
+                        username,
+                        displayname,
+                        email,
+                        password
+                    },
+                }),
+            ),
+            Effect.catchTags(sharedAuthCatchTags),
+            Effect.catchTag("AuthAPIError", (err) =>
+                Effect.succeed({
+                    ok: false as const,
+                    error: {
+                        title: err._tag,
+                        description: err.message,
+                    },
+                }),
+            ),
+            Effect.runPromise,
+        );
+
+        if (response.ok) {
+            toast({
+                title: "Registration successful",
+                description: "Redirecting...",
+                type: "success",
+            });
+            if (typeof window !== "undefined") {
+                window.location.reload();
+            }
+            return;
+        } else if ("error" in response) {
+            toast({
+                title: response.error.title,
+                description: response.error.description,
+                type: "danger",
+            });
+            return;
+        } else {
+            toast({
+                title: "Error",
+                description: "An unknown error occurred",
+                type: "danger",
+            });
+            return;
+        }
+    });
 </script>