@clicoh/orion-library 1.2.0-beta.16 → 1.2.0-beta.17

package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts

@@ -1,5 +1,21 @@
 import { ReactNode } from 'react';
 import { type SetupMfaAccessibilityLabels } from './SetupMfa';
+/** Copy of the form. Each one falls back to the original Spanish text. */
+export type LoginFormLabels = {
+    username?: string;
+    password?: string;
+    code?: string;
+    submit?: string;
+    back?: string;
+};
+/** What `renderSubmit` receives to draw its own submit button. */
+export type LoginFormSubmitState = {
+    /** `true` while `login` runs. */
+    pending: boolean;
+    /** `labels.submit`, or its default. */
+    label: string;
+};
+export type LoginFormErrorStyle = 'text' | 'message';
 type LoginFormProps = {
     login: (formData: FormData) => Promise<string | undefined>;
     callback?: () => void;
@@ -12,21 +28,68 @@ type LoginFormProps = {
     getOtpDigitAriaLabel?: (digit: number) => string;
     loadingLabel?: string;
     setupMfaAccessibilityLabels?: SetupMfaAccessibilityLabels;
+    title?: ReactNode;
+    description?: ReactNode;
+    labels?: LoginFormLabels;
+    forgotPassword?: ReactNode;
+    footer?: ReactNode;
+    renderSubmit?: (state: LoginFormSubmitState) => ReactNode;
+    errorStyle?: LoginFormErrorStyle;
+    toastErrors?: boolean;
+    showSpinner?: boolean;
 };
 /**
- * LoginForm component for rendering a login form with email and password inputs.
+ * LoginForm component for rendering a login form with email and password
+ * inputs, the verification code step and the MFA setup wizard.
+ *
+ * Every prop after `setupMfaAccessibilityLabels` is optional and keeps the
+ * original look when left out.
  *
  * @component
  * @example
  * // Example usage of LoginForm component
  * <LoginForm login={yourLoginFunction} callback={yourCallbackFunction} />
  *
+ * @example
+ * // Own copy, a recovery link, the error above the button and a custom submit
+ * <LoginForm
+ *   login={yourLoginFunction}
+ *   title="Welcome back"
+ *   description="Sign in with your account."
+ *   labels={{ username: 'Email', password: 'Password', submit: 'Sign in' }}
+ *   forgotPassword={<a href="/recover">Forgot your password?</a>}
+ *   footer={<Paragraph size="body-2">No access? Ask your admin.</Paragraph>}
+ *   errorStyle="message"
+ *   toastErrors={false}
+ *   showSpinner={false}
+ *   renderSubmit={({ pending, label }) => (
+ *     <Button type="submit" disabled={pending} className="w-full">{label}</Button>
+ *   )}
+ * />
+ *
  * @param {Object} props - The properties of the LoginForm component.
- * @param {Function} props.login - The function to handle the login process.
+ * @param {Function} props.login - The function to handle the login process. Resolves with a QR image to start the MFA setup, or with nothing when done; rejects with the message to show.
  * @param {Function} [props.callback] - Optional callback function to be called after a successful login.
+ * @param {boolean} [props.needCode=false] - Shows the verification code step instead of the credentials.
+ * @param {number} [props.lengthCode=6] - Digits of the verification code.
+ * @param {Function} [props.setupMfa] - Receives the two codes of the MFA setup wizard.
+ * @param {string} [props.showPasswordAriaLabel] - Accessible name of the button that shows the password.
+ * @param {string} [props.hidePasswordAriaLabel] - Accessible name of the button that hides the password.
+ * @param {Function} [props.getOtpDigitAriaLabel] - Accessible name of each code digit.
+ * @param {string} [props.loadingLabel] - Accessible name of the spinner.
+ * @param {SetupMfaAccessibilityLabels} [props.setupMfaAccessibilityLabels] - Accessible names of the MFA setup wizard.
+ * @param {ReactNode} [props.title='Bienvenido!'] - Heading above the form.
+ * @param {ReactNode} [props.description] - Text under the heading.
+ * @param {LoginFormLabels} [props.labels] - Field, code and button copy.
+ * @param {ReactNode} [props.forgotPassword] - Content above the submit button on the credentials step, such as a password recovery link.
+ * @param {ReactNode} [props.footer] - Content under the form, on the credentials and code steps.
+ * @param {Function} [props.renderSubmit] - Draws the submit button instead of the default one. It must render a `type="submit"` button.
+ * @param {'text' | 'message'} [props.errorStyle='text'] - `text` shows the error as red text under the buttons; `message` as an error `InlineMessage` above the submit button.
+ * @param {boolean} [props.toastErrors=true] - Also shows each error in a toast.
+ * @param {boolean} [props.showSpinner=true] - Shows a spinner under the form while `login` runs. Turn it off when `renderSubmit` already shows the wait.
  *
  * @returns {ReactNode} The rendered LoginForm component.
  */
-export declare function LoginForm({ login, callback, needCode, lengthCode, setupMfa, showPasswordAriaLabel, hidePasswordAriaLabel, getOtpDigitAriaLabel, loadingLabel, setupMfaAccessibilityLabels, }: LoginFormProps): ReactNode;
+export declare function LoginForm({ login, callback, needCode, lengthCode, setupMfa, showPasswordAriaLabel, hidePasswordAriaLabel, getOtpDigitAriaLabel, loadingLabel, setupMfaAccessibilityLabels, title, description, labels, forgotPassword, footer, renderSubmit, errorStyle, toastErrors, showSpinner, }: LoginFormProps): ReactNode;
 export {};
 //# sourceMappingURL=LoginForm.d.ts.map

package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAWzE,OAAO,EAAY,KAAK,2BAA2B,EAAE,MAAM,YAAY,CAAC;AAExE,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;IACzE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;CAC3D,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,UAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,YAAY,EACZ,2BAA2B,GAC5B,EAAE,cAAc,GAAG,SAAS,CAwI5B"}
+{"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAYzE,OAAO,EAAY,KAAK,2BAA2B,EAAE,MAAM,YAAY,CAAC;AAExE,0EAA0E;AAC1E,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,kEAAkE;AAClE,MAAM,MAAM,oBAAoB,GAAG;IACjC,iCAAiC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,CAAC;AAErD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;IACzE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,SAAS,CAAC;IAC1D,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAUF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,UAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,YAAY,EACZ,2BAA2B,EAC3B,KAAqB,EACrB,WAAW,EACX,MAAM,EACN,cAAc,EACd,MAAM,EACN,YAAY,EACZ,UAAmB,EACnB,WAAkB,EAClB,WAAkB,GACnB,EAAE,cAAc,GAAG,SAAS,CAkK5B"}

package/dist/components/04-templates/LoginTemplate/LoginForm.jsx

@@ -3,33 +3,81 @@ import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { FiArrowRight } from 'react-icons/fi';
 import { Button, Heading, Input, OtpInput, Paragraph, showToast, Spinner, } from '../../01-atoms';
+import { InlineMessage } from '../../02-molecules';
 import { SetupMfa } from './SetupMfa';
+const DEFAULT_LABELS = {
+    username: 'Usuario',
+    password: 'Contraseña',
+    code: 'Codigo de Verificación',
+    submit: 'Iniciar sesión',
+    back: 'Volver',
+};
 /**
- * LoginForm component for rendering a login form with email and password inputs.
+ * LoginForm component for rendering a login form with email and password
+ * inputs, the verification code step and the MFA setup wizard.
+ *
+ * Every prop after `setupMfaAccessibilityLabels` is optional and keeps the
+ * original look when left out.
  *
  * @component
  * @example
  * // Example usage of LoginForm component
  * <LoginForm login={yourLoginFunction} callback={yourCallbackFunction} />
  *
+ * @example
+ * // Own copy, a recovery link, the error above the button and a custom submit
+ * <LoginForm
+ *   login={yourLoginFunction}
+ *   title="Welcome back"
+ *   description="Sign in with your account."
+ *   labels={{ username: 'Email', password: 'Password', submit: 'Sign in' }}
+ *   forgotPassword={<a href="/recover">Forgot your password?</a>}
+ *   footer={<Paragraph size="body-2">No access? Ask your admin.</Paragraph>}
+ *   errorStyle="message"
+ *   toastErrors={false}
+ *   showSpinner={false}
+ *   renderSubmit={({ pending, label }) => (
+ *     <Button type="submit" disabled={pending} className="w-full">{label}</Button>
+ *   )}
+ * />
+ *
  * @param {Object} props - The properties of the LoginForm component.
- * @param {Function} props.login - The function to handle the login process.
+ * @param {Function} props.login - The function to handle the login process. Resolves with a QR image to start the MFA setup, or with nothing when done; rejects with the message to show.
  * @param {Function} [props.callback] - Optional callback function to be called after a successful login.
+ * @param {boolean} [props.needCode=false] - Shows the verification code step instead of the credentials.
+ * @param {number} [props.lengthCode=6] - Digits of the verification code.
+ * @param {Function} [props.setupMfa] - Receives the two codes of the MFA setup wizard.
+ * @param {string} [props.showPasswordAriaLabel] - Accessible name of the button that shows the password.
+ * @param {string} [props.hidePasswordAriaLabel] - Accessible name of the button that hides the password.
+ * @param {Function} [props.getOtpDigitAriaLabel] - Accessible name of each code digit.
+ * @param {string} [props.loadingLabel] - Accessible name of the spinner.
+ * @param {SetupMfaAccessibilityLabels} [props.setupMfaAccessibilityLabels] - Accessible names of the MFA setup wizard.
+ * @param {ReactNode} [props.title='Bienvenido!'] - Heading above the form.
+ * @param {ReactNode} [props.description] - Text under the heading.
+ * @param {LoginFormLabels} [props.labels] - Field, code and button copy.
+ * @param {ReactNode} [props.forgotPassword] - Content above the submit button on the credentials step, such as a password recovery link.
+ * @param {ReactNode} [props.footer] - Content under the form, on the credentials and code steps.
+ * @param {Function} [props.renderSubmit] - Draws the submit button instead of the default one. It must render a `type="submit"` button.
+ * @param {'text' | 'message'} [props.errorStyle='text'] - `text` shows the error as red text under the buttons; `message` as an error `InlineMessage` above the submit button.
+ * @param {boolean} [props.toastErrors=true] - Also shows each error in a toast.
+ * @param {boolean} [props.showSpinner=true] - Shows a spinner under the form while `login` runs. Turn it off when `renderSubmit` already shows the wait.
  *
  * @returns {ReactNode} The rendered LoginForm component.
  */
-export function LoginForm({ login, callback, needCode = false, lengthCode = 6, setupMfa, showPasswordAriaLabel, hidePasswordAriaLabel, getOtpDigitAriaLabel, loadingLabel, setupMfaAccessibilityLabels, }) {
+export function LoginForm({ login, callback, needCode = false, lengthCode = 6, setupMfa, showPasswordAriaLabel, hidePasswordAriaLabel, getOtpDigitAriaLabel, loadingLabel, setupMfaAccessibilityLabels, title = 'Bienvenido!', description, labels, forgotPassword, footer, renderSubmit, errorStyle = 'text', toastErrors = true, showSpinner = true, }) {
     const [errorMessage, setErrorMessage] = useState();
     const [otpCode, setOtpCode] = useState('');
     const [isPending, setIsPending] = useState(false);
     const [qr, setQr] = useState();
     const [showLogin, setShowLogin] = useState(!needCode);
+    const copy = { ...DEFAULT_LABELS, ...labels };
     useEffect(() => {
         setShowLogin(!needCode);
     }, [needCode]);
     const handlerSubmit = (event) => {
         event.preventDefault();
         setIsPending(true);
+        setErrorMessage(undefined);
         const formData = new FormData(event.currentTarget);
         if (needCode && otpCode) {
             formData.append('otpCode', otpCode);
@@ -41,7 +89,8 @@ export function LoginForm({ login, callback, needCode = false, lengthCode = 6, s
             .catch((error) => {
             const message = error instanceof Error ? error.message : String(error);
             setErrorMessage(message);
-            showToast(message, 'error');
+            if (toastErrors)
+                showToast(message, 'error');
         })
             .finally(() => {
             setIsPending(false);
@@ -55,19 +104,30 @@ export function LoginForm({ login, callback, needCode = false, lengthCode = 6, s
     const handleSetupMfa = (firstCode, secondCode) => {
         return setupMfa?.(firstCode, secondCode);
     };
+    const submit = renderSubmit?.({
+        pending: isPending,
+        label: copy.submit,
+    }) ?? (<Button type="submit" iconR={<FiArrowRight />} aria-disabled={isPending} disabled={isPending} className="w-full">
+      {copy.submit}
+    </Button>);
     return (<>
       {!qr && (<>
-          <Heading level="h4">Bienvenido!</Heading>
+          <div className="flex flex-col items-center gap-2 text-center">
+            <Heading level="h4">{title}</Heading>
+            {!!description && (<Paragraph className="text-gray-1 dark:text-gray-2 text-pretty">
+                {description}
+              </Paragraph>)}
+          </div>
           <form onSubmit={handlerSubmit} aria-busy={isPending} className="flex w-72 flex-col items-center gap-4">
             {!!showLogin && (<>
-                <Input label="Usuario" input={{
+                <Input label={copy.username} input={{
                     type: 'email',
                     name: 'username',
                     required: true,
                     autoComplete: 'email',
                     disabled: isPending,
                 }}/>
-                <Input label="Contraseña" showPasswordAriaLabel={showPasswordAriaLabel} hidePasswordAriaLabel={hidePasswordAriaLabel} input={{
+                <Input label={copy.password} showPasswordAriaLabel={showPasswordAriaLabel} hidePasswordAriaLabel={hidePasswordAriaLabel} input={{
                     type: 'password',
                     name: 'password',
                     required: true,
@@ -76,21 +136,25 @@ export function LoginForm({ login, callback, needCode = false, lengthCode = 6, s
                 }}/>
               </>)}
 
-            {!showLogin && (<OtpInput label="Codigo de Verificación" length={lengthCode} handleSubmit={(otp) => setOtpCode(otp)} getDigitAriaLabel={getOtpDigitAriaLabel}/>)}
+            {!showLogin && (<OtpInput label={copy.code} length={lengthCode} handleSubmit={(otp) => setOtpCode(otp)} getDigitAriaLabel={getOtpDigitAriaLabel}/>)}
+
+            {errorStyle === 'message' && !!errorMessage && (<InlineMessage modifier="error" className="w-full">
+                {errorMessage}
+              </InlineMessage>)}
+            {!!showLogin && forgotPassword}
 
-            <Button type="submit" iconR={<FiArrowRight />} aria-disabled={isPending} disabled={isPending} className="w-full">
-              Iniciar sesión
-            </Button>
+            {submit}
             {!showLogin && (<Button className="w-56" type="button" onClick={onCancel}>
-                Volver
+                {copy.back}
               </Button>)}
-            {!!errorMessage && (<Paragraph role="alert" className="text-error dark:text-error-1 text-center" size="chips">
+            {errorStyle === 'text' && !!errorMessage && (<Paragraph role="alert" className="text-error dark:text-error-1 text-center" size="chips">
                 {errorMessage}
               </Paragraph>)}
-            <div className={clsx('self-center', !isPending && 'invisible opacity-0')}>
-              <Spinner label={loadingLabel}/>
-            </div>
+            {showSpinner && (<div className={clsx('self-center', !isPending && 'invisible opacity-0')}>
+                <Spinner label={loadingLabel}/>
+              </div>)}
           </form>
+          {footer}
         </>)}
       {!!qr && (<SetupMfa lengthCode={lengthCode} onCancel={onCancel} qrImage={qr} setupMfa={handleSetupMfa} accessibilityLabels={setupMfaAccessibilityLabels}/>)}
     </>);

package/dist/components/04-templates/LoginTemplate/LoginForm.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"LoginForm.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginForm.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"LoginForm.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginForm.tsx"],"names":[],"mappings":"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"}

package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts

@@ -1,27 +1,45 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { StaticImageData } from 'next/dist/shared/lib/get-img-props';
 type LoginTemplateProps = {
     children: ReactNode;
     loginImg?: StaticImageData;
     logoAriaLabel?: string;
     logo?: ReactNode;
+    aside?: ReactNode;
+    imagePosition?: CSSProperties['objectPosition'];
 };
 /**
- * LoginTemplate component for rendering the login page layout.
+ * LoginTemplate component for rendering the login page layout: an image on
+ * the left and the content on the right. On small screens only the content
+ * shows.
  *
  * @component
  * @example
  * // Example usage of LoginTemplate component
  * <LoginTemplate>
- *   <LoginForm handlerLogin={yourHandlerLoginFunction} />
+ *   <LoginForm login={yourLoginFunction} />
+ * </LoginTemplate>
+ *
+ * @example
+ * // A tagline over the image, keeping the left part of the image in view
+ * <LoginTemplate
+ *   loginImg={productImage}
+ *   imagePosition="30% 50%"
+ *   aside={<Heading level="h4">Your tagline</Heading>}
+ * >
+ *   <LoginForm login={yourLoginFunction} />
  * </LoginTemplate>
  *
  * @param {Object} props - The properties of the LoginTemplate component.
  * @param {ReactNode} props.children - The content to be rendered inside the login template.
+ * @param {StaticImageData} [props.loginImg] - Image on the left. Defaults to the clicOH one.
+ * @param {string} [props.logoAriaLabel] - Accessible name of the default clicOH logo.
  * @param {ReactNode} [props.logo=<Logo />] - Brand mark above the content. Replaces the clicOH logo, so `logoAriaLabel` no longer applies.
+ * @param {ReactNode} [props.aside] - Content over the bottom of the image, on a dark gradient so white text reads. White by default; hidden with the image on small screens.
+ * @param {string} [props.imagePosition] - CSS `object-position` of the image: the part that stays in view when it is cropped. Defaults to the center.
  *
  * @returns {ReactNode} The rendered LoginTemplate component.
  */
-export declare function LoginTemplate(props: LoginTemplateProps): ReactNode;
+export declare function LoginTemplate({ children, loginImg, logoAriaLabel, logo, aside, imagePosition, }: LoginTemplateProps): ReactNode;
 export {};
 //# sourceMappingURL=LoginTemplate.d.ts.map

package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoginTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAyBlE"}
+{"version":3,"file":"LoginTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACjD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,KAAK,EACL,aAAa,GACd,EAAE,kBAAkB,GAAG,SAAS,CA6BhC"}

package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx

@@ -3,30 +3,49 @@ import LoginImg from '../../../../assets/images/login-clicoh.jpg';
 import { Logo } from '../../01-atoms';
 import { dataUrl } from './dataUrl';
 /**
- * LoginTemplate component for rendering the login page layout.
+ * LoginTemplate component for rendering the login page layout: an image on
+ * the left and the content on the right. On small screens only the content
+ * shows.
  *
  * @component
  * @example
  * // Example usage of LoginTemplate component
  * <LoginTemplate>
- *   <LoginForm handlerLogin={yourHandlerLoginFunction} />
+ *   <LoginForm login={yourLoginFunction} />
+ * </LoginTemplate>
+ *
+ * @example
+ * // A tagline over the image, keeping the left part of the image in view
+ * <LoginTemplate
+ *   loginImg={productImage}
+ *   imagePosition="30% 50%"
+ *   aside={<Heading level="h4">Your tagline</Heading>}
+ * >
+ *   <LoginForm login={yourLoginFunction} />
  * </LoginTemplate>
  *
  * @param {Object} props - The properties of the LoginTemplate component.
  * @param {ReactNode} props.children - The content to be rendered inside the login template.
+ * @param {StaticImageData} [props.loginImg] - Image on the left. Defaults to the clicOH one.
+ * @param {string} [props.logoAriaLabel] - Accessible name of the default clicOH logo.
  * @param {ReactNode} [props.logo=<Logo />] - Brand mark above the content. Replaces the clicOH logo, so `logoAriaLabel` no longer applies.
+ * @param {ReactNode} [props.aside] - Content over the bottom of the image, on a dark gradient so white text reads. White by default; hidden with the image on small screens.
+ * @param {string} [props.imagePosition] - CSS `object-position` of the image: the part that stays in view when it is cropped. Defaults to the center.
  *
  * @returns {ReactNode} The rendered LoginTemplate component.
  */
-export function LoginTemplate(props) {
+export function LoginTemplate({ children, loginImg, logoAriaLabel, logo, aside, imagePosition, }) {
     return (<div className="flex">
-      <div className="relative min-h-svh flex-1 bg-black">
-        <Image src={props.loginImg || LoginImg} alt="" aria-hidden="true" sizes="(max-width: 2247px) 100vw, 2247px" fill={true} className="object-cover" placeholder="blur" blurDataURL={dataUrl}/>
+      <div className="relative min-h-svh flex-1 overflow-hidden bg-black">
+        <Image src={loginImg || LoginImg} alt="" aria-hidden="true" sizes="(max-width: 2247px) 100vw, 2247px" fill={true} className="object-cover" style={imagePosition ? { objectPosition: imagePosition } : undefined} placeholder="blur" blurDataURL={dataUrl}/>
+        {!!aside && (<div className="absolute inset-x-0 bottom-0 flex flex-col gap-3 bg-linear-to-t from-black/90 via-black/70 to-transparent px-10 pt-32 pb-8 text-white">
+            {aside}
+          </div>)}
       </div>
       <main className="flex min-h-svh w-[460px] items-center justify-center bg-white text-black dark:bg-black dark:text-white">
         <div className="flex flex-col items-center justify-center gap-4">
-          {props.logo ?? (<Logo width={94} height={40} aria-label={props.logoAriaLabel}/>)}
-          {props.children}
+          {logo ?? <Logo width={94} height={40} aria-label={logoAriaLabel}/>}
+          {children}
         </div>
       </main>
     </div>);

package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"LoginTemplate.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,EAAW,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAUpC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CACnB;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,oCAAoC,CACjD;QAAA,CAAC,KAAK,CACJ,GAAG,CAAC,CAAE,KAAK,CAAC,QAA4B,IAAI,QAAQ,CAAC,CACrD,GAAG,CAAC,EAAE,CACN,WAAW,CAAC,MAAM,CAClB,KAAK,CAAC,mCAAmC,CACzC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,cAAc,CACxB,WAAW,CAAC,MAAM,CAClB,WAAW,CAAC,CAAC,OAAO,CAAC,EAEzB;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,wGAAwG,CACtH;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,iDAAiD,CAC9D;UAAA,CAAC,KAAK,CAAC,IAAI,IAAI,CACb,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,EAAG,CACjE,CACD;UAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"LoginTemplate.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAYpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,KAAK,EACL,aAAa,GACM;IACnB,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CACnB;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,oDAAoD,CACjE;QAAA,CAAC,KAAK,CACJ,GAAG,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAC1B,GAAG,CAAC,EAAE,CACN,WAAW,CAAC,MAAM,CAClB,KAAK,CAAC,mCAAmC,CACzC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,cAAc,CACxB,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CACrE,WAAW,CAAC,MAAM,CAClB,WAAW,CAAC,CAAC,OAAO,CAAC,EAEvB;QAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CACV,CAAC,GAAG,CAAC,SAAS,CAAC,sIAAsI,CACnJ;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,GAAG,CAAC,CACP,CACH;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,wGAAwG,CACtH;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,iDAAiD,CAC9D;UAAA,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,EAAG,CACnE;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/04-templates/LoginTemplate/index.d.ts

@@ -1,3 +1,4 @@
 export { LoginTemplate } from './LoginTemplate';
 export { LoginForm } from './LoginForm';
+export type { LoginFormErrorStyle, LoginFormLabels, LoginFormSubmitState, } from './LoginForm';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/04-templates/LoginTemplate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EACV,mBAAmB,EACnB,eAAe,EACf,oBAAoB,GACrB,MAAM,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicoh/orion-library",
-  "version": "1.2.0-beta.16",
+  "version": "1.2.0-beta.17",
   "main": "index.js",
   "dependencies": {
     "@floating-ui/react": "0.26.19",