78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import { QRCodeSVG } from "qrcode.react";
|
|
import styled from "styled-components";
|
|
|
|
import { Text } from "preact-i18n";
|
|
import { useState } from "preact/hooks";
|
|
|
|
import { Category, Centred, Column, InputBox, Modal } from "@revoltchat/ui";
|
|
|
|
import { ModalProps } from "../types";
|
|
|
|
const Code = styled.code`
|
|
user-select: all;
|
|
`;
|
|
|
|
/**
|
|
* TOTP enable modal
|
|
*/
|
|
export default function MFAEnableTOTP({
|
|
identifier,
|
|
secret,
|
|
callback,
|
|
onClose,
|
|
}: ModalProps<"mfa_enable_totp">) {
|
|
const uri = `otpauth://totp/Revolt:${identifier}?secret=${secret}&issuer=Revolt`;
|
|
const [value, setValue] = useState("");
|
|
|
|
return (
|
|
<Modal
|
|
title={<Text id="app.special.modals.mfa.enable_totp" />}
|
|
description={<Text id="app.special.modals.mfa.prompt_totp" />}
|
|
actions={[
|
|
{
|
|
palette: "primary",
|
|
children: <Text id="app.special.modals.actions.continue" />,
|
|
onClick: () => {
|
|
callback(value.trim().replace(/\s/g, ""));
|
|
return true;
|
|
},
|
|
confirmation: true,
|
|
},
|
|
{
|
|
palette: "plain",
|
|
children: <Text id="app.special.modals.actions.cancel" />,
|
|
onClick: () => {
|
|
callback();
|
|
return true;
|
|
},
|
|
},
|
|
]}
|
|
onClose={() => {
|
|
callback();
|
|
onClose();
|
|
}}>
|
|
<Column>
|
|
<Centred>
|
|
<QRCodeSVG
|
|
value={uri}
|
|
bgColor="transparent"
|
|
fgColor="var(--foreground)"
|
|
/>
|
|
</Centred>
|
|
<Centred>
|
|
<Code>{secret}</Code>
|
|
</Centred>
|
|
</Column>
|
|
|
|
<Category compact>
|
|
<Text id="app.special.modals.mfa.enter_code" />
|
|
</Category>
|
|
|
|
<InputBox
|
|
value={value}
|
|
onChange={(e) => setValue(e.currentTarget.value)}
|
|
/>
|
|
</Modal>
|
|
);
|
|
}
|