sitero 0.2.0 → 0.3.0

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

@@ -1,7 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import Link from 'next/link';
 import { useState } from 'react';
 import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../constants/paths/redirect.js';
@@ -9,20 +8,23 @@ import '../../../../../../constants/cms-locale.js';
 import 'ua-parser-js';
 import { useCountdown } from '../../../../../../shared/client/hooks/use-count-down.js';
 import '../../../../../../shared/client/react-query/client.js';
+import { getFieldError } from '../../../../../../shared/client/react-query/field-errors.js';
 import '@tanstack/react-query';
-import { useCmsCommand } from '../../../../infrastructure/feedback/use-cms-command.js';
-import '@radix-ui/react-avatar';
 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 'next/navigation';
+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';
@@ -34,23 +36,27 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import { Button } from '../../../components/ui/buttons/button.js';
-import 'next/navigation';
+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 { Input } from '../../../components/ui/inputs/input.js';
+import '../../../components/ui/inputs/textarea.js';
+import '../../../components/ui/inputs/switch-input.js';
+import '../../../components/ui/inputs/password-input.js';
 
 function createForgotPasswordPage({
   adminForgotPasswordAction
 }) {
   return function ForgotPasswordPage() {
-    const { t } = useTranslator();
+    const { t, locale } = useTranslator();
     const { timeLeft, isCounting, startCountdown } = useCountdown(30);
     const [formData, setFormData] = useState({
       email: ""
     });
-    const { execute, isPending, errors } = useCmsCommand(
+    const bindTextInput = createTextInputBinder(formData, setFormData);
+    const { execute, fieldErrors, isPending } = useCmsCommand(
       () => adminForgotPasswordAction({
         formData: { email: formData.email }
       }),
@@ -78,40 +84,53 @@ function createForgotPasswordPage({
           /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "mx-auto", children: t("features.authentication.admin.forgot-password.text") }) }),
           /* @__PURE__ */ jsxs(CardContent, { className: "relative flex flex-col gap-6", children: [
             /* @__PURE__ */ jsx(
-              Field,
+              FormField,
               {
-                htmlFor: "email",
+                controlId: "email",
                 label: t(
                   "features.authentication.admin.forgot-password.email.text"
                 ),
-                children: /* @__PURE__ */ jsx(
+                isRequired: true,
+                error: getCmsFieldErrorMessage(
+                  t,
+                  locale,
+                  getFieldError(fieldErrors, "email")
+                ),
+                children: (controlProps) => /* @__PURE__ */ jsx(
                   Input,
                   {
-                    id: "email",
+                    type: "email",
                     placeholder: t(
                       "features.authentication.admin.forgot-password.email.placeholder.text"
                     ),
                     autoComplete: "email",
-                    fieldName: "email",
-                    value: formData.email,
-                    setFormData,
-                    isDisabled: isPending || isCounting,
-                    isError: errors.includes("email")
+                    ...bindTextInput("email"),
+                    disabled: isPending || isCounting,
+                    ...controlProps
                   }
                 )
               }
             ),
             /* @__PURE__ */ jsx(
-              Button,
+              LinkButton,
               {
                 size: "xs",
                 variant: "link",
                 className: "w-fit",
+                href: CMS_PATHS.auth["sign-in"].pathname,
                 isDisabled: isPending,
-                children: /* @__PURE__ */ jsx(Link, { href: CMS_PATHS.auth["sign-in"].pathname, children: t("features.authentication.admin.forgot-password.anchor.text") })
+                children: t("features.authentication.admin.forgot-password.anchor.text")
               }
             ),
-            /* @__PURE__ */ jsx(Button, { type: "submit", isLoading: isPending, isDisabled: isCounting, children: buttonText })
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                type: "submit",
+                isLoading: isPending,
+                isDisabled: isCounting,
+                children: buttonText
+              }
+            )
           ] })
         ] })
       }

package/dist/src/cms/client/interfaces/pages/(auth)/layout.js

@@ -16,7 +16,6 @@ import 'mime-types';
 import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../components/shadcn/badge.js';
 import '../../components/shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -32,8 +31,9 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'intor/next';
 import 'next/link';
