sitero 0.2.0 → 0.3.0

package/dist/src/cms/client/interfaces/pages/(auth)/verify-email/page.js

@@ -1,28 +1,30 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
+import { CircleX, CircleCheck } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
-import { useState, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { ADMIN_VERIFY_EMAIL_ERROR_CODES } from 'sitero-server';
 import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../constants/paths/redirect.js';
 import '../../../../../../constants/cms-locale.js';
-import 'mime-types';
-import 'sitero-domain';
-import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
+import { getOperationError } from '../../../../../../shared/client/react-query/operation-client-error.js';
 import '@tanstack/react-query';
+import { useAdmin } from '../../../../infrastructure/admin-session/admin-context.js';
+import 'ua-parser-js';
+import { getCmsOperationErrorMessage } from '../../../../infrastructure/operation-result/presentation/message.js';
+import { useCmsCommand } from '../../../../infrastructure/operation-result/use-cms-command.js';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import { joinUrl } from '../../../../../../shared/utils/join-url.js';
-import 'zod';
-import { useCmsCommand } from '../../../../infrastructure/feedback/use-cms-command.js';
-import '@radix-ui/react-avatar';
 import '../../../components/shadcn/badge.js';
 import '../../../components/shadcn/button.js';
+import { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../../../components/shadcn/card.js';
 import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
-import 'lucide-react';
 import '@radix-ui/react-dropdown-menu';
 import '../../../components/shadcn/input-group.js';
 import '@radix-ui/react-label';
@@ -35,40 +37,116 @@ import 'sonner';
 import { Spinner } from '../../../components/shadcn/spinner.js';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import { ActionButton } from '../../../components/ui/buttons/action-button.js';
+import 'next/link';
+import { CMS_NAVBAR_HEIGHT } from '../../../styles/constants.js';
 
 function createVerifyEmailPage({
   adminVerifyEmailAction
 }) {
   return function VerifyEmailPage() {
     const { t } = useTranslator();
-    const [hasFailed, setHasFailed] = useState(false);
+    const { admin, isLoading } = useAdmin();
+    const hasStartedVerification = useRef(false);
+    const [verification, setVerification] = useState({ status: "pending" });
     const searchParams = useSearchParams();
     const email = searchParams.get("email") ?? "";
     const emailVerificationToken = searchParams.get("emailVerificationToken") ?? "";
     const { execute } = useCmsCommand(
       () => adminVerifyEmailAction({ formData: { email, emailVerificationToken } }),
       {
+        onSuccess: (data) => {
+          setVerification(
+            data ? { status: "success", adminId: data.admin.id } : { status: "error", code: "UNKNOWN" }
+          );
+        },
+        onError: (error) => {
+          setVerification({
+            status: "error",
+            code: getOperationError(error)?.code ?? "UNKNOWN"
+          });
+        },
         errorMessages: {
           [ADMIN_VERIFY_EMAIL_ERROR_CODES.TOKEN_INVALID]: t(
             "features.authentication.admin.verify-email.operation-error.token-invalid.text"
           )
-        },
-        onSuccess: (data) => globalThis.location.replace(
-          joinUrl(CMS_PATHS.system.access.admin.pathname, data?.admin.id)
-        ),
-        onError: () => setHasFailed(true)
+        }
       }
     );
     useEffect(() => {
-      void (async () => {
-        if (email && emailVerificationToken) {
-          await execute();
-        } else {
-          globalThis.location.replace(CMS_PATHS.auth["sign-in"].pathname);
-        }
-      })();
-    }, [email, emailVerificationToken]);
-    return /* @__PURE__ */ jsx("div", { className: "flex-center relative flex-1 flex-col", children: hasFailed ? /* @__PURE__ */ jsx("a", { href: CMS_PATHS.auth["sign-in"].pathname, children: t("features.authentication.admin.forgot-password.anchor.text") }) : /* @__PURE__ */ jsx(Spinner, { className: "size-10" }) });
+      if (hasStartedVerification.current) return;
+      hasStartedVerification.current = true;
+      if (!email || !emailVerificationToken) return;
+      void execute();
+    }, [email, emailVerificationToken, execute]);
+    const isSuccess = verification.status === "success";
+    const errorCode = verification.status === "error" ? verification.code : void 0;
+    const hasInvalidLink = !email || !emailVerificationToken;
+    const hasFailed = hasInvalidLink || verification.status === "error";
+    const isComplete = hasFailed || isSuccess;
+    const canEnterDashboard = verification.status === "success" && admin?.id === verification.adminId;
+    const title = hasFailed ? t("features.authentication.admin.verify-email.failed.text") : isSuccess ? t("features.authentication.admin.verify-email.success.text") : t("features.authentication.admin.verify-email.pending.text");
+    const description = hasFailed ? hasInvalidLink || errorCode === ADMIN_VERIFY_EMAIL_ERROR_CODES.TOKEN_INVALID || errorCode === "VALIDATION_FAILED" ? t(
+      "features.authentication.admin.verify-email.operation-error.token-invalid.text"
+    ) : getCmsOperationErrorMessage(t, errorCode ?? "UNKNOWN") : isSuccess ? canEnterDashboard ? t(
+      "features.authentication.admin.verify-email.success.signed-in.text"
+    ) : t(
+      "features.authentication.admin.verify-email.success.signed-out.text"
+    ) : t(
+      "features.authentication.admin.verify-email.pending.description.text"
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mx-auto max-w-96 max-lg:w-full max-lg:px-3 lg:w-96",
+        style: { marginTop: `${CMS_NAVBAR_HEIGHT}px` },
+        children: /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex flex-col gap-4",
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: [
+                /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4", children: [
+                  hasFailed ? /* @__PURE__ */ jsx(
+                    CircleX,
+                    {
+                      className: "text-destructive mx-auto size-10",
+                      "aria-hidden": "true"
+                    }
+                  ) : isSuccess ? /* @__PURE__ */ jsx(
+                    CircleCheck,
+                    {
+                      className: "text-primary mx-auto size-10",
+                      "aria-hidden": "true"
+                    }
+                  ) : /* @__PURE__ */ jsx(Spinner, { className: "mx-auto size-10", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx(CardTitle, { className: "mx-auto", children: title })
+                ] }),
+                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(CardDescription, { className: "text-center leading-relaxed", children: description }) })
+              ]
+            }
+          ),
+          isComplete && /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              className: "w-full",
+              isLoading: isSuccess && isLoading,
+              onClick: () => globalThis.location.replace(
+                canEnterDashboard ? CMS_PATHS.dashboard.pathname : CMS_PATHS.auth["sign-in"].pathname
+              ),
+              children: canEnterDashboard ? t(
+                "features.authentication.admin.verify-email.button.dashboard.text"
+              ) : t(
+                "features.authentication.admin.verify-email.button.sign-in.text"
+              )
+            }
+          ) })
+        ] })
+      }
+    );
   };
 }
 

