studiocms 0.2.0 → 0.4.0

package/frontend/components/dashboard/profile/BasicInfo.astro

@@ -17,156 +17,216 @@ const lang = Astro.locals.StudioCMS.defaultLang;
 const t = useTranslations(lang, '@studiocms/dashboard:profile');
 ---
 
-<Card fullWidth as="form" id="basic-info-form" class="basic-info-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.profile}>
-
+<Card
+    fullWidth
+    as="form"
+    id="basic-info-form"
+    class="basic-info-form"
+>
     <div slot="header">
         <h2>
-            <t-profile-basic key="basic-info-header">{t('basic-info-header')}</t-profile-basic>
+            <t-profile-basic key="basic-info-header"
+                >{t("basic-info-header")}</t-profile-basic
+            >
         </h2>
-    
+
         <div class="form-header">
             <Group>
-                <Button id="refresh-avatar" size='sm' variant={'outlined'} color={'info'} data-url={Astro.locals.StudioCMS.routeMap.endpointLinks.profile}>
-                    <Icon slot="start-content" name="heroicons:user-circle" width={24} height={24} />
+                <Button
+                    id="refresh-avatar"
+                    size="sm"
+                    variant={"outlined"}
+                    color={"info"}
+                >
+                    <Icon
+                        slot="start-content"
+                        name="heroicons:user-circle"
+                        width={24}
+                        height={24}
+                    />
                     <t-profile-basic key="sync-with-libravatar">
-                        {t('sync-with-libravatar')}
+                        {t("sync-with-libravatar")}
                     </t-profile-basic>
                 </Button>
-                <Button type='submit' size='sm' variant={'solid'} color='primary'>
-                    <Icon slot="start-content" name="heroicons:check" width={24} height={24} />
+                <Button
+                    type="submit"
+                    size="sm"
+                    variant={"solid"}
+                    color="primary"
+                >
+                    <Icon
+                        slot="start-content"
+                        name="heroicons:check"
+                        width={24}
+                        height={24}
+                    />
                     <t-profile-basic key="basic-info-save-button">
-                        {t('basic-info-save-button')}
+                        {t("basic-info-save-button")}
                     </t-profile-basic>
-                </Button> 
+                </Button>
             </Group>
         </div>
     </div>
 
     <div class="form-inputs">
-
-        <Input label={t('basic-info-display-name')} placeholder='John Doe' value={data?.user?.name} isRequired name='display-name' />
-
-        <Input label={t('basic-info-username')} placeholder='johndoe' value={data?.user?.username} isRequired name='username' />
-    
-        <Input label={t('basic-info-email')} placeholder='john@doe.com' value={data?.user?.email} isRequired name='email' />
-    
-        <Input label={t('basic-info-website')} placeholder='https://doe.com' value={data?.user?.url} name='account-url' />
-
-        <Input label={t('basic-avatar-url')} placeholder="https://seccdn.libravatar.org/avatar/..." value={data?.user?.avatar} name="avatar" />
-
+        <Input
+            label={t("basic-info-display-name")}
+            placeholder="John Doe"
+            value={data?.user?.name}
+            isRequired
+            name="display-name"
+        />
+
+        <Input
+            label={t("basic-info-username")}
+            placeholder="johndoe"
+            value={data?.user?.username}
+            isRequired
+            name="username"
+        />
+
+        <Input
+            label={t("basic-info-email")}
+            placeholder="john@doe.com"
+            value={data?.user?.email}
+            isRequired
+            name="email"
+        />
+
+        <Input
+            label={t("basic-info-website")}
+            placeholder="https://doe.com"
+            value={data?.user?.url}
+            name="account-url"
+        />
+
+        <Input
+            label={t("basic-avatar-url")}
+            placeholder="https://seccdn.libravatar.org/avatar/..."
+            value={data?.user?.avatar}
+            name="avatar"
+        />
+
+        <input type="hidden" name="email-verified" value={data?.user?.emailVerified ? "true" : "false"} />
     </div>
-
 </Card>
 
 <script>
-    import { 
+    import {
         $i18n,
         baseTranslation,
         makeTranslation,
         updateElmLabel,
-    } from 'studiocms:i18n/client';
+    } from "studiocms:i18n/client";
 
