login

.env

@@ -0,0 +1 @@
+REACT_APP_IDENTITY_AUTHENTICATION_URL=http://localhost:5063/identity/authenticate?UserName={username}&Password={password}

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>
     </>
   );

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 } })
 });

src/utils/axios.js

@@ -9,16 +9,16 @@ 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) {
+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 (
         {
@@ -31,8 +31,10 @@ function internalRequest(url, options) {
     // `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 = {

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);
+};