add basic login flow

bk_api/bk_api/settings.py

@@ -33,7 +33,8 @@ REST_FRAMEWORK = {
         'rest_framework.permissions.IsAuthenticated',
         # 'rest_framework.permissions.AllowAny',
     ],
-    'DEFAULT_AUTHENTICATION_CLASSES': ('knox.auth.TokenAuthentication',  'rest_framework.authentication.SessionAuthentication'),
+    'DEFAULT_AUTHENTICATION_CLASSES': ['knox.auth.TokenAuthentication'],
+    # 'DEFAULT_AUTHENTICATION_CLASSES': ('knox.auth.TokenAuthentication',  'rest_framework.authentication.SessionAuthentication'),
     # 'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
     # 'PAGE_SIZE': 10
 }

bk_webapp/package-lock.json

@@ -8038,11 +8038,6 @@
         }
       }
     },
-    "js-cookie": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
-    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -13304,6 +13299,11 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-global-hook": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/use-global-hook/-/use-global-hook-0.1.12.tgz",
+      "integrity": "sha512-KhsWfDaa4jXgGHKDSxmBP0GjnIs5ad12y1vhl5mGBDcIiFfj3oB9vdfZZZCCPlZ14gI+tjCKZtb82+bPEwj3Iw=="
+    },
     "util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",

bk_webapp/package.json

@@ -7,14 +7,14 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.0",
-    "js-cookie": "^2.2.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-minimal-pie-chart": "^6.0.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
     "semantic-ui-calendar-react": "^0.15.3",
-    "semantic-ui-react": "^0.88.2"
+    "semantic-ui-react": "^0.88.2",
+    "use-global-hook": "^0.1.12"
   },
   "scripts": {
     "start": "react-scripts start",

bk_webapp/src/screens/Login/Login.jsx

@@ -1,16 +1,17 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Button,
   Form,
   Grid,
   Segment,
   Container,
-  Image
+  Image,
+  Message
 } from "semantic-ui-react";
 import { useHistory } from "react-router-dom";
 import axios from "axios";
-import Cookies from "js-cookie";
 
+import useGlobal from "../../utils/global_state";
 import logo from "../../img/logo_project.svg";
 import "./Login.css";
 
@@ -18,49 +19,18 @@ function Login() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const history = useHistory();
+  const [globalState, globalActions] = useGlobal();
 
   const handleSubmit = () => {
-    // console.log(process.env);
-    const bodyFormData = new FormData();
-    bodyFormData.set("username", username);
-    bodyFormData.set("password", password);
-
-    axios({
-      method: "get",
-      url: "http://api.app.localhost.pl/api-auth/login/",
-      withCredentials: true
-      // data: bodyFormData,
-      // headers: { "Content-Type": "multipart/form-data" }
-    })
-      .then(function(response) {
-        //handle success
-        console.log("success");
-        const csrfToken = Cookies.get("csrftoken");
-        console.log(csrfToken);
-        axios({
-          method: "post",
-          url: "http://api.app.localhost.pl/api-auth/login/",
-          withCredentials: true,
-          data: bodyFormData,
-          // headers: { "X-CSRFToken": csrfToken },
-          xsrfCookieName: "XSRF-TOKEN",
-          xsrfHeaderName: "X-CSRFToken"
-        })
-          .then(resp => {
-            console.log("success x 2!!!");
-            console.log(resp);
-          })
-          .catch(err => {
-            console.log(err);
-          });
-      })
-      .catch(function(response) {
-        //handle error
-        console.log("error");
-        console.log(response);
-      });
+    globalActions.login({ username, password });
   };
 
+  useEffect(() => {
+    if (globalState.is_authenticated) {
+      history.push("/home");
+    }
+  });
+
   return (
     <Container className="login-container">
       <Grid columns={1} verticalAlign="middle" style={{ height: "100%" }}>
@@ -98,6 +68,11 @@ function Login() {
               </Button>
             </Form>
           </Segment>
+          {globalState.auth_error != "" && (
+            <Message>
+              <p>Błąd: {globalState.auth_error}</p>
+            </Message>
+          )}
         </Grid.Column>
       </Grid>
     </Container>

bk_webapp/src/utils/global_state.js

@@ -0,0 +1,39 @@
+import React from "react";
+import globalHook from "use-global-hook";
+import axios from "axios";
+
+const initialState = {
+  auth_token: "",
+  auth_error: "",
+  is_authenticated: false
+};
+
+const actions = {
+  login: (store, { username, password }) => {
+    console.log("Try to login...");
+    axios
+      .post("/api/auth/login/", { username: username, password: password })
+      .then(resp => {
+        console.log(resp.data);
+        const newToken = resp.data.token;
+        store.setState({
+          auth_token: newToken,
+          is_authenticated: true,
+          auth_error: ""
+        });
+      })
+      .catch(err => {
+        console.log(err);
+        store.setState({
+          auth_error: "Podany login i/lub hasło są nieprawidłowe.",
+          is_authenticated: false
+        });
+      });
+  },
+  logout: store => {
+    console("logout");
+  }
+};
+
+const useGlobal = globalHook(React, initialState, actions);
+export default useGlobal;