[component] implement auth and auto login and write status page comp…

client/actions/actions.test.js

@@ -4,14 +4,18 @@ 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 = {
+  get: jest.fn().mockImplementationOnce(() => true),
+  remove: jest.fn(),
+};
 describe("actions testing", () => {
   it("should create an action to parse organizations", () => {
     const expectedActions = [
@@ -40,6 +44,8 @@ describe("actions testing", () => {
 
   it("should create actions to set current organization", () => {
     const orgConfig = merge(testOrgConfig[0], testOrgConfig[2]);
+    const orgConfig2 = merge(testOrgConfig[0], testOrgConfig[1]);
+
     const expectedActions = [
       {
         type: types.SET_LANGUAGE,
@@ -53,14 +59,43 @@ describe("actions testing", () => {
         type: types.SET_ORGANIZATION_CONFIG,
         payload: orgConfig,
       },
+      {
+        type: types.SET_AUTHENTICATION_STATUS,
+        payload: true,
+      },
+      {
+        type: types.SET_LANGUAGE,
+        payload: testOrgConfig[1].default_language,
+      },
+      {
+        type: types.SET_ORGANIZATION_STATUS,
+        payload: true,
+      },
+      {
+        type: types.SET_ORGANIZATION_CONFIG,
+        payload: orgConfig2,
+      },
       {
         type: types.SET_ORGANIZATION_STATUS,
         payload: false,
       },
     ];
     const store = mockStore({language: "", organization: {}});
-    store.dispatch(setOrganization(testOrgConfig[2].slug));
+    store.dispatch(setOrganization(testOrgConfig[2].slug, cookies));
+    store.dispatch(setOrganization(testOrgConfig[1].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/__snapshots__/contact.test.js.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Status /> rendering should render correctly 1`] = `
+<React.Fragment>
+  <div
+    className="owisp-contact-container"
+  >
+    <div
+      className="owisp-contact-inner"
+    >
+      <div
+        className="owisp-contact-row"
+      >
+        <div
+          className="owisp-contact-label"
+        >
+          E-mail
+          :
+        </div>
+        <a
+          className="owisp-contact-text"
+          href="mailto:support@openwisp.co"
+        >
+          support@openwisp.co
+        </a>
+      </div>
+      <div
+        className="owisp-contact-row"
+      >
+        <div
+          className="owisp-contact-label"
+        >
+          Helpdesk
+          :
+        </div>
+        <a
+          className="owisp-contact-text"
+          href="tel:+789 948 564"
+        >
+          +789 948 564
+        </a>
+      </div>
+      <div
+        className="owisp-contact-links"
+      >
+        <a
+          className="owisp-contact-twitter-link owisp-contact-link"
+          href="https://twitter.com/openwisp"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img
+            alt="twitter"
+            className="owisp-contact-twitter-image owisp-contact-image"
+            src="/assets/default/twitter.svg"
+          />
+        </a>
+        <a
+          className="owisp-contact-facebook-link owisp-contact-link"
+          href="https://facebook.com/openwisp"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img
+            alt="facebook"
+            className="owisp-contact-facebook-image owisp-contact-image"
+            src="/assets/default/facebook.svg"
+          />
+        </a>
+        <a
+          className="owisp-contact-linkedIn-link owisp-contact-link"
+          href="https://www.linkedin.com/groups/4777261"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img
+            alt="linkedIn"
+            className="owisp-contact-linkedIn-image owisp-contact-image"
+            src="/assets/default/linkedin.svg"
+          />
+        </a>
+      </div>
+      <div
+        className="owisp-contact-inner"
+      />
+    </div>
+  </div>
+</React.Fragment>
+`;

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/contact.test.js

@@ -0,0 +1,25 @@
+import React from "react";
+import ShallowRenderer from "react-test-renderer/shallow";
+
+import getConfig from "../../utils/get-config";
+import Contact from "./contact";
+
+const defaultConfig = getConfig("default");
+const createTestProps = props => {
+  return {
+    language: "en",
+    orgSlug: "default",
+    contactPage: defaultConfig.components.contact_page,
+    ...props,
+  };
+};
+
+describe("<Status /> rendering", () => {
+  let props;
+  it("should render correctly", () => {
+    props = createTestProps();
+    const renderer = new ShallowRenderer();
+    const component = renderer.render(<Contact {...props} />);
+    expect(component).toMatchSnapshot();
+  });
+});