feat(web): one-time codes for identity verification

This replaces the JWT method for Identity Verification for most elements with a One-Time Code which has a controllable lifetime. These codes elevate the session for a duration, are less likely to be accidentally clicked, can be revoked, and generally a better experience for users. Users will be able to copy the codes directly from the email or manually type them. This improves the process as the user is very unlikely to input the code into the wrong window, and can't open it in the wrong browser. In addition the process prevents accidental clicking from causing issues.

Closes #3801

Signed-off-by: James Elliott <james-d-elliott@users.noreply.github.com>

1 files changed, 13 insertions, 2 deletions

diff --git a/web/src/layouts/SettingsLayout.tsx b/web/src/layouts/SettingsLayout.tsx
index 2f9fbea67..cae19d182 100644
--- a/web/src/layouts/SettingsLayout.tsx
+++ b/web/src/layouts/SettingsLayout.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, SyntheticEvent, useCallback, useEffect, useState } from "react";
 
-import { Close, Dashboard } from "@mui/icons-material";
+import { Close, Dashboard, ScienceOutlined } from "@mui/icons-material";
 import MenuIcon from "@mui/icons-material/Menu";
 import SystemSecurityUpdateGoodIcon from "@mui/icons-material/SystemSecurityUpdateGood";
 import {
@@ -19,7 +19,12 @@ import {
 import IconButton from "@mui/material/IconButton";
 import { useTranslation } from "react-i18next";
 
-import { IndexRoute, SettingsRoute, SettingsTwoFactorAuthenticationSubRoute } from "@constants/Routes";
+import {
+    IndexRoute,
+    SettingsRoute,
+    SettingsTestSubRoute,
+    SettingsTwoFactorAuthenticationSubRoute,
+} from "@constants/Routes";
 import { useRouterNavigate } from "@hooks/RouterNavigate";
 
 export interface Props {
@@ -145,6 +150,12 @@ const navItems: NavItem[] = [
         pathname: `${SettingsRoute}${SettingsTwoFactorAuthenticationSubRoute}`,
         icon: <SystemSecurityUpdateGoodIcon color={"primary"} />,
     },
+    {
+        keyname: "test",
+        text: "Test",
+        pathname: `${SettingsRoute}${SettingsTestSubRoute}`,
+        icon: <ScienceOutlined color={"primary"} />,
+    },
     { keyname: "close", text: "Close", pathname: IndexRoute, icon: <Close color={"error"} /> },
 ];