feat: implement totpSetup UI

client/layouts/basicHeader/BasicHeader.tsx

@@ -10,6 +10,7 @@ import type { ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 import { pagesPath } from 'utils/$path';
 import styles from './BasicHeader.module.css';
+import { YourProfile } from './YourProfile';
 
 const Menu = ({
   open,
@@ -71,17 +72,7 @@ export const BasicHeader = (props: { user: UserDto }) => {
           </Menu>
         </div>
       </div>
-      <Modal open={openProfile} onClose={() => setOpenProfile(false)}>
-        <ModalHeader text="Your profile" />
-        <ModalBody>
-          <div>Sign in name: {props.user.signInName}</div>
-          <Spacer axis="y" size={8} />
-          <div>Display name: {props.user.displayName}</div>
-          <Spacer axis="y" size={8} />
-          <div>Email: {props.user.email}</div>
-        </ModalBody>
-        <ModalFooter cancelText="Close" cancel={() => setOpenProfile(false)} />
-      </Modal>
+      {openProfile && <YourProfile user={props.user} onClose={() => setOpenPassword(false)} />}
       <Modal open={openPassword} onClose={() => setOpenPassword(false)}>
         <ModalHeader text="Change password" />
         <ModalBody>

client/layouts/basicHeader/YourProfile.tsx

@@ -0,0 +1,76 @@
+import { Button, TextField, View } from '@aws-amplify/ui-react';
+import {
+  fetchMFAPreference,
+  setUpTOTP,
+  updateMFAPreference,
+  verifyTOTPSetup,
+} from 'aws-amplify/auth';
+import { APP_NAME } from 'common/constants';
+import type { UserDto } from 'common/types/user';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'components/modal/Modal';
+import { Spacer } from 'components/Spacer';
+import { useEffect, useState } from 'react';
+
+export const YourProfile = (props: { user: UserDto; onClose: () => void }) => {
+  const [enabledTotp, setEnabledTotp] = useState<boolean>();
+  const [qrCodeUrl, setQrCodeUrl] = useState('');
+  const [totpCode, setTotpCode] = useState('');
+  const enableTOTP = async () => {
+    const totpSetupDetails = await setUpTOTP();
+    const setupUri = totpSetupDetails.getSetupUri(APP_NAME);
+
+    setQrCodeUrl(setupUri.toString());
+  };
+  const verifyTOTP = async () => {
+    await verifyTOTPSetup({ code: totpCode });
+    await updateMFAPreference({ totp: 'PREFERRED' });
+    alert('TOTP has been successfully enabled!');
+    setQrCodeUrl('');
+  };
+
+  useEffect(() => {
+    fetchMFAPreference().then((res) => {
+      setEnabledTotp(res.preferred === 'TOTP');
+    });
+  }, []);
+
+  return (
+    <Modal open onClose={props.onClose}>
+      <ModalHeader text="Your profile" />
+      <ModalBody>
+        <div>Sign in name: {props.user.signInName}</div>
+        <Spacer axis="y" size={8} />
+        <div>Display name: {props.user.displayName}</div>
+        <Spacer axis="y" size={8} />
+        <div>Email: {props.user.email}</div>
+        <Spacer axis="y" size={8} />
+        {enabledTotp ? (
+          <div>MFA: true</div>
+        ) : qrCodeUrl ? (
+          <View>
+            <p>Scan this QR code with your authenticator app:</p>
+            <img
+              src={`https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
+                qrCodeUrl,
+              )}`}
+              alt="TOTP QR Code"
+              style={{ padding: 16, width: 150 }}
+            />
+            <TextField
+              label="Enter TOTP Code"
+              placeholder="123456"
+              value={totpCode}
+              onChange={(e) => setTotpCode(e.target.value)}
+            />
+            <Button onClick={verifyTOTP}>Verify TOTP</Button>
+          </View>
+        ) : (
+          <Button size="small" onClick={enableTOTP}>
+            Enable TOTP
+          </Button>
+        )}
+      </ModalBody>
+      <ModalFooter cancelText="Close" cancel={props.onClose} />
+    </Modal>
+  );
+};

client/package.json

@@ -29,13 +29,15 @@
     "axios": "^1.7.7",
     "jotai": "^2.10.3",
     "next": "^15.1.0",
+    "qrcode": "^1.5.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "swagger-ui-react": "^5.18.2",
     "swr": "^2.2.5",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/swagger-ui-react": "^4.18.3",