@argusoft/medplat-app-shell 1.0.6 → 1.0.7

package/src/views/feature-components/login/TwoFactorSetupModal.jsx

@@ -0,0 +1,411 @@
+import { useEffect, useState } from 'react';
+import { Box, Button, CircularProgress, Modal, Typography, IconButton, Tooltip } from '@mui/material';
+import ShieldOutlinedIcon from '@mui/icons-material/ShieldOutlined';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
+import GppMaybeRoundedIcon from '@mui/icons-material/GppMaybeRounded';
+import WatchLaterOutlinedIcon from '@mui/icons-material/WatchLaterOutlined';
+import QRCode from 'react-qr-code';
+import PropTypes from 'prop-types';
+import { motion, AnimatePresence } from 'framer-motion';
+import { setupTwoFactor, verifyTwoFactor } from '@/common/services/TwoFactorService';
+import { showToast } from '@/common/toaster/toaster';
+import CustomTextField from '@/views/custom-components/CustomTextField';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as Yup from 'yup';
+
+const codeSchema = Yup.object().shape({
+  code: Yup.string()
+    .required('Enter the 6 digit code')
+    .matches(/^\d{6}$/, 'Code must be 6 digits'),
+});
+
+// Any TOTP authenticator app works, so the instructions stay generic.
+const steps = [
+  'Open your authenticator app (e.g. Google Authenticator, Microsoft Authenticator, Authy).',
+  'Tap the + button and scan the QR code below.',
+  'Enter the 6-digit code shown in the app to confirm.',
+];
+
+/**
+ * TwoFactorSetupModal
+ *
+ * Shown right after a successful login for a user whose role requires Google Authenticator based 2FA
+ * but who has not yet completed enrolment. The step is skippable: skipping still leaves the user logged
+ * in and the step reappears on the next login until enrolment is completed.
+ *
+ * @module TwoFactorSetupModal
+ * @param {Object} props
+ * @param {boolean} props.open - Whether the modal is open.
+ * @param {number} props.userId - Id of the logged in user.
+ * @param {string} props.userName - Username shown for context.
+ * @param {function} props.onSkip - Called when the user skips setup for now.
+ * @param {function} props.onVerified - Called after the code is successfully verified.
+ * @returns {JSX.Element}
+ */
+const TwoFactorSetupModal = ({ open, userId, userName, onSkip, onVerified }) => {
+  const [setupData, setSetupData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [verifying, setVerifying] = useState(false);
+  // 'scan' while enrolling, 'confirmSkip' when confirming a skip, 'success' once verified,
+  // 'skipped' once the user has chosen to skip for now.
+  const [phase, setPhase] = useState('scan');
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    defaultValues: { code: '' },
+    resolver: yupResolver(codeSchema),
+    mode: 'onChange',
+  });
+
+  useEffect(() => {
+    const fetchSetup = async () => {
+      if (!open || !userId) return;
+      try {
+        setLoading(true);
+        const { data } = await setupTwoFactor(userId);
+        setSetupData(data);
+      } catch (error) {
+        console.error(error);
+        showToast({ type: 'error', message: 'Could not generate the authenticator QR code' });
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchSetup();
+  }, [open, userId]);
+
+  // After the success or skipped animation, continue into the app automatically.
+  useEffect(() => {
+    if (phase !== 'success' && phase !== 'skipped') return undefined;
+    const proceed = phase === 'success' ? onVerified : onSkip;
+    const timer = setTimeout(() => proceed?.(), 2200);
+    return () => clearTimeout(timer);
+  }, [phase, onVerified, onSkip]);
+
+  const onVerify = async ({ code }) => {
+    try {
+      setVerifying(true);
+      const { data } = await verifyTwoFactor(userId, code);
+      if (data?.verified) {
+        setPhase('success');
+      } else {
+        showToast({ type: 'error', message: 'Invalid code. Please enter the current code from the app.' });
+      }
+    } catch (error) {
+      console.error(error);
+      showToast({ type: 'error', message: 'Could not verify the code' });
+    } finally {
+      setVerifying(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(setupData?.secret || '');
+      showToast({ type: 'success', message: 'Key copied to clipboard' });
+    } catch {
+      showToast({ type: 'error', message: 'Could not copy the key' });
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={phase === 'scan' ? () => setPhase('confirmSkip') : undefined}
+      data-testid="two-factor-setup-modal"
+    >
+      <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+        <motion.div
+          initial={{ opacity: 0, y: 24, scale: 0.96 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          transition={{ type: 'spring', stiffness: 220, damping: 22 }}
+          className="w-full max-w-md"
+        >
+          <Box className="w-full rounded-2xl bg-white shadow-2xl overflow-hidden">
+            <AnimatePresence mode="wait">
+              {phase === 'scan' ? (
+                <motion.div
+                  key="scan"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0, scale: 0.98 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  {/* Header */}
+                  <div className="flex flex-col items-center px-8 pt-8 pb-2 bg-gradient-to-b from-blue-50 to-white">
+                    <motion.div
+                      initial={{ scale: 0.6, opacity: 0 }}
+                      animate={{ scale: 1, opacity: 1 }}
+                      transition={{ type: 'spring', stiffness: 260, damping: 18 }}
+                      className="flex items-center justify-center w-14 h-14 rounded-full bg-[#007ACC] text-white shadow-lg shadow-blue-200 mb-3"
+                    >
+                      <ShieldOutlinedIcon />
+                    </motion.div>
+                    <Typography className="text-lg font-bold text-gray-800">Secure your account</Typography>
+                    <Typography className="text-sm text-gray-500 text-center mt-1">
+                      Your role requires two-factor authentication using an authenticator app
+                      {userName ? ` for ${userName}` : ''}.
+                    </Typography>
+                  </div>
+
+                  <div className="px-8 py-4">
+                    {/* Steps */}
+                    <ol className="space-y-2 mb-4">
+                      {steps.map((text, idx) => (
+                        <li key={idx} className="flex items-start gap-3">
+                          <span className="flex-shrink-0 flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-[#007ACC] text-xs font-semibold mt-0.5">
+                            {idx + 1}
+                          </span>
+                          <Typography className="text-sm text-gray-600">{text}</Typography>
+                        </li>
+                      ))}
+                    </ol>
+
+                    {/* QR */}
+                    <div className="flex flex-col items-center">
+                      {loading ? (
+                        <Box className="h-[196px] flex items-center justify-center">
+                          <CircularProgress size={28} />
+                        </Box>
+                      ) : setupData?.otpAuthUri ? (
+                        <motion.div
+                          initial={{ opacity: 0, scale: 0.9 }}
+                          animate={{ opacity: 1, scale: 1 }}
+                          transition={{ duration: 0.3 }}
+                          className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm"
+                        >
+                          <QRCode value={setupData.otpAuthUri} size={172} />
+                        </motion.div>
+                      ) : (
+                        <Typography variant="body2" color="error">
+                          Unable to load the QR code.
+                        </Typography>
+                      )}
+
+                      {setupData?.secret && (
+                        <div className="w-full mt-4">
+                          <Typography className="text-xs text-gray-400 text-center mb-1">
+                            Can&apos;t scan? Enter this key manually
+                          </Typography>
+                          <div className="flex items-center justify-center gap-2 rounded-lg bg-slate-50 border border-slate-100 px-3 py-2">
+                            <Typography
+                              className="font-mono text-sm break-all text-gray-700"
+                              data-testid="two-factor-secret"
+                            >
+                              {setupData.secret}
+                            </Typography>
+                            <Tooltip title="Copy key">
+                              <IconButton size="small" onClick={handleCopy} data-testid="two-factor-copy-key">
+                                <ContentCopyRoundedIcon fontSize="small" />
+                              </IconButton>
+                            </Tooltip>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Code entry */}
+                    <form onSubmit={handleSubmit(onVerify)} className="mt-5 space-y-4">
+                      <CustomTextField
+                        control={control}
+                        name="code"
+                        placeholder="••••••"
+                        errors={errors}
+                        fullWidth
+                        inputProps={{
+                          maxLength: 6,
+                          inputMode: 'numeric',
+                          pattern: '[0-9]*',
+                          style: {
+                            textAlign: 'center',
+                            letterSpacing: '0.5em',
+                            fontSize: '1.2rem',
+                            fontWeight: 600,
+                          },
+                          onInput: (e) => {
+                            e.target.value = e.target.value.replace(/\D/g, '');
+                          },
+                        }}
+                        dataTestId="two-factor-code-field"
+                      />
+                      <Box className="flex items-center justify-between gap-3 pb-6">
+                        <Button
+                          variant="text"
+                          color="inherit"
+                          size="small"
+                          onClick={() => setPhase('confirmSkip')}
+                          className="text-gray-500 normal-case"
+                          data-testid="two-factor-skip-button"
+                        >
+                          Skip for now
+                        </Button>
+                        <Button
+                          variant="contained"
+                          size="medium"
+                          type="submit"
+                          disabled={verifying || loading || !setupData?.otpAuthUri}
+                          className="rounded-full px-6 normal-case font-medium"
+                          data-testid="two-factor-verify-button"
+                        >
+                          {verifying ? <CircularProgress size={20} color="inherit" /> : 'Verify & Continue'}
+                        </Button>
+                      </Box>
+                    </form>
+                  </div>
+                </motion.div>
+              ) : phase === 'confirmSkip' ? (
+                <motion.div
+                  key="confirmSkip"
+                  initial={{ opacity: 0, scale: 0.98 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.98 }}
+                  transition={{ duration: 0.2 }}
+                  className="flex flex-col items-center text-center px-8 py-10"
+                >
+                  <motion.div
+                    initial={{ scale: 0.6, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    transition={{ type: 'spring', stiffness: 260, damping: 16 }}
+                    className="flex items-center justify-center w-16 h-16 rounded-full bg-amber-50 text-amber-500 mb-4"
+                  >
+                    <GppMaybeRoundedIcon sx={{ fontSize: 40 }} />
+                  </motion.div>
+                  <Typography className="text-lg font-bold text-gray-800">Skip two-factor setup?</Typography>
+                  <Typography className="text-sm text-gray-500 mt-2 max-w-sm leading-relaxed">
+                    Two-factor authentication adds a strong extra layer of protection. Your account stays secure even if
+                    your password is ever compromised. It only takes a minute, and we strongly recommend setting it up
+                    now.
+                  </Typography>
+                  <div className="w-full flex flex-col gap-2 mt-6">
+                    <Button
+                      variant="contained"
+                      size="medium"
+                      onClick={() => setPhase('scan')}
+                      className="rounded-full normal-case font-medium"
+                      data-testid="two-factor-setup-now-button"
+                    >
+                      Set it up now
+                    </Button>
+                    <Button
+                      variant="text"
+                      color="inherit"
+                      size="small"
+                      onClick={() => setPhase('skipped')}
+                      className="text-gray-500 normal-case"
+                      data-testid="two-factor-skip-anyway-button"
+                    >
+                      Skip anyway
+                    </Button>
+                  </div>
+                </motion.div>
+              ) : phase === 'success' ? (
+                <motion.div
+                  key="success"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  className="flex flex-col items-center text-center px-8 py-12"
+                >
+                  <div className="relative flex items-center justify-center mb-5">
+                    <motion.span
+                      className="absolute inline-flex h-20 w-20 rounded-full bg-green-200"
+                      initial={{ scale: 0.6, opacity: 0.7 }}
+                      animate={{ scale: 1.6, opacity: 0 }}
+                      transition={{ duration: 1.1, repeat: Infinity }}
+                    />
+                    <motion.div
+                      initial={{ scale: 0, rotate: -20 }}
+                      animate={{ scale: 1, rotate: 0 }}
+                      transition={{ type: 'spring', stiffness: 260, damping: 14 }}
+                      className="relative text-green-500"
+                    >
+                      <CheckCircleRoundedIcon sx={{ fontSize: 80 }} />
+                    </motion.div>
+                  </div>
+                  <motion.div
+                    initial={{ opacity: 0, y: 8 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.15 }}
+                  >
+                    <Typography className="text-xl font-bold text-gray-800">You&apos;re all set!</Typography>
+                    <Typography className="text-sm text-gray-500 mt-2 max-w-xs">
+                      Two-factor authentication is now enabled. You&apos;ll be asked for a code from your authenticator
+                      app each time you sign in.
+                    </Typography>
+                  </motion.div>
+                  <div className="flex items-center gap-2 mt-6 text-gray-400">
+                    <CircularProgress size={14} color="inherit" />
+                    <Typography className="text-xs">Taking you to your dashboard…</Typography>
+                  </div>
+                  <Button
+                    variant="contained"
+                    size="medium"
+                    onClick={() => onVerified?.()}
+                    className="rounded-full px-8 mt-6 normal-case font-medium"
+                    data-testid="two-factor-continue-button"
+                  >
+                    Continue
+                  </Button>
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="skipped"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  className="flex flex-col items-center text-center px-8 py-12"
+                >
+                  <motion.div
+                    initial={{ scale: 0, rotate: -10 }}
+                    animate={{ scale: 1, rotate: 0 }}
+                    transition={{ type: 'spring', stiffness: 260, damping: 14 }}
+                    className="flex items-center justify-center w-20 h-20 rounded-full bg-amber-50 text-amber-500 mb-5"
+                  >
+                    <WatchLaterOutlinedIcon sx={{ fontSize: 52 }} />
+                  </motion.div>
+                  <motion.div
+                    initial={{ opacity: 0, y: 8 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.15 }}
+                  >
+                    <Typography className="text-xl font-bold text-gray-800">Maybe later</Typography>
+                    <Typography className="text-sm text-gray-500 mt-2 max-w-xs">
+                      No problem. We&apos;ll ask you to set up two-factor authentication again the next time you sign
+                      in. You can secure your account anytime.
+                    </Typography>
+                  </motion.div>
+                  <div className="flex items-center gap-2 mt-6 text-gray-400">
+                    <CircularProgress size={14} color="inherit" />
+                    <Typography className="text-xs">Taking you to your dashboard…</Typography>
+                  </div>
+                  <Button
+                    variant="contained"
+                    size="medium"
+                    onClick={() => onSkip?.()}
+                    className="rounded-full px-8 mt-6 normal-case font-medium"
+                    data-testid="two-factor-skip-continue-button"
+                  >
+                    Continue
+                  </Button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </Box>
+        </motion.div>
+      </div>
+    </Modal>
+  );
+};
+
+TwoFactorSetupModal.propTypes = {
+  open: PropTypes.bool,
+  userId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  userName: PropTypes.string,
+  onSkip: PropTypes.func,
+  onVerified: PropTypes.func,
+};
+
+export default TwoFactorSetupModal;

package/src/views/feature-components/login/simplifyMenu.js

@@ -0,0 +1,45 @@
+import { showToast } from '@/common/toaster/toaster';
+/**
+ * Simplifies and flattens a hierarchical menu structure into a linear format.
+ *
+ * @param {Object|Object[]} menuItem - The menu item or array of menu items to process.
+ * @param {Object} linearMenuItems - The object to store flattened menu items indexed by `navigationState`.
+ * @returns {void}
+ */
+
+export const simplifyMenu = (menuItem, linearMenuItems) => {
+  if (!menuItem) return;
+
+  if (Array.isArray(menuItem)) {
+    menuItem.forEach((entity) => {
+      simplifyMenu(entity, linearMenuItems);
+    });
+  } else {
+    const menuItemWithoutParent = { ...menuItem };
+
+    if (menuItemWithoutParent.navigationState) {
+      linearMenuItems[menuItemWithoutParent.navigationState] = {
+        ...menuItemWithoutParent,
+      };
+    }
+
+    if (menuItemWithoutParent.featureJson) {
+      try {
+        menuItemWithoutParent.featureJson = JSON.parse(menuItem.featureJson || '');
+      } catch (error) {
+        console.error(error);
+        showToast({
+          message: `Error while parsing JSON featureJson:${error?.message}`,
+          type: 'error',
+        });
+        menuItemWithoutParent.featureJson = {};
+      }
+    }
+
+    if (menuItemWithoutParent.subGroups && Array.isArray(menuItemWithoutParent.subGroups)) {
+      menuItemWithoutParent.subGroups.forEach((entity) => {
+        simplifyMenu(entity, linearMenuItems);
+      });
+    }
+  }
+};