abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 01:15:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: finalise 2FA login

Browse Source
This commit is contained in:
Paul Makles
2022-06-12 19:24:59 +01:00
parent c686e85d37
commit dbb1c1e8fa
11 changed files with 277 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/context/modals/components/MFAEnableTOTP.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { QRCodeSVG } from "qrcode.react";
import styled from "styled-components";
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="Enable authenticator app"
description={
"Please scan or use the token below in your authentication app."
}
actions={[
{
palette: "primary",
children: "Continue",
onClick: () => {
callback(value.trim().replace(/\s/g, ""));
return true;
},
confirmation: true,
},
{
palette: "plain",
children: "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>Enter Code</Category>
<InputBox
value={value}
onChange={(e) => setValue(e.currentTarget.value)}
/>
</Modal>
);
}

44
src/context/modals/components/MFAFlow.tsx
View File

@@ -18,8 +18,6 @@ import {
Preloader,
} from "@revoltchat/ui";
import { noopTrue } from "../../../lib/js";
import { ModalProps } from "../types";
/**
@@ -58,6 +56,24 @@ function ResponseEntry({
}
/>
)}
{type === "Totp" && (
<InputBox
value={(value as { totp_code: string })?.totp_code}
onChange={(e) =>
onChange({ totp_code: e.currentTarget.value })
}
/>
)}
{type === "Recovery" && (
<InputBox
value={(value as { recovery_code: string })?.recovery_code}
onChange={(e) =>
onChange({ recovery_code: e.currentTarget.value })
}
/>
)}
</>
);
}
@@ -129,21 +145,31 @@ export default function MFAFlow({ onClose, ...props }: ModalProps<"mfa_flow">) {
palette: "plain",
children:
methods!.length === 1 ? "Cancel" : "Back",
onClick: () =>
methods!.length === 1
? true
: void setSelected(undefined),
onClick: () => {
if (methods!.length === 1) {
props.callback();
return true;
} else {
setSelected(undefined);
}
},
},
]
: [
{
palette: "plain",
children: "Cancel",
onClick: noopTrue,
onClick: () => {
props.callback();
return true;
},
},
]
}
onClose={onClose}>
onClose={() => {
props.callback();
onClose();
}}>
{methods ? (
selectedMethod ? (
<ResponseEntry
@@ -160,7 +186,7 @@ export default function MFAFlow({ onClose, ...props }: ModalProps<"mfa_flow">) {
action="chevron"
icon={<Icon size={24} />}
onClick={() => setSelected(method)}>
{method}
<Text id={`login.${method.toLowerCase()}`} />
</CategoryButton>
);
})

18
src/context/modals/components/MFARecovery.tsx
View File

@@ -37,13 +37,17 @@ export default function MFARecovery({
// 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);
const ticket = await modalController.mfaFlow(client);
if (ticket) {
const codes = await client.api.patch(
"/auth/mfa/recovery",
undefined,
toConfig(ticket.token),
);
setCodes(codes);
}
return false;
}, []);

22
src/context/modals/index.tsx
View File

@@ -8,6 +8,7 @@ import {
import type { Client, API } from "revolt.js";
import { ulid } from "ulid";
import MFAEnableTOTP from "./components/MFAEnableTOTP";
import MFAFlow from "./components/MFAFlow";
import MFARecovery from "./components/MFARecovery";
import Test from "./components/Test";
@@ -85,7 +86,7 @@ class ModalControllerExtended extends ModalController<Modal> {
mfaFlow(client: Client) {
return runInAction(
() =>
new Promise((callback: (ticket: API.MFATicket) => void) =>
new Promise((callback: (ticket?: API.MFATicket) => void) =>
this.push({
type: "mfa_flow",
state: "known",
@@ -95,10 +96,29 @@ class ModalControllerExtended extends ModalController<Modal> {
),
);
}
/**
* Open TOTP secret modal
* @param client Client
*/
mfaEnableTOTP(secret: string, identifier: string) {
return runInAction(
() =>
new Promise((callback: (value?: string) => void) =>
this.push({
type: "mfa_enable_totp",
identifier,
secret,
callback,
}),
),
);
}
}
export const modalController = new ModalControllerExtended({
mfa_flow: MFAFlow,
mfa_recovery: MFARecovery,
mfa_enable_totp: MFAEnableTOTP,
test: Test,
});

10
src/context/modals/types.ts
View File

@@ -9,15 +9,21 @@ export type Modal = {
| {
state: "known";
client: Client;
callback: (ticket: API.MFATicket) => void;
callback: (ticket?: API.MFATicket) => void;
}
| {
state: "unknown";
available_methods: API.MFAMethod[];
callback: (response: API.MFAResponse) => void;
callback: (response?: API.MFAResponse) => void;
}
))
| { type: "mfa_recovery"; codes: string[]; client: Client }
| {
type: "mfa_enable_totp";
identifier: string;
secret: string;
callback: (code?: string) => void;
}
| {
type: "test";
}