+import 'intor/next';
+import 'zod';
 import { AuthSkeleton } from '../../components/ui/layouts/auth-skeleton.js';
 
 function createAuthLayout() {

package/dist/src/cms/client/interfaces/pages/(auth)/reset-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 { useSearchParams } from 'next/navigation';
-import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState, useEffect } from 'react';
 import { ADMIN_RESET_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';
@@ -33,25 +34,37 @@ import '@radix-ui/react-separator';
 import '../../../components/shadcn/sidebar/sidebar.js';
 import 'next-themes';
 import 'sonner';
+import { Spinner } from '../../../components/shadcn/spinner.js';
 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 createResetPasswordPage({
   adminResetPasswordAction
 }) {
   return function ResetPasswordPage() {
-    const { t } = useTranslator();
+    const { t, locale } = useTranslator();
+    const router = useRouter();
     const passwordResetToken = useSearchParams().get("passwordResetToken") ?? "";
     const [formData, setFormData] = useState({
       newPassword: "",
       newPasswordConfirm: ""
     });
-    const { execute, isRedirecting, errors } = useCmsCommand(
+    const bindTextInput = createTextInputBinder(formData, setFormData);
+    useEffect(() => {
+      if (!passwordResetToken) {
+        router.replace(CMS_PATHS.auth["forgot-password"].pathname);
+      }
+    }, [passwordResetToken, router]);
+    const { execute, fieldErrors, isRedirecting } = useCmsCommand(
       () => adminResetPasswordAction({
         formData: { passwordResetToken, ...formData }
       }),
@@ -64,6 +77,9 @@ function createResetPasswordPage({
         onSuccess: () => globalThis.location.replace(CMS_PATHS.auth["sign-in"].pathname)
       }
     );
+    if (!passwordResetToken) {
+      return /* @__PURE__ */ jsx("div", { className: "flex-center relative flex-1 flex-col", children: /* @__PURE__ */ jsx(Spinner, { className: "size-10" }) });
+    }
     return /* @__PURE__ */ jsx(
       Form,
       {
@@ -74,62 +90,75 @@ function createResetPasswordPage({
           /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "mx-auto", children: t("features.authentication.admin.reset-password.text") }) }),
           /* @__PURE__ */ jsxs(CardContent, { className: "relative flex flex-col gap-6", children: [
             /* @__PURE__ */ jsx(
-              Field,
+              FormField,
               {
-                htmlFor: "newPassword",
+                controlId: "newPassword",
                 label: t(
                   "features.authentication.admin.reset-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.reset-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.reset-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.reset-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.auth["sign-in"].pathname,
                 isDisabled: isRedirecting,
-                children: /* @__PURE__ */ jsx(Link, { href: CMS_PATHS.auth["sign-in"].pathname, children: t("features.authentication.admin.reset-password.anchor.text") })
+                children: t("features.authentication.admin.reset-password.anchor.text")
               }
             ),
-            /* @__PURE__ */ jsx(Button, { type: "submit", isLoading: isRedirecting, children: t("features.authentication.admin.reset-password.button.text") })
+            /* @__PURE__ */ jsx(ActionButton, { type: "submit", isLoading: isRedirecting, children: t("features.authentication.admin.reset-password.button.text") })
           ] })
         ] })
       }

package/dist/src/cms/client/interfaces/pages/(auth)/sign-in/page.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import Link from 'next/link';
 import { useState } from 'react';
 import { ADMIN_SIGN_IN_ERROR_CODES } from 'sitero-server';
 import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
@@ -9,20 +8,23 @@ import '../../../../../../constants/paths/redirect.js';
 import '../../../../../../constants/cms-locale.js';
 import { useDeviceInfo } from '../../../../../../shared/client/hooks/use-device-info.js';
 import '../../../../../../shared/client/react-query/client.js';
+import { getFieldError } from '../../../../../../shared/client/react-query/field-errors.js';
 import '@tanstack/react-query';
-import { useCmsCommand } from '../../../../infrastructure/feedback/use-cms-command.js';
-import '@radix-ui/react-avatar';
 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 'next/navigation';
+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';
@@ -34,28 +36,31 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import { Button } from '../../../components/ui/buttons/button.js';
-import 'next/navigation';
+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 { Input } from '../../../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 createSignInPage({
   adminSignInAction
 }) {
   return function SignInPage() {
-    const { t } = useTranslator();
+    const { t, locale } = useTranslator();
     const deviceInfo = useDeviceInfo();
     const [formData, setFormData] = useState({
       email: "",
       password: ""
     });
-    const { execute, isRedirecting, errors } = useCmsCommand(
+    const bindTextInput = createTextInputBinder(formData, setFormData);
+    const { execute, fieldErrors, isRedirecting } = useCmsCommand(
       () => adminSignInAction({
         formData,
-        deviceInfo: deviceInfo ?? {}
+        deviceInfo
       }),
       {
         errorMessages: {
@@ -75,60 +80,70 @@ function createSignInPage({
           /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "mx-auto", children: t("features.authentication.admin.sign-in.text") }) }),
           /* @__PURE__ */ jsxs(CardContent, { className: "relative flex flex-col gap-6", children: [
             /* @__PURE__ */ jsx(
-              Field,
+              FormField,
               {
-                htmlFor: "email",
+                controlId: "email",
                 label: t("features.authentication.admin.sign-in.email.text"),
-                children: /* @__PURE__ */ jsx(
+                isRequired: true,
+                error: getCmsFieldErrorMessage(
+                  t,
+                  locale,
+                  getFieldError(fieldErrors, "email")
+                ),
+                children: (controlProps) => /* @__PURE__ */ jsx(
                   Input,
                   {
-                    id: "email",
                     type: "email",
                     placeholder: t(
                       "features.authentication.admin.sign-in.email.placeholder.text"
                     ),
                     autoComplete: "email",
-                    fieldName: "email",
-                    value: formData.email,
-                    setFormData,
-                    isDisabled: isRedirecting,
-                    isError: errors.includes("email")
+                    ...bindTextInput("email"),
+                    disabled: isRedirecting,
+                    ...controlProps
                   }
                 )
               }
             ),
             /* @__PURE__ */ jsx(
-              Field,
+              FormField,
               {
-                htmlFor: "password",
+                controlId: "password",
                 label: t("features.authentication.admin.sign-in.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.sign-in.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(
-              Button,
+              LinkButton,
               {
                 size: "xs",
                 variant: "link",
                 className: "w-fit",
+                href: CMS_PATHS.auth["forgot-password"].pathname,
                 isDisabled: isRedirecting,
-                children: /* @__PURE__ */ jsx(Link, { href: CMS_PATHS.auth["forgot-password"].pathname, children: t("features.authentication.admin.sign-in.anchor.text") })
+                children: t("features.authentication.admin.sign-in.anchor.text")
               }
             ),
-            /* @__PURE__ */ jsx(Button, { type: "submit", isLoading: isRedirecting, children: t("features.authentication.admin.sign-in.button.text") })
+            /* @__PURE__ */ jsx(ActionButton, { type: "submit", isLoading: isRedirecting, children: t("features.authentication.admin.sign-in.button.text") })
           ] })
         ] })
       }