From 6eebfce42aca35896143796ff254b93a36c40e14 Mon Sep 17 00:00:00 2001 From: Stanislaw-Golebiewski Date: Sun, 12 Jan 2020 22:02:06 +0100 Subject: [PATCH] add basic login flow --- bk_api/bk_api/settings.py | 3 +- bk_webapp/package-lock.json | 10 ++--- bk_webapp/package.json | 4 +- bk_webapp/src/screens/Login/Login.jsx | 59 ++++++++------------------- bk_webapp/src/utils/global_state.js | 39 ++++++++++++++++++ 5 files changed, 65 insertions(+), 50 deletions(-) create mode 100644 bk_webapp/src/utils/global_state.js diff --git a/bk_api/bk_api/settings.py b/bk_api/bk_api/settings.py index 7976381..73a0a7f 100644 --- a/bk_api/bk_api/settings.py +++ b/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 } diff --git a/bk_webapp/package-lock.json b/bk_webapp/package-lock.json index c0516b7..43c276e 100644 --- a/bk_webapp/package-lock.json +++ b/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", diff --git a/bk_webapp/package.json b/bk_webapp/package.json index 1e0db28..4ecfb2d 100644 --- a/bk_webapp/package.json +++ b/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", diff --git a/bk_webapp/src/screens/Login/Login.jsx b/bk_webapp/src/screens/Login/Login.jsx index f5f6b51..e4024d2 100644 --- a/bk_webapp/src/screens/Login/Login.jsx +++ b/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 ( @@ -98,6 +68,11 @@ function Login() { + {globalState.auth_error != "" && ( + +

Błąd: {globalState.auth_error}

+ + )} diff --git a/bk_webapp/src/utils/global_state.js b/bk_webapp/src/utils/global_state.js new file mode 100644 index 0000000..951bebb --- /dev/null +++ b/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;