package/dist/src/cms/client/interfaces/pages/dashboard/(auth)/change-password/page.js

@@ -1,29 +1,30 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { ADMIN_CHANGE_PASSWORD_ERROR_CODES } from 'sitero-server';
 import { CMS_PATHS } from '../../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../constants/cms-locale.js';
-import { useCmsCommand } from '../../../../../infrastructure/feedback/use-cms-command.js';
-import '@radix-ui/react-avatar';
-import 'mime-types';
-import 'sitero-domain';
 import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
+import { getFieldError } from '../../../../../../../shared/client/react-query/field-errors.js';
 import '@tanstack/react-query';
+import 'mime-types';
+import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
+import { createTextInputBinder } from '../../../../../applications/form/binders/create-text-input-binder.js';
+import 'lucide-react';
+import { getCmsFieldErrorMessage } from '../../../../../infrastructure/operation-result/presentation/message.js';
+import { useCmsCommand } from '../../../../../infrastructure/operation-result/use-cms-command.js';
+import '@radix-ui/react-avatar';
 import '../../../../components/shadcn/badge.js';
 import '../../../../components/shadcn/button.js';
 import { Card, CardHeader, CardTitle, CardContent } from '../../../../components/shadcn/card.js';
 import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
-import 'lucide-react';
 import '@radix-ui/react-dropdown-menu';
 import '../../../../components/shadcn/input-group.js';
 import '@radix-ui/react-label';
@@ -35,29 +36,29 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import { Button } from '../../../../components/ui/buttons/button.js';
+import { ActionButton } from '../../../../components/ui/buttons/action-button.js';
+import { LinkButton } from '../../../../components/ui/buttons/link-button.js';
 import { Form } from '../../../../components/ui/form/form.js';
-import { Field } from '../../../../components/ui/form/field.js';
+import { FormField } from '../../../../components/ui/form/form-field.js';
 import { CMS_NAVBAR_HEIGHT } from '../../../../styles/constants.js';
