Show version of frontend and backend in the About modal

frontend/src/components/AboutModal/index.js

@@ -12,12 +12,14 @@ import {
   DialogTitle
 } from "@material-ui/core";
 
-import { getBackendURL } from "../../services/config";
-
 import { i18n } from "../../translate/i18n";
 import useAuth from "../../hooks/useAuth.js";
 import { useTheme } from "@material-ui/core/styles";
 
+import { loadJSON } from "../../helpers/loadJSON";
+import api from "../../services/api";
+
+const frontendGitInfo = loadJSON('/gitinfo.json');
 const logo = "/vector/logo.svg";
 const logoDark = "/vector/logo-dark.svg";
 
@@ -35,7 +37,12 @@ const useStyles = makeStyles(theme => ({
   logoImg: {
     width: "100%",
     margin: "0 auto",
-    content: "url(" + ((theme.appLogoLight || theme.appLogoDark) ? getBackendURL()+"/public/"+  (theme.mode === "light" ? theme.appLogoLight || theme.appLogoDark : theme.appLogoDark || theme.appLogoLight  )   : (theme.mode === "light" ? logo : logoDark)) + ")"
+    content: "url(" + (theme.mode === "light" ? theme.calculatedLogoLight() : theme.calculatedLogoDark()) + ")"
+  },
+  ticketzLogoImg: {
+    width: "100%",
+    margin: "0 auto",
+    content: "url(" + (theme.mode === "light" ? logo : logoDark) + ")"
   },
   textCenter: {
     textAlign: "center",
@@ -47,6 +54,7 @@ const AboutModal = ({ open, onClose }) => {
 	const classes = useStyles();
   const { getCurrentUserInfo } = useAuth();
   const [currentUser, setCurrentUser] = useState({});
+  const [backendGitInfo, setBackendGitInfo] = useState(null);
   const theme = useTheme();
 
 
@@ -60,6 +68,12 @@ const AboutModal = ({ open, onClose }) => {
         setCurrentUser(user);
       }
     );
+
+    api.get("/").then(
+      (response) => {
+        setBackendGitInfo(response.data);
+      }
+    )
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -68,7 +82,7 @@ const AboutModal = ({ open, onClose }) => {
 			<Dialog
 				open={open}
 				onClose={handleClose}
-				maxWidth="xs"
+				maxWidth="sm"
 				fullWidth
 				scroll="paper"
 			>
@@ -78,6 +92,34 @@ const AboutModal = ({ open, onClose }) => {
 				<DialogContent dividers>
 				{ currentUser?.super ? 
           <>
+            <div>
+              <img className={classes.ticketzLogoImg} />
+            </div>
+            <Typography variant="body1" gutterBottom><b>Frontend: 
+              { frontendGitInfo.tagName && `Version: ${frontendGitInfo.tagName} Build info: ${frontendGitInfo.buildTimestamp}` }
+              { !frontendGitInfo.tagName &&
+                <>
+                  {frontendGitInfo.commitHash && `Commit: {frontendGitInfo.commitHash} `}
+                  {frontendGitInfo.branchName && `Branch: {frontendGitInfo.branchName} `}
+                  {frontendGitInfo.commitTimestamp && `Time: {frontendGitInfo.commitTimestamp} `}
+                </>
+              }
+            </b>
+            {backendGitInfo &&
+            <>
+            <br /><b>Backend: 
+              { backendGitInfo.tagName && `Version: ${backendGitInfo.tagName} Build info: ${backendGitInfo.buildTimestamp}` }
+              { !backendGitInfo.tagName &&
+                <>
+                  {backendGitInfo.commitHash && `Commit: {backendGitInfo.commitHash} `}
+                  {backendGitInfo.branchName && `Branch: {backendGitInfo.branchName} `}
+                  {backendGitInfo.commitTimestamp && `Time: {backendGitInfo.commitTimestamp} `}
+                </>
+              }
+            </b>
+            </>
+            }
+            </Typography>
             <Typography variant="body1">{i18n.t("about.aboutdetail")}</Typography>
             <Typography><Link target="_blank" href="https://todobom.com">{i18n.t("about.aboutauthorsite")}</Link></Typography>
             <Typography><Link target="_blank" href="https://github.com/canove/whaticket-community">{i18n.t("about.aboutwhaticketsite")}</Link></Typography>