[component] Add privacy policy and terms and conditions

client/assets/default/privacy-en.md

@@ -0,0 +1,15 @@
+# openwisp-wifi-login-pages Privacy Policy
+
+- Your privacy is important to us. It is Openwisp's policy to respect your privacy regarding any information we may collect from you across openwisp-wifi-login-pages.
+
+- We only ask for personal information when we truly need it to provide a service to you. We collect it by fair and lawful means, with your knowledge and consent. We also let you know why we’re collecting it and how it will be used.
+
+- We only retain collected information for as long as necessary to provide you with your requested service. What data we store, we’ll protect within commercially acceptable means to prevent loss and theft, as well as unauthorised access, disclosure, copying, use or modification.
+
+- We don’t share any personally identifying information publicly or with third-parties, except when required to by law.
+
+- Our website may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.
+
+- You are free to refuse our request for your personal information, with the understanding that we may be unable to provide you with some of your desired services.
+
+- Your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.

client/assets/default/terms-en.md

@@ -0,0 +1,17 @@
+# Openwisp-wifi-login-pages Terms and Conditions
+
+- By using or visiting the Openwisp-wifi-login-pages, you signify your agreement
+  to these terms and conditions (the "Terms of Service") and the Privacy policy.
+
+- In order to access the wifi service, you need to be a registered user of the
+  default organization.
+
+- Openwisp-wifi-login-pages is not liable for any unauthorized use of your account,
+  you may be liable for the losses of the services or others due to such unauthorized use.
+
+- Openwisp reserves the right to discontinue or disallow any user, group or any
+  specific IP (internal or external) from using its services without any prior notice.
+
+- Violating the above mentioned Terms and Conditions may result in the termination
+  of the particular user account or the particular IP address from accessing
+  Openwisp-wifi-login-pages and using its services in the future.

client/components/login/login.js

@@ -5,12 +5,13 @@ import axios from "axios";
 import PropTypes from "prop-types";
 import qs from "qs";
 import React from "react";
-import {Link} from "react-router-dom";
+import {Link, Route} from "react-router-dom";
 
 import {loginApiUrl} from "../../constants";
 import getAssetPath from "../../utils/get-asset-path";
 import getText from "../../utils/get-text";
 import renderAdditionalInfo from "../../utils/render-additional-info";
+import Modal from "../modal";
 
 export default class Login extends React.Component {
   constructor(props) {
@@ -74,6 +75,7 @@ export default class Login extends React.Component {
       orgSlug,
       termsAndConditions,
       privacyPolicy,
+      match,
     } = this.props;
     const {
       links,
@@ -302,6 +304,12 @@ export default class Login extends React.Component {
             ) : null}
           </form>
         </div>
+        <Route
+          path={`${match.path}/:name`}
+          render={props => {
+            return <Modal {...props} prevPath={match.url} />;
+          }}
+        />
       </React.Fragment>
     );
   }
@@ -324,6 +332,10 @@ Login.propTypes = {
     links: PropTypes.object,
   }).isRequired,
   language: PropTypes.string.isRequired,
