KeyOverwriteCard

public/locales/en/translations.json

@@ -22,7 +22,8 @@
   "General": {
     "Close": "Close",
     "Send": "Send",
-    "Advanced": "Advanced"
+    "Advanced": "Advanced",
+    "Enabled": "Enabled"
   },
   "Session": {
     "Title": "Sessions",
@@ -53,6 +54,15 @@
       }
     }
   },
+  "Forward": {
+    "Title": "Forward from {{from}} to {{to}}",
+    "Options": {
+      "KeyOverwrite": {
+        "Origin": "Origin",
+        "Substitute": "Substitute"
+      }
+    }
+  },
   "ReleaseNotes": {
     "Title": "Release notes",
     "Version": "Version"

public/locales/ro/translations.json

@@ -13,7 +13,8 @@
   "General": {
     "Close": "Închide",
     "Send": "Trimite",
-    "Advanced": "Avansat"
+    "Advanced": "Avansat",
+    "Enabled": "Activat"
   },
   "Session": {
     "Title": "Sesiuni",
@@ -44,6 +45,15 @@
       }
     }
   },
+  "Forward": {
+    "Title": "Redirecționare de la {{from}} către {{to}}",
+    "Options": {
+      "KeyOverwrite": {
+        "Origin": "Înlocuit",
+        "Substitute": "Înlocuitor"
+      }
+    }
+  },
   "ReleaseNotes": {
     "Title": "Note lansare",
     "Version": "Versiune"

src/features/forwards/core/components/ForwardComponent.js

@@ -1,8 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
+import ForwardOptionsAdvancedContainer from "../../options/components/advanced/ForwardOptionsAdvancedContainer";
 
 const ForwardComponent = ({ forward }) => {
-  return <div>{forward.forwardId}</div>;
+  return <ForwardOptionsAdvancedContainer optionsId={forward.optionId} />;
 };
 
 ForwardComponent.propTypes = {

src/features/forwards/core/components/ForwardContainer.js

@@ -6,9 +6,17 @@ import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import { loadSessionForwards } from "../../../session/actionCreators";
 import Spinner from "../../../../components/common/Spinner";
+import styles from "../../../../components/common/styles/divStyles";
+import { useTranslation } from "react-i18next";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(styles);
 
 const ForwardContainer = ({ actions, forward }) => {
   const params = useParams();
+  const classes = useStyles();
+  const { t } = useTranslation();
+
   const { sessionId } = params;
 
   if (!forward) {
@@ -16,7 +24,12 @@ const ForwardContainer = ({ actions, forward }) => {
     return <Spinner />;
   }
 
-  return <ForwardComponent forward={forward} />;
+  return (
+    <div className={classes.root}>
+      <h3>{t("Forward.Title", forward)}</h3>
+      <ForwardComponent forward={forward} />
+    </div>
+  );
 };
 
 ForwardContainer.propTypes = {
@@ -24,8 +37,8 @@ ForwardContainer.propTypes = {
   forward: PropTypes.object
 };
 
-function mapStateToProps(state, route) {
-  const { sessionId, forwardId } = route.match.params;
+function mapStateToProps(state, props) {
+  const { sessionId, forwardId } = props.match.params;
   const session = state.forwards[sessionId];
   const forward = session?.find(z => (z.forwardId = forwardId));
 

src/features/forwards/options/components/advanced/ForwardOptionsAdvancedComponent.js

@@ -1,8 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
+import TrailingSlashComponent from "./TrailingSlashComponent";
+import PathOverwriteComponent from "./PathOverwriteComponent";
+import PathInjectionComponent from "./PathInjectionComponent";
+import KeyOverwriteCard from "./keyOverwrite/KeyOverwriteCard";
 
-const ForwardOptionsAdvancedComponent = () => {
-  return <div>in dev</div>;
+const ForwardOptionsAdvancedComponent = ({ options }) => {
+  return (
+    <>
+      {options.trailingSlash && <TrailingSlashComponent />}
+      {options.pathOverwrite && (
+        <PathOverwriteComponent data={options.pathOverwrite} />
+      )}
+      {options.pathInjection && (
+        <PathInjectionComponent data={options.pathInjection} />
+      )}
+      {options.keyOverwrite && <KeyOverwriteCard data={options.keyOverwrite} />}
+    </>
+  );
+};
+
+ForwardOptionsAdvancedComponent.propTypes = {
+  options: PropTypes.object.isRequired
 };
 
 export default ForwardOptionsAdvancedComponent;

src/features/forwards/options/components/advanced/ForwardOptionsAdvancedContainer.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import PropTypes from "prop-types";
+import { loadForwardOptions } from "../../actionCreators";
+import ForwardOptionsAdvancedComponent from "./ForwardOptionsAdvancedComponent";
+import Spinner from "../../../../../components/common/Spinner";
+
+const ForwardOptionsAdvancedContainer = ({ actions, optionsId, options }) => {
+  if (!options) {
+    actions.loadForwardOptions(optionsId);
+    return <Spinner />;
+  }
+
+  return <ForwardOptionsAdvancedComponent options={options} />;
+};
+
+ForwardOptionsAdvancedContainer.propTypes = {
+  actions: PropTypes.object.isRequired,
+  optionsId: PropTypes.string.isRequired,
+  options: PropTypes.object
+};
+
+function mapStateToProps(state, props) {
+  const options = state.options[props.optionsId];
+
+  return {
+    options
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ loadForwardOptions }, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ForwardOptionsAdvancedContainer);

src/features/forwards/options/components/advanced/ForwardOptionsAdvancedView.js

@@ -1,36 +0,0 @@
-import React, { useEffect } from "react";
-import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
-import PropTypes from "prop-types";
-import { loadForwardOptions } from "../../actionCreators";
-import ForwardOptionsAdvancedComponent from "./ForwardOptionsAdvancedComponent";
-
-const ForwardOptionsAdvancedView = ({ actions, options }) => {
-  useEffect(() => {
-    //  actions.loadForwardOptions(forward.optionId);
-  }, []);
-
-  return <ForwardOptionsAdvancedComponent />;
-};
-
-ForwardOptionsAdvancedView.propTypes = {
-  actions: PropTypes.object.isRequired,
-  options: PropTypes.object.isRequired
-};
-
-function mapStateToProps(state) {
-  return {
-    options: state.options
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators({ loadForwardOptions }, dispatch)
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ForwardOptionsAdvancedView);

src/features/forwards/options/components/advanced/PathInjectionComponent.js

@@ -0,0 +1,12 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const PathInjectionComponent = ({ data }) => {
+  return "";
+};
+
+PathInjectionComponent.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default PathInjectionComponent;

src/features/forwards/options/components/advanced/PathOverwriteComponent.js

@@ -0,0 +1,12 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const PathOverwriteComponent = ({ data }) => {
+  return "";
+};
+
+PathOverwriteComponent.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default PathOverwriteComponent;

src/features/forwards/options/components/advanced/TrailingSlashComponent.js

@@ -0,0 +1,5 @@
+const TrailingSlashComponent = () => {
+  return "";
+};
+
+export default TrailingSlashComponent;

src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteCard.js

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import styles from "../../../../../../components/common/styles/expandableCardStyles";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Collapse,
+  Avatar,
+  IconButton
+} from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+import SurroundSoundRoundedIcon from "@material-ui/icons/SurroundSoundRounded";
+import clsx from "clsx";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import KeyOverwriteSummary from "./KeyOverwriteSummary";
+
+const useStyles = makeStyles(styles);
+
+const KeyOverwriteCard = ({ data }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <Card>
+      <CardHeader
+        avatar={
+          <Avatar aria-label="recipe" className={classes.avatar}>
+            <SurroundSoundRoundedIcon />
+          </Avatar>
+        }
+        action={
+          <IconButton
+            className={clsx(classes.expand, {
+              [classes.expandOpen]: expanded
+            })}
+            onClick={handleExpandClick}
+            aria-expanded={expanded}
+            aria-label="show more"
+          >
+            <ExpandMoreIcon />
+          </IconButton>
+        }
+        title={<strong>{t("Server.ActiveSession")}</strong>}
+        subheader={t("Server.ActiveSessionSubtitle")}
+      />
+      <CardContent>
+        <KeyOverwriteSummary data={data} />
+      </CardContent>
+      <CardActions disableSpacing></CardActions>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          <div>CONTENT...</div>
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+};
+
+KeyOverwriteCard.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default KeyOverwriteCard;

src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteSummary.js

@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { useTranslation } from "react-i18next";
+import styles from "../../../../../../components/common/styles/gridStyles";
+import ActiveIcon from "../../../../../../components/common/ActiveIcon";
+
+const useStyles = makeStyles(styles);
+
+const KeyOverwriteSummary = ({ data }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Grid container>
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("General.Enabled")}: `}
+        <ActiveIcon active={data.on} />
+      </Grid>
+
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Forward.Options.KeyOverwrite.Origin")}: `}
+        <span className={classes.value}>{data.origin}</span>
+      </Grid>
+
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Forward.Options.KeyOverwrite.Substitute")}: `}
+        <span className={classes.value}>{data.substitute}</span>
+      </Grid>
+    </Grid>
+  );
+};
+
+KeyOverwriteSummary.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default KeyOverwriteSummary;