diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index 25441ed..2f0eddb 100644 --- a/public/locales/en/translations.json +++ b/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" diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index d0fac8c..c22cb0a 100644 --- a/public/locales/ro/translations.json +++ b/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" diff --git a/src/features/forwards/core/components/ForwardComponent.js b/src/features/forwards/core/components/ForwardComponent.js index 57453e6..4d2f382 100644 --- a/src/features/forwards/core/components/ForwardComponent.js +++ b/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
{forward.forwardId}
; + return ; }; ForwardComponent.propTypes = { diff --git a/src/features/forwards/core/components/ForwardContainer.js b/src/features/forwards/core/components/ForwardContainer.js index dc2b2b3..4c7fc00 100644 --- a/src/features/forwards/core/components/ForwardContainer.js +++ b/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 ; } - return ; + return ( +
+

{t("Forward.Title", forward)}

+ +
+ ); }; 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)); diff --git a/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedComponent.js b/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedComponent.js index 5461d2c..78e7f1a 100644 --- a/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedComponent.js +++ b/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
in dev
; +const ForwardOptionsAdvancedComponent = ({ options }) => { + return ( + <> + {options.trailingSlash && } + {options.pathOverwrite && ( + + )} + {options.pathInjection && ( + + )} + {options.keyOverwrite && } + + ); +}; + +ForwardOptionsAdvancedComponent.propTypes = { + options: PropTypes.object.isRequired }; export default ForwardOptionsAdvancedComponent; diff --git a/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedContainer.js b/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedContainer.js new file mode 100644 index 0000000..b31a599 --- /dev/null +++ b/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 ; + } + + return ; +}; + +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); diff --git a/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedView.js b/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedView.js deleted file mode 100644 index ab0c8e8..0000000 --- a/src/features/forwards/options/components/advanced/ForwardOptionsAdvancedView.js +++ /dev/null @@ -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 ; -}; - -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); diff --git a/src/features/forwards/options/components/advanced/PathInjectionComponent.js b/src/features/forwards/options/components/advanced/PathInjectionComponent.js new file mode 100644 index 0000000..352748f --- /dev/null +++ b/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; diff --git a/src/features/forwards/options/components/advanced/PathOverwriteComponent.js b/src/features/forwards/options/components/advanced/PathOverwriteComponent.js new file mode 100644 index 0000000..1b1f737 --- /dev/null +++ b/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; diff --git a/src/features/forwards/options/components/advanced/TrailingSlashComponent.js b/src/features/forwards/options/components/advanced/TrailingSlashComponent.js new file mode 100644 index 0000000..68474f0 --- /dev/null +++ b/src/features/forwards/options/components/advanced/TrailingSlashComponent.js @@ -0,0 +1,5 @@ +const TrailingSlashComponent = () => { + return ""; +}; + +export default TrailingSlashComponent; diff --git a/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteCard.js b/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteCard.js new file mode 100644 index 0000000..93287ce --- /dev/null +++ b/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 ( + + + + + } + action={ + + + + } + title={{t("Server.ActiveSession")}} + subheader={t("Server.ActiveSessionSubtitle")} + /> + + + + + + +
CONTENT...
+
+
+
+ ); +}; + +KeyOverwriteCard.propTypes = { + data: PropTypes.object.isRequired +}; + +export default KeyOverwriteCard; diff --git a/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteSummary.js b/src/features/forwards/options/components/advanced/keyOverwrite/KeyOverwriteSummary.js new file mode 100644 index 0000000..5c7996f --- /dev/null +++ b/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 ( + + + {`${t("General.Enabled")}: `} + + + + + {`${t("Forward.Options.KeyOverwrite.Origin")}: `} + {data.origin} + + + + {`${t("Forward.Options.KeyOverwrite.Substitute")}: `} + {data.substitute} + + + ); +}; + +KeyOverwriteSummary.propTypes = { + data: PropTypes.object.isRequired +}; + +export default KeyOverwriteSummary;