From 1058dbd1dd406e1abbee824d984257b5024a966c Mon Sep 17 00:00:00 2001
From: Vivek Chand <V.rajput40@gmail.com>
Date: Tue, 30 Jul 2019 06:26:31 +0530
Subject: [PATCH] [component] Add login component and write tests #18

Closes #18
---
 .eslintrc.json                                |  65 ++--
 client/assets/default/index.css               |   1 +
 .../footer/__snapshots__/footer.test.js.snap  |  12 +-
 client/components/footer/footer.test.js       |  31 +-
 .../header/__snapshots__/header.test.js.snap  |   8 +-
 client/components/header/header.js            |  13 +-
 client/components/header/header.test.js       |  23 +-
 .../login/__snapshots__/login.test.js.snap    | 275 ++++++++++++++
 client/components/login/index.css             | 213 +++++++++++
 client/components/login/index.js              |  18 +
 client/components/login/login.js              | 340 ++++++++++++++++++
 client/components/login/login.test.js         | 126 +++++++
 .../components/organization-wrapper/index.js  |  14 +-
 .../organization-wrapper.js                   |  16 +-
 .../password-confirm/password-confirm.test.js |  45 +--
 .../password-reset/password-reset.test.js     |  37 +-
 .../__snapshots__/registration.test.js.snap   |  39 +-
 client/components/registration/index.css      |  38 +-
 client/components/registration/index.js       |   2 +
 .../components/registration/registration.js   | 153 +++++---
 .../registration/registration.test.js         | 234 ++++--------
 client/constants/index.js                     |   1 +
 client/index.js                               |   9 +-
 client/utils/render-additional-info.js        |  97 +++++
 client/utils/utils.test.js                    |  72 ++++
 org-configurations/default-configuration.yml  |  75 ++--
 package-lock.json                             |  67 +++-
 package.json                                  |   6 +
 28 files changed, 1609 insertions(+), 421 deletions(-)
 create mode 100644 client/assets/default/index.css
 create mode 100644 client/components/login/__snapshots__/login.test.js.snap
 create mode 100644 client/components/login/index.css
 create mode 100644 client/components/login/index.js
 create mode 100644 client/components/login/login.js
 create mode 100644 client/components/login/login.test.js
 create mode 100644 client/utils/render-additional-info.js
 create mode 100644 client/utils/utils.test.js

diff --git a/.eslintrc.json b/.eslintrc.json
index 3e9ce49a..cfe7863e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,34 +1,35 @@
 {
-	"extends": [
-		"airbnb",
-		"prettier",
-		"prettier/react",
-		"jest-enzyme",
-		"plugin:jest/recommended"
-	],
-	"parser": "babel-eslint",
-	"plugins": ["prettier", "jest"],
-	"parserOptions": {
-		"ecmaVersion": 2016,
-		"sourceType": "module",
-		"ecmaFeatures": {
-			"jsx": true
-		}
-	},
-	"env": {
-		"es6": true,
-		"browser": true,
-		"node": true
-	},
-	"rules": {
-		"array-bracket-spacing": [2, "never"],
-		"semi": [2, "always"],
-		"react/prefer-stateless-function": [0],
-		"react/jsx-filename-extension": [
-			1,
-			{
-				"extensions": [".js", ".jsx"]
-			}
-		]
-	}
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/react",
+    "jest-enzyme",
+    "plugin:jest/recommended"
+  ],
+  "parser": "babel-eslint",
+  "plugins": ["prettier", "jest"],
+  "parserOptions": {
+    "ecmaVersion": 2016,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "array-bracket-spacing": [2, "never"],
+    "semi": [2, "always"],
+    "jsx-a11y/label-has-for": 0,
+    "react/prefer-stateless-function": [0],
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".js", ".jsx"]
+      }
+    ]
+  }
 }
diff --git a/client/assets/default/index.css b/client/assets/default/index.css
new file mode 100644
index 00000000..16c2c322
--- /dev/null
+++ b/client/assets/default/index.css
@@ -0,0 +1 @@
+/*  */
diff --git a/client/components/footer/__snapshots__/footer.test.js.snap b/client/components/footer/__snapshots__/footer.test.js.snap
index 6dc42d5b..4e57b9db 100644
--- a/client/components/footer/__snapshots__/footer.test.js.snap
+++ b/client/components/footer/__snapshots__/footer.test.js.snap
@@ -13,20 +13,20 @@ exports[`<Footer /> rendering should render correctly 1`] = `
       <a
         className="owisp-footer-link
                   owisp-footer-link-1"
-        href="www.testurl.com"
+        href="https://link-1.com"
         rel="noreferrer noopener"
         target="_blank"
       >
-        link one
+        link-1
       </a>
       <a
         className="owisp-footer-link
                   owisp-footer-link-2"
-        href="www.testurl2.com"
+        href="https://link-2.com"
         rel="noreferrer noopener"
         target="_blank"
       >
-        link two
+        link-2
       </a>
     </div>
   </div>
@@ -35,9 +35,7 @@ exports[`<Footer /> rendering should render correctly 1`] = `
   >
     <div
       className="owisp-footer-row-2-inner"
-    >
-      this is secondary text
-    </div>
+    />
   </div>
 </div>
 `;
diff --git a/client/components/footer/footer.test.js b/client/components/footer/footer.test.js
index 06f67ed0..41a56483 100644
--- a/client/components/footer/footer.test.js
+++ b/client/components/footer/footer.test.js
@@ -3,26 +3,14 @@ import {shallow} from "enzyme";
 import React from "react";
 import renderer from "react-test-renderer";
 
+import getConfig from "../../utils/get-config";
 import Footer from "./footer";
 
+const defaultConfig = getConfig("default");
 const createTestProps = props => {
   return {
     language: "en",
-    footer: {
-      links: [
-        {
-          text: {en: "link one"},
-          url: "www.testurl.com",
-        },
-        {
-          text: {en: "link two"},
-          url: "www.testurl2.com",
-        },
-      ],
-      secondary_text: {
-        en: "this is secondary text",
-      },
-    },
+    footer: defaultConfig.components.footer,
     ...props,
   };
 };
@@ -48,9 +36,14 @@ describe("<Footer /> rendering", () => {
     expect(wrapper.find(".owisp-footer-link")).toHaveLength(0);
   });
   it("should render secondary text", () => {
-    const {secondary_text} = props.footer;
-    expect(wrapper.find(".owisp-footer-row-2-inner").text()).toBe(
-      secondary_text.en,
-    );
+    wrapper.setProps({
+      footer: {...props.footer, secondary_text: {en: "secondary text"}},
+    });
+    expect(
+      wrapper
+        .update()
+        .find(".owisp-footer-row-2-inner")
+        .text(),
+    ).toBe("secondary text");
   });
 });
diff --git a/client/components/header/__snapshots__/header.test.js.snap b/client/components/header/__snapshots__/header.test.js.snap
index cf5972f1..f2dbb38a 100644
--- a/client/components/header/__snapshots__/header.test.js.snap
+++ b/client/components/header/__snapshots__/header.test.js.snap
@@ -46,20 +46,20 @@ exports[`<Header /> rendering should render with links 1`] = `
       <a
         className="owisp-header-link
                     owisp-header-link-1"
-        href="https://testlink1.com"
+        href="https://link-1.com"
         rel="noreferrer noopener"
         target="_blank"
       >
-        test link 1
+        link-1
       </a>
       <a
         className="owisp-header-link
                     owisp-header-link-2"
-        href="https://testlink2.com"
+        href="https://link-2.com"
         rel="noreferrer noopener"
         target="_blank"
       >
-        test link 2
+        link-2
       </a>
     </div>
   </div>
diff --git a/client/components/header/header.js b/client/components/header/header.js
index 2a7350a8..9e4dcb97 100644
--- a/client/components/header/header.js
+++ b/client/components/header/header.js
@@ -2,6 +2,7 @@ import "./index.css";
 
 import PropTypes from "prop-types";
 import React from "react";
+import {Link} from "react-router-dom";
 
 import getAssetPath from "../../utils/get-asset-path";
 import getText from "../../utils/get-text";
