[pull] main from KelvinTegelaar:main

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+    target-branch: "dev"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cipp",
-  "version": "8.8.2",
+  "version": "10.0.0",
   "author": "CIPP Contributors",
   "homepage": "https://cipp.app/",
   "bugs": {
@@ -106,7 +106,7 @@
     "redux-persist": "^6.0.0",
     "redux-thunk": "3.1.0",
     "rehype-raw": "^7.0.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "simplebar": "6.3.2",
     "simplebar-react": "3.3.2",
     "stylis-plugin-rtl": "2.1.1",

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.8.2"
+  "version": "10.0.0"
 }

src/components/CippCards/CippBannerListCard.jsx

@@ -3,6 +3,7 @@ import { useState, useCallback } from "react";
 import {
   Box,
   Card,
+  Checkbox,
   Collapse,
   Divider,
   IconButton,
@@ -16,13 +17,34 @@ import { CippPropertyListCard } from "./CippPropertyListCard";
 import { CippDataTable } from "../CippTable/CippDataTable";
 
 export const CippBannerListCard = (props) => {
-  const { items = [], isCollapsible = false, isFetching = false, children, ...other } = props;
+  const {
+    items = [],
+    isCollapsible = false,
+    isFetching = false,
+    children,
+    onSelectionChange,
+    selectedItems = [],
+    ...other
+  } = props;
   const [expanded, setExpanded] = useState(null);
 
   const handleExpand = useCallback((itemId) => {
     setExpanded((prevState) => (prevState === itemId ? null : itemId));
   }, []);
 
+  const handleCheckboxChange = useCallback(
+    (itemId, checked) => {
+      if (onSelectionChange) {
+        if (checked) {
+          onSelectionChange([...selectedItems, itemId]);
+        } else {
+          onSelectionChange(selectedItems.filter((id) => id !== itemId));
+        }
+      }
+    },
+    [onSelectionChange, selectedItems]
+  );
+
   const hasItems = items.length > 0;
 
   if (isFetching) {
@@ -91,6 +113,16 @@ export const CippBannerListCard = (props) => {
                       alignItems="center"
                       sx={{ flex: 1, minWidth: 0 }}
                     >
+                      {onSelectionChange && (
+                        <Checkbox
+                          checked={selectedItems.includes(item.id)}
+                          onChange={(e) => {
+                            e.stopPropagation();
+                            handleCheckboxChange(item.id, e.target.checked);
+                          }}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      )}
                       <Box
                         sx={{
                           alignItems: "center",
@@ -224,4 +256,6 @@ CippBannerListCard.propTypes = {
   ).isRequired,
   isCollapsible: PropTypes.bool,
   isFetching: PropTypes.bool,
+  onSelectionChange: PropTypes.func,
+  selectedItems: PropTypes.array,
 };

src/components/CippComponents/AssessmentCard.jsx

@@ -0,0 +1,129 @@
+import { Card, CardHeader, CardContent, Box, Typography, Skeleton } from "@mui/material";
+import { Security as SecurityIcon } from "@mui/icons-material";
+import { ResponsiveContainer, RadialBarChart, RadialBar, PolarAngleAxis } from "recharts";
+import { CippTimeAgo } from "../CippComponents/CippTimeAgo";
+
+export const AssessmentCard = ({ data, isLoading }) => {
+  // Extract data with null safety
+  const identityPassed = data?.TestResultSummary?.IdentityPassed || 0;
+  const identityTotal = data?.TestResultSummary?.IdentityTotal || 1;
+  const devicesPassed = data?.TestResultSummary?.DevicesPassed || 0;
+  const devicesTotal = data?.TestResultSummary?.DevicesTotal || 0;
+
+  // Determine if we should show devices section
+  const hasDeviceTests = devicesTotal > 0;
+
+  // Calculate percentages for the radial chart
+  // If no device tests, set devices to 100% (complete)
+  const devicesPercentage = hasDeviceTests ? (devicesPassed / devicesTotal) * 100 : 100;
+  const identityPercentage = (identityPassed / identityTotal) * 100;
+
+  const chartData = [
+    {
+      value: devicesPercentage,
+      fill: "#22c55e",
+    },
+    {
+      value: identityPercentage,
+      fill: "#3b82f6",
+    },
+  ];
+
+  return (
+    <Card sx={{ height: "100%" }}>
+      <CardHeader
+        title={
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <SecurityIcon sx={{ fontSize: 20 }} />
+            <Typography variant="subtitle1">Assessment</Typography>
+          </Box>
+        }
+        sx={{ pb: 1.5 }}
+      />
+      <CardContent>
+        <Box sx={{ display: "flex", gap: 3 }}>
+          <Box sx={{ flex: 1 }}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant="caption" color="text.secondary">
+                Identity
+              </Typography>
+              <Typography variant="h5" fontWeight="bold">
+                {isLoading ? (
+                  <Skeleton width={80} />
+                ) : (
+                  <>
+                    {identityPassed}/{identityTotal}
+                    <Typography
+                      component="span"
+                      variant="caption"
+                      color="text.secondary"
+                      sx={{ ml: 1 }}
+                    >
+                      tests
+                    </Typography>
+                  </>
+                )}
+              </Typography>
+            </Box>
+            {hasDeviceTests && (
+              <Box sx={{ mb: 2 }}>
+                <Typography variant="caption" color="text.secondary">
+                  Devices
+                </Typography>
+                <Typography variant="h5" fontWeight="bold">
+                  {isLoading ? (
+                    <Skeleton width={80} />
+                  ) : (
+                    <>
+                      {devicesPassed}/{devicesTotal}
+                      <Typography
+                        component="span"
+                        variant="caption"
+                        color="text.secondary"
+                        sx={{ ml: 1 }}
+                      >
+                        tests
+                      </Typography>
+                    </>
+                  )}
+                </Typography>
+              </Box>
+            )}
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Last Data Collection
+              </Typography>
+              <Typography variant="body2" fontSize="0.75rem">
+                {isLoading ? (
+                  <Skeleton width={100} />
+                ) : data?.ExecutedAt ? (
+                  <CippTimeAgo data={data?.ExecutedAt} />
+                ) : (
+                  "Not Available"
+                )}
+              </Typography>
+            </Box>
+          </Box>
+          <Box sx={{ width: "40%", maxWidth: 120, aspectRatio: 1 }}>
+            {isLoading ? (
+              <Skeleton variant="circular" width="100%" height="100%" />
+            ) : (
+              <ResponsiveContainer width="100%" height="100%">
+                <RadialBarChart
+                  innerRadius="20%"
+                  outerRadius="100%"
+                  data={chartData}
+                  startAngle={90}
+                  endAngle={450}
+                >
+                  <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
+                  <RadialBar dataKey="value" background cornerRadius={5} />
+                </RadialBarChart>
+              </ResponsiveContainer>
+            )}
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};

src/components/CippComponents/AuthMethodCard.jsx

@@ -0,0 +1,155 @@
+import { Box, Card, CardHeader, CardContent, Typography, Skeleton } from "@mui/material";
+import { People as UsersIcon } from "@mui/icons-material";
+import { CippSankey } from "./CippSankey";
+
+export const AuthMethodCard = ({ data, isLoading }) => {
+  const processData = () => {
+    if (!data || !Array.isArray(data) || data.length === 0) {
+      return null;
+    }
+
+    const enabledUsers = data.filter((user) => user.AccountEnabled === true);
+    if (enabledUsers.length === 0) {
+      return null;
+    }
+
+    const phishableMethods = ["mobilePhone", "email", "microsoftAuthenticatorPush"];
+    const phishResistantMethods = ["fido2", "windowsHelloForBusiness", "x509Certificate"];
+
+    let singleFactor = 0;
+    let phishableCount = 0;
+    let phishResistantCount = 0;
+    let perUserMFA = 0;
+    let phoneCount = 0;
+    let authenticatorCount = 0;
+    let passkeyCount = 0;
+    let whfbCount = 0;
+
+    enabledUsers.forEach((user) => {
+      const methods = user.MFAMethods || [];
+      const perUser = user.PerUser === "enforced" || user.PerUser === "enabled";
+      const hasRegistered = user.MFARegistration === true;
+
+      if (perUser && !hasRegistered && methods.length === 0) {
+        perUserMFA++;
+        return;
+      }
+
+      if (!hasRegistered || methods.length === 0) {
+        singleFactor++;
+        return;
+      }
+
+      const hasPhishResistant = methods.some((m) => phishResistantMethods.includes(m));
+      const hasPhishable = methods.some((m) => phishableMethods.includes(m));
+
+      if (hasPhishResistant) {
+        phishResistantCount++;
+        if (methods.includes("fido2") || methods.includes("x509Certificate")) {
+          passkeyCount++;
+        }
+        if (methods.includes("windowsHelloForBusiness")) {
+          whfbCount++;
+        }
+      } else if (hasPhishable) {
+        phishableCount++;
+        if (methods.includes("mobilePhone") || methods.includes("email")) {
+          phoneCount++;
+        }
+        if (
+          methods.includes("microsoftAuthenticatorPush") ||
+          methods.includes("softwareOneTimePasscode")
+        ) {
+          authenticatorCount++;
+        }
+      } else {
+        phishableCount++;
+        authenticatorCount++;
+      }
+    });
+
+    const mfaPercentage = (
+      ((phishableCount + phishResistantCount + perUserMFA) / enabledUsers.length) *
+      100
+    ).toFixed(1);
+    const phishResistantPercentage = ((phishResistantCount / enabledUsers.length) * 100).toFixed(1);
+
+    const links = [
+      { source: "Users", target: "Single factor", value: singleFactor },
+      { source: "Users", target: "Multi factor", value: perUserMFA },
+      { source: "Users", target: "Phishable", value: phishableCount },
+      { source: "Users", target: "Phish resistant", value: phishResistantCount },
+    ];
+
+    if (phoneCount > 0) links.push({ source: "Phishable", target: "Phone", value: phoneCount });
+    if (authenticatorCount > 0)
+      links.push({ source: "Phishable", target: "Authenticator", value: authenticatorCount });
+
+    if (passkeyCount > 0)
+      links.push({ source: "Phish resistant", target: "Passkey", value: passkeyCount });
+    if (whfbCount > 0) links.push({ source: "Phish resistant", target: "WHfB", value: whfbCount });
+
+    const description = `${mfaPercentage}% of enabled users have MFA configured. ${phishResistantPercentage}% use phish-resistant authentication methods.`;
+
+    return {
+      nodes: [
+        { id: "Users", nodeColor: "hsl(28, 100%, 53%)" },
+        { id: "Single factor", nodeColor: "hsl(0, 100%, 50%)" },
+        { id: "Multi factor", nodeColor: "hsl(200, 70%, 50%)" },
+        { id: "Phishable", nodeColor: "hsl(39, 100%, 50%)" },
+        { id: "Phone", nodeColor: "hsl(39, 100%, 45%)" },
+        { id: "Authenticator", nodeColor: "hsl(39, 100%, 55%)" },
+        { id: "Phish resistant", nodeColor: "hsl(99, 70%, 50%)" },
+        { id: "Passkey", nodeColor: "hsl(140, 70%, 50%)" },
+        { id: "WHfB", nodeColor: "hsl(160, 70%, 50%)" },
+      ],
+      links,
+      description,
+    };
+  };
+
+  const processedData = processData();
+
+  return (
+    <Card sx={{ flex: 1 }}>
+      <CardHeader
+        title={
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <UsersIcon sx={{ fontSize: 24 }} />
+            <Typography variant="h6">All users auth methods</Typography>
+          </Box>
+        }
+        sx={{ pb: 1 }}
+      />
+      <CardContent sx={{ pb: 0 }}>
+        <Box sx={{ height: 300 }}>
+          {isLoading ? (
+            <Skeleton variant="rectangular" width="100%" height={300} />
+          ) : processedData ? (
+            <CippSankey data={{ nodes: processedData.nodes, links: processedData.links }} />
+          ) : (
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "100%",
+              }}
+            >
+              <Typography variant="body2" color="text.secondary">
+                No authentication method data available
+              </Typography>
+            </Box>
+          )}
+        </Box>
+      </CardContent>
+      {!isLoading && processedData?.description && (
+        <CardContent sx={{ pt: 2 }}>
+          <Typography variant="body2" color="text.secondary">
+            {processedData.description}
+          </Typography>
+        </CardContent>
+      )}
+    </Card>
+  );
+};