Merge a7aef61 into ef803ed

client/actions/actions.test.js

@@ -4,14 +4,15 @@ import thunk from "redux-thunk";
 
 import * as types from "../constants/action-types";
 import testOrgConfig from "../test-config.json";
+import logout from "./logout";
 import parseOrganizations from "./parse-organizations";
 import setLanguage from "./set-language";
 import setOrganization from "./set-organization";
 
 jest.mock("../utils/get-config");
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
-
+const cookies = {remove: jest.fn()};
 describe("actions testing", () => {
   it("should create an action to parse organizations", () => {
     const expectedActions = [
@@ -59,8 +60,20 @@ describe("actions testing", () => {
       },
     ];
     const store = mockStore({language: "", organization: {}});
-    store.dispatch(setOrganization(testOrgConfig[2].slug));
+    store.dispatch(setOrganization(testOrgConfig[2].slug, cookies));
     store.dispatch(setOrganization("invalid-slug"));
     expect(store.getActions()).toEqual(expectedActions);
   });
+  it("should create an action to logout", () => {
+    const orgSlug = "default";
+    const expectedActions = [
+      {
+        type: types.SET_AUTHENTICATION_STATUS,
+        payload: false,
+      },
+    ];
+    const store = mockStore({organization: {configuration: {}}});
+    store.dispatch(logout(cookies, orgSlug));
+    expect(store.getActions()).toEqual(expectedActions);
+  });
 });

client/actions/logout.js

@@ -0,0 +1,12 @@
+import {SET_AUTHENTICATION_STATUS} from "../constants/action-types";
+
+const logout = (cookies, orgSlug) => {
+  cookies.remove(`${orgSlug}_auth_token`, {path: "/"});
+  cookies.remove(`${orgSlug}_username`, {path: "/"});
+
+  return {
+    type: SET_AUTHENTICATION_STATUS,
+    payload: false,
+  };
+};
+export default logout;

client/actions/set-organization.js

@@ -1,14 +1,17 @@
 import merge from "deepmerge";
 
 import {
+  SET_AUTHENTICATION_STATUS,
   SET_LANGUAGE,
   SET_ORGANIZATION_CONFIG,
   SET_ORGANIZATION_STATUS,
 } from "../constants/action-types";
+import authenticate from "../utils/authenticate";
 import customMerge from "../utils/custom-merge";
 import getConfig from "../utils/get-config";
+import logout from "./logout";
 
-const setOrganization = slug => {
+const setOrganization = (slug, cookies) => {
   return dispatch => {
     const orgConfig = getConfig(slug);
     if (orgConfig) {
@@ -28,6 +31,19 @@ const setOrganization = slug => {
         type: SET_ORGANIZATION_CONFIG,
         payload: config,
       });
+      const autoLogin = config.auto_login;
+      if (autoLogin) {
+        if (authenticate(cookies, slug)) {
+          dispatch({
+            type: SET_AUTHENTICATION_STATUS,
+            payload: true,
+          });
+        } else {
+          logout(cookies, slug);
+        }
+      } else {
+        logout(cookies, slug);
+      }
     } else {
       dispatch({
         type: SET_ORGANIZATION_STATUS,

client/components/contact-box/contact.js

@@ -0,0 +1,81 @@
+/* eslint-disable camelcase */
+import "./index.css";
+
+import PropTypes from "prop-types";
+import React from "react";
+
+import getAssetPath from "../../utils/get-asset-path";
+import getText from "../../utils/get-text";
+
+export default class Contact extends React.Component {
+  render() {
+    const {contactPage, language, orgSlug} = this.props;
+    const {email, helpdesk, social_links} = contactPage;
+    return (
+      <React.Fragment>
+        <div className="owisp-contact-container">
+          <div className="owisp-contact-inner">
+            <div className="owisp-contact-row">
+              <div className="owisp-contact-label">
+                {getText(email.label, language)}:
+              </div>
+              <a
+                href={`mailto:${getText(email.value, language)}`}
+                className="owisp-contact-text"
+              >
+                {getText(email.value, language)}
+              </a>
+            </div>
+            <div className="owisp-contact-row">
+              <div className="owisp-contact-label">
+                {getText(helpdesk.label, language)}:
+              </div>
+              <a
+                href={`tel:${getText(helpdesk.value, language)}`}
+                className="owisp-contact-text"
+              >
+                {getText(helpdesk.value, language)}
+              </a>
+            </div>
+            <div className="owisp-contact-links">
+              {social_links.map(link => {
+                return (
+                  <a
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    key={link.url}
+                    className={`owisp-contact-${getText(
+                      link.alt,
+                      language,
+                    )}-link owisp-contact-link`}
+                  >
+                    <img
+                      src={getAssetPath(orgSlug, link.icon)}
+                      alt={getText(link.alt, language)}
+                      className={`owisp-contact-${getText(
+                        link.alt,
+                        language,
+                      )}-image owisp-contact-image`}
+                    />
+                  </a>
+                );
+              })}
+            </div>
+            <div className="owisp-contact-inner"></div>
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+Contact.propTypes = {
+  language: PropTypes.string.isRequired,
+  orgSlug: PropTypes.string.isRequired,
+  contactPage: PropTypes.shape({
+    social_links: PropTypes.array,
+    email: PropTypes.object,
+    helpdesk: PropTypes.object,
+  }).isRequired,
+};

client/components/contact-box/index.css

@@ -0,0 +1,47 @@
+.owisp-contact-container {
+  background: rgb(74, 132, 86);
+  padding: 30px;
+  color: #ffffff;
+  border-radius: 2px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.owisp-contact-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.owisp-contact-label {
+  font-weight: 700;
+  margin-right: 4px;
+}
+.owisp-contact-text {
+  color: #ffffff;
+}
+.owisp-contact-text:hover {
+  text-decoration: none;
+}
+.owisp-contact-links {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  width: 100%;
+}
+.owisp-contact-link {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+}
+.owisp-contact-link:hover {
+  text-decoration: none;
+}
+.owisp-contact-image {
+  width: 50px;
+  height: auto;
+  margin: 10px 15px 0 0;
+}

client/components/contact-box/index.js

@@ -0,0 +1,15 @@
+import {connect} from "react-redux";
+
+import Component from "./contact";
+
+const mapStateToProps = state => {
+  return {
+    contactPage: state.organization.configuration.components.contact_page,
+    language: state.language,
+    orgSlug: state.organization.configuration.slug,
+  };
+};
+export default connect(
+  mapStateToProps,
+  null,
+)(Component);

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

@@ -15,7 +15,18 @@ exports[`<Header /> rendering should render with links 1`] = `
       >
         <div
           className="owisp-header-logo-div"
-        />
+        >
+          <a
+            href="/default"
+            onClick={[Function]}
+          >
+            <img
+              alt="openwisp"
+              className="owisp-header-logo-image"
+              src="/assets/default/openwisp.svg"
+            />
+          </a>
+        </div>
       </div>
       <div
         className="owisp-header-right"
@@ -81,7 +92,18 @@ exports[`<Header /> rendering should render without links 1`] = `
       >
         <div
           className="owisp-header-logo-div"
-        />
+        >
+          <a
+            href="/default"
+            onClick={[Function]}
+          >
+            <img
+              alt="openwisp"
+              className="owisp-header-logo-image"
+              src="/assets/default/openwisp.svg"
+            />
+          </a>
+        </div>
       </div>
       <div
         className="owisp-header-right"

client/components/header/header.js

@@ -18,7 +18,7 @@ export default class Header extends React.Component {
             <div className="owisp-header-row-1-inner">
               <div className="owisp-header-left">
                 <div className="owisp-header-logo-div">
-                  {logo.url ? (
+                  {logo && logo.url ? (
                     <Link to={`/${orgSlug}`}>
                       <img
                         src={getAssetPath(orgSlug, logo.url)}

client/components/header/header.test.js

@@ -1,5 +1,6 @@
 import {shallow} from "enzyme";
 import React from "react";
+import {BrowserRouter as Router} from "react-router-dom";
 import renderer from "react-test-renderer";
 
 import getConfig from "../../utils/get-config";
@@ -32,11 +33,23 @@ describe("<Header /> rendering", () => {
       },
     };
     props = createTestProps(links);
-    const component = renderer.create(<Header {...props} />).toJSON();
+    const component = renderer
+      .create(
+        <Router>
+          <Header {...props} />
+        </Router>,
+      )
+      .toJSON();
     expect(component).toMatchSnapshot();
   });
   it("should render with links", () => {
-    const component = renderer.create(<Header {...props} />).toJSON();
+    const component = renderer
+      .create(
+        <Router>
+          <Header {...props} />
+        </Router>,
+      )
+      .toJSON();
     expect(component).toMatchSnapshot();
   });
   it("should render 2 links", () => {
@@ -53,19 +66,19 @@ describe("<Header /> rendering", () => {
       0,
     );
   });
-  it("should not render logo", () => {
-    expect(wrapper.find(".owisp-header-logo-image")).toHaveLength(0);
-  });
   it("should render logo", () => {
+    expect(wrapper.find(".owisp-header-logo-image")).toHaveLength(1);
+  });
+  it("should not render logo", () => {
     const logo = {
       header: {
         ...props.header,
-        logo: {alternate_text: "test_alternate_text", url: "/test-logo.jpg"},
+        logo: null,
       },
     };
     props = createTestProps(logo);
     wrapper = shallow(<Header {...props} />);
-    expect(wrapper.find(".owisp-header-logo-image")).toHaveLength(1);
+    expect(wrapper.find(".owisp-header-logo-image")).toHaveLength(0);
   });
 });
 

client/components/login/index.js

@@ -1,5 +1,6 @@
 import {connect} from "react-redux";
 
+import {SET_AUTHENTICATION_STATUS} from "../../constants/action-types";
 import Component from "./login";
 
 const mapStateToProps = state => {
@@ -12,7 +13,14 @@ const mapStateToProps = state => {
   };
 };
 
+const mapDispatchToProps = dispatch => {
+  return {
+    authenticate: status => {
+      dispatch({type: SET_AUTHENTICATION_STATUS, payload: status});
+    },
+  };
+};
 export default connect(
   mapStateToProps,
-  null,
+  mapDispatchToProps,
 )(Component);