66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { Button } from '@/components/Button';
|
|
import { DecoratedInput } from '@/components/DecoratedInput';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { FunctionComponent } from 'preact';
|
|
import { TwoFactorActivation } from './model';
|
|
import {
|
|
TwoFactorDialog,
|
|
TwoFactorDialogLabel,
|
|
TwoFactorDialogDescription,
|
|
TwoFactorDialogButtons,
|
|
} from './TwoFactorDialog';
|
|
|
|
export const Verification: FunctionComponent<{
|
|
activation: TwoFactorActivation;
|
|
}> = observer(({ activation: act }) => {
|
|
const borderInv =
|
|
act.verificationStatus === 'invalid' ? 'border-dark-red' : '';
|
|
return (
|
|
<TwoFactorDialog>
|
|
<TwoFactorDialogLabel
|
|
closeDialog={() => {
|
|
act.cancelActivation();
|
|
}}
|
|
>
|
|
Step 3 of 3 - Verification
|
|
</TwoFactorDialogLabel>
|
|
<TwoFactorDialogDescription>
|
|
<div className="flex-grow flex flex-col gap-1">
|
|
<div className="flex flex-row items-center gap-2">
|
|
<div className="text-sm">
|
|
・Enter your <b>secret key</b>:
|
|
</div>
|
|
<DecoratedInput className={borderInv} />
|
|
</div>
|
|
<div className="flex flex-row items-center gap-2">
|
|
<div className="text-sm">
|
|
・Verify the <b>authentication code</b> generated by your
|
|
authenticator app:
|
|
</div>
|
|
<DecoratedInput className={`w-30 ${borderInv}`} />
|
|
</div>
|
|
</div>
|
|
</TwoFactorDialogDescription>
|
|
<TwoFactorDialogButtons>
|
|
{act.verificationStatus === 'invalid' && (
|
|
<div className="text-sm color-dark-red">
|
|
Incorrect credentials, please try again.
|
|
</div>
|
|
)}
|
|
<Button
|
|
className="min-w-20"
|
|
type="normal"
|
|
label="Back"
|
|
onClick={() => act.openSaveSecretKey()}
|
|
/>
|
|
<Button
|
|
className="min-w-20"
|
|
type="primary"
|
|
label="Next"
|
|
onClick={() => act.enable2FA('X', 'X')}
|
|
/>
|
|
</TwoFactorDialogButtons>
|
|
</TwoFactorDialog>
|
|
);
|
|
});
|