Mfa flow editor - #3551
Conversation
| }, | ||
| }); | ||
| const form = useAppForm({ | ||
| defaultValues: flow |
| import { MfaFormPage } from '../../../../../pages/MfaPage/MfaFormPage'; | ||
| import api from '../../../../../shared/api/api'; | ||
|
|
||
| export const Route = createFileRoute('/_authorized/_default/mfa-flow/$id/edit')({ |
There was a problem hiding this comment.
usage of loader without any loader component, we switched to skeletons a while ago.
| return (await api.mfaFlow.get(id)).data; | ||
| } catch (error) { | ||
| if (axios.isAxiosError(error) && error.response?.status === 404) throw notFound(); | ||
| throw error; |
There was a problem hiding this comment.
this would crash the app better to throw redirect and show snackbar
| export const Route = createFileRoute('/_authorized/_default/mfa-flow/$id/edit')({ | ||
| loader: async ({ params }) => { | ||
| const id = Number(params.id); | ||
| if (!Number.isSafeInteger(id) || id <= 0) throw notFound(); |
There was a problem hiding this comment.
if i remember correctly we have no 404 implemented yet for core.
| return undefined; | ||
| } | ||
| }; | ||
| /** Builds one selectable MFA method menu item. */ |
There was a problem hiding this comment.
| /** Builds one selectable MFA method menu item. */ |
| ), | ||
| })); | ||
|
|
||
| const deleteStep = (id: MfaConfigurationStepData['id']) => { |
There was a problem hiding this comment.
if you pass methods to components it is required to wrap them in the useCallback
| [MfaFlowMethod.Biometric]: m.mfa_flow_method_biometric(), | ||
| }; | ||
| /** Maps a backend availability reason to menu guidance. */ | ||
| const getDisabledHelper = (reason: MfaMethodAvailabilityReasonValue) => { |
There was a problem hiding this comment.
doesn't need to be in component scope
| export const MfaConfiguration = ({ onChange, steps, error }: MfaConfigurationProps) => { | ||
| const { data: methodAvailability } = useQuery(getMfaMethodAvailabilityQueryOptions); | ||
| const availableMethods = methodAvailability?.map(({ method }) => method) ?? []; | ||
| const methodLabels: Record<MfaFlowMethodValue, string> = { |
There was a problem hiding this comment.
doesn't need to be in component scope
|
|
||
| export const MfaConfiguration = ({ onChange, steps, error }: MfaConfigurationProps) => { | ||
| const { data: methodAvailability } = useQuery(getMfaMethodAvailabilityQueryOptions); | ||
| const availableMethods = methodAvailability?.map(({ method }) => method) ?? []; |
There was a problem hiding this comment.
use select in query for this.
| } | ||
|
|
||
| /** MFA methods grouped for display in an add-method menu. */ | ||
| export type MfaMethodGroup = { |
There was a problem hiding this comment.
if those are not from API then name should relate to the component used, if this is from API then it should be in api types.
Related issue: #3044
Implements the multi-step MFA flow editor.