+  match: PropTypes.shape({
+    path: PropTypes.string,
+    url: PropTypes.string,
+  }).isRequired,
   orgSlug: PropTypes.string.isRequired,
   privacyPolicy: PropTypes.shape({
     title: PropTypes.object,

client/components/login/login.test.js

@@ -19,6 +19,9 @@ const createTestProps = props => {
     privacyPolicy: defaultConfig.privacy_policy,
     termsAndConditions: defaultConfig.terms_and_conditions,
     authenticate: jest.fn(),
+    match: {
+      path: "default/login",
+    },
     ...props,
   };
 };

client/components/modal/__snapshots__/modal.test.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Modal /> rendering should render privacy-policy correctly 1`] = `
+<React.Fragment>
+  <div
+    className="owisp-modal-container"
+  >
+    <div
+      className="owisp-modal-row-close"
+    >
+      <Link
+        className="owisp-modal-close-btn"
+        to="/default/login"
+      >
+        X
+      </Link>
+    </div>
+    <div
+      className="owisp-modal-content"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<h1 id=\\"openwisp-wifi-login-pages-privacy-policy\\">openwisp-wifi-login-pages Privacy Policy</h1>
+<ul>
+<li><p>Your privacy is important to us. It is Openwisp's policy to respect your privacy regarding any information we may collect from you across openwisp-wifi-login-pages.</p>
+</li>
+<li><p>We only ask for personal information when we truly need it to provide a service to you. We collect it by fair and lawful means, with your knowledge and consent. We also let you know why we’re collecting it and how it will be used.</p>
+</li>
+<li><p>We only retain collected information for as long as necessary to provide you with your requested service. What data we store, we’ll protect within commercially acceptable means to prevent loss and theft, as well as unauthorised access, disclosure, copying, use or modification.</p>
+</li>
+<li><p>We don’t share any personally identifying information publicly or with third-parties, except when required to by law.</p>
+</li>
+<li><p>Our website may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.</p>
+</li>
+<li><p>You are free to refuse our request for your personal information, with the understanding that we may be unable to provide you with some of your desired services.</p>
+</li>
+<li><p>Your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.</p>
+</li>
+</ul>
+",
+        }
+      }
+    />
+  </div>
+</React.Fragment>
+`;
+
+exports[`<Modal /> rendering should render terms-and-conditions correctly 1`] = `
+<React.Fragment>
+  <div
+    className="owisp-modal-container"
+  >
+    <div
+      className="owisp-modal-row-close"
+    >
+      <Link
+        className="owisp-modal-close-btn"
+        to="/default/login"
+      >
+        X
+      </Link>
+    </div>
+    <div
+      className="owisp-modal-content"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<h1 id=\\"openwisp-wifi-login-pages-terms-and-conditions\\">Openwisp-wifi-login-pages Terms and Conditions</h1>
+<ul>
+<li><p>By using or visiting the Openwisp-wifi-login-pages, you signify your agreement
+to these terms and conditions (the \\"Terms of Service\\") and the Privacy policy.</p>
+</li>
+<li><p>In order to access the wifi service, you need to be a registered user of the
+default organization.</p>
+</li>
+<li><p>Openwisp-wifi-login-pages is not liable for any unauthorized use of your account,
+you may be liable for the losses of the services or others due to such unauthorized use.</p>
+</li>
+<li><p>Openwisp reserves the right to discontinue or disallow any user, group or any
+specific IP (internal or external) from using its services without any prior notice.</p>
+</li>
+<li><p>Violating the above mentioned Terms and Conditions may result in the termination
+of the particular user account or the particular IP address from accessing
+Openwisp-wifi-login-pages and using its services in the future.</p>
+</li>
+</ul>
+",
+        }
+      }
+    />
+  </div>
+</React.Fragment>
+`;

client/components/modal/index.css

@@ -0,0 +1,33 @@
+.owisp-modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+}
+.owisp-modal-row-close {
+  width: 100%;
+  padding: 2% 2% 1% 0;
+  box-sizing: border-box;
+}
+.owisp-modal-close-btn {
+  float: right;
+  text-decoration: none;
+  color: #f3f3f3;
+  font-size: 1.5rem;
+  padding: 5px 10px;
+}
+.owisp-modal-content {
+  width: 90%;
+  background: #ffffff;
+  align-self: center;
+  overflow: auto;
+  height: 85%;
+  padding: 20px;
+  box-sizing: border-box;
+  border-radius: 3px;
+}

client/components/modal/index.js

@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+
+import Component from "./modal";
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    privacyPolicy: state.organization.configuration.privacy_policy,
+    termsAndConditions: state.organization.configuration.terms_and_conditions,
+    language: state.language,
+    prevPath: ownProps.prevPath,
+  };
+};
+export default connect(
+  mapStateToProps,
+  null,
+)(Component);

client/components/modal/modal.js

@@ -0,0 +1,79 @@
+import "./index.css";
+
+import PropTypes from "prop-types";
+import React from "react";
+import {Link} from "react-router-dom";
+
+import getText from "../../utils/get-text";
+
+export default class Modal extends React.Component {
+  componentDidMount() {
+    document.addEventListener("keyup", this.handleKeyDown, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keyup", this.handleKeyDown, false);
+  }
+
+  renderContent = () => {
+    const {privacyPolicy, termsAndConditions, language, match} = this.props;
+    const {name} = match.params;
+    let content;
+    if (name === "terms-and-conditions" && termsAndConditions.content)
+      content = getText(termsAndConditions.content, language);
+    else if (name === "privacy-policy" && privacyPolicy.content)
+      content = getText(privacyPolicy.content, language);
+    return {__html: content};
+  };
+
+  handleKeyDown = event => {
+    const {prevPath, history} = this.props;
+    switch (event.keyCode) {
+      case 27:
+        history.push(prevPath);
+        break;
+      default:
+        break;
+    }
+  };
+
+  render() {
+    const {prevPath} = this.props;
+    return (
+      <React.Fragment>
+        <div className="owisp-modal-container">
+          <div className="owisp-modal-row-close">
+            <Link to={prevPath} className="owisp-modal-close-btn">
+              X
+            </Link>
+          </div>
+          <div
+            className="owisp-modal-content"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={this.renderContent()}
+          ></div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+Modal.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      name: PropTypes.string,
+    }),
+  }).isRequired,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }).isRequired,
+  prevPath: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired,
+  privacyPolicy: PropTypes.shape({
+    title: PropTypes.object,
+    content: PropTypes.object,
+  }).isRequired,
+  termsAndConditions: PropTypes.shape({
+    title: PropTypes.object,
+    content: PropTypes.object,
+  }).isRequired,
+};

client/components/modal/modal.test.js

@@ -0,0 +1,44 @@
+/* eslint-disable camelcase */
+import React from "react";
+import ShallowRenderer from "react-test-renderer/shallow";
+
+import getConfig from "../../utils/get-config";
+import Modal from "./modal";
+
+const defaultConfig = getConfig("default");
+const createTestProps = props => {
+  return {
+    language: "en",
+    privacyPolicy: defaultConfig.privacy_policy,
+    termsAndConditions: defaultConfig.terms_and_conditions,
+    match: {
+      params: {
+        name: "terms-and-conditions",
+      },
+    },
+    prevPath: "/default/login",
+    ...props,
+  };
+};
+
+describe("<Modal /> rendering", () => {
+  let props;
+  it("should render terms-and-conditions correctly", () => {
+    props = createTestProps();
+    const renderer = new ShallowRenderer();
+    const component = renderer.render(<Modal {...props} />);
+    expect(component).toMatchSnapshot();
+  });
+  it("should render privacy-policy correctly", () => {
+    props = createTestProps({
+      match: {
+        params: {
+          name: "privacy-policy",
+        },
+      },
+    });
+    const renderer = new ShallowRenderer();
+    const component = renderer.render(<Modal {...props} />);
+    expect(component).toMatchSnapshot();
+  });
+});

client/components/organization-wrapper/organization-wrapper.js

@@ -52,10 +52,10 @@ export default class OrganizationWrapper extends React.Component {
               />
               <Route
                 path={`${match.path}/registration`}
-                render={() => {
+                render={props => {
                   if (isAuthenticated)
                     return <Redirect to={`/${orgSlug}/status`} />;
-                  return <Registration />;
+                  return <Registration {...props} />;
                 }}
               />
               <Route
@@ -77,10 +77,10 @@ export default class OrganizationWrapper extends React.Component {
               />
               <Route
                 path={`${match.path}/login`}
-                render={() => {
+                render={props => {
                   if (isAuthenticated)
                     return <Redirect to={`/${orgSlug}/status`} />;
-                  return <Login />;
+                  return <Login {...props} />;
                 }}
               />
               <Route