feat: add MFA recovery codes

src/context/modals/index.tsx

@@ -1,7 +1,15 @@
-import { action, computed, makeAutoObservable } from "mobx";
+import {
+    action,
+    computed,
+    makeObservable,
+    observable,
+    runInAction,
+} from "mobx";
+import type { Client, API } from "revolt.js";
 import { ulid } from "ulid";
 
 import MFAFlow from "./components/MFAFlow";
+import MFARecovery from "./components/MFARecovery";
 import Test from "./components/Test";
 import { Modal } from "./types";
 
@@ -17,15 +25,19 @@ class ModalController<T extends Modal> {
     constructor(components: Components) {
         this.components = components;
 
-        makeAutoObservable(this);
-        this.pop = this.pop.bind(this);
+        makeObservable(this, {
+            stack: observable,
+            push: action,
+            remove: action,
+            rendered: computed,
+        });
     }
 
     /**
      * Display a new modal on the stack
      * @param modal Modal data
      */
-    @action push(modal: T) {
+    push(modal: T) {
         this.stack = [
             ...this.stack,
             {
@@ -36,28 +48,57 @@ class ModalController<T extends Modal> {
     }
 
     /**
-     * Remove the top modal from the stack
+     * Remove the keyed modal from the stack
      */
-    @action pop() {
-        this.stack = this.stack.slice(0, this.stack.length - 1);
+    remove(key: string) {
+        this.stack = this.stack.filter((x) => x.key !== key);
     }
 
     /**
      * Render modals
      */
-    @computed render() {
+    get rendered() {
         return (
             <>
                 {this.stack.map((modal) => {
                     const Component = this.components[modal.type];
-                    return <Component {...modal} onClose={this.pop} />;
+                    return (
+                        <Component
+                            {...modal}
+                            onClose={() => this.remove(modal.key!)}
+                        />
+                    );
                 })}
             </>
         );
     }
 }
 
-export const modalController = new ModalController<Modal>({
+/**
+ * Modal controller with additional helpers.
+ */
+class ModalControllerExtended extends ModalController<Modal> {
+    /**
+     * Perform MFA flow
+     * @param client Client
+     */
+    mfaFlow(client: Client) {
+        return runInAction(
+            () =>
+                new Promise((callback: (ticket: API.MFATicket) => void) =>
+                    this.push({
+                        type: "mfa_flow",
+                        state: "known",
+                        client,
+                        callback,
+                    }),
+                ),
+        );
+    }
+}
+
+export const modalController = new ModalControllerExtended({
     mfa_flow: MFAFlow,
+    mfa_recovery: MFARecovery,
     test: Test,
 });