-    const currentPage = '@studiocms/dashboard:profile';
+    const currentPage = "@studiocms/dashboard:profile";
 
     const i18n = $i18n(currentPage, baseTranslation[currentPage]);
-    
-    i18n.subscribe(comp => {
-        updateElmLabel('display-name', comp['basic-info-display-name']);
-        updateElmLabel('username', comp['basic-info-username']);
-        updateElmLabel('email', comp['basic-info-email']);
-        updateElmLabel('account-url', comp['basic-info-website']);
+
+    i18n.subscribe((comp) => {
+        updateElmLabel("display-name", comp["basic-info-display-name"]);
+        updateElmLabel("username", comp["basic-info-username"]);
+        updateElmLabel("email", comp["basic-info-email"]);
+        updateElmLabel("account-url", comp["basic-info-website"]);
     });
 
-    if (!customElements.get('t-profile-basic')) {
-        customElements.define('t-profile-basic', makeTranslation(currentPage, i18n));
+    if (!customElements.get("t-profile-basic")) {
+        customElements.define(
+            "t-profile-basic",
+            makeTranslation(currentPage, i18n),
+        );
     }
 </script>
 
-
 <script>
     import { toast } from "studiocms:ui/components/toaster/client";
+    import { dashboardClient, dashboardSharedCatchTags } from "studiocms:client/apiClients";
+    import * as Effect from "effect/Effect";
 
-    const syncAvatar = document.getElementById('refresh-avatar') as HTMLButtonElement;
-    const syncUrl = syncAvatar.dataset.url as string;
+    const syncAvatar = document.getElementById(
+        "refresh-avatar",
+    ) as HTMLButtonElement;
 
-    syncAvatar.addEventListener('click', async (e) => {
+    syncAvatar.addEventListener("click", async (e) => {
         e.preventDefault();
 
-        const response = await fetch(syncUrl, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ mode: 'avatar' })
-        })
-
-        const res = await response.json();
-
-        if (response.status !== 200) {
+        const response = await dashboardClient.pipe(
+            Effect.flatMap((client) =>
+                client.profile.updateUserProfile({
+                    payload: {
+                        mode: "avatar",
+                    },
+                }),
+            ),
+            Effect.catchTags(dashboardSharedCatchTags),
+            Effect.runPromise,
+        );
+
+        if ("error" in response) {
+            toast({
+                title: "Error",
+                description: response.error,
+                type: "danger",
+            });
+        } else {
             toast({
-                title: 'Error',
-                description: res.error,
-                type: 'danger'
-            })
+                title: "Success",
+                description:
+                    response.message || "Avatar synchronized successfully",
+                type: "success",
+            });
         }
+    });
+
+    const basicInfoForm = document.getElementById(
+        "basic-info-form",
+    ) as HTMLFormElement;
+
+    basicInfoForm.addEventListener("submit", async (e) => {
+        e.preventDefault();
 
-        if (response.status === 200) {
+        const formData = new FormData(basicInfoForm);
+
+        const response = await dashboardClient.pipe(
+            Effect.flatMap((client) =>
+                client.profile.updateUserProfile({
+                    payload: {
+                        mode: "basic",
+                        data: {
+                            name: formData.get("display-name") as string,
+                            username: formData.get("username") as string,
+                            email: formData.get("email") as string,
+                            url: (formData.get("account-url") ?? null) as string | null,
+                            avatar: (formData.get("avatar") ?? null) as string | null,
+                            emailVerified: formData.get("email-verified") === "true",
+                            createdAt: undefined,
+                            updatedAt: new Date().toISOString(),
+                        },
+                    },
+                }),
+            ),
+            Effect.catchTags(dashboardSharedCatchTags),
+            Effect.runPromise,
+        );
+
+        if ("error" in response) {
+            toast({
+                title: "Error",
+                description: response.error,
+                type: "danger",
+            });
+        } else {
             toast({
-                title: 'Success',
-                description: res.message,
-                type: 'success'
-            })
+                title: "Success",
+                description:
+                    response.message || "Profile updated successfully",
+                type: "success",
+            });
         }
-    })
-
-    const basicInfoForm = document.getElementById('basic-info-form') as HTMLFormElement;
-        basicInfoForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-
-            const formData = new FormData(basicInfoForm);
-
-            const data = {
-                mode: 'basic',
-                data: {
-                    name: formData.get('display-name') as string,
-                    username: formData.get('username') as string,
-                    email: formData.get('email') as string,
-                    url: formData.get('account-url') ?? null,
-                    avatar: formData.get('avatar') ?? null,
-                }
-            }
-
-            const response = await fetch(basicInfoForm.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>
-
     .basic-info-form {
         position: relative;
     }
@@ -187,5 +247,4 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
         top: 1rem;
         right: 1rem;
     }