@@ -18,11 +19,13 @@ export default class Header extends React.Component {
               <div className="owisp-header-left">
                 <div className="owisp-header-logo-div">
                   {logo.url ? (
-                    <img
-                      src={getAssetPath(orgSlug, logo.url)}
-                      alt={logo.alternate_text}
-                      className="owisp-header-logo-image"
-                    />
+                    <Link to={`/${orgSlug}`}>
+                      <img
+                        src={getAssetPath(orgSlug, logo.url)}
+                        alt={logo.alternate_text}
+                        className="owisp-header-logo-image"
+                      />
+                    </Link>
                   ) : null}
                 </div>
               </div>
diff --git a/client/components/header/header.test.js b/client/components/header/header.test.js
index 4b92d203..dd94acb9 100644
--- a/client/components/header/header.test.js
+++ b/client/components/header/header.test.js
@@ -2,34 +2,17 @@ import {shallow} from "enzyme";
 import React from "react";
 import renderer from "react-test-renderer";
 
+import getConfig from "../../utils/get-config";
 import Header from "./header";
 
+const defaultConfig = getConfig("default");
 const createTestProps = props => {
   return {
     setLanguage: jest.fn(),
     orgSlug: "default",
     language: "en",
     languages: [{slug: "en", text: "english"}, {slug: "it", text: "italian"}],
-    header: {
-      logo: {
-        alternate_text: null,
-        url: null,
-      },
-      links: [
-        {
-          text: {
-            en: "test link 1",
-          },
-          url: "https://testlink1.com",
-        },
-        {
-          text: {
-            en: "test link 2",
-          },
-          url: "https://testlink2.com",
-        },
-      ],
-    },
+    header: defaultConfig.components.header,
     ...props,
   };
 };
diff --git a/client/components/login/__snapshots__/login.test.js.snap b/client/components/login/__snapshots__/login.test.js.snap
new file mode 100644
index 00000000..d48d35c8
--- /dev/null
+++ b/client/components/login/__snapshots__/login.test.js.snap
@@ -0,0 +1,275 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Login /> rendering should render correctly with social links 1`] = `
+<div
+  className="owisp-login-container"
+>
+  <form
+    className="owisp-login-form"
+    onSubmit={[Function]}
+  >
+    <div
+      className="owisp-login-header"
+    >
+      <div
+        className="owisp-login-header-content"
+      >
+         sign in
+      </div>
+    </div>
+    <div
+      className="owisp-login-fieldset"
+    >
+      <label
+        className="owisp-login-label owisp-login-label-username"
+        htmlFor="owisp-login-username"
+      >
+        <div
+          className="owisp-login-label-text"
+        >
+          username
+        </div>
+        <input
+          className="owisp-login-input
+                      owisp-login-input-username
+                      "
+          id="owisp-login-username"
+          name="username"
+          onChange={[Function]}
+          pattern="[a-zA-Z@.+\\\\-_\\\\d]{1,150}"
+          placeholder="enter username"
+          required={true}
+          title="only letters, numbers, and @/./+/-/_ characters"
+          type="text"
+          value=""
+        />
+      </label>
+      <label
+        className="owisp-login-label owisp-login-label-password"
+        htmlFor="owisp-login-password"
+      >
+        <div
+          className="owisp-login-label-text"
+        >
+          password
+        </div>
+        <input
+          className="owisp-login-input owisp-login-input-password
+                      "
+          id="owisp-login-password"
+          name="password"
+          onChange={[Function]}
+          pattern=".{6,}"
+          placeholder="password"
+          required={true}
+          title="password must be a minimum of 6 characters"
+          type="password"
+          value=""
+        />
+      </label>
+    </div>
+    <div
+      className="owisp-login-add-info"
+    >
+      By logging in, you accept the 
+      <a
+        className="owisp-login-additional-link"
+        href="/default/login/terms-and-conditions"
+        onClick={[Function]}
+      >
+        terms and conditions
+      </a>
+       and the 
+      <a
+        className="owisp-login-additional-link"
+        href="/default/login/privacy-policy"
+        onClick={[Function]}
+      >
+        privacy policy
+      </a>
+       of this WiFi service. 
+    </div>
+    <input
+      className="owisp-login-form-btn owisp-login-login-btn"
+      id="owisp-login-login-btn"
+      type="submit"
+      value="sign in"
+    />
+    <div
+      className="owisp-login-social-links-div"
+    >
+      <a
+        className="owisp-login-social-link"
+        href="test url"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <div
+          className="owisp-login-social-link-text"
+        >
+          Facebook
+        </div>
+      </a>
+      <a
+        className="owisp-login-social-link"
+        href="https://control.co.ke/accounts/facebook/login/?next=%2Ffreeradius%2Fsocial-login%2Fstaging%2F%3Fcp%3Dhttp%3A%2F%2Fcontrol.brandfi.co.ke%2Floginpage%2F%26last%3D"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="https://control.co.ke/accounts/facebook/login/?next=%2Ffreeradius%2Fsocial-login%2Fstaging%2F%3Fcp%3Dhttp%3A%2F%2Fcontrol.brandfi.co.ke%2Floginpage%2F%26last%3D"
+          className="owisp-login-social-link-icon"
+          src="/assets/default/test.png"
+        />
+      </a>
+    </div>
+    <div
+      className="owisp-login-links-div"
+    >
+      <a
+        className="owisp-login-link"
+        href="/default/password/reset"
+        onClick={[Function]}
+      >
+        Forgot your password?
+      </a>
+      <a
+        className="owisp-login-link"
+        href="/default/registration"
+        onClick={[Function]}
+      >
+        Not registered yet? Create an account
+      </a>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`<Login /> rendering should render correctly without social links 1`] = `
+<div
+  className="owisp-login-container"
+>
+  <form
+    className="owisp-login-form"
+    onSubmit={[Function]}
+  >
+    <div
+      className="owisp-login-header"
+    >
+      <div
+        className="owisp-login-header-content"
+      >
+         sign in
+      </div>
+    </div>
+    <div
+      className="owisp-login-fieldset"
+    >
+      <label
+        className="owisp-login-label owisp-login-label-username"
+        htmlFor="owisp-login-username"
+      >
+        <div
+          className="owisp-login-label-text"
+        >
+          username
+        </div>
+        <input
+          className="owisp-login-input
+                      owisp-login-input-username
+                      "
+          id="owisp-login-username"
+          name="username"
+          onChange={[Function]}
+          pattern="[a-zA-Z@.+\\\\-_\\\\d]{1,150}"
+          placeholder="enter username"
+          required={true}
+          title="only letters, numbers, and @/./+/-/_ characters"
+          type="text"
+          value=""
+        />
+      </label>
+      <label
+        className="owisp-login-label owisp-login-label-password"
+        htmlFor="owisp-login-password"
+      >
+        <div
+          className="owisp-login-label-text"
+        >
+          password
+        </div>
+        <input
+          className="owisp-login-input owisp-login-input-password
+                      "
+          id="owisp-login-password"
+          name="password"
+          onChange={[Function]}
+          pattern=".{6,}"
+          placeholder="password"
+          required={true}
+          title="password must be a minimum of 6 characters"
+          type="password"
+          value=""
+        />
+      </label>
+    </div>
+    <div
+      className="owisp-login-add-info"
+    >
+      By logging in, you accept the 
+      <a
+        className="owisp-login-additional-link"
+        href="/default/login/terms-and-conditions"
+        onClick={[Function]}
+      >
+        terms and conditions
+      </a>
+       and the 
+      <a
+        className="owisp-login-additional-link"
+        href="/default/login/privacy-policy"
+        onClick={[Function]}
+      >
+        privacy policy
+      </a>
+       of this WiFi service. 
+    </div>
+    <input
+      className="owisp-login-form-btn owisp-login-login-btn"
+      id="owisp-login-login-btn"
+      type="submit"
+      value="sign in"
+    />
+    <hr
+      className="owisp-login-social-hr"
+      data-content="OR"
+    />
+    <div
+      className="owisp-login-divider-description"
+    >
+      login with
+    </div>
+    <div
+      className="owisp-login-social-links-div"
+    />
+    <div
+      className="owisp-login-links-div"
+    >
+      <a
+        className="owisp-login-link"
+        href="/default/password/reset"
+        onClick={[Function]}
+      >
+        Forgot your password?
+      </a>
+      <a
+        className="owisp-login-link"
+        href="/default/registration"
+        onClick={[Function]}
+      >
+        Not registered yet? Create an account
+      </a>
+    </div>
+  </form>
+</div>
+`;
diff --git a/client/components/login/index.css b/client/components/login/index.css
new file mode 100644
index 00000000..350d3a3d
--- /dev/null
+++ b/client/components/login/index.css
@@ -0,0 +1,213 @@
+.owisp-login-container {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  background: #f2f2f2;
+  width: 100%;
+}
+.owisp-login-form {
+  font-family: sans-serif;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 24px 50px;
+}
+.owisp-login-form.success .owisp-login-input:invalid {
+  box-shadow: none;
+}
+.owisp-login-header-content {
+  text-transform: capitalize;
+  color: #444;
+  font-size: 28px;
+  margin-bottom: 4px;
+}
+.owisp-login-fieldset {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-self: flex-start;
+}
+.owisp-login-label {
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+.owisp-login-label-text {
+  color: #6b6b6b;
+  text-transform: capitalize;
+}
+.owisp-login-input {
+  padding: 10px;
+  border-radius: 3px;
+  font-size: 18px;
+  border: 2px solid #e7e7e7;
+  margin-top: 5px;
+  width: 380px;
+  box-sizing: border-box;
+}
+.owisp-login-input:focus {
+  border-color: #a7a7a7;
+}
+.owisp-login-input.error {
+  border-color: #d93025;
+}
+.owisp-login-form-btn {
+  width: 100%;
+  font-size: 18px;
+  height: 50px;
+  background: #293b52;
+  color: #ffffff;
+  text-transform: capitalize;
+  border: 0;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.owisp-login-form-btn:focus {
+  outline: dotted 1px #444;
+  outline-offset: 0.5px;
+}
+.owisp-login-login-btn {
+  margin-top: 4px;
+}
+.owisp-login-form-btn:hover {
+  background: #223144;
+}
+.owisp-login-error {
+  font-size: 12px;
+  color: #d93025;
+  width: 324px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+}
+.owisp-login-error-icon {
+  display: inline-block;
+  background: #d93025;
+  color: #ffffff;
+  min-width: 16px;
+  align-self: center;
+  height: 16px;
+  border-radius: 50%;
+  text-align: center;
+  margin-right: 8px;
+  font-weight: 600;
+}
+.owisp-login-register-link {
+  text-decoration: none;
+  width: 100%;
+}
+.owisp-login-add-info {
+  margin-top: 15px;
+  color: #444;
+  max-width: 380px;
+}
+.owisp-login-additional-link {
+  color: #444;
+}
+.owisp-login-additional-link:hover,
+.owisp-login-additional-link:focus {
+  outline: dotted 1px #444;
+  outline-offset: 0.5px;
+}
+.owisp-login-social-hr {
+  outline: 0;
+  border: 0;
+  text-align: center;
+  height: 1.5em;
+  line-height: 1em;
+  position: relative;
+  width: 100%;
+}
+.owisp-login-social-hr:before {
+  content: "";
+  background: #e6e6e6;
+  position: absolute;
+  left: 0;
+  top: 48%;
+  width: 100%;
+  height: 2px;
+}
+.owisp-login-social-hr:after {
+  content: attr(data-content);
+  position: relative;
+  display: inline-block;
+  padding: 0 0.5em;
+  line-height: 1.5em;
+  color: #798993;
+  background-color: #fcfcfa;
+}
+.owisp-login-divider-description {
+  color: #798993;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  width: 100%;
+  text-align: center;
+}
+.owisp-login-social-links-div {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+.owisp-login-social-link {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding: 4px 8px;
+  align-items: center;
+  text-decoration: none;
+  color: #798993;
+  border-radius: 3px;
+  margin-right: 12px;
+  box-shadow: 1px 1px 1px 1px hsla(0, 0%, 53%, 0.33);
+}
+.owisp-login-social-link:hover {
+  background: #efefef;
+}
+.owisp-login-social-link:focus {
+  outline: dotted 1px #444;
+  outline-offset: 0.5px;
+}
+.owisp-login-social-link-icon {
+  width: 28px;
+  height: auto;
+}
+.owisp-login-social-link-text {
+  margin-left: 3px;
+  text-transform: capitalize;
+}
+.owisp-login-links-div {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 20px;
+}
+.owisp-login-link {
+  line-height: 1.4;
+  text-decoration: none;
+  text-transform: capitalize;
+  color: #444;
+}
+.owisp-login-link:focus {
+  outline: dotted 1px #444;
+  outline-offset: 0.5px;
+}
+.owisp-login-link:hover {
+  text-decoration: underline;
+}
+.owisp-login-error-non-field {
+  box-sizing: border-box;
+  font-size: 16px;
+  width: 100%;
+  max-width: 380px;
+  margin-top: 15px;
+}
diff --git a/client/components/login/index.js b/client/components/login/index.js
new file mode 100644
index 00000000..0094357b
--- /dev/null
+++ b/client/components/login/index.js
@@ -0,0 +1,18 @@
+import {connect} from "react-redux";
+
+import Component from "./login";
+
+const mapStateToProps = state => {
+  return {
+    loginForm: state.organization.configuration.components.login_form,
+    privacyPolicy: state.organization.configuration.privacy_policy,
+    termsAndConditions: state.organization.configuration.terms_and_conditions,
+    language: state.language,
+    orgSlug: state.organization.configuration.slug,
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  null,
+)(Component);
diff --git a/client/components/login/login.js b/client/components/login/login.js
new file mode 100644
index 00000000..1e87f2a2
--- /dev/null
+++ b/client/components/login/login.js
@@ -0,0 +1,340 @@
+/* eslint-disable camelcase */
+import "./index.css";
+
+import axios from "axios";
+import PropTypes from "prop-types";
+import qs from "qs";
+import React from "react";
+import {Link} 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";
+
+export default class Login extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: "",
+      password: "",
+      errors: {},
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({[event.target.name]: event.target.value});
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+    const {orgSlug} = this.props;
+    const {username, password, errors} = this.state;
+    const url = loginApiUrl.replace("{orgSlug}", orgSlug);
+    this.setState({
+      errors: {},
+    });
+    return axios({
+      method: "post",
+      headers: {
+        "content-type": "application/x-www-form-urlencoded",
+      },
+      url,
+      data: qs.stringify({
+        username,
+        password,
+      }),
+    })
+      .then(() => {
+        this.setState({
+          errors: {},
+          username: "",
+          password: "",
+        });
+      })
+      .catch(error => {
+        const {data} = error.response;
+        this.setState({
+          errors: {
+            ...errors,
+            ...(data.non_field_errors
+              ? {nonField: data.non_field_errors[0]}
+              : {nonField: ""}),
+            ...(data.detail ? {nonField: data.detail} : {}),
+            ...(data.username ? {username: data.username} : {username: ""}),
+            ...(data.password ? {password: data.password} : {password: ""}),
+          },
+        });
+      });
+  }
+
+  render() {
+    const {errors, username, password} = this.state;
+    const {
+      language,
+      loginForm,
+      orgSlug,
+      termsAndConditions,
+      privacyPolicy,
+    } = this.props;
+    const {
+      links,
+      buttons,
+      input_fields,
+      social_login,
+      header,
+      additional_info_text,
+    } = loginForm;
+    return (
+      <React.Fragment>
+        <div className="owisp-login-container">
+          <form className="owisp-login-form" onSubmit={this.handleSubmit}>
+            <div className="owisp-login-header">
+              <div className="owisp-login-header-content">
+                {getText(header, language)}
+              </div>
+            </div>
+            <div className="owisp-login-fieldset">
+              {errors.nonField && (
+                <div className="owisp-login-error owisp-login-error-non-field">
+                  <span className="owisp-login-error-icon">!</span>
+                  <span className="owisp-login-error-text owisp-login-error-text-non-field">
+                    {errors.nonField}
+                  </span>
+                </div>
+              )}
+              {input_fields.username ? (
+                <>
+                  <label
+                    className="owisp-login-label owisp-login-label-username"
+                    htmlFor="owisp-login-username"
+                  >
+                    <div className="owisp-login-label-text">
+                      {getText(input_fields.username.label, language)}
+                    </div>
+                    <input
+                      className={`owisp-login-input
+                      owisp-login-input-username
+                      ${errors.username ? "error" : ""}`}
+                      type={input_fields.username.type}
+                      id="owisp-login-username"
+                      name="username"
+                      value={username}
+                      onChange={this.handleChange}
+                      required
+                      placeholder={getText(
+                        input_fields.username.placeholder,
+                        language,
+                      )}
+                      pattern={
+                        input_fields.username.pattern
+                          ? input_fields.username.pattern
+                          : undefined
+                      }
+                      title={
+                        input_fields.username.pattern_description
+                          ? getText(
+                              input_fields.username.pattern_description,
+                              language,
+                            )
+                          : undefined
+                      }
+                    />
+                  </label>
+                  {errors.username && (
+                    <div className="owisp-login-error owisp-login-error-username">
+                      <span className="owisp-login-error-icon">!</span>
+                      <span className="owisp-login-error-text owisp-login-error-text-username">
+                        {errors.username}
+                      </span>
+                    </div>
+                  )}
+                </>
+              ) : null}
+              {input_fields.password ? (
+                <>
+                  <label
+                    className="owisp-login-label owisp-login-label-password"
+                    htmlFor="owisp-login-password"
+                  >
+                    <div className="owisp-login-label-text">
+                      {getText(input_fields.password.label, language)}
+                    </div>
+                    <input
+                      className={`owisp-login-input owisp-login-input-password
+                      ${errors.password1 ? "error" : ""}`}
+                      type={input_fields.password.type}
+                      id="owisp-login-password"
+                      required
+                      name="password"
+                      value={password}
+                      onChange={this.handleChange}
+                      placeholder={getText(
+                        input_fields.password.placeholder,
+                        language,
+                      )}
+                      pattern={
+                        input_fields.password.pattern
+                          ? input_fields.password.pattern
+                          : undefined
+                      }
+                      title={
+                        input_fields.password.pattern_description
+                          ? getText(
+                              input_fields.password.pattern_description,
+                              language,
+                            )
+                          : undefined
+                      }
+                    />
+                  </label>
+                  {errors.password && (
+                    <div className="owisp-login-error owisp-login-error-password">
+                      <span className="owisp-login-error-icon">!</span>
+                      <span className="owisp-login-error-text owisp-login-error-text-password">
+                        {errors.password1}
+                      </span>
+                    </div>
+                  )}
+                </>
+              ) : null}
+            </div>
+            {additional_info_text ? (
+              <div className="owisp-login-add-info">
+                {renderAdditionalInfo(
+                  additional_info_text,
+                  language,
+                  termsAndConditions,
+                  privacyPolicy,
+                  orgSlug,
+                  "login",
+                )}
+              </div>
+            ) : null}
+            {buttons.login ? (
+              <>
+                {buttons.login.label ? (
+                  <label
+                    className="owisp-login-label owisp-login-label-login-btn"
+                    htmlFor="owisp-login-login-btn"
+                  >
+                    <div className="owisp-login-label-text">
+                      {getText(buttons.login.label, language)}
+                    </div>
+                  </label>
+                ) : null}
+                <input
+                  type="submit"
+                  className="owisp-login-form-btn owisp-login-login-btn"
+                  id="owisp-login-login-btn"
+                  value={getText(buttons.login.text, language)}
+                />
+              </>
+            ) : null}
+            {social_login ? (
+              <>
+                {social_login.divider_text ? (
+                  <hr
+                    className="owisp-login-social-hr"
+                    data-content={getText(social_login.divider_text, language)}
+                  />
+                ) : null}
+                {social_login.description ? (
+                  <div className="owisp-login-divider-description">
+                    {getText(social_login.description, language)}
+                  </div>
+                ) : null}
+                {social_login.links.length ? (
+                  <>
+                    <div className="owisp-login-social-links-div">
+                      {social_login.links.map(link => {
+                        if (link.url)
+                          return (
+                            <a
+                              href={link.url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="owisp-login-social-link"
+                              key={link.url}
+                            >
+                              {link.icon ? (
+                                <img
+                                  src={getAssetPath(orgSlug, link.icon)}
+                                  alt={
+                                    link.text
+                                      ? getText(link.text, language)
+                                      : link.url
+                                  }
+                                  className="owisp-login-social-link-icon"
+                                />
+                              ) : null}
+                              {link.text ? (
+                                <div className="owisp-login-social-link-text">
+                                  {getText(link.text, language)}
+                                </div>
+                              ) : null}
+                            </a>
+                          );
+                        return null;
+                      })}
+                    </div>
+                  </>
+                ) : null}
+              </>
+            ) : null}
+            {links ? (
+              <div className="owisp-login-links-div">
+                {links.forget_password ? (
+                  <Link
+                    to={`/${orgSlug}/password/reset`}
+                    className="owisp-login-link"
+                  >
+                    {getText(links.forget_password, language)}
+                  </Link>
+                ) : null}
+                {links.register ? (
+                  <Link
+                    to={`/${orgSlug}/registration`}
+                    className="owisp-login-link"
+                  >
+                    {getText(links.register, language)}
+                  </Link>
+                ) : null}
+              </div>
+            ) : null}
+          </form>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+Login.propTypes = {
+  loginForm: PropTypes.shape({
+    header: PropTypes.object,
+    social_login: PropTypes.shape({
+      divider_text: PropTypes.object,
+      description: PropTypes.object,
+      links: PropTypes.arrayOf(PropTypes.object),
+    }),
+    input_fields: PropTypes.shape({
+      username: PropTypes.object,
+      password: PropTypes.object,
+    }),
+    additional_info_text: PropTypes.object,
+    buttons: PropTypes.object,
+    links: PropTypes.object,
+  }).isRequired,
+  language: PropTypes.string.isRequired,
+  orgSlug: PropTypes.string.isRequired,
+  privacyPolicy: PropTypes.shape({
+    title: PropTypes.object,
+    content: PropTypes.object,
+  }).isRequired,
+  termsAndConditions: PropTypes.shape({
+    title: PropTypes.object,
+    content: PropTypes.object,
+  }).isRequired,
+};
diff --git a/client/components/login/login.test.js b/client/components/login/login.test.js
new file mode 100644
index 00000000..02f42fd5
--- /dev/null
+++ b/client/components/login/login.test.js
@@ -0,0 +1,126 @@
+/* eslint-disable prefer-promise-reject-errors */
+import axios from "axios";
+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";
+import Login from "./login";
+
+jest.mock("axios");
+
+const defaultConfig = getConfig("default");
+const createTestProps = props => {
+  return {
+    language: "en",
+    orgSlug: "default",
+    loginForm: defaultConfig.components.login_form,
+    privacyPolicy: defaultConfig.privacy_policy,
+    termsAndConditions: defaultConfig.terms_and_conditions,
+    ...props,
+  };
+};
+describe("<Login /> rendering", () => {
+  let props;
+  it("should render correctly without social links", () => {
+    props = createTestProps();
+    const component = renderer
+      .create(
+        <Router>
+          <Login {...props} />
+        </Router>,
+      )
+      .toJSON();
+    expect(component).toMatchSnapshot();
+  });
+  it("should render correctly with social links", () => {
+    props = createTestProps({
+      loginForm: {
+        ...defaultConfig.components.login_form,
+        social_login: {
+          ...defaultConfig.components.login_form,
+          links: [
+            {
+              text: {
+                en: "Facebook",
+              },
+              url: "test url",
+              icon: null,
+            },
+            {
+              icon: "test.png",
+              url:
+                "https://control.co.ke/accounts/facebook/login/?next=%2Ffreeradius%2Fsocial-login%2Fstaging%2F%3Fcp%3Dhttp%3A%2F%2Fcontrol.brandfi.co.ke%2Floginpage%2F%26last%3D",
+            },
+          ],
+        },
+      },
+    });
+    const component = renderer
+      .create(
+        <Router>
+          <Login {...props} />
+        </Router>,
+      )
+      .toJSON();
+    expect(component).toMatchSnapshot();
+  });
+});
+
+describe("<Login /> interactions", () => {
+  let props;
+  let wrapper;
+  beforeEach(() => {
+    props = createTestProps();
+    wrapper = shallow(<Login {...props} />);
+  });
+  it("should change state values when handleChange function is invoked", () => {
+    wrapper
+      .find("#owisp-login-username")
+      .simulate("change", {target: {value: "test username", name: "username"}});
+    expect(wrapper.state("username")).toEqual("test username");
+    wrapper
+      .find("#owisp-login-password")
+      .simulate("change", {target: {value: "test password", name: "password"}});
+    expect(wrapper.state("password")).toEqual("test password");
+  });
+  it("should execute handleSubmit correctly when form is submitted", () => {
+    axios
+      .mockImplementationOnce(() => {
+        return Promise.reject({
+          response: {
+            data: {
+              username: "username error",
+              password: "password error",
+              detail: "error details",
+              non_field_errors: "non field errors",
+            },
+          },
+        });
+      })
+      .mockImplementationOnce(() => {
+        return Promise.resolve();
+      });
+    const event = {preventDefault: () => {}};
+    return wrapper
+      .instance()
+      .handleSubmit(event)
+      .then(() => {
+        expect(wrapper.instance().state.errors).toEqual({
+          username: "username error",
+          nonField: "error details",
+          password: "password error",
+        });
+        expect(wrapper.find(".owisp-login-error")).toHaveLength(3);
+      })
+      .then(() => {
+        return wrapper
+          .instance()
+          .handleSubmit(event)
+          .then(() => {
+            expect(wrapper.instance().state.errors).toEqual({});
+          });
+      });
+  });
+});
diff --git a/client/components/organization-wrapper/index.js b/client/components/organization-wrapper/index.js
index 8c9997b5..93f78e3f 100644
--- a/client/components/organization-wrapper/index.js
+++ b/client/components/organization-wrapper/index.js
@@ -1,11 +1,13 @@
+import {withCookies} from "react-cookie";
 import {connect} from "react-redux";
 
 import setOrganization from "../../actions/set-organization";
 import Component from "./organization-wrapper";
 
-const mapStateToProps = state => {
+const mapStateToProps = (state, ownProps) => {
   return {
     organization: state.organization,
+    cookies: ownProps.cookies,
   };
 };
 
@@ -16,7 +18,9 @@ const mapDispatchToProps = dispatch => {
     },
   };
 };
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Component);
+export default withCookies(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(Component),
+);
diff --git a/client/components/organization-wrapper/organization-wrapper.js b/client/components/organization-wrapper/organization-wrapper.js
index dba16282..ed87ad2c 100644
--- a/client/components/organization-wrapper/organization-wrapper.js
+++ b/client/components/organization-wrapper/organization-wrapper.js
@@ -9,6 +9,7 @@ import getAssetPath from "../../utils/get-asset-path";
 import DoesNotExist from "../404";
 import Footer from "../footer";
 import Header from "../header";
+import Login from "../login";
 import PasswordConfirm from "../password-confirm";
 import PasswordReset from "../password-reset";
 import Registration from "../registration";
@@ -16,14 +17,20 @@ import Registration from "../registration";
 export default class OrganizationWrapper extends React.Component {
   constructor(props) {
     super(props);
-    const {match, setOrganization} = this.props;
+    const {match, setOrganization} = props;
     const organizationSlug = match.params.organization;
     if (organizationSlug) setOrganization(organizationSlug);
   }
 
+  componentDidUpdate(prevProps) {
+    const {setOrganization, match} = this.props;
+    if (prevProps.match.params.organization !== match.params.organization) {
+      if (match.params.organization) setOrganization(match.params.organization);
+    }
+  }
+
   render() {
-    const {match} = this.props;
-    const {organization} = this.props;
+    const {organization, match} = this.props;
     const {title, favicon} = organization.configuration;
     const orgSlug = organization.configuration.slug;
     const cssPath = organization.configuration.css_path;
@@ -34,7 +41,7 @@ export default class OrganizationWrapper extends React.Component {
             <Route path={match.path} render={() => <Header />} />
             <Switch>
               <Route
-                path={`${match.path}/register`}
+                path={`${match.path}/registration`}
                 render={() => <Registration />}
               />
               <Route
@@ -46,6 +53,7 @@ export default class OrganizationWrapper extends React.Component {
                 exact
                 render={() => <PasswordReset />}
               />
+              <Route path={`${match.path}/login`} render={() => <Login />} />
             </Switch>
             <Route path={match.path} render={() => <Footer />} />
           </div>
diff --git a/client/components/password-confirm/password-confirm.test.js b/client/components/password-confirm/password-confirm.test.js
index 90f3b0bd..cb12deb0 100644
--- a/client/components/password-confirm/password-confirm.test.js
+++ b/client/components/password-confirm/password-confirm.test.js
@@ -6,55 +6,16 @@ import React from "react";
 import {BrowserRouter as Router} from "react-router-dom";
 import renderer from "react-test-renderer";
 
+import getConfig from "../../utils/get-config";
 import PasswordConfirm from "./password-confirm";
 
 jest.mock("axios");
-
+const defaultConfig = getConfig("default");
 const createTestProps = props => {
   return {
     language: "en",
     orgSlug: "default",
-    passwordConfirm: {
-      heading: {
-        en: "reset your password",
-      },
-      additional_text: {
-        en: "please enter your new password",
-      },
-      input_fields: {
-        password: {
-          type: "password",
-          pattern: ".{6,}",
-          pattern_description: {
-            en: "password must be a minimum of 6 characters",
-          },
-          placeholder: {
-            en: "password",
-          },
-          label: {
-            en: "password",
-          },
-        },
-        password_confirm: {
-          type: "password",
-          pattern: null,
-          pattern_description: {
-            en: null,
-          },
-          placeholder: {
-            en: "confirm password",
-          },
-          label: {
-            en: "confirm",
-          },
-        },
-      },
-      buttons: {
-        submit: {
-          en: "change password",
-        },
-      },
-    },
+    passwordConfirm: defaultConfig.components.confirm_form,
     match: {
       params: {
         uid: "testUid",
diff --git a/client/components/password-reset/password-reset.test.js b/client/components/password-reset/password-reset.test.js
index 5f576f5e..ab7895d6 100644
--- a/client/components/password-reset/password-reset.test.js
+++ b/client/components/password-reset/password-reset.test.js
@@ -5,48 +5,17 @@ import React from "react";
 import {BrowserRouter as Router} from "react-router-dom";
 import renderer from "react-test-renderer";
 
+import getConfig from "../../utils/get-config";
 import PasswordReset from "./password-reset";
 
 jest.mock("axios");
 
+const defaultConfig = getConfig("default");
 const createTestProps = props => {
   return {
     language: "en",
     orgSlug: "default",
-    passwordReset: {
-      heading: {
-        en: "reset your password",
-      },
-      additional_text: {
-        en:
-          "enter your email and we'll send you the instructions to reset your password",
-      },
-      input_fields: {
-        email: {
-          type: "email",
-          pattern: null,
-          pattern_description: {
-            en: null,
-          },
-          placeholder: {
-            en: "email address",
-          },
-          label: {
-            en: "email",
-          },
-        },
-      },
-      buttons: {
-        send: {
-          en: "send",
-        },
-      },
-      login_page_link: {
-        text: {
-          en: "Take me Back to Sign In",
-        },
-      },
-    },
+    passwordReset: defaultConfig.components.reset_form,
     ...props,
   };
 };
diff --git a/client/components/registration/__snapshots__/registration.test.js.snap b/client/components/registration/__snapshots__/registration.test.js.snap
index b2edbb5a..948cf3f8 100644
--- a/client/components/registration/__snapshots__/registration.test.js.snap
+++ b/client/components/registration/__snapshots__/registration.test.js.snap
@@ -36,7 +36,7 @@ exports[`<Registration /> rendering should render correctly 1`] = `
           id="owisp-registration-username"
           name="username"
           onChange={[Function]}
-          pattern="[a-zA-Z@.+\\\\-_]{1,150}"
+          pattern="[a-zA-Z@.+\\\\-_\\\\d]{1,150}"
           placeholder="enter phone number or username"
           required={true}
           title="only letters, numbers, and @/./+/-/_ characters"
@@ -60,6 +60,7 @@ exports[`<Registration /> rendering should render correctly 1`] = `
           onChange={[Function]}
           placeholder="email address"
           required={true}
+          title={null}
           type="email"
           value=""
         />
@@ -103,16 +104,50 @@ exports[`<Registration /> rendering should render correctly 1`] = `
           onChange={[Function]}
           placeholder="confirm password"
           required={true}
+          title={null}
           type="password"
           value=""
         />
       </label>
     </div>
+    <div
+      className="owisp-registration-add-info"
+    >
+      By signing up, you accept the 
+      <a
+        className="owisp-registration-additional-link"
+        href="/default/registration/terms-and-conditions"
+        onClick={[Function]}
+      >
+        terms and conditions
+      </a>
+       and the 
+      <a
+        className="owisp-registration-additional-link"
+        href="/default/registration/privacy-policy"
+        onClick={[Function]}
+      >
+        privacy policy
+      </a>
+       of this WiFi service. 
+    </div>
     <input
-      className="owisp-registration-submit-btn"
+      className="owisp-registration-form-btn owisp-registration-submit-btn"
+      id="owisp-registration-submit-btn"
       type="submit"
       value="sign up"
     />
+    <div
+      className="owisp-login-links-div"
+    >
+      <a
+        className="owisp-registration-link"
+        href="/default/login"
+        onClick={[Function]}
+      >
+        Already have an account? Log in
+      </a>
+    </div>
   </form>
 </div>
 `;
diff --git a/client/components/registration/index.css b/client/components/registration/index.css
index c42e7fab..6b5b0564 100644
--- a/client/components/registration/index.css
+++ b/client/components/registration/index.css
@@ -45,15 +45,32 @@
   font-size: 18px;
   border: 2px solid #e7e7e7;
   margin-top: 5px;
-  text-transform: capitalize;
   width: 300px;
 }
+.owisp-registration-input:focus {
+  border-color: #a7a7a7;
+}
 .owisp-registration-input.error {
   border-color: #d93025;
 }
+.owisp-registration-add-info {
+  margin-top: 15px;
+  color: #444;
+  max-width: 330px;
+}
+.owisp-registration-additional-link {
+  color: #444;
+}
+.owisp-registration-additional-link:hover,
+.owisp-registration-additional-link:focus {
+  outline: dotted 1px #444;
+  outline-offset: 0.5px;
+}
+.owisp-registration-label-registration-btn {
+  align-self: flex-start;
+}
 .owisp-registration-submit-btn {
   width: 100%;
-  margin-top: 20px;
   font-size: 18px;
   height: 50px;
   background: #293b52;
@@ -66,6 +83,10 @@
 .owisp-registration-submit-btn:hover {
   background: #223144;
 }
+.owisp-registration-submit-btn:focus {
+  outline: dotted 1px #444;
+  outline-offset: 0.5px;
+}
 .owisp-registration-error {
   font-size: 12px;
   color: #d93025;
@@ -86,3 +107,16 @@
   margin-right: 8px;
   font-weight: 600;
 }
+.owisp-registration-link {
+  line-height: 1.4;
+  text-decoration: none;
+  text-transform: capitalize;
+  color: #444;
+}
+.owisp-registration-link:focus {
+  outline: dotted 1px #444;
+  outline-offset: 0.5px;
+}
+.owisp-registration-link:hover {
+  text-decoration: underline;
+}
diff --git a/client/components/registration/index.js b/client/components/registration/index.js
index 1097bcc6..3029cefa 100644
--- a/client/components/registration/index.js
+++ b/client/components/registration/index.js
@@ -5,6 +5,8 @@ import Component from "./registration";
 const mapStateToProps = state => {
   return {
     registration: state.organization.configuration.components.registration_form,
+    privacyPolicy: state.organization.configuration.privacy_policy,
+    termsAndConditions: state.organization.configuration.terms_and_conditions,
     language: state.language,
     orgSlug: state.organization.configuration.slug,
   };
diff --git a/client/components/registration/registration.js b/client/components/registration/registration.js
index 76517f48..87723440 100644
--- a/client/components/registration/registration.js
+++ b/client/components/registration/registration.js
@@ -1,12 +1,15 @@
+/* eslint-disable camelcase */
 import "./index.css";
 
 import axios from "axios";
 import PropTypes from "prop-types";
 import qs from "qs";
 import React from "react";
+import {Link} from "react-router-dom";
 
 import {passwordConfirmError, registerApiUrl} from "../../constants";
 import getText from "../../utils/get-text";
+import renderAdditionalInfo from "../../utils/render-additional-info";
 
 export default class Registration extends React.Component {
   constructor(props) {
@@ -30,9 +33,9 @@ export default class Registration extends React.Component {
   handleSubmit(event) {
     event.preventDefault();
     const {registration, orgSlug} = this.props;
-    const inputFields = registration.input_fields;
+    const {input_fields} = registration;
     const {username, email, password1, password2, errors} = this.state;
-    if (inputFields.password_confirm) {
+    if (input_fields.password_confirm) {
       if (password1 !== password2) {
         this.setState({
           errors: {
@@ -40,12 +43,12 @@ export default class Registration extends React.Component {
             password2: passwordConfirmError,
           },
         });
-        return;
+        return false;
       }
     }
     this.setState({errors: {...errors, password2: null}});
     const url = registerApiUrl.replace("{orgSlug}", orgSlug);
-    axios({
+    return axios({
       method: "post",
       headers: {
         "content-type": "application/x-www-form-urlencoded",
@@ -89,9 +92,14 @@ export default class Registration extends React.Component {
   }
 
   render() {
-    const {registration, language} = this.props;
-    const inputFields = registration.input_fields;
-    const {buttons} = registration;
+    const {
+      registration,
+      language,
+      termsAndConditions,
+      privacyPolicy,
+      orgSlug,
+    } = this.props;
+    const {buttons, additional_info_text, input_fields, links} = registration;
     const {username, email, password1, password2, errors, success} = this.state;
     return (
       <React.Fragment>
@@ -106,38 +114,38 @@ export default class Registration extends React.Component {
               </div>
             </div>
             <div className="owisp-registration-fieldset">
-              {inputFields.username ? (
+              {input_fields.username ? (
                 <>
                   <label
                     className="owisp-registration-label owisp-registration-label-username"
                     htmlFor="owisp-registration-username"
                   >
                     <div className="owisp-registration-label-text">
-                      {getText(inputFields.username.label, language)}
+                      {getText(input_fields.username.label, language)}
                     </div>
                     <input
                       className={`owisp-registration-input
                       owisp-registration-input-username
                       ${errors.username ? "error" : ""}`}
-                      type={inputFields.username.type}
+                      type={input_fields.username.type}
                       id="owisp-registration-username"
                       name="username"
                       value={username}
                       onChange={this.handleChange}
                       required
                       placeholder={getText(
-                        inputFields.username.placeholder,
+                        input_fields.username.placeholder,
                         language,
                       )}
                       pattern={
-                        inputFields.username.pattern
-                          ? inputFields.username.pattern
+                        input_fields.username.pattern
+                          ? input_fields.username.pattern
                           : undefined
                       }
                       title={
-                        inputFields.username.pattern_description
+                        input_fields.username.pattern_description
                           ? getText(
-                              inputFields.username.pattern_description,
+                              input_fields.username.pattern_description,
                               language,
                             )
                           : undefined
@@ -155,38 +163,38 @@ export default class Registration extends React.Component {
                 </>
               ) : null}
 
-              {inputFields.email ? (
+              {input_fields.email ? (
                 <>
                   <label
                     className="owisp-registration-label owisp-registration-label-email"
                     htmlFor="owisp-registration-email"
                   >
                     <div className="owisp-registration-label-text owisp-registration-label-text-email">
-                      {getText(inputFields.email.label, language)}
+                      {getText(input_fields.email.label, language)}
                     </div>
                     <input
                       className={`owisp-registration-input owisp-registration-input-email ${
                         errors.email ? "error" : ""
                       }`}
-                      type={inputFields.email.type}
+                      type={input_fields.email.type}
                       id="owisp-registration-email"
                       required
                       name="email"
                       value={email}
                       onChange={this.handleChange}
                       placeholder={getText(
-                        inputFields.email.placeholder,
+                        input_fields.email.placeholder,
                         language,
                       )}
                       pattern={
-                        inputFields.email.pattern
-                          ? inputFields.email.pattern
+                        input_fields.email.pattern
+                          ? input_fields.email.pattern
                           : undefined
                       }
                       title={
-                        inputFields.email.pattern_description
+                        input_fields.email.pattern_description
                           ? getText(
-                              inputFields.email.pattern_description,
+                              input_fields.email.pattern_description,
                               language,
                             )
                           : undefined
@@ -204,37 +212,37 @@ export default class Registration extends React.Component {
                 </>
               ) : null}
 
-              {inputFields.password ? (
+              {input_fields.password ? (
                 <>
                   <label
                     className="owisp-registration-label owisp-registration-label-password"
                     htmlFor="owisp-registration-password"
                   >
                     <div className="owisp-registration-label-text">
-                      {getText(inputFields.password.label, language)}
+                      {getText(input_fields.password.label, language)}
                     </div>
                     <input
                       className={`owisp-registration-input owisp-registration-input-password
                       ${errors.password1 ? "error" : ""}`}
-                      type={inputFields.password.type}
+                      type={input_fields.password.type}
                       id="owisp-registration-password"
                       required
                       name="password1"
                       value={password1}
                       onChange={this.handleChange}
                       placeholder={getText(
-                        inputFields.password.placeholder,
+                        input_fields.password.placeholder,
                         language,
                       )}
                       pattern={
-                        inputFields.password.pattern
-                          ? inputFields.password.pattern
+                        input_fields.password.pattern
+                          ? input_fields.password.pattern
                           : undefined
                       }
                       title={
-                        inputFields.password.pattern_description
+                        input_fields.password.pattern_description
                           ? getText(
-                              inputFields.password.pattern_description,
+                              input_fields.password.pattern_description,
                               language,
                             )
                           : undefined
@@ -252,38 +260,38 @@ export default class Registration extends React.Component {
                 </>
               ) : null}
 
-              {inputFields.password_confirm ? (
+              {input_fields.password_confirm ? (
                 <>
                   <label
                     className="owisp-registration-label owisp-registration-label-confirm"
                     htmlFor="owisp-registration-password-confirm"
                   >
                     <div className="owisp-registration-label-text">
-                      {getText(inputFields.password_confirm.label, language)}
+                      {getText(input_fields.password_confirm.label, language)}
                     </div>
                     <input
                       className={`owisp-registration-input owisp-registration-input-confirm ${
                         errors.password2 ? "error" : ""
                       }`}
-                      type={inputFields.password_confirm.type}
+                      type={input_fields.password_confirm.type}
                       id="owisp-registration-password-confirm"
                       required
                       name="password2"
                       value={password2}
                       onChange={this.handleChange}
                       placeholder={getText(
-                        inputFields.password_confirm.placeholder,
+                        input_fields.password_confirm.placeholder,
                         language,
                       )}
                       pattern={
-                        inputFields.password_confirm.pattern
-                          ? inputFields.password_confirm.pattern
+                        input_fields.password_confirm.pattern
+                          ? input_fields.password_confirm.pattern
                           : undefined
                       }
                       title={
-                        inputFields.password_confirm.pattern_description
+                        input_fields.password_confirm.pattern_description
                           ? getText(
-                              inputFields.password_confirm.pattern_description,
+                              input_fields.password_confirm.pattern_description,
                               language,
                             )
                           : undefined
@@ -301,11 +309,58 @@ export default class Registration extends React.Component {
                 </>
               ) : null}
             </div>
-            <input
-              type="submit"
-              className="owisp-registration-submit-btn"
-              value={getText(buttons.register, language)}
-            />
+            {additional_info_text ? (
+              <div className="owisp-registration-add-info">
+                {renderAdditionalInfo(
+                  additional_info_text,
+                  language,
+                  termsAndConditions,
+                  privacyPolicy,
+                  orgSlug,
+                  "registration",
+                )}
+              </div>
+            ) : null}
+            {buttons.register ? (
+              <>
+                {buttons.register.label ? (
+                  <label
+                    className="owisp-registration-label owisp-registration-label-registration-btn"
+                    htmlFor="owisp-registration-registration-btn"
+                  >
+                    <div className="owisp-registration-label-text">
+                      {getText(buttons.register.label, language)}
+                    </div>
+                  </label>
+                ) : null}
+                <input
+                  type="submit"
+                  className="owisp-registration-form-btn owisp-registration-submit-btn"
+                  id="owisp-registration-submit-btn"
+                  value={getText(buttons.register.text, language)}
+                />
+              </>
+            ) : null}
+            {links ? (
+              <div className="owisp-login-links-div">
+                {links.forget_password ? (
+                  <Link
+                    to={`/${orgSlug}/password/reset`}
+                    className="owisp-login-link"
+                  >
+                    {getText(links.forget_password, language)}
+                  </Link>
+                ) : null}
+                {links.login ? (
+                  <Link
+                    to={`/${orgSlug}/login`}
+                    className="owisp-registration-link"
+                  >
+                    {getText(links.login, language)}
+                  </Link>
+                ) : null}
+              </div>
+            ) : null}
           </form>
         </div>
       </React.Fragment>
@@ -325,7 +380,17 @@ Registration.propTypes = {
       password_confirm: PropTypes.object,
       username: PropTypes.object,
     }),
+    additional_info_text: PropTypes.object,
+    links: PropTypes.object,
   }).isRequired,
   language: PropTypes.string.isRequired,
   orgSlug: PropTypes.string.isRequired,
+  privacyPolicy: PropTypes.shape({
+    title: PropTypes.object,
+    content: PropTypes.object,
+  }).isRequired,
+  termsAndConditions: PropTypes.shape({
+    title: PropTypes.object,
+    content: PropTypes.object,
+  }).isRequired,
 };
diff --git a/client/components/registration/registration.test.js b/client/components/registration/registration.test.js
index 4bf02aa4..9cc00d3a 100644
--- a/client/components/registration/registration.test.js
+++ b/client/components/registration/registration.test.js
@@ -1,172 +1,44 @@
+/* eslint-disable prefer-promise-reject-errors */
+import axios from "axios";
 /* eslint-disable camelcase */
 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";
 import Registration from "./registration";
 
+jest.mock("axios");
+
+const defaultConfig = getConfig("default");
 const createTestProps = props => {
   return {
     language: "en",
     orgSlug: "default",
-    registration: {
-      header: {
-        en: " sign up",
-      },
-      input_fields: {
-        username: {
-          type: "text",
-          pattern: "[a-zA-Z@.+\\-_]{1,150}",
-          pattern_description: {
-            en: "only letters, numbers, and @/./+/-/_ characters",
-          },
-          placeholder: {
-            en: "enter phone number or username",
-          },
-          label: {
-            en: "phone number or username",
-          },
-        },
-        email: {
-          type: "email",
-          pattern: undefined,
-          pattern_description: {
-            en: undefined,
-          },
-          placeholder: {
-            en: "email address",
-          },
-          label: {
-            en: "email",
-          },
-        },
-        password: {
-          type: "password",
-          pattern: ".{6,}",
-          pattern_description: {
-            en: "password must be a minimum of 6 characters",
-          },
-          placeholder: {
-            en: "password",
-          },
-          label: {
-            en: "password",
-          },
-        },
-        password_confirm: {
-          type: "password",
-          pattern: undefined,
-          pattern_description: {
-            en: undefined,
-          },
-          placeholder: {
-            en: "confirm password",
-          },
-          label: {
-            en: "confirm",
-          },
-        },
-      },
-      buttons: {
-        register: {
-          en: "sign up",
-        },
-      },
-    },
+    registration: defaultConfig.components.registration_form,
+    privacyPolicy: defaultConfig.privacy_policy,
+    termsAndConditions: defaultConfig.terms_and_conditions,
     ...props,
   };
 };
 
 describe("<Registration /> rendering", () => {
   let props;
-  let wrapper;
   beforeEach(() => {
     props = createTestProps();
-    wrapper = shallow(<Registration {...props} />);
   });
   it("should render correctly", () => {
     props = createTestProps();
-    const component = renderer.create(<Registration {...props} />).toJSON();
+    const component = renderer
+      .create(
+        <Router>
+          <Registration {...props} />
+        </Router>,
+      )
+      .toJSON();
     expect(component).toMatchSnapshot();
   });
-  it("should render 4 input fields", () => {
-    expect(wrapper.find(".owisp-registration-input")).toHaveLength(4);
-  });
-  it("should render username field correctly", () => {
-    const {username} = props.registration.input_fields;
-    expect(wrapper.find(".owisp-registration-label-username").text()).toBe(
-      username.label.en,
-    );
-    expect(
-      wrapper.find(".owisp-registration-input-username").prop("placeholder"),
-    ).toBe(username.placeholder.en);
-    expect(
-      wrapper.find(".owisp-registration-input-username").prop("pattern"),
-    ).toBe(username.pattern);
-    expect(
-      wrapper.find(".owisp-registration-input-username").prop("title"),
-    ).toBe(username.pattern_description.en);
-    expect(
-      wrapper.find(".owisp-registration-input-username").prop("type"),
-    ).toBe(username.type);
-  });
-
-  it("should render email field correctly", () => {
-    const {email} = props.registration.input_fields;
-    expect(wrapper.find(".owisp-registration-label-email").text()).toBe(
-      email.label.en,
-    );
-    expect(
-      wrapper.find(".owisp-registration-input-email").prop("placeholder"),
-    ).toBe(email.placeholder.en);
-    expect(
-      wrapper.find(".owisp-registration-input-email").prop("pattern"),
-    ).toBe(email.pattern);
-    expect(wrapper.find(".owisp-registration-input-email").prop("title")).toBe(
-      email.pattern_description.en,
-    );
-    expect(wrapper.find(".owisp-registration-input-email").prop("type")).toBe(
-      email.type,
-    );
-  });
-
-  it("should render password field correctly", () => {
-    const {password} = props.registration.input_fields;
-    expect(wrapper.find(".owisp-registration-label-password").text()).toBe(
-      password.label.en,
-    );
-    expect(
-      wrapper.find(".owisp-registration-input-password").prop("placeholder"),
-    ).toBe(password.placeholder.en);
-    expect(
-      wrapper.find(".owisp-registration-input-password").prop("pattern"),
-    ).toBe(password.pattern);
-    expect(
-      wrapper.find(".owisp-registration-input-password").prop("title"),
-    ).toBe(password.pattern_description.en);
-    expect(
-      wrapper.find(".owisp-registration-input-password").prop("type"),
-    ).toBe(password.type);
-  });
-
-  it("should render confirm password field correctly", () => {
-    const {password_confirm} = props.registration.input_fields;
-    expect(wrapper.find(".owisp-registration-label-confirm").text()).toBe(
-      password_confirm.label.en,
-    );
-    expect(
-      wrapper.find(".owisp-registration-input-confirm").prop("placeholder"),
-    ).toBe(password_confirm.placeholder.en);
-    expect(
-      wrapper.find(".owisp-registration-input-confirm").prop("pattern"),
-    ).toBe(password_confirm.pattern);
-    expect(
-      wrapper.find(".owisp-registration-input-confirm").prop("title"),
-    ).toBe(password_confirm.pattern_description.en);
-    expect(wrapper.find(".owisp-registration-input-confirm").prop("type")).toBe(
-      password_confirm.type,
-    );
-  });
 });
 
 describe("<Registration /> interactions", () => {
@@ -195,35 +67,59 @@ describe("<Registration /> interactions", () => {
     expect(wrapper.state("password2")).toEqual("testpassword");
   });
 
-  it("should call handleSubmit when form is submitted", () => {
-    const mockedHandleSubmit = jest
-      .fn()
+  it("should execute handleSubmit correctly when form is submitted", () => {
+    axios
       .mockImplementationOnce(() => {
-        wrapper.setState({
-          errors: {},
-          username: "",
-          email: "",
-          password1: "",
-          password2: "",
-          success: true,
+        return Promise.reject({
+          response: {
+            data: {
+              username: "username error",
+              email: "email error",
+              password1: "password1 error",
+              password2: "password2 error",
+            },
+          },
         });
       })
       .mockImplementationOnce(() => {
-        wrapper.setState({
-          errors: {
-            username: "invalid username",
-            email: "invalid email",
-          },
+        return Promise.resolve();
+      });
+    wrapper.setState({
+      password1: "wrong password",
+      password2: "wrong password1",
+    });
+    const event = {preventDefault: () => {}};
+    wrapper.instance().handleSubmit(event);
+    expect(
+      wrapper.update().find(".owisp-registration-error-confirm"),
+    ).toHaveLength(1);
+    wrapper.setState({
+      password1: "password",
+      password2: "password",
+    });
+    return wrapper
+      .instance()
+      .handleSubmit(event)
+      .then(() => {
+        expect(wrapper.instance().state.errors).toEqual({
+          username: "username error",
+          email: "email error",
+          password1: "password1 error",
+          password2: "password2 error",
         });
+        expect(wrapper.find(".owisp-registration-error")).toHaveLength(4);
+      })
+      .then(() => {
+        return wrapper
+          .instance()
+          .handleSubmit(event)
+          .then(() => {
+            expect(wrapper.instance().state.errors).toEqual({});
+            expect(wrapper.instance().state.success).toEqual(true);
+            expect(
+              wrapper.find(".owisp-registration-form.success"),
+            ).toHaveLength(1);
+          });
       });
-    wrapper.instance().handleSubmit = mockedHandleSubmit;
-    wrapper.instance().forceUpdate();
-    wrapper.find(".owisp-registration-form").simulate("submit");
-    expect(mockedHandleSubmit).toHaveBeenCalledTimes(1);
-    expect(wrapper.find(".owisp-registration-form.success")).toHaveLength(1);
-    wrapper.find(".owisp-registration-form").simulate("submit");
-    expect(mockedHandleSubmit).toHaveBeenCalledTimes(2);
-    expect(wrapper.find(".owisp-registration-input.error")).toHaveLength(2);
-    expect(wrapper.find(".owisp-registration-error")).toHaveLength(2);
   });
 });
diff --git a/client/constants/index.js b/client/constants/index.js
index 7849d989..f65bcfa7 100644
--- a/client/constants/index.js
+++ b/client/constants/index.js
@@ -2,3 +2,4 @@ export const passwordConfirmError = "The two password fields didn't match.";
 export const registerApiUrl = "/api/v1/{orgSlug}/account/";
 export const resetApiUrl = "/api/v1/{orgSlug}/account/password/reset/";
 export const confirmApiUrl = "/api/v1/{orgSlug}/account/password/reset/confirm";
+export const loginApiUrl = "/api/v1/{orgSlug}/account/token";
diff --git a/client/index.js b/client/index.js
index 6febd9b6..3ebe011b 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,6 +2,7 @@ import "./index.css";
 
 import PropTypes from "prop-types";
 import React from "react";
+import {CookiesProvider} from "react-cookie";
 import {render} from "react-dom";
 import {Provider, connect} from "react-redux";
 import {BrowserRouter} from "react-router-dom";
@@ -45,8 +46,10 @@ const App = connect(
 )(BaseApp);
 
 render(
-  <Provider store={store}>
-    <App />
-  </Provider>,
+  <CookiesProvider>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </CookiesProvider>,
   document.getElementById("root"),
 );
diff --git a/client/utils/render-additional-info.js b/client/utils/render-additional-info.js
new file mode 100644
index 00000000..b83a772c
--- /dev/null
+++ b/client/utils/render-additional-info.js
@@ -0,0 +1,97 @@
+import React from "react";
+import {Link} from "react-router-dom";
+
+import getText from "./get-text";
+
+const renderAdditionalInfo = (
+  textObj,
+  language,
+  termsAndConditions,
+  privacyPolicy,
+  orgSlug,
+  component,
+) => {
+  const textNodes = [];
+  const text = getText(textObj, language);
+  const privacyPolicyTitle = getText(privacyPolicy.title, language);
+  const termsAndConditionsTitle = getText(termsAndConditions.title, language);
+  if (text.includes("{terms_and_conditions}")) {
+    const Array1 = text.split("{terms_and_conditions}");
+    if (Array1[0].includes("{privacy_policy}")) {
+      const Array2 = Array1[0].split("{privacy_policy}");
+      textNodes.push(Array2[0]);
+      textNodes.push(
+        <Link
+          to={`/${orgSlug}/${component}/privacy-policy`}
+          className={`owisp-${component}-additional-link`}
+          key="privacy-policy"
+        >
+          {privacyPolicyTitle}
+        </Link>,
+      );
+      textNodes.push(Array2[1]);
+      textNodes.push(
+        <Link
+          to={`/${orgSlug}/${component}/terms-and-conditions`}
+          className={`owisp-${component}-additional-link`}
+          key="terms-and-conditions"
+        >
+          {termsAndConditionsTitle}
+        </Link>,
+      );
+      textNodes.push(Array1[1]);
+    } else if (Array1[1].includes("{privacy_policy}")) {
+      const Array2 = Array1[1].split("{privacy_policy}");
+      textNodes.push(Array1[0]);
+      textNodes.push(
+        <Link
+          to={`/${orgSlug}/${component}/terms-and-conditions`}
+          className={`owisp-${component}-additional-link`}
+          key="terms-and-conditions"
+        >
+          {termsAndConditionsTitle}
+        </Link>,
+      );
+      textNodes.push(Array2[0]);
+      textNodes.push(
+        <Link
+          to={`/${orgSlug}/${component}/privacy-policy`}
+          className={`owisp-${component}-additional-link`}
+          key="privacy-policy"
+        >
+          {privacyPolicyTitle}
+        </Link>,
+      );
+      textNodes.push(Array2[1]);
+    } else {
+      textNodes.push(Array1[0]);
+      textNodes.push(
+        <Link
+          to={`/${orgSlug}/${component}/terms-and-conditions`}
+          className={`owisp-${component}-additional-link`}
+          key="terms-and-conditions"
+        >
+          {termsAndConditionsTitle}
+        </Link>,
+      );
+      textNodes.push(Array1[1]);
+    }
+  } else if (text.includes("{privacy_policy}")) {
+    const Array1 = text.split("{privacy_policy}");
+    textNodes.push(Array1[0]);
+    textNodes.push(
+      <Link
+        to={`/${orgSlug}/${component}/privacy-policy`}
+        className={`owisp-${component}-additional-link`}
+        key="privacy-policy"
+      >
+        {privacyPolicyTitle}
+      </Link>,
+    );
+    textNodes.push(Array1[1]);
+  } else {
+    textNodes.push(text);
+  }
+  return textNodes;
+};
+export default renderAdditionalInfo;
diff --git a/client/utils/utils.test.js b/client/utils/utils.test.js
new file mode 100644
index 00000000..2d2f3588
--- /dev/null
+++ b/client/utils/utils.test.js
@@ -0,0 +1,72 @@
+import customMerge from "./custom-merge";
+import renderAdditionalInfo from "./render-additional-info";
+
+describe("renderAdditionalInfo tests", () => {
+  let textObj = {en: "sample test"};
+  const language = "en";
+  const termsAndConditions = {title: {en: "title1"}};
+  const privacyPolicy = {title: {en: "title2"}};
+  const orgSlug = "default";
+  const component = "test";
+  it("should return expected output", () => {
+    let output = renderAdditionalInfo(
+      textObj,
+      language,
+      termsAndConditions,
+      privacyPolicy,
+      orgSlug,
+      component,
+    );
+    expect(output[0]).toEqual("sample test");
+    textObj = {en: "sample {terms_and_conditions} test"};
+    output = renderAdditionalInfo(
+      textObj,
+      language,
+      termsAndConditions,
+      privacyPolicy,
+      orgSlug,
+      component,
+    );
+    expect(output[1].props.children).toBe("title1");
+    textObj = {en: "sample {privacy_policy} test"};
+    output = renderAdditionalInfo(
+      textObj,
+      language,
+      termsAndConditions,
+      privacyPolicy,
+      orgSlug,
+      component,
+    );
+    expect(output[1].props.children).toBe("title2");
+    textObj = {en: "sample {privacy_policy} test {terms_and_conditions}"};
+    output = renderAdditionalInfo(
+      textObj,
+      language,
+      termsAndConditions,
+      privacyPolicy,
+      orgSlug,
+      component,
+    );
+    expect(output[1].props.children).toBe("title2");
+    expect(output[3].props.children).toBe("title1");
+
+    textObj = {en: "{terms_and_conditions} sample {privacy_policy} test"};
+    output = renderAdditionalInfo(
+      textObj,
+      language,
+      termsAndConditions,
+      privacyPolicy,
+      orgSlug,
+      component,
+    );
+    expect(output[1].props.children).toBe("title1");
+    expect(output[3].props.children).toBe("title2");
+  });
+});
+describe("customMerge tests", () => {
+  const arr1 = ["test1", "test2"];
+  const arr2 = ["test3", "test4"];
+  it("should return expected output", () => {
+    expect(customMerge(arr1, arr2)).toEqual(arr2);
+  });
+});
diff --git a/org-configurations/default-configuration.yml b/org-configurations/default-configuration.yml
index 13833d00..7bc890f9 100644
--- a/org-configurations/default-configuration.yml
+++ b/org-configurations/default-configuration.yml
@@ -21,12 +21,14 @@ client:
   # <title> value
   title: "Wifi Login"
 
+  auto_login: True
+
   # path of favicon
   favicon: null
 
   # path of the custom css file relative to organization's folder in
   # assets directory.
-  css_path: null
+  css_path: "index.css"
   languages:
     - text: "english"
       slug: "en"
@@ -63,7 +65,7 @@ client:
       input_fields:
         username:
           type: "text"
-          pattern: '[a-zA-Z@.+\-_]{1,150}'
+          pattern: '[a-zA-Z@.+\-_\d]{1,150}'
           pattern_description:
             en: "only letters, numbers, and @/./+/-/_ characters"
           placeholder:
@@ -99,7 +101,14 @@ client:
             en: "confirm"
       buttons:
         register:
-          en: 'sign up' # text for register button
+          label: null
+          text:
+            en: "sign up"
+      additional_info_text:
+        en: "By signing up, you accept the {terms_and_conditions} and the {privacy_policy} of this WiFi service. "
+      links:
+        login:
+          en: "Already have an account? Log in"
 
     reset_form:
       heading:
@@ -152,34 +161,54 @@ client:
           en: 'change password'
 
     login_form:
-      input_field:
+      header:
+        en: " sign in"
+      social_login:
+        divider_text:
+          en: "OR"
+        description:
+          en: "login with"
+        links:
+          -
+            text: null
+            url: null
+            icon: null #relative to organization's folder in assets directory.
+      input_fields:
         username:
           type: "text"
+          pattern: '[a-zA-Z@.+\-_\d]{1,150}'
+          pattern_description:
+            en: "only letters, numbers, and @/./+/-/_ characters"
           placeholder:
-            en: "Enter phone number or username"
+            en: "enter username"
           label:
-            en: "Phone number or username" # default username field label
-          pattern: null # pattern for validation
+            en: "username"
         password:
           type: "password"
+          pattern: ".{6,}"
+          pattern_description:
+            en: "password must be a minimum of 6 characters"
           placeholder:
-            en: "Enter password"
+            en: "password"
           label:
-            en: "Password" # default password field
-          pattern: null
+            en: "password"
+      additional_info_text:
+        en: "By logging in, you accept the {terms_and_conditions} and the {privacy_policy} of this WiFi service. "
       buttons:
         login:
-          label:
-            en: null # label field text for login button
-          value:
-            en: 'Login' # text for login button
-        register:
-          label:
-            en: null # label field text for register button
-          value:
-            en: 'Sign up for free' # text for register button
+          label: null
+          text:
+            en: "sign in"
       links:
-        - forget_password :
-            en: "Forgot your password?"
-        - account:
-            en: "Manage your account"
+        forget_password :
+          en: "Forgot your password?"
+        register:
+          en: "Not registered yet? Create an account"
+  privacy_policy:
+    title:
+      en: "privacy policy"
+    content: null
+  terms_and_conditions:
+    title:
+      en: "terms and conditions"
+    content: null
diff --git a/package-lock.json b/package-lock.json
index a85d2120..f26b16f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1496,6 +1496,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -1513,6 +1518,15 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
@@ -1556,6 +1570,25 @@
       "integrity": "sha512-b8bbUOTwzIY3V5vDTY1fIJ+ePKDUBqt2hC2woVGotdQQhG/2Sh62HOKHrT7ab+VerXAcPyAiTEipPu/FsreUtg==",
       "dev": true
     },
+    "@types/object-assign": {
+      "version": "4.0.30",
+      "resolved": "https://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
+      "integrity": "sha1-iUk3HVqZ9Dge4PHfCpt6GH4H5lI="
+    },
+    "@types/prop-types": {
+      "version": "15.7.1",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz",
+      "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg=="
+    },
+    "@types/react": {
+      "version": "16.8.23",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.23.tgz",
+      "integrity": "sha512-abkEOIeljniUN9qB5onp++g0EY38h7atnDHxwKUFz1r3VH1+yG1OKi2sNPTyObL40goBmfKFpdii2lEzwLX1cA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -3511,6 +3544,11 @@
         "cssom": "0.3.x"
       }
     },
+    "csstype": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz",
+      "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg=="
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -5079,13 +5117,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5102,8 +5138,7 @@
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -5232,7 +5267,6 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -9098,6 +9132,16 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-cookie": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.0.1.tgz",
+      "integrity": "sha512-h61qAtSXvfjNa81h3XCFdFoyFaF+nb7gjK0cxQuTiCPMPAe50D950FjLCFhaIfSpAesQFAmkxf5XFpWoEVBDAA==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.0.1",
+        "hoist-non-react-statics": "^3.0.0",
+        "universal-cookie": "^4.0.0"
+      }
+    },
     "react-dom": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
@@ -11051,6 +11095,17 @@
         "crypto-random-string": "^1.0.0"
       }
     },
+    "universal-cookie": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.2.tgz",
+      "integrity": "sha512-n14lhA//lQeYRweP9j9uXsshN9Cs4LunVSnvAGmnA69SofwsjpUU03geaCaPC9LlsH2rkBy99o3zxQyVOldGvA==",
+      "requires": {
+        "@types/cookie": "^0.3.3",
+        "@types/object-assign": "^4.0.30",
+        "cookie": "^0.4.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/package.json b/package.json
index 3e656695..93d5537e 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "prop-types": "^15.7.2",
     "qs": "^6.7.0",
     "react": "^16.8.6",
+    "react-cookie": "^4.0.1",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
     "react-redux": "^7.1.0",
@@ -96,5 +97,10 @@
       "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
       "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
     }
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "client/*"
+    ]
   }
 }