feat: show user device details

mjatin-dev · mjatin-dev · commit a0bede1c5ce9 · 2024-09-25T21:47:56.000+05:30
diff --git a/admin-ui/app/locales/en/translation.json b/admin-ui/app/locales/en/translation.json
@@ -101,7 +101,7 @@
     "principal_type": "Principal Type",
     "webhook_name": "Webhook Name",
     "sessionTimeoutInMins": "Admin UI Session Timeout (In Minutes)",
-    "gluuFlexVersion":"Gluu Flex Version",
+    "gluuFlexVersion": "Gluu Flex Version",
     "adminui_default_acr": "Admin UI authentication method (ACR)",
     "download_summary": "Download Summary",
     "metadata_location": "Metadata Location",
@@ -541,7 +541,13 @@
     "updates_at_last_run": "Updates at the last run",
     "problems_at_last_run": "Problems at the last run",
     "mapping": "Mapping",
-    "source": "Source"
+    "source": "Source",
+    "createdBy": "Created By",
+    "deviceName": "Device Name",
+    "OSName": "OS Name",
+    "OSVersion": "OS Version",
+    "platform": "Platform",
+    "authType": "Auth Type"
   },
   "languages": {
     "french": "French",
@@ -567,7 +573,7 @@
     "default_acr": "Default ACR",
     "acrs": "ACRs",
     "aliases": "Aliases",
-    "builtIn":"Built-In",
+    "builtIn": "Built-In",
     "api": {
       "roles": "Access roles",
       "permissions": "Permissions",
@@ -1436,7 +1442,7 @@
     },
     "settings": {
       "pageSize": "The default size for all list page.",
-      "gluuCurrentVersion":"Gluu Server current version",
+      "gluuCurrentVersion": "Gluu Server current version",
       "darkMode": "Whether to enable or disable adrk mode.",
       "configApiUrl": "The URL of the config api currently in used.",
       "sessionTimeoutInMins": "Determines the duration of inactivity allowed before the current session expires.",
@@ -1529,7 +1535,14 @@
       "INUM": "INUM",
       "middleName": "Middle Name",
       "sn": "Last Name",
-      "userConfirmPassword": "Confirm Password"
+      "userConfirmPassword": "Confirm Password",
+      "deviceName": "Device Name",
+      "OSName": "OS Name",
+      "OSVersion": "OS Version",
+      "platform": "Platform",
+      "createdBy": "Created By",
+      "type": "Type",
+      "domain": "Domain"
     },
     "saml": {
       "name": "The alphanumeric ID string that is used to identify the Trust Relationship",
diff --git a/admin-ui/app/locales/fr/translation.json b/admin-ui/app/locales/fr/translation.json
@@ -42,7 +42,7 @@
     "acrs": "ACRs",
     "aliases": "Aliases",
     "trust_relationships": "Relations de confiance",
-    "builtIn" : "Intégré",
+    "builtIn": "Intégré",
     "api": {
       "roles": "Rôles d'accès",
       "permissions": "Autorisations",
@@ -567,7 +567,13 @@
     "updates_at_last_run": "Mises à jour lors de la dernière exécution",
     "problems_at_last_run": "Problèmes lors de la dernière course",
     "mapping": "Mapeamento",
-    "source": "Fonte"
+    "source": "Fonte",
+    "createdBy": "Créé par",
+    "deviceName": "Nom de l'appareil",
+    "OSName": "Nom du système d'exploitation",
+    "OSVersion": "Version du système d'exploitation",
+    "platform": "Plateforme",
+    "authType": "Type d'authentification"
   },
   "messages": {
     "add_permission": "Ajouter une autorisation",
@@ -1468,6 +1474,13 @@
     "INUM": "INUM",
     "middleName": "Deuxième nom",
     "sn": "Nom de famille",
-    "userConfirmPassword": "Confirmez le mot de passe"
+    "userConfirmPassword": "Confirmez le mot de passe",
+    "deviceName": "Nom de l'appareil",
+    "OSName": "Nom du système d'exploitation",
+    "OSVersion": "Version du système d'exploitation",
+    "platform": "Plateforme",
+    "createdBy": "Créé par",
+    "type": "Type",
+    "domain": "Domaine"
   }
 }
diff --git a/admin-ui/app/locales/pt/translation.json b/admin-ui/app/locales/pt/translation.json
@@ -562,7 +562,13 @@
     "updates_at_last_run": "Atualizações na última execução",
     "problems_at_last_run": "Problemas na última corrida",
     "mapping": "Mapeamento",
-    "source": "Fonte"
+    "source": "Fonte",
+    "createdBy": "Criado por",
+    "deviceName": "Nome do dispositivo",
+    "OSName": "Nome do sistema operacional",
+    "OSVersion": "Versão do sistema operacional",
+    "platform": "Plataforma",
+    "authType": "Tipo de autenticação"
   },
   "messages": {
     "add_permission": "Adicionar permissão",
@@ -1465,6 +1471,13 @@
     "INUM": "INUM",
     "middleName": "Nome do meio",
     "sn": "Sobrenome",
-    "userConfirmPassword": "Confirme a Senha"
+    "userConfirmPassword": "Confirme a Senha",
+    "deviceName": "Nome do dispositivo",
+    "OSName": "Nome do sistema operacional",
+    "OSVersion": "Versão do sistema operacional",
+    "platform": "Plataforma",
+    "createdBy": "Criado por",
+    "type": "Tipo",
+    "domain": "Domínio"
   }
 }
diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserDeviceDetailViewPage.js b/admin-ui/plugins/user-management/components/UserManagement/UserDeviceDetailViewPage.js
@@ -0,0 +1,88 @@
+import React from "react";
+import { Container, Row, Col } from "Components";
+import GluuFormDetailRow from "Routes/Apps/Gluu/GluuFormDetailRow";
+
+const UserDeviceDetailViewPage = ({ row }) => {
+  const { rowData } = row;
+  const DOC_SECTION = "user";
+
+  return (
+    <Container style={{ backgroundColor: "#F5F5F5", minWidth: "100%" }}>
+      <Row>
+        <Col sm={6} xl={4}>
+          <GluuFormDetailRow
+            label="fields.domain"
+            value={rowData.registrationData.domain}
+            doc_category={DOC_SECTION}
+            doc_entry="domain"
+          />
+        </Col>
+        <Col sm={6} xl={4}>
+          <GluuFormDetailRow
+            label="fields.type"
+            value={rowData.registrationData.type}
+            doc_category={DOC_SECTION}
+            doc_entry="type"
+          />
+        </Col>
+        <Col sm={6} xl={4}>
+          <GluuFormDetailRow
+            label="fields.status"
+            value={rowData.registrationData.status}
+            doc_category={DOC_SECTION}
+            doc_entry="status"
+          />
+        </Col>
+        <Col sm={6} xl={4}>
+          <GluuFormDetailRow
+            label="fields.createdBy"
+            value={rowData.registrationData.createdBy}
+            doc_category={DOC_SECTION}
+            doc_entry="createdBy"
+          />
+        </Col>
+      </Row>
+
+      {rowData?.deviceData && (
+        <Row>
+          <h5 style={{ borderBottom: "2px solid", fontWeight: "bold" }}>
+            Device Information
+          </h5>
+          <Col sm={6} xl={4}>
+            <GluuFormDetailRow
+              label="fields.deviceName"
+              value={rowData.deviceData.name}
+              doc_category={DOC_SECTION}
+              doc_entry="deviceName"
+            />
+          </Col>
+          <Col sm={6} xl={4}>
+            <GluuFormDetailRow
+              label="fields.OSName"
+              value={rowData.deviceData.os_name}
+              doc_category={DOC_SECTION}
+              doc_entry="OSName"
+            />
+          </Col>
+          <Col sm={6} xl={4}>
+            <GluuFormDetailRow
+              label="fields.OSVersion"
+              value={rowData.deviceData.os_version}
+              doc_category={DOC_SECTION}
+              doc_entry="OSVersion"
+            />
+          </Col>
+          <Col sm={6} xl={4}>
+            <GluuFormDetailRow
+              label="fields.platform"
+              value={rowData.deviceData.platform}
+              doc_category={DOC_SECTION}
+              doc_entry="platform"
+            />
+          </Col>
+        </Row>
+      )}
+    </Container>
+  );
+};
+export default UserDeviceDetailViewPage;
diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserList.js b/admin-ui/plugins/user-management/components/UserManagement/UserList.js
@@ -42,6 +42,7 @@ import GluuViewDetailModal from "../../../../app/routes/Apps/Gluu/GluuViewDetail
 
 import moment from "moment";
 import { deleteFido2DeviceData } from "../../../fido/redux/features/fidoSlice";
+import UserDeviceDetailViewPage from "./UserDeviceDetailViewPage";
 
 function UserList(props) {
   const dispatch = useDispatch();
@@ -110,8 +111,9 @@ function UserList(props) {
     });
     setOTPDevicesList(otpDevices);
 
-  
-    dispatch(getUser2FADetails({ username: row.givenName.toLowerCase(), token: token }));
+    dispatch(
+      getUser2FADetails({ username: row.givenName.toLowerCase(), token: token })
+    );
     setIsDetailModalOpen(!isViewDetailModalOpen);
   }
 
@@ -295,15 +297,16 @@ function UserList(props) {
       const attenstationRequest = JSON.parse(
         item.registrationData.attenstationRequest
       );
-      if (item?.deviceData?.platform) {
-        return {
-          id: item?.deviceData?.uuid ?? "-",
-          nickName: attenstationRequest.displayName ?? "-",
-          modality: item?.deviceData?.platform ?? "-",
-          dateAdded: moment(item.creationDate).format("YYYY-MM-DD HH:mm:ss"),
-          type: "FIDO2",
-        };
-      }
+
+      return {
+        id: item?.deviceData?.uuid ? item?.deviceData?.uuid : item.id,
+        nickName: attenstationRequest.displayName ?? "-",
+        modality: item?.deviceData?.platform ?? "-",
+        dateAdded: moment(item.creationDate).format("YYYY-MM-DD HH:mm:ss"),
+        type: item?.deviceData?.platform ? "SUPER GLUU" : "FIDO2",
+        registrationData: item.registrationData,
+        deviceData: item.deviceData,
+      };
     });
     const removeNullValue = updatedDetails.filter((item) => item);
 
@@ -319,6 +322,11 @@ function UserList(props) {
     return <UserDetailViewPage row={rowData} />;
   }, []);
 
+  const DetailPanelForDevices = useCallback((rowData) => {
+    console.log("rowData", rowData);
+    return <UserDeviceDetailViewPage row={rowData} />;
+  }, []);
+
   const DeleteOutlinedIcon = useCallback(() => <DeleteOutlined />, []);
 
   const PaginationWrapper = useCallback(
@@ -350,6 +358,7 @@ function UserList(props) {
             { title: `${t("fields.nickName")}`, field: "nickName" },
             { title: `${t("fields.modality")}`, field: "modality" },
             { title: `${t("fields.dateAdded")}`, field: "dateAdded" },
+            { title: `${t("fields.authType")}`, field: "type" },
           ]}
           data={faDetails}
           isLoading={loading}
@@ -379,6 +388,7 @@ function UserList(props) {
               });
             },
           }}
+          detailPanel={DetailPanelForDevices}
         />
       </GluuViewDetailModal>
 
