mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-13 17:10:06 +00:00
add UIA action component
This commit is contained in:
parent
d512fc06c8
commit
a2103a301a
src/app/components
64
src/app/components/ActionUIA.tsx
Normal file
64
src/app/components/ActionUIA.tsx
Normal file
|
@ -0,0 +1,64 @@
|
|||
import React, { ReactNode } from 'react';
|
||||
import { AuthDict, AuthType, IAuthData, UIAFlow } from 'matrix-js-sdk';
|
||||
import { getUIAFlowForStages } from '../utils/matrix-uia';
|
||||
import { useSupportedUIAFlows, useUIACompleted, useUIAFlow } from '../hooks/useUIAFlows';
|
||||
import { UIAFlowOverlay } from './UIAFlowOverlay';
|
||||
import { PasswordStage } from './uia-stages';
|
||||
|
||||
export const SUPPORTED_IN_APP_UIA_STAGES = [AuthType.Password, AuthType.Sso];
|
||||
|
||||
export const pickUIAFlow = (uiaFlows: UIAFlow[]): UIAFlow | undefined => {
|
||||
const passwordFlow = getUIAFlowForStages(uiaFlows, [AuthType.Password]);
|
||||
if (passwordFlow) return passwordFlow;
|
||||
return getUIAFlowForStages(uiaFlows, [AuthType.Sso]);
|
||||
};
|
||||
|
||||
type ActionUIAProps = {
|
||||
userId: string;
|
||||
authData: IAuthData;
|
||||
ongoingFlow: UIAFlow;
|
||||
action: (authDict: AuthDict) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
export function ActionUIA({ userId, authData, ongoingFlow, action, onCancel }: ActionUIAProps) {
|
||||
const completed = useUIACompleted(authData);
|
||||
const { getStageToComplete } = useUIAFlow(authData, ongoingFlow);
|
||||
|
||||
const stageToComplete = getStageToComplete();
|
||||
|
||||
if (!stageToComplete) return null;
|
||||
return (
|
||||
<UIAFlowOverlay
|
||||
currentStep={completed.length + 1}
|
||||
stepCount={ongoingFlow.stages.length}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
{stageToComplete.type === AuthType.Password && (
|
||||
<PasswordStage
|
||||
userId={userId}
|
||||
stageData={stageToComplete}
|
||||
onCancel={onCancel}
|
||||
submitAuthDict={action}
|
||||
/>
|
||||
)}
|
||||
</UIAFlowOverlay>
|
||||
);
|
||||
}
|
||||
|
||||
type ActionUIAFlowsLoaderProps = {
|
||||
authData: IAuthData;
|
||||
unsupported: () => ReactNode;
|
||||
children: (ongoingFlow: UIAFlow) => ReactNode;
|
||||
};
|
||||
export function ActionUIAFlowsLoader({
|
||||
authData,
|
||||
unsupported,
|
||||
children,
|
||||
}: ActionUIAFlowsLoaderProps) {
|
||||
const supportedFlows = useSupportedUIAFlows(authData.flows ?? [], SUPPORTED_IN_APP_UIA_STAGES);
|
||||
const ongoingFlow = supportedFlows.length > 0 ? supportedFlows[0] : undefined;
|
||||
|
||||
if (!ongoingFlow) return unsupported();
|
||||
|
||||
return children(ongoingFlow);
|
||||
}
|
|
@ -13,7 +13,6 @@ import {
|
|||
IconButton,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { stopPropagation } from '../utils/keyboard';
|
||||
|
||||
export type UIAFlowOverlayProps = {
|
||||
currentStep: number;
|
||||
|
@ -29,7 +28,7 @@ export function UIAFlowOverlay({
|
|||
}: UIAFlowOverlayProps) {
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: stopPropagation }}>
|
||||
<FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: false }}>
|
||||
<Box style={{ height: '100%' }} direction="Column" grow="Yes" gap="400">
|
||||
<Box grow="Yes" direction="Column" alignItems="Center" justifyContent="Center">
|
||||
{children}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
export * from './types';
|
||||
export * from './DummyStage';
|
||||
export * from './EmailStage';
|
||||
export * from './PasswordStage';
|
||||
export * from './ReCaptchaStage';
|
||||
export * from './RegistrationTokenStage';
|
||||
export * from './TermsStage';
|
||||
|
|
Loading…
Reference in a new issue