76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import { FunctionComponent } from 'preact';
|
|
import { observer } from 'mobx-react-lite';
|
|
|
|
import QRCode from 'qrcode.react';
|
|
|
|
import { DecoratedInput } from '@/components/DecoratedInput';
|
|
import { Button } from '@/components/Button';
|
|
import { TwoFactorActivation } from './TwoFactorActivation';
|
|
import { AuthAppInfoTooltip } from './AuthAppInfoPopup';
|
|
import {
|
|
ModalDialog,
|
|
ModalDialogButtons,
|
|
ModalDialogDescription,
|
|
ModalDialogLabel,
|
|
} from '@/components/shared/ModalDialog';
|
|
import { CopyButton } from './CopyButton';
|
|
import { Bullet } from './Bullet';
|
|
|
|
export const ScanQRCode: FunctionComponent<{
|
|
activation: TwoFactorActivation;
|
|
}> = observer(({ activation: act }) => {
|
|
return (
|
|
<ModalDialog>
|
|
<ModalDialogLabel closeDialog={act.cancelActivation}>
|
|
Step 1 of 3 - Scan QR code
|
|
</ModalDialogLabel>
|
|
<ModalDialogDescription className="h-33">
|
|
<div className="w-25 h-25 flex items-center justify-center bg-info">
|
|
<QRCode className="border-neutral-contrast-bg border-solid border-2" value={act.qrCode} size={100} />
|
|
</div>
|
|
<div className="min-w-5" />
|
|
<div className="flex-grow flex flex-col">
|
|
<div className="flex flex-row items-center">
|
|
<Bullet />
|
|
<div className="min-w-1" />
|
|
<div className="text-sm">
|
|
Open your <b>authenticator app</b>.
|
|
</div>
|
|
<div className="min-w-2" />
|
|
<AuthAppInfoTooltip />
|
|
</div>
|
|
<div className="min-h-2" />
|
|
<div className="flex flex-row items-center">
|
|
<Bullet className="self-start mt-2" />
|
|
<div className="min-w-1" />
|
|
<div className="text-sm flex-grow">
|
|
<b>Scan this QR code</b> or <b>add this secret key</b>:
|
|
</div>
|
|
</div>
|
|
<div className="min-h-2" />
|
|
<DecoratedInput
|
|
className="ml-4 w-92"
|
|
disabled={true}
|
|
text={act.secretKey}
|
|
right={[<CopyButton copyValue={act.secretKey} />]}
|
|
/>
|
|
</div>
|
|
</ModalDialogDescription>
|
|
<ModalDialogButtons>
|
|
<Button
|
|
className="min-w-20"
|
|
type="normal"
|
|
label="Cancel"
|
|
onClick={() => act.cancelActivation()}
|
|
/>
|
|
<Button
|
|
className="min-w-20"
|
|
type="primary"
|
|
label="Next"
|
|
onClick={() => act.openSaveSecretKey()}
|
|
/>
|
|
</ModalDialogButtons>
|
|
</ModalDialog>
|
|
);
|
|
});
|