+import '../../../../components/ui/inputs/input.js';
+import '../../../../components/ui/inputs/textarea.js';
+import '../../../../components/ui/inputs/switch-input.js';
 import { PasswordInput } from '../../../../components/ui/inputs/password-input.js';
 
 function createChangePasswordPage({
   adminChangePasswordAction
 }) {
   return function ChangePasswordPage() {
-    const { t } = useTranslator();
+    const { t, locale } = useTranslator();
     const router = useRouter();
     const [formData, setFormData] = useState({
       password: "",
       newPassword: "",
       newPasswordConfirm: ""
     });
-    const errorMessages = {
-      [ADMIN_CHANGE_PASSWORD_ERROR_CODES.CREDENTIALS_INVALID]: t(
-        "features.authentication.admin.change-password.operation-error.credentials-invalid.text"
-      )
-    };
-    const { execute, isRedirecting, errors } = useCmsCommand(
+    const bindTextInput = createTextInputBinder(formData, setFormData);
+    const { execute, fieldErrors, isRedirecting } = useCmsCommand(
       () => adminChangePasswordAction({
         formData: {
           password: formData.password,
@@ -67,7 +68,11 @@ function createChangePasswordPage({
       }),
       {
         onSuccess: () => router.push(CMS_PATHS.dashboard.pathname),
-        errorMessages
+        errorMessages: {
+          [ADMIN_CHANGE_PASSWORD_ERROR_CODES.CREDENTIALS_INVALID]: t(
+            "features.authentication.admin.change-password.operation-error.credentials-invalid.text"
+          )
+        }
       }
     );
     return /* @__PURE__ */ jsx(
@@ -80,86 +85,104 @@ function createChangePasswordPage({
           /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "mx-auto", children: t("features.authentication.admin.change-password.text") }) }),
           /* @__PURE__ */ jsxs(CardContent, { className: "relative flex flex-col gap-6", children: [
             /* @__PURE__ */ jsx(
-              Field,
+              FormField,
               {
-                htmlFor: "password",
+                controlId: "password",
                 label: t(
                   "features.authentication.admin.change-password.password.text"
                 ),
-                children: /* @__PURE__ */ jsx(
+                isRequired: true,
+                error: getCmsFieldErrorMessage(
+                  t,
+                  locale,
+                  getFieldError(fieldErrors, "password")
+                ),
+                children: (controlProps) => /* @__PURE__ */ jsx(
                   PasswordInput,
                   {
-                    id: "password",
                     placeholder: t(
                       "features.authentication.admin.change-password.password.placeholder.text"
                     ),
-                    fieldName: "password",
-                    value: formData.password,
-                    setFormData,
-                    isDisabled: isRedirecting,
-                    isError: errors.includes("password")
+                    ...bindTextInput("password"),
+                    autoComplete: "current-password",
+                    disabled: isRedirecting,
+                    showPasswordLabel: t("ui.password.show.text"),
+                    hidePasswordLabel: t("ui.password.hide.text"),
+                    ...controlProps
                   }
                 )
               }
             ),
             /* @__PURE__ */ jsx(
-              Field,
+              FormField,
               {
-                htmlFor: "newPassword",
+                controlId: "newPassword",
                 label: t(
                   "features.authentication.admin.change-password.new-password.text"
                 ),
-                children: /* @__PURE__ */ jsx(
+                isRequired: true,
+                error: getCmsFieldErrorMessage(
+                  t,
+                  locale,
+                  getFieldError(fieldErrors, "newPassword")
+                ),
+                children: (controlProps) => /* @__PURE__ */ jsx(
                   PasswordInput,
                   {
-                    id: "newPassword",
                     placeholder: t(
                       "features.authentication.admin.change-password.new-password.placeholder.text"
                     ),
-                    fieldName: "newPassword",
-                    value: formData.newPassword,
-                    setFormData,
-                    isDisabled: isRedirecting,
-                    isError: errors.includes("newPassword")
+                    ...bindTextInput("newPassword"),
+                    autoComplete: "new-password",
+                    disabled: isRedirecting,
+                    showPasswordLabel: t("ui.password.show.text"),
+                    hidePasswordLabel: t("ui.password.hide.text"),
+                    ...controlProps
                   }
                 )
               }
             ),
             /* @__PURE__ */ jsx(
-              Field,
+              FormField,
               {
-                htmlFor: "newPasswordConfirm",
+                controlId: "newPasswordConfirm",
                 label: t(
                   "features.authentication.admin.change-password.new-password-confirm.text"
                 ),
-                children: /* @__PURE__ */ jsx(
+                isRequired: true,
+                error: getCmsFieldErrorMessage(
+                  t,
+                  locale,
+                  getFieldError(fieldErrors, "newPasswordConfirm")
+                ),
+                children: (controlProps) => /* @__PURE__ */ jsx(
                   PasswordInput,
                   {
-                    id: "newPasswordConfirm",
                     placeholder: t(
                       "features.authentication.admin.change-password.new-password-confirm.placeholder.text"
                     ),
-                    fieldName: "newPasswordConfirm",
-                    value: formData.newPasswordConfirm,
-                    setFormData,
-                    isDisabled: isRedirecting,
-                    isError: errors.includes("newPasswordConfirm")
+                    ...bindTextInput("newPasswordConfirm"),
+                    autoComplete: "new-password",
+                    disabled: isRedirecting,
+                    showPasswordLabel: t("ui.password.show.text"),
+                    hidePasswordLabel: t("ui.password.hide.text"),
+                    ...controlProps
                   }
                 )
               }
             ),
             /* @__PURE__ */ jsx(
-              Button,
+              LinkButton,
               {
                 size: "xs",
                 variant: "link",
                 className: "w-fit",
+                href: CMS_PATHS.dashboard.pathname,
                 isDisabled: isRedirecting,
-                children: /* @__PURE__ */ jsx(Link, { href: CMS_PATHS.dashboard.pathname, children: t("features.authentication.admin.change-password.anchor.text") })
+                children: t("features.authentication.admin.change-password.anchor.text")
               }
             ),
-            /* @__PURE__ */ jsx(Button, { type: "submit", isLoading: isRedirecting, children: t("features.authentication.admin.change-password.button.text") }),
-            " "
+            /* @__PURE__ */ jsx(ActionButton, { type: "submit", isLoading: isRedirecting, children: t("features.authentication.admin.change-password.button.text") })
           ] })
         ] })
       }

package/dist/src/cms/client/interfaces/pages/dashboard/content/content-management/_topicSlug_/category/_id_/edit/page.js

@@ -4,21 +4,22 @@ import { useTranslator } from 'intor/react';
 import { Notebook } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { POST_TYPES } from 'sitero-domain';
+import 'zod';
+import 'sonner';
 import 'react';
 import 'ua-parser-js';
 import '../../../../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
-import { useQuery } from '../../../../../../../../../../../shared/client/react-query/use-query.js';
+import { useCmsQuery } from '../../../../../../../../../infrastructure/operation-result/use-cms-query.js';
 import 'mime-types';
 import { findTranslation } from '../../../../../../../../../../../shared/translation/find-translation.js';
 import 'clsx';
 import 'tailwind-merge';
 import { ensureArray } from '../../../../../../../../../../../shared/utils/ensure-array.js';
-import 'zod';
 import { getControlMeta } from '../../../../../../../../../applications/form/get-control-meta.js';
 import '../../../../../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../../../../../constants/cms-locale.js';
-import { PageHeader } from '../../../../../../../../components/ui/blocks/page-header/page-header.js';
+import { PageHeaderLayout } from '../../../../../../../../components/ui/blocks/page-header/page-header-layout.js';
 import '@radix-ui/react-avatar';
 import '../../../../../../../../components/shadcn/badge.js';
 import '../../../../../../../../components/shadcn/button.js';
@@ -32,11 +33,15 @@ import '@radix-ui/react-select';
 import '@radix-ui/react-separator';
 import '../../../../../../../../components/shadcn/sidebar/sidebar.js';
 import 'next-themes';
-import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 import 'next/link';
+import { ReturnButton } from '../../../../../../../../components/ui/buttons/return-button.js';
+import '../../../../../../../../components/ui/inputs/input.js';
+import '../../../../../../../../components/ui/inputs/textarea.js';
 import { Badge } from '../../../../../../../../components/ui/display/badge.js';
+import '../../../../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../../../../components/ui/inputs/password-input.js';
 
 function createCategoryEditPage({
   postFindDetailAction,
@@ -51,7 +56,7 @@ function createCategoryEditPage({
     const allowFieldInTopic = (params) => allowField?.({ ...params, topicSlug: params.topicSlug ?? topicSlug }) ?? false;
     const categoryType = POST_TYPES.CATEGORY;
     const subcategoryType = POST_TYPES.SUBCATEGORY;
-    const { data: topic, isFetching: isFetchingTopic } = useQuery(
+    const { data: topic, isFetching: isFetchingTopic } = useCmsQuery(
       () => postFindDetailAction({ type: POST_TYPES.TOPIC, slug: topicSlug }),
       ["postFindDetailAction", POST_TYPES.TOPIC, topicSlug],
       { select: (data) => data?.post }
@@ -60,10 +65,14 @@ function createCategoryEditPage({
       data: category,
       isFetching,
       isNotFound
-    } = useQuery(() => postFindDetailAction({ id }), ["postFindDetailAction", id], {
-      select: (data) => data?.post
-    });
-    const { data: categories, isFetching: isFetchingControlMeta } = useQuery(
+    } = useCmsQuery(
+      () => postFindDetailAction({ id }),
+      ["postFindDetailAction", id],
+      {
+        select: (data) => data?.post
+      }
+    );
+    const { data: categories, isFetching: isFetchingControlMeta } = useCmsQuery(
       () => postFindManyAction({ type: categoryType, topicId: topic?.id }),
       ["postFindManyAction", categoryType, topic?.id],
       { select: (data) => data?.posts, enabled: !!topic }
@@ -75,9 +84,9 @@ function createCategoryEditPage({
     });
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "edit",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { useConfirm: true, replaceParent: true }),
           titleProps: {
             icon: Notebook,
             title: t("resources.category.text"),