forked from abner/for-legacy-web
76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
import styled from "styled-components";
|
|
|
|
import { useCallback, useState } from "preact/hooks";
|
|
|
|
import { Modal } from "@revoltchat/ui";
|
|
|
|
import { noopTrue } from "../../../lib/js";
|
|
|
|
import { modalController } from "..";
|
|
import { toConfig } from "../../../components/settings/account/MultiFactorAuthentication";
|
|
import { ModalProps } from "../types";
|
|
|
|
/**
|
|
* List of recovery codes
|
|
*/
|
|
const List = styled.div`
|
|
display: grid;
|
|
text-align: center;
|
|
grid-template-columns: 1fr 1fr;
|
|
font-family: var(--monospace-font), monospace;
|
|
|
|
span {
|
|
user-select: text;
|
|
}
|
|
`;
|
|
|
|
/**
|
|
* Recovery codes modal
|
|
*/
|
|
export default function MFARecovery({
|
|
codes,
|
|
client,
|
|
onClose,
|
|
}: ModalProps<"mfa_recovery">) {
|
|
// Keep track of changes to recovery codes
|
|
const [known, setCodes] = useState(codes);
|
|
|
|
// Subroutine to reset recovery codes
|
|
const reset = useCallback(async () => {
|
|
const { token } = await modalController.mfaFlow(client);
|
|
const codes = await client.api.patch(
|
|
"/auth/mfa/recovery",
|
|
undefined,
|
|
toConfig(token),
|
|
);
|
|
setCodes(codes);
|
|
return false;
|
|
}, []);
|
|
|
|
return (
|
|
<Modal
|
|
title="Your recovery codes"
|
|
description={"Please save these to a safe location."}
|
|
actions={[
|
|
{
|
|
palette: "primary",
|
|
children: "Done",
|
|
onClick: noopTrue,
|
|
confirmation: true,
|
|
},
|
|
{
|
|
palette: "plain",
|
|
children: "Reset",
|
|
onClick: reset,
|
|
},
|
|
]}
|
|
onClose={onClose}>
|
|
<List>
|
|
{known.map((code) => (
|
|
<span>{code}</span>
|
|
))}
|
|
</List>
|
|
</Modal>
|
|
);
|
|
}
|