From 423f79f04bbf56babd659b563bb5fb24f7accc51 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Tue, 19 May 2020 12:57:11 +0300
Subject: [PATCH] DDNSProvider and active session forwards number

---
 public/locales/en/translations.json           |  3 ++-
 public/locales/ro/translations.json           |  3 ++-
 .../server/components/ActiveSessionSummary.js | 11 +++++++---
 .../server/components/ServerComponent.js      | 11 ++++++++--
 .../server/components/ServerContainer.js      |  6 +++++
 .../server/components/ServerSummary.js        | 22 ++++++++++++++-----
 6 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index 869baed..02220f0 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -58,6 +58,7 @@
     "ApiHostName": "API host",
     "Domain": "Domain",
     "ActiveSession": "Active session",
-    "ActiveSessionSubtitle": "Expand to see forwards"
+    "ActiveSessionSubtitle": "Expand to see forwards",
+    "DDNSProvider": "Dynamic DNS Provider"
   }
 }
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index e428969..37e323f 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -49,6 +49,7 @@
     "ApiHostName": "Gazdă API",
     "Domain": "Domeniu",
     "ActiveSession": "Sesiune activă",
-    "ActiveSessionSubtitle": "Extindeţi pentru a vedea redirectările"
+    "ActiveSessionSubtitle": "Extindeţi pentru a vedea redirectările",
+    "DDNSProvider": "Furnizor DNS dinamic"
   }
 }
diff --git a/src/features/server/components/ActiveSessionSummary.js b/src/features/server/components/ActiveSessionSummary.js
index 0beb1ad..4a38fb4 100644
--- a/src/features/server/components/ActiveSessionSummary.js
+++ b/src/features/server/components/ActiveSessionSummary.js
@@ -13,12 +13,12 @@ const ActiveSessionSummary = ({ session }) => {
 
   return (
     <Grid container>
-      <Grid item xs={12} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Session.RunningTime")}: `}
         <span className={classes.value}>{session.runningTime}</span>
       </Grid>
 
-      <Grid item xs={12} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Session.StartDate")}: `}
         <span className={classes.value}>
           {t("DATE_FORMAT", {
@@ -27,10 +27,15 @@ const ActiveSessionSummary = ({ session }) => {
         </span>
       </Grid>
 
-      <Grid item xs={12} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Session.Host")}: `}
         <span className={classes.value}>{session.hostName}</span>
       </Grid>
+
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Session.Forwards.Title")}: `}
+        <span className={classes.value}>{session.forwardsNumber}</span>
+      </Grid>
     </Grid>
   );
 };
diff --git a/src/features/server/components/ServerComponent.js b/src/features/server/components/ServerComponent.js
index b06087f..4f6aa0a 100644
--- a/src/features/server/components/ServerComponent.js
+++ b/src/features/server/components/ServerComponent.js
@@ -23,7 +23,12 @@ import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
 
-const ServerComponent = ({ data, serverHost, openAbout }) => {
+const ServerComponent = ({
+  data,
+  serverHost,
+  openAbout,
+  handleOpenInNewTab
+}) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -55,6 +60,7 @@ const ServerComponent = ({ data, serverHost, openAbout }) => {
             data={data}
             serverHost={serverHost}
             openAbout={openAbout}
+            handleOpenInNewTab={handleOpenInNewTab}
           />
         )}
       </CardContent>
@@ -114,7 +120,8 @@ const ServerComponent = ({ data, serverHost, openAbout }) => {
 ServerComponent.propTypes = {
   data: PropTypes.object.isRequired,
   serverHost: PropTypes.string,
-  openAbout: PropTypes.func.isRequired
+  openAbout: PropTypes.func.isRequired,
+  handleOpenInNewTab: PropTypes.func.isRequired
 };
 
 export default ServerComponent;
diff --git a/src/features/server/components/ServerContainer.js b/src/features/server/components/ServerContainer.js
index ec13b00..1fe6601 100644
--- a/src/features/server/components/ServerContainer.js
+++ b/src/features/server/components/ServerContainer.js
@@ -17,11 +17,17 @@ const ServerContainer = ({ actions, data, serverHost, history }) => {
     event.preventDefault();
   };
 
+  const handleOpenInNewTab = (url) => (event) => {
+    window.open(url, "_blank");
+    event.preventDefault();
+  };
+
   return (
     <ServerComponent
       data={data}
       serverHost={serverHost}
       openAbout={openAbout}
+      handleOpenInNewTab={handleOpenInNewTab}
     />
   );
 };
diff --git a/src/features/server/components/ServerSummary.js b/src/features/server/components/ServerSummary.js
index 581c0d1..624ac5b 100644
--- a/src/features/server/components/ServerSummary.js
+++ b/src/features/server/components/ServerSummary.js
@@ -7,28 +7,37 @@ import styles from "../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
 
-const ServerSummary = ({ data, serverHost, openAbout }) => {
+const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
   return (
     <Grid container>
-      <Grid item xs={6} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Server.Domain")}: `}
         <span className={classes.value}>{data.domain.name}</span>
       </Grid>
 
-      <Grid item xs={6} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Server.ServerHostName")}: `}
         <span className={classes.value}>{serverHost || ""}</span>
       </Grid>
 
-      <Grid item xs={6} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Server.ApiHostName")}: `}
         <span className={classes.value}>{data.hosts.api}</span>
       </Grid>
 
-      <Grid item xs={6} sm={4} md={4}></Grid>
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Server.DDNSProvider")}: `}
+        <Link
+          href="#"
+          onClick={handleOpenInNewTab(data.domain.provider.url)}
+          variant="subtitle1"
+        >
+          {data.domain.provider.name}
+        </Link>
+      </Grid>
 
       <Grid item xs={12} sm={12} md={12}>
         <Typography variant="body2" gutterBottom color="textSecondary">
@@ -47,7 +56,8 @@ const ServerSummary = ({ data, serverHost, openAbout }) => {
 ServerSummary.propTypes = {
   data: PropTypes.object.isRequired,
   serverHost: PropTypes.string,
-  openAbout: PropTypes.func.isRequired
+  openAbout: PropTypes.func.isRequired,
+  handleOpenInNewTab: PropTypes.func.isRequired
 };
 
 export default ServerSummary;