@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.71

package/es/components/organism/LoginV2/components/OryConsent/styled.js

@@ -0,0 +1,292 @@
+import styled, { css } from 'styled-components';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const primary = globalToken?.colorPrimary || '#005eb8';
+const border = '#e2e8f0';
+const borderBlue = '#bdd0e0';
+const muted = '#64748b';
+const tint = '#f5fbff';
+export const Page = styled.div `
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  background: #eaf1fb;
+
+  @media (max-width: 768px) {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+`;
+export const Panel = styled.main `
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: center;
+  width: 404px;
+  height: 100%;
+  overflow-y: auto;
+  background: #fff;
+  box-shadow: 3px 0 9px rgba(15, 23, 42, 0.15);
+
+  @media (max-width: 768px) {
+    width: 100%;
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+    box-shadow: none;
+  }
+`;
+export const Banner = styled.div `
+  display: flex;
+  flex: 1;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 16px 20px;
+  color: ${muted};
+  font-size: 11px;
+  line-height: 14px;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+export const Body = styled.div `
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  padding: 72px 24px 24px;
+
+  @media (max-width: 768px) {
+    padding: 72px 16px 24px;
+  }
+`;
+export const AuthHeader = styled.header `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  text-align: center;
+
+  h1,
+  p {
+    margin: 0;
+  }
+
+  h1 {
+    font-size: 18px;
+    line-height: 24px;
+  }
+
+  p {
+    color: #767676;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  p b {
+    color: #000;
+    font-weight: 500;
+  }
+
+  small {
+    font-size: 12px;
+    line-height: 18px;
+  }
+`;
+export const HeaderLogo = styled.img `
+  width: 180px;
+  height: 40px;
+  object-fit: contain;
+`;
+export const Footer = styled.footer `
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  padding: 16px 24px;
+  background: #fff;
+  border-top: 1px solid #eaf1fb;
+  box-shadow: 0 -8px 14px -10px rgba(15, 23, 42, 0.14);
+
+  @media (max-width: 768px) {
+    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+  }
+`;
+export const SearchBox = styled.div `
+  > div {
+    align-items: center;
+  }
+
+  input {
+    height: 36px;
+    padding-right: 38px;
+    border: 1px solid ${borderBlue};
+    border-radius: 0;
+  }
+
+  .__icon-search {
+    position: absolute;
+    top: 50%;
+    right: 11px;
+    height: auto;
+    padding: 0;
+    background: transparent !important;
+    border: 0 !important;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  @media (max-width: 768px) {
+    input {
+      height: 44px;
+      font-size: 16px;
+    }
+  }
+`;
+export const List = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+export const PortalGrid = styled.div `
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+`;
+export const PortalOption = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  padding: 12px;
+  background: #fff;
+  border: 1px solid ${borderBlue};
+  border-radius: 10px;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+
+  &:hover {
+    background: ${tint};
+    border-color: ${primary};
+  }
+
+  &:focus-visible {
+    border-color: ${primary};
+    outline: 2px solid ${primary};
+    outline-offset: 2px;
+  }
+
+  ${p => p.$selected &&
+    css `
+      background: ${tint};
+      border-color: ${primary};
+      box-shadow: 0 0 0 1px ${primary};
+    `}
+`;
+export const PortalLogo = styled.span `
+  display: grid;
+  place-items: center;
+  height: 56px;
+  color: ${muted};
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+`;
+export const PortalName = styled.span `
+  padding-top: 10px;
+  overflow: hidden;
+  color: ${p => (p.$selected ? '#000' : '#767676')};
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-top: 1px solid #eaf1fb;
+`;
+export const Indicator = styled.span `
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: ${p => (p.$selected ? 'grid' : 'none')};
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  color: #fff;
+  background: ${primary};
+  border-radius: 50%;
+`;
+export const SummaryCard = styled.section `
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid ${borderBlue};
+  border-radius: 10px;
+`;
+export const SummaryRow = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+
+  & + & {
+    border-top: 1px solid #eaf1fb;
+  }
+`;
+export const SectionHeader = styled.div `
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+`;
+export const ScopeGroups = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+export const ScopeGroup = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+export const Caption = styled.span `
+  color: ${muted};
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+`;
+export const ScopeCard = styled.div `
+  padding: 12px 14px;
+  background: ${p => (p.$locked ? '#f4f6f8' : '#fff')};
+  border: 1px solid ${p => (p.$locked ? border : borderBlue)};
+  border-radius: 10px;
+`;
+export const Mono = styled.code `
+  align-self: flex-start;
+  padding: 1px 6px;
+  color: #475569;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 18px;
+  background: #f1f5f9;
+  border-radius: 6px;
+`;
+export const Truncate = styled.span `
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

package/es/components/organism/LoginV2/components/OrySignIn/OryFormShell.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type OryFormShellProps = {
+    title: string;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+};
+/** Same column and logo as the sign-in form, for the steps that follow or replace it. */
+export declare const OryFormShell: React.FC<OryFormShellProps>;
+export {};

package/es/components/organism/LoginV2/components/OrySignIn/OryFormShell.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Flex } from '../../../../atoms/Flex';
+import { Text } from '../../../../atoms/Text';
+import logoAntsomi from '../../../../../assets/images/logo/antsomi_logo.png';
+const Shell = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+  padding: 100px 50px;
+
+  @media (max-width: 768px) {
+    padding: 100px 30px;
+  }
+`;
+const Logo = styled.img `
+  width: 180px;
+  height: 40px;
+  object-fit: contain;
+`;
+const Fields = styled.div `
+  input {
+    height: 36px;
+    font-size: 14px;
+  }
+
+  @media (max-width: 768px) {
+    input {
+      height: 44px;
+      font-size: 16px;
+    }
+  }
+`;
+/** Same column and logo as the sign-in form, for the steps that follow or replace it. */
+export const OryFormShell = ({ title, description, children }) => (_jsxs(Shell, { children: [_jsxs(Flex, { vertical: true, align: "center", gap: 20, children: [_jsx(Logo, { src: logoAntsomi, alt: "Antsomi" }), _jsxs(Flex, { vertical: true, align: "center", gap: 8, style: { textAlign: 'center' }, children: [_jsx(Text, { bold: true, size: 18, children: title }), description ? _jsx(Text, { type: "secondary", children: description }) : null] })] }), _jsx(Fields, { children: children })] }));

package/es/components/organism/LoginV2/components/OrySignIn/OryMfa.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type OryMfaProps = {
+    kratosLoginUrl?: string;
+    sessionUrl?: string;
+    /** Called once the second factor is verified; usually continues the OAuth flow. */
+    onVerified: () => void | Promise<void>;
+    onBack: () => void;
+};
+/** Second step of sign-in for accounts with two-step verification. */
+export declare const OryMfa: React.FC<OryMfaProps>;
+export {};

package/es/components/organism/LoginV2/components/OrySignIn/OryMfa.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Form, Input } from 'antd';
+import { Alert } from '../../../../atoms/Alert';
+import { Button } from '../../../../atoms/Button';
+import { Flex } from '../../../../atoms/Flex';
+import { prepareOryMfa, sendOryEmailMfa, submitOryMfa, submitOryWebauthn, } from '../../utils/oryFlows';
+import { maskEmail } from '../ChooseMethod/utils';
+import { OryFormShell } from './OryFormShell';
+const COPY = {
+    totp: {
+        description: 'Enter the 6-digit code from your authenticator app.',
+        placeholder: '6-digit code',
+        rule: /^\d{6}$/,
+        hint: 'Enter the 6-digit code',
+    },
+    lookup_secret: {
+        description: 'Enter one of your backup codes. Each code works once.',
+        placeholder: 'Backup code',
+        rule: /^\S{6,}$/,
+        hint: 'Enter a backup code',
+    },
+    code: {
+        description: 'Enter the 6-digit code sent to your login email.',
+        placeholder: '6-digit code',
+        rule: /^\d{6}$/,
+        hint: 'Enter the 6-digit code',
+    },
+};
+const METHOD_LABEL = {
+    totp: 'Use your authenticator app',
+    lookup_secret: 'Use a backup code',
+    code: 'Send a code to your email',
+    webauthn: 'Use a security key or device',
+};
+/** Second step of sign-in for accounts with two-step verification. */
+export const OryMfa = ({ kratosLoginUrl, sessionUrl, onVerified, onBack, }) => {
+    const [form] = Form.useForm();
+    const [method, setMethod] = useState();
+    const [preparation, setPreparation] = useState();
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const copy = method && method !== 'webauthn' ? COPY[method] : COPY.totp;
+    useEffect(() => {
+        let active = true;
+        prepareOryMfa({ location: window.location, kratosLoginUrl })
+            .then(result => {
+            if (!active)
+                return;
+            setPreparation(result);
+            setMethod(result.methods.includes('totp') ? 'totp' : result.methods[0]);
+        })
+            .catch(cause => {
+            if (active) {
+                setError(cause?.userMessage ||
+                    'Verification could not be started. Please sign in again.');
+            }
+        })
+            .finally(() => {
+            if (active)
+                setLoading(false);
+        });
+        return () => {
+            active = false;
+        };
+    }, [kratosLoginUrl]);
+    const switchMethod = async (next) => {
+        if (!preparation || next === method)
+            return;
+        setLoading(true);
+        setError('');
+        form.resetFields();
+        try {
+            if (next === 'code' && !preparation.emailSent) {
+                await sendOryEmailMfa({
+                    location: window.location,
+                    flowId: preparation.flowId,
+                    kratosLoginUrl,
+                });
+                setPreparation(current => (current ? { ...current, emailSent: true } : current));
+            }
+            setMethod(next);
+        }
+        catch (cause) {
+            setError(cause?.userMessage ||
+                'We could not send a verification code. Please try again.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const onFinish = async ({ code }) => {
+        if (!method || method === 'webauthn' || !preparation)
+            return;
+        setLoading(true);
+        setError('');
+        try {
+            await submitOryMfa({
+                location: window.location,
+                method,
+                code,
+                flowId: preparation.flowId,
+                kratosLoginUrl,
+                sessionUrl,
+            });
+            await onVerified();
+        }
+        catch (cause) {
+            setError(cause?.userMessage ||
+                'Verification failed. Please try again.');
+            setLoading(false);
+        }
+    };
+    const verifyWebauthn = async () => {
+        if (!preparation)
+            return;
+        setLoading(true);
+        setError('');
+        try {
+            await submitOryWebauthn({
+                location: window.location,
+                flowId: preparation.flowId,
+                kratosLoginUrl,
+                sessionUrl,
+            });
+            await onVerified();
+        }
+        catch (cause) {
+            setError(cause?.userMessage ||
+                'Security key verification failed. Please try again.');
+            setLoading(false);
+        }
+    };
+    return (_jsx(OryFormShell, { title: "Two-step verification", description: method === 'webauthn'
+            ? 'Use your registered security key or this device to verify your identity.'
+            : method === 'code' && preparation?.email
+                ? `Enter the 6-digit code sent to ${maskEmail(preparation.email)}`
+                : copy.description, children: _jsxs(Form, { form: form, name: "ory_mfa_form", onFinish: onFinish, validateTrigger: "onSubmit", children: [method !== 'webauthn' ? _jsx(Form.Item, { name: "code", rules: [
+                        { required: true, message: copy.hint },
+                        { pattern: copy.rule, message: copy.hint },
+                    ], children: _jsx(Input, { autoFocus: true, autoComplete: "one-time-code", inputMode: method === 'lookup_secret' ? 'text' : 'numeric', placeholder: copy.placeholder, disabled: !method || loading }) }) : null, error ? _jsx(Alert, { type: "error", showIcon: true, role: "alert", message: error }) : null, _jsxs(Flex, { vertical: true, gap: 8, style: { marginTop: 24 }, children: [_jsx(Button, { type: "primary", size: "large", htmlType: method === 'webauthn' ? 'button' : 'submit', onClick: method === 'webauthn' ? verifyWebauthn : undefined, block: true, loading: loading, children: method === 'webauthn' ? 'Verify with security key' : 'Verify' }), preparation?.methods
+                            .filter(available => available !== method)
+                            .map(available => (_jsx(Button, { type: "text", onClick: () => switchMethod(available), disabled: loading, children: METHOD_LABEL[available] }, available))), _jsx(Button, { type: "text", onClick: onBack, disabled: loading, children: "Back to sign in" })] })] }) }));
+};

package/es/components/organism/LoginV2/components/OrySignIn/OryRecovery.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type OryRecoveryProps = {
+    kratosRecoveryUrl?: string;
+    initialFlowId?: string;
+    onBack: () => void;
+};
+/** Forgot-password flow: email a code, verify it, set a new password. */
+export declare const OryRecovery: React.FC<OryRecoveryProps>;
+export {};

package/es/components/organism/LoginV2/components/OrySignIn/OryRecovery.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Form, Input } from 'antd';
+import { Alert } from '../../../../atoms/Alert';
+import { Button } from '../../../../atoms/Button';
+import { Flex } from '../../../../atoms/Flex';
+import { isOryRecoveryRequest, resumeOryRecovery, setOryRecoveredPassword, startOryRecovery, verifyOryRecoveryCode, } from '../../utils/oryFlows';
+import { OryFormShell } from './OryFormShell';
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const TITLES = {
+    email: 'Reset your password',
+    code: 'Check your email',
+    password: 'Choose a new password',
+    done: 'Password updated',
+};
+/** Forgot-password flow: email a code, verify it, set a new password. */
+export const OryRecovery = ({ kratosRecoveryUrl, initialFlowId, onBack }) => {
+    const [step, setStep] = useState('email');
+    const [email, setEmail] = useState('');
+    const [flowId, setFlowId] = useState('');
+    const [settingsFlowId, setSettingsFlowId] = useState('');
+    const [loading, setLoading] = useState(Boolean(initialFlowId));
+    const [error, setError] = useState('');
+    useEffect(() => {
+        if (!initialFlowId)
+            return;
+        let active = true;
+        setLoading(true);
+        resumeOryRecovery({ location: window.location, flowId: initialFlowId, recoveryUrl: kratosRecoveryUrl })
+            .then(result => {
+            if (!active)
+                return;
+            setFlowId(result.flowId);
+            setStep(result.step);
+        })
+            .catch(cause => {
+            if (active)
+                setError(cause?.userMessage || 'Recovery is unavailable. Please start again.');
+        })
+            .finally(() => { if (active)
+            setLoading(false); });
+        return () => { active = false; };
+    }, [initialFlowId, kratosRecoveryUrl]);
+    const restart = () => {
+        setError('');
+        setFlowId('');
+        setSettingsFlowId('');
+        setEmail('');
+        setStep('email');
+        if (isOryRecoveryRequest(window.location)) {
+            const url = new URL(window.location.href);
+            url.searchParams.delete('flow');
+            window.history.replaceState(null, '', url.toString());
+        }
+    };
+    const run = async (action) => {
+        setLoading(true);
+        setError('');
+        try {
+            await action();
+        }
+        catch (cause) {
+            setError(cause?.userMessage ||
+                'Something went wrong. Please try again.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const sendCode = ({ email: value }) => run(async () => {
+        const result = await startOryRecovery({
+            location: window.location,
+            email: value,
+            recoveryUrl: kratosRecoveryUrl,
+        });
+        setEmail(value);
+        if (isOryRecoveryRequest(window.location)) {
+            const url = new URL(window.location.href);
+            url.searchParams.set('flow', result.flowId);
+            window.history.replaceState(null, '', url.toString());
+        }
+        setFlowId(result.flowId);
+        setStep('code');
+    });
+    const verifyCode = ({ code }) => run(async () => {
+        const result = await verifyOryRecoveryCode({
+            location: window.location,
+            flowId,
+            code,
+            recoveryUrl: kratosRecoveryUrl,
+        });
+        setSettingsFlowId(result.settingsFlowId);
+        setStep('password');
+    });
+    const savePassword = ({ password }) => run(async () => {
+        await setOryRecoveredPassword({
+            location: window.location,
+            settingsFlowId,
+            password,
+            recoveryUrl: kratosRecoveryUrl,
+        });
+        setStep('done');
+    });
+    const errorAlert = error ? _jsx(Alert, { type: "error", showIcon: true, role: "alert", message: error }) : null;
+    const description = {
+        email: "Enter your email and we'll send you a verification code.",
+        code: email ? `If an account exists for ${email}, we sent a code to it. Enter it below.` : 'Enter the code from your recovery email.',
+        password: 'Use at least 8 characters that you do not use anywhere else.',
+        done: 'You can now sign in with your new password.',
+    }[step];
+    return (_jsxs(OryFormShell, { title: TITLES[step], description: description, children: [step === 'email' ? (_jsxs(Form, { name: "ory_recovery_email", onFinish: sendCode, validateTrigger: "onSubmit", children: [_jsx(Form.Item, { name: "email", rules: [
+                            { required: true, message: 'Please enter your email' },
+                            { pattern: EMAIL_PATTERN, message: 'Please enter a valid email' },
+                        ], children: _jsx(Input, { autoFocus: true, autoComplete: "username", placeholder: "Email" }) }), errorAlert, _jsxs(Flex, { vertical: true, gap: 8, style: { marginTop: 24 }, children: [_jsx(Button, { type: "primary", size: "large", htmlType: "submit", block: true, loading: loading, children: "Send code" }), error ? _jsx(Button, { type: "text", onClick: restart, disabled: loading, children: "Start again" }) : null, _jsx(Button, { type: "text", onClick: onBack, disabled: loading, children: "Back to sign in" })] })] }, "email")) : null, step === 'code' ? (_jsxs(Form, { name: "ory_recovery_code", onFinish: verifyCode, validateTrigger: "onSubmit", children: [_jsx(Form.Item, { name: "code", rules: [
+                            { required: true, message: 'Enter the 6-digit code' },
+                            { pattern: /^\d{6}$/, message: 'Enter the 6-digit code' },
+                        ], children: _jsx(Input, { autoFocus: true, autoComplete: "one-time-code", inputMode: "numeric", placeholder: "6-digit code" }) }), errorAlert, _jsxs(Flex, { vertical: true, gap: 8, style: { marginTop: 24 }, children: [_jsx(Button, { type: "primary", size: "large", htmlType: "submit", block: true, loading: loading, children: "Verify code" }), _jsx(Button, { type: "text", disabled: loading, onClick: restart, children: "Start again" })] })] }, "code")) : null, step === 'password' ? (_jsxs(Form, { name: "ory_recovery_password", onFinish: savePassword, validateTrigger: "onSubmit", children: [_jsx(Form.Item, { name: "password", rules: [
+                            { required: true, message: 'Please enter a new password' },
+                            { min: 8, message: 'Password must be at least 8 characters long' },
+                        ], children: _jsx(Input.Password, { autoFocus: true, autoComplete: "new-password", placeholder: "New password" }) }), _jsx(Form.Item, { name: "confirm", dependencies: ['password'], rules: [
+                            { required: true, message: 'Please confirm your password' },
+                            ({ getFieldValue }) => ({
+                                validator: (_, value) => !value || getFieldValue('password') === value
+                                    ? Promise.resolve()
+                                    : Promise.reject(new Error('Passwords do not match')),
+                            }),
+                        ], children: _jsx(Input.Password, { autoComplete: "new-password", placeholder: "Confirm password" }) }), errorAlert, _jsxs(Flex, { vertical: true, gap: 8, style: { marginTop: 24 }, children: [_jsx(Button, { type: "text", onClick: restart, disabled: loading, children: "Start again" }), _jsx(Button, { type: "primary", size: "large", htmlType: "submit", block: true, loading: loading, children: "Update password" })] })] }, "password")) : null, step === 'done' ? (_jsxs(Flex, { vertical: true, gap: 16, children: [_jsx(Alert, { type: "success", showIcon: true, message: "Your password was changed." }), _jsx(Button, { type: "primary", size: "large", block: true, onClick: onBack, children: "Back to sign in" })] })) : null] }));
+};

package/es/components/organism/LoginV2/components/OrySignIn/OryStatus.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type OryStatusError = {
+    title: string;
+    message: string;
+    /** `info` for an outcome the user chose (declined), `warning` for a failure. */
+    tone?: 'info' | 'warning';
+    retryLabel?: string;
+};
+type OryStatusProps = {
+    error?: OryStatusError | null;
+    onRetry: () => void;
+};
+/** What to tell the user for an Ory flow failure code. */
+export declare const describeOryFailure: (code: string) => OryStatusError;
+/** Shown while the browser is handed between Kratos, Hydra and the client, or when that fails. */
+export declare const OryStatus: React.FC<OryStatusProps>;
+export {};

package/es/components/organism/LoginV2/components/OrySignIn/OryStatus.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../../atoms/Button';
+import { Flex } from '../../../../atoms/Flex';
+import { Spin } from '../../../../atoms/Spin';
+import { Text } from '../../../../atoms/Text';
+import { Result } from '../../../../molecules/Result';
+/** What to tell the user for an Ory flow failure code. */
+export const describeOryFailure = (code) => {
+    switch (code) {
+        case 'ORY_AUTHORIZATION_DENIED':
+            return {
+                tone: 'info',
+                title: 'Access denied',
+                message: 'The request was declined, so no access was granted to the application.',
+                retryLabel: 'Start over',
+            };
+        case 'ORY_STATE_MISSING':
+        case 'ORY_STATE_MISMATCH':
+        case 'ORY_STATE_INVALID':
+            return {
+                title: 'This sign-in link is no longer valid',
+                message: 'It may have expired or been opened in a different browser. Please start again.',
+                retryLabel: 'Start over',
+            };
+        default:
+            return {
+                title: "We couldn't sign you in",
+                message: 'Unable to continue with secure sign-in. Please try again.',
+            };
+    }
+};
+/** Shown while the browser is handed between Kratos, Hydra and the client, or when that fails. */
+export const OryStatus = ({ error, onRetry }) => error ? (_jsx("div", { role: "alert", children: _jsx(Result, { status: error.tone || 'warning', title: error.title, subTitle: error.message, extra: _jsx(Button, { type: "primary", onClick: onRetry, children: error.retryLabel || 'Try again' }) }) })) : (_jsxs(Flex, { vertical: true, align: "center", gap: 12, role: "status", "aria-live": "polite", children: [_jsx(Spin, {}), _jsx(Text, { type: "secondary", children: "Redirecting to secure sign-in\u2026" })] }));