-
 </style>

package/frontend/components/dashboard/profile/Notifications.astro

@@ -53,7 +53,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile-notifications');
 
 type TKey = Parameters<typeof t>[0];
 ---
-<Card fullWidth as="form" id="notifications-form" class="notifications-update-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.updateUserNotifications}>
+<Card fullWidth as="form" id="notifications-form" class="notifications-update-form">
 
     <div slot="header">
       <h2><t-notifications key="header-title">{t('header-title')}</t-notifications></h2>
@@ -161,7 +161,9 @@ type TKey = Parameters<typeof t>[0];
 
 <script>
     import { toast } from 'studiocms:ui/components/toaster/client';
-    import { getEnabledNotificationCheckboxes, formatNotificationOptions } from 'studiocms:notifier/client'
+    import { getEnabledNotificationCheckboxes, formatNotificationOptions } from 'studiocms:notifier/client';
+    import { dashboardClient, dashboardSharedCatchTags } from 'studiocms:client/apiClients';
+    import * as Effect from 'effect/Effect';
 
     const form = document.getElementById('notifications-form') as HTMLFormElement;
 
@@ -174,31 +176,38 @@ type TKey = Parameters<typeof t>[0];
 
         const formattedOptions = formatNotificationOptions(enabledCheckboxes);
 
-        const data = {
-            userId: formData.get('user_id'),
-            notifications: formattedOptions
-        };
+        const userId = formData.get('user_id')?.toString();
 
-        const response = await fetch(form.action, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(data)
-        });
-
-        const result = await response.json();
+        if (!userId) {
+            toast({
+                title: 'Error',
+                description: 'User ID is missing. Please refresh the page and try again.',
+                type: 'danger',
+            });
+            return;
+        }
 
