[+] added warning in app view and block saving if app warnings are pr…

…esent
linagora · May 2, 2024 · e5cbdf7 · e5cbdf7
1 parent 0b3584c
commit e5cbdf7
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 52 deletions.
diff --git a/src/components/SaveButton.css b/src/components/SaveButton.css
@@ -10,8 +10,7 @@
   bottom: 2%;
   left: 2%;
 }
-
-.notif.orange {
+.notif {
   position: fixed;
   left: 50%;
   padding: 2px;
@@ -21,20 +20,16 @@
   justify-items: center;
   top: 65px;
   align-content: center;
+}
+.notif.orange {
   background-color: rgb(255, 220, 192);
 }
 .notif.green {
-  position: fixed;
-  left: 50%;
-  padding: 2px;
-  transform: translateX(-50%);
-  height: 25px;
-  border-radius: 5px;
-  justify-items: center;
-  top: 65px;
-  align-content: center;
   background-color: rgb(199, 255, 192);
 }
+.notif.red {
+  background-color: rgb(255, 192, 192);
+}
 
 .notif.hidden {
   visibility: hidden;

diff --git a/src/components/SaveButton.tsx b/src/components/SaveButton.tsx
@@ -1,29 +1,49 @@
 import { t } from "i18next";
 import "./SaveButton.css";
 import { useState } from "react";
-import { useAppDispatch } from "../app/hooks";
+import { useAppDispatch, useAppSelector } from "../app/hooks";
 import { getConfigAsync, saveConfigCall } from "../features/config/configSlice";
+import { ruleOIDC, ruleSAML } from "../utils/rules";
 
 export default function SaveButton() {
   const [openSavePopup, setOpenSavePopup] = useState(false);
   const [openSavingPopup, setOpenSavingPopup] = useState(false);
+  const [openErrorPopup, setOpenErrorPopup] = useState(false);
   const dispatch = useAppDispatch();
-
+  const data = useAppSelector((state) => state.config.data.config);
   return (
     <div>
       <button
         className="saveButton"
         onClick={() => {
-          dispatch(saveConfigCall());
-          setOpenSavingPopup(true);
-          setTimeout(() => {
-            setOpenSavingPopup(false);
-            dispatch(getConfigAsync());
-            setOpenSavePopup(true);
+          let stateOk = true;
+          Object.keys(data.oidcRPMetaDataOptions).forEach((app) => {
+            if (!ruleOIDC(data.oidcRPMetaDataOptions[app])) {
+              stateOk = false;
+            }
+          });
+          Object.keys(data.samlSPMetaDataXML).forEach((app) => {
+            if (!ruleSAML(data.samlSPMetaDataXML[app])) {
+              stateOk = false;
+            }
+          });
+          if (stateOk) {
+            dispatch(saveConfigCall());
+            setOpenSavingPopup(true);
+            setTimeout(() => {
+              setOpenSavingPopup(false);
+              dispatch(getConfigAsync());
+              setOpenSavePopup(true);
+              setTimeout(() => {
+                setOpenSavePopup(false);
+              }, 2000);
+            }, 2000);
+          } else {
+            setOpenErrorPopup(true);
             setTimeout(() => {
-              setOpenSavePopup(false);
+              setOpenErrorPopup(false);
             }, 2000);
-          }, 2000);
+          }
         }}
       >
         {t("save")}
@@ -32,7 +52,10 @@ export default function SaveButton() {
         {t("Saving...")}
       </div>
       <div className={`notif green ${openSavePopup ? "visible" : "hidden"}`}>
-        {t("confSaved")}
+        {t("successfullySaved")}
+      </div>
+      <div className={`notif red ${openErrorPopup ? "visible" : "hidden"}`}>
+        {t("Cannot save with app warnings")}
       </div>
     </div>
   );

diff --git a/src/components/applicationsComponents/OIDCApp.tsx b/src/components/applicationsComponents/OIDCApp.tsx
@@ -12,6 +12,7 @@ import {
   updateOidcMetaDataOptions,
   updateOidcRPMetaDataExportedVars,
 } from "../../features/config/configSlice";
+import attributes from "../../static/attributes.json";
 
 function updateExpAttr(tableID: string) {
   const attrList: Record<string, string> = {};
@@ -136,7 +137,45 @@ export function OIDCApp({ name }: { name: string }) {
           <table>
             <tbody>
               <tr>
-                <th>{t("oidcRPMetaDataOptionsPublic")}</th>
+                <th>
+                  {t("oidcRPMetaDataOptionsClientID")}{" "}
+                  {data.oidcRPMetaDataOptions[name]
+                    .oidcRPMetaDataOptionsClientID === ""
+                    ? "⚠️"
+                    : ""}
+                </th>
+                <td>
+                  <input
+                    className="form"
+                    type="text"
+                    value={String(
+                      data.oidcRPMetaDataOptions[name]
+                        .oidcRPMetaDataOptionsClientID
+                    )}
+                    onChange={(e) => {
+                      dispatch(
+                        updateOidcMetaDataOptions({
+                          name,
+                          option: "oidcRPMetaDataOptionsClientID",
+                          value: e.target.value,
+                        })
+                      );
+                    }}
+                  />
+                </td>
+              </tr>
+              <tr>
+                <th>
+                  {t("oidcRPMetaDataOptionsPublic")}
+                  {data.oidcRPMetaDataOptions[name]
+                    ? data.oidcRPMetaDataOptions[name]
+                        .oidcRPMetaDataOptionsPublic ||
+                      data.oidcRPMetaDataOptions[name]
+                        .oidcRPMetaDataOptionsClientSecret !== ""
+                      ? ""
+                      : "⚠️"
+                    : "⚠️"}
+                </th>
                 <td>
                   <div>
                     <label>
@@ -190,34 +229,23 @@ export function OIDCApp({ name }: { name: string }) {
                   </div>
                 </td>
               </tr>
+
               <tr>
-                <th>{t("oidcRPMetaDataOptionsClientID")}</th>
-                <td>
-                  <input
-                    className="form"
-                    type="text"
-                    value={String(
+                <th>
+                  {t("oidcRPMetaDataOptionsClientSecret")}
+                  {data.oidcRPMetaDataOptions[name]
+                    ? data.oidcRPMetaDataOptions[name]
+                        .oidcRPMetaDataOptionsPublic ||
                       data.oidcRPMetaDataOptions[name]
-                        .oidcRPMetaDataOptionsClientID
-                    )}
-                    onChange={(e) => {
-                      dispatch(
-                        updateOidcMetaDataOptions({
-                          name,
-                          option: "oidcRPMetaDataOptionsClientID",
-                          value: e.target.value,
-                        })
-                      );
-                    }}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <th>{t("oidcRPMetaDataOptionsClientSecret")}</th>
+                        .oidcRPMetaDataOptionsClientSecret !== ""
+                      ? ""
+                      : "⚠️"
+                    : "⚠️"}
+                </th>
                 <td>
                   <input
                     className="form"
-                    type="number"
+                    type={attributes.oidcRPMetaDataOptionsClientSecret.type}
                     value={String(
                       data.oidcRPMetaDataOptions[name]
                         .oidcRPMetaDataOptionsClientSecret
@@ -238,7 +266,7 @@ export function OIDCApp({ name }: { name: string }) {
                 <th>{t("oidcRPMetaDataOptionsRedirectUris")}</th>
                 <td>
                   <input
-                    type="text"
+                    type={attributes.oidcRPMetaDataOptionsRedirectUris.type}
                     name="oidcRPMetaDataOptionsRedirectUris"
                     value={String(
                       data.oidcRPMetaDataOptions[name]
@@ -260,7 +288,7 @@ export function OIDCApp({ name }: { name: string }) {
                 <th>{t("oidcRPMetaDataOptionsAuthMethod")}</th>
                 <td>
                   <input
-                    type="text"
+                    type={attributes.oidcRPMetaDataOptionsAuthMethod.type}
                     name="oidcRPMetaDataOptionsAuthMethod"
                     value={String(
                       data.oidcRPMetaDataOptions[name]
@@ -306,7 +334,7 @@ export function OIDCApp({ name }: { name: string }) {
                 <th>{t("oidcRPMetaDataOptionsIcon")}</th>
                 <td>
                   <input
-                    type="text"
+                    type={attributes.oidcRPMetaDataOptionsIcon.type}
                     value={String(
                       data.oidcRPMetaDataOptions[name].oidcRPMetaDataOptionsIcon
                     )}

diff --git a/src/components/applicationsComponents/SAMLApp.tsx b/src/components/applicationsComponents/SAMLApp.tsx
@@ -197,7 +197,16 @@ export function SAMLApp({ name }: { name: string }) {
       <strong className="title">{name}</strong>
       <div className="appDesc">
         <div className="box">
-          <strong className="title2">{t("samlSPMetaDataXML")}</strong>
+          <strong className="title2">
+            {t("samlSPMetaDataXML")}{" "}
+            {name
+              ? data.samlSPMetaDataXML[name]
+                ? data.samlSPMetaDataXML[name].samlSPMetaDataXML === ""
+                  ? "⚠️"
+                  : ""
+                : "⚠️"
+              : "⚠️"}
+          </strong>
           <div>
             <textarea
               placeholder="XML MetaData"

diff --git a/src/components/applicationsComponents/TableVars.tsx b/src/components/applicationsComponents/TableVars.tsx
@@ -49,7 +49,6 @@ export function TableVars(
             <td>
               <button
                 onClick={() => {
-                  console.log("del");
                   dispatch(
                     delFunction({
                       name: appName,

diff --git a/src/components/managerComponents/URLLoader.tsx b/src/components/managerComponents/URLLoader.tsx
@@ -41,7 +41,7 @@ export function URLLoader({
         {t("load")}
       </button>
       {loading && <div>{t("loading")}</div>}
-      {error && <div>{t("badRequest")}</div>}
+      {error && <div>{t("badUrl")}</div>}
     </div>
   );
 }