From 9fa3091ab127818bd5375e74ee9dd227375ae4f8 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Wed, 23 Dec 2020 03:37:26 +0200
Subject: [PATCH] login

---
 .env                                          |  1 +
 .../login/components/LoginContainer.js        | 21 ++++++----
 src/state/reducer.js                          | 18 ++++++++-
 src/utils/axios.js                            | 40 ++++++++++---------
 src/utils/identity.js                         | 13 ++++++
 5 files changed, 66 insertions(+), 27 deletions(-)
 create mode 100644 .env
 create mode 100644 src/utils/identity.js

diff --git a/.env b/.env
new file mode 100644
index 0000000..4f29f9a
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+REACT_APP_IDENTITY_AUTHENTICATION_URL=http://localhost:5063/identity/authenticate?UserName={username}&Password={password}
\ No newline at end of file
diff --git a/src/features/login/components/LoginContainer.js b/src/features/login/components/LoginContainer.js
index 8c704f8..206e569 100644
--- a/src/features/login/components/LoginContainer.js
+++ b/src/features/login/components/LoginContainer.js
@@ -1,20 +1,27 @@
-import React from "react";
+import React, { useContext } from "react";
 import LoginComponent from "./LoginComponent";
 import Button from "@material-ui/core/Button";
-import { useHistory } from "react-router-dom";
+import { authenticate } from "../../../utils/identity";
+import {
+  ApplicationStateContext,
+  ApplicationDispatchContext
+} from "../../../state/ApplicationContexts";
 
 const LoginContainer = () => {
-  const history = useHistory();
+  const state = useContext(ApplicationStateContext);
+  const dispatchActions = useContext(ApplicationDispatchContext);
 
-  const handleMove = () => {
-    history.push("about");
+  const handleLogin = async () => {
+    const { userName, password } = state.credentials;
+    const token = await authenticate(userName, password);
+    dispatchActions.onAuthorizationTokenChange(token);
   };
 
   return (
     <>
       <LoginComponent />
-      <Button variant="contained" color="primary" onClick={handleMove}>
-        Move
+      <Button variant="contained" color="primary" onClick={handleLogin}>
+        Login
       </Button>
     </>
   );
diff --git a/src/state/reducer.js b/src/state/reducer.js
index 2462eda..9542972 100644
--- a/src/state/reducer.js
+++ b/src/state/reducer.js
@@ -10,6 +10,20 @@ export function reducer(state, action) {
         }
       };
     }
+    case "onAuthorizationTokenChange": {
+      const { token } = action.payload;
+
+      return {
+        ...state,
+        security: {
+          ...state.security,
+          authorization: {
+            ...state.security.authorization,
+            token
+          }
+        }
+      };
+    }
     case "onNetworkChange": {
       const { prop, value } = action.payload;
       return {
@@ -30,5 +44,7 @@ export const dispatchActions = dispatch => ({
   onCredentialsChange: (prop, value) =>
     dispatch({ type: "onCredentialsChange", payload: { prop, value } }),
   onNetworkChange: (prop, value) =>
-    dispatch({ type: "onNetworkChange", payload: { prop, value } })
+    dispatch({ type: "onNetworkChange", payload: { prop, value } }),
+  onAuthorizationTokenChange: token =>
+    dispatch({ type: "onAuthorizationTokenChange", payload: { token } })
 });
diff --git a/src/utils/axios.js b/src/utils/axios.js
index 3043db0..70687dd 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -9,31 +9,33 @@ function getHeaders() {
 
   return {
     "Content-Type": "application/json",
-    Authorization: `Basic ${token}`,
+    Authorization: `Basic ${token.raw}`,
     "Accept-Language": `${language}`
   };
 }
 
-function internalRequest(url, options) {
-  return axios
-    .request(url, options)
-    .then(res => res.data)
-    .catch(function (error) {
-      if (error.response && error.response.data) {
-        throw (
-          {
-            ...error.response.data,
-            message: error.response.data.detail || error.response.data.title
-          } || error
-        );
-      }
-      // The request was made but no response was received
-      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-      // http.ClientRequest in node.js
-      throw error;
-    });
+async function internalRequest(url, options) {
+  try {
+    const res = await axios.request(url, options);
+    return res.data;
+  } catch (error) {
+    if (error.response && error.response.data) {
+      throw (
+        {
+          ...error.response.data,
+          message: error.response.data.detail || error.response.data.title
+        } || error
+      );
+    }
+    // The request was made but no response was received
+    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+    // http.ClientRequest in node.js
+    throw error;
+  }
 }
 
+export const request = (url, options) => internalRequest(url, options);
+
 export function post(url, data) {
   const options = {
     method: "post",
diff --git a/src/utils/identity.js b/src/utils/identity.js
new file mode 100644
index 0000000..c3a46ed
--- /dev/null
+++ b/src/utils/identity.js
@@ -0,0 +1,13 @@
+import { request } from "./axios";
+
+export const authenticate = (username, password) => {
+  const urlTemplate = process.env.REACT_APP_IDENTITY_AUTHENTICATION_URL;
+  const url = urlTemplate
+    .replace("{username}", username)
+    .replace("{password}", password);
+  const options = {
+    method: "post"
+  };
+
+  return request(url, options);
+};