-        if (response.ok) {
+        const response = await dashboardClient.pipe(
+            Effect.flatMap((client) => client.users.updateUserNotifications({
+                payload: {
+                    id: userId,
+                    notifications: formattedOptions
+                }
+            })),
+            Effect.catchTags(dashboardSharedCatchTags),
+            Effect.runPromise
+        );
+
+        if ('message' in response) {
             toast({
                 title: 'Notifications Updated',
-                description: result.message,
+                description: response.message,
                 type: 'success',
             })
         } else {
             toast({
                 title: 'Error',
-                description: result.error,
+                description: response.error,
                 type: 'danger',
             })
         }

package/frontend/components/dashboard/profile/UpdatePassword.astro

@@ -18,130 +18,170 @@ const lang = Astro.locals.StudioCMS.defaultLang;
 const t = useTranslations(lang, '@studiocms/dashboard:profile');
 ---
 
-<Card fullWidth as="form" id="password-update-form" class="password-update-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.profile}>
-
+<Card
+    fullWidth
+    as="form"
+    id="password-update-form"
+    class="password-update-form"
+>
     <div slot="header">
-        <h2><t-profile-password key="user-password-header">{t('user-password-header')}</t-profile-password></h2>
-    
+        <h2>
+            <t-profile-password key="user-password-header"
+                >{t("user-password-header")}</t-profile-password
+            >
+        </h2>
+
         <div class="form-header">
-            <Button 
-                type='submit' 
-                variant='solid' 
-                color='primary' 
+            <Button
+                type="submit"
+                variant="solid"
+                color="primary"
                 disabled={userHasNoPassword}
-                size='sm'
-                >
-                <Icon slot="start-content" name="heroicons:check" width={24} height={24} />
+                size="sm"
+            >
+                <Icon
+                    slot="start-content"
+                    name="heroicons:check"
+                    width={24}
+                    height={24}
+                />
                 <t-profile-password key="user-password-save-button">
-                    {t('user-password-save-button')}
+                    {t("user-password-save-button")}
                 </t-profile-password>
-            </Button> 
+            </Button>
         </div>
     </div>
 
-    {userHasNoPassword && ( 
-        <p>
-            <t-profile-password key="user-password-no-password">{t('user-password-no-password')}</t-profile-password>
-        </p>
-    )}
+    {
+        userHasNoPassword && (
+            <p>
+                <t-profile-password key="user-password-no-password">
+                    {t("user-password-no-password")}
+                </t-profile-password>
+            </p>
+        )
+    }
 
     <div class="password-form-entries">
-
-        <Input 
-            label={t('user-password-current')} 
-            type='password'
-            placeholder='********' 
+        <Input
+            label={t("user-password-current")}
+            type="password"
+            placeholder="********"
             isRequired={!userHasNoPassword}
             disabled={userHasNoPassword}
-            name='current-password' 
-            autocomplete='current-password'
-            />
-
-        <Input 
-            label={t('user-password-new')} 
-            type='password'
-            placeholder='********' 
-            isRequired 
-            autocomplete='password new_password'
-            name='new-password' 
-            />
-
-        <Input 
-            label={t('user-password-confirm')}  
-            type='password'
-            placeholder='********' 
-            isRequired 
-            autocomplete='password new_password'
-            name='confirm-new-password' 
-            />
-
+            name="current-password"
+            autocomplete="current-password"
+        />
+
+        <Input
+            label={t("user-password-new")}
+            type="password"
+            placeholder="********"
+            isRequired
+            autocomplete="password new_password"
+            name="new-password"
+        />
+
+        <Input
+            label={t("user-password-confirm")}
+            type="password"
+            placeholder="********"
+            isRequired
+            autocomplete="password new_password"
+            name="confirm-new-password"
+        />
     </div>
 </Card>
 
 <script>
-    import { 
+    import {
         $i18n,
         baseTranslation,
         makeTranslation,
         updateElmLabel,
-    } from 'studiocms:i18n/client';
+    } from "studiocms:i18n/client";
 
-    const currentPage = '@studiocms/dashboard:profile';
+    const currentPage = "@studiocms/dashboard:profile";
 
     const i18n = $i18n(currentPage, baseTranslation[currentPage]);
-    
-    i18n.subscribe(comp => {
-        updateElmLabel('current-password', comp['user-password-current']);
-        updateElmLabel('new-password', comp['user-password-new']);
-        updateElmLabel('confirm-new-password', comp['user-password-confirm']);
+
+    i18n.subscribe((comp) => {
+        updateElmLabel("current-password", comp["user-password-current"]);
+        updateElmLabel("new-password", comp["user-password-new"]);
+        updateElmLabel("confirm-new-password", comp["user-password-confirm"]);
     });
 
-    if (!customElements.get('t-profile-password')) {
-        customElements.define('t-profile-password', makeTranslation(currentPage, i18n));
+    if (!customElements.get("t-profile-password")) {
+        customElements.define(
+            "t-profile-password",
+            makeTranslation(currentPage, i18n),
+        );
     }
 </script>
 
 <script>
     import { toast } from "studiocms:ui/components/toaster/client";
-        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({ mode: 'password', 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'
-                })
-            }
-        });
+    import { dashboardClient, dashboardSharedCatchTags } from "studiocms:client/apiClients";
+    import * as Effect from "effect/Effect";
+
+    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")?.toString() ??
+                null) as string | null,
+            newPassword: formData.get("new-password")?.toString() as string,
+            confirmNewPassword: formData
+                .get("confirm-new-password")
+                ?.toString() as string,
+        };
+
+        if (!data.newPassword || !data.confirmNewPassword) {
+            toast({
+                title: "Error",
+                description: "Please fill in all required fields",
+                type: "danger",
+            });
+
+            return;
+        }
+
+        const response = await dashboardClient.pipe(
+            Effect.flatMap((client) =>
+                client.profile.updateUserProfile({
+                    payload: {
+                        mode: "password",
+                        data,
+                    },
+                }),
+            ),
+            Effect.catchTags(dashboardSharedCatchTags),
+            Effect.runPromise,
+        );
+
+        if ("error" in response) {
+            toast({
+                title: "Error",
+                description: response.error,
+                type: "danger",
+            });
+        } else {
+            toast({
+                title: "Success",
+                description:
+                    response.message || "Password updated successfully",
+                type: "success",
+            });
+
+            passwordUpdateForm.reset();
+        }
+    });
 </script>
 
 <style>