fix: Portal frontend 70 (#92)

* fix: add generate otp provisioning uri endpoint

* quick save

* quick save

* render qr code

* fix canvas margin

* fix: get otp secret

* fix: check if auth factor exists

* fix: api calls

* merge from main

* new cfl package

* fix: merge from main

* fix caching

* fix: notifications

* add todo

package.json

@@ -26,8 +26,9 @@
   ],
   "dependencies": {
     "@react-pdf/renderer": "^4.0.0",
-    "codeforlife": "2.6.5",
-    "crypto-js": "^4.2.0"
+    "codeforlife": "2.6.6",
+    "crypto-js": "^4.2.0",
+    "qrcode": "^1.5.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
@@ -40,6 +41,7 @@
     "@types/jest": "^29.5.12",
     "@types/js-cookie": "^3.0.3",
     "@types/node": "^20.14.2",
+    "@types/qrcode": "^1.5.5",
     "@types/qs": "^6.9.7",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",

src/api/authFactor.ts

@@ -1,34 +1,45 @@
-import { type AuthFactor, urls } from "codeforlife/api"
+import { type AuthFactor, type User, urls } from "codeforlife/api"
 import {
   type CreateArg,
   type CreateResult,
   type DestroyArg,
   type DestroyResult,
+  type ListArg,
+  type ListResult,
   buildUrl,
   tagData,
 } from "codeforlife/utils/api"
 import getReadAuthFactorEndpoints, {
   AUTH_FACTOR_TAG,
-  type ListAuthFactorsArg,
-  type ListAuthFactorsResult,
 } from "codeforlife/api/endpoints/authFactor"
 
 import api from "."
 
-export type { ListAuthFactorsArg, ListAuthFactorsResult }
+export type ListAuthFactorsResult = ListResult<AuthFactor, "type">
+export type ListAuthFactorsArg = ListArg<{
+  user: User["id"]
+  type: AuthFactor["type"]
+}>
 
 export type CreateAuthFactorResult = CreateResult<AuthFactor>
-export type CreateAuthFactorArg = CreateArg<AuthFactor, "type">
+export type CreateAuthFactorArg = CreateArg<AuthFactor, "type"> & {
+  otp?: string
+}
 
 export type DestroyAuthFactorResult = DestroyResult
 export type DestroyAuthFactorArg = DestroyArg<AuthFactor>
 
-export type GenerateOtpProvisioningUriResult = string
-export type GenerateOtpProvisioningUriArg = null
+export type GetOtpSecretResult = {
+  secret: string
+  provisioning_uri: string
+}
+export type GetOtpSecretArg = null
 
 const authFactorApi = api.injectEndpoints({
   endpoints: build => ({
-    ...getReadAuthFactorEndpoints(build),
+    ...getReadAuthFactorEndpoints<ListAuthFactorsResult, ListAuthFactorsArg>(
+      build,
+    ),
     createAuthFactor: build.mutation<
       CreateAuthFactorResult,
       CreateAuthFactorArg
@@ -38,7 +49,9 @@ const authFactorApi = api.injectEndpoints({
         method: "POST",
         body,
       }),
-      invalidatesTags: tagData(AUTH_FACTOR_TAG, { includeListTag: true }),
+      // NOTE: Intentionally not invalidating tags to show success sub-view.
+      // TODO: assess whether sub-view can be replaced with notification.
+      // invalidatesTags: tagData(AUTH_FACTOR_TAG, { includeListTag: true }),
     }),
     destroyAuthFactor: build.mutation<
       DestroyAuthFactorResult,
@@ -50,13 +63,10 @@ const authFactorApi = api.injectEndpoints({
       }),
       invalidatesTags: tagData(AUTH_FACTOR_TAG, { includeListTag: true }),
     }),
-    generateOtpProvisioningUri: build.query<
-      GenerateOtpProvisioningUriResult,
-      GenerateOtpProvisioningUriArg
-    >({
+    getOtpSecret: build.query<GetOtpSecretResult, GetOtpSecretArg>({
       query: () => ({
-        url: urls.authFactor.list + "generate-otp-provisioning-uri/",
-        method: "POST",
+        url: urls.authFactor.list + "get-otp-secret/",
+        method: "GET",
       }),
     }),
   }),
@@ -68,5 +78,5 @@ export const {
   useDestroyAuthFactorMutation,
   useListAuthFactorsQuery,
   useLazyListAuthFactorsQuery,
-  useGenerateOtpProvisioningUriQuery,
+  useGetOtpSecretQuery,
 } = authFactorApi

src/pages/teacherDashboard/account/Account.tsx

@@ -1,46 +1,41 @@
-import * as page from "codeforlife/components/page"
+import * as pages from "codeforlife/components/page"
 import { type FC } from "react"
 import { type SchoolTeacherUser } from "codeforlife/api"
 import { Typography } from "@mui/material"
 
-import * as forms from "../../../components/form"
-import ManageOtpForm from "./ManageOtpForm.tsx"
-import OtpBypassTokens from "./OtpBypassTokens.tsx"
+import { DeleteAccountForm, UpdateAccountForm } from "../../../components/form"
+import Otp from "./Otp"
+import OtpBypassTokens from "./otpBypassTokens/OtpBypassTokens"
 import { type RetrieveUserResult } from "../../../api/user"
-import SetupOtp from "./SetupOtp.tsx"
+import SetupOtp from "./setupOtp/SetupOtp"
 
 export interface AccountProps {
   authUser: SchoolTeacherUser<RetrieveUserResult>
-  view?: "otp" | "otp-bypass-tokens"
+  view?: "setup-otp" | "otp-bypass-tokens"
 }
 
 const Account: FC<AccountProps> = ({ authUser, view }) => {
   if (view) {
     return {
-      otp: <SetupOtp authUser={authUser} />,
+      "setup-otp": <SetupOtp authUserId={authUser.id} />,
       "otp-bypass-tokens": <OtpBypassTokens authUser={authUser} />,
     }[view]
   }
 
   return (
     <>
-      <page.Section>
+      <pages.Section>
         <Typography align="center" variant="h4">
           Your account
         </Typography>
-        <forms.UpdateAccountForm authUser={authUser} />
-      </page.Section>
-      <page.Section boxProps={{ bgcolor: "info.main" }}>
-        <Typography variant="h5">Two factor authentication</Typography>
-        <Typography>
-          Use your smartphone or tablet to enhance your account&apos;s security
-          by using an authenticator app.
-        </Typography>
-        <ManageOtpForm authUser={authUser} />
-      </page.Section>
-      <page.Section>
-        <forms.DeleteAccountForm authUser={authUser} />
-      </page.Section>
+        <UpdateAccountForm authUser={authUser} />
+      </pages.Section>
+      <pages.Section boxProps={{ bgcolor: "info.main" }}>
+        <Otp authUserId={authUser.id} />
+      </pages.Section>
+      <pages.Section>
+        <DeleteAccountForm authUser={authUser} />
+      </pages.Section>
     </>
   )
 }