TPS
/
halkbank_shahsyotag_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

user token saved, login handled

This commit is contained in:
Aydogdy Agabayev 2022-02-22 16:08:15 +05:00
parent b8e46b43fc
commit 1519eec83e
10 changed files with 138 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -3,3 +3,4 @@
- React
- SCSS
- react-router-dom
- Axios

29
package-lock.json generated
View File

@ -11,6 +11,7 @@
"@testing-library/jest-dom": "5.16.1",
"@testing-library/react": "12.1.2",
"@testing-library/user-event": "13.5.0",
"axios": "^0.26.0",
"node-sass": "^7.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
@ -4460,6 +4461,14 @@
"node": ">=4"
}
},
"node_modules/axios": {
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
"integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
"dependencies": {
"follow-redirects": "^1.14.8"
}
},
"node_modules/axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@ -7656,9 +7665,9 @@
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
},
"node_modules/follow-redirects": {
"version": "1.14.7",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
"integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
"funding": [
{
"type": "individual",
@ -20499,6 +20508,14 @@
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.0.tgz",
"integrity": "sha512-btWy2rze3NnxSSxb7LtNhPYYFrRoFBfjiGzmSc/5Hu47wApO2KNXjP/w7Nv2Uz/Fyr/pfEiwOkcXhDxu0jz5FA=="
},
"axios": {
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
"integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
"requires": {
"follow-redirects": "^1.14.8"
}
},
"axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@ -22886,9 +22903,9 @@
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
},
"follow-redirects": {
"version": "1.14.7",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
"integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
},
"forever-agent": {
"version": "0.6.1",

1
package.json
View File

@ -6,6 +6,7 @@
"@testing-library/jest-dom": "5.16.1",
"@testing-library/react": "12.1.2",
"@testing-library/user-event": "13.5.0",
"axios": "^0.26.0",
"node-sass": "^7.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",

46
src/App.js
View File

@ -1,6 +1,10 @@
// IMPORT MODULES
import React from "react";
import React, { useState, useEffect, useMemo } from "react";
import { Routes, Route } from "react-router-dom";
import { UserContext } from "./backend/UserContext";
// IMPORT FUNCTIONS
import { getUserInfo } from "./backend/getUserInfo";
// IMPORT STYLES
import "./styles/style.scss";
@ -20,20 +24,34 @@ import SignUp from "./pages/SignUp";
import Home from "./pages/Home";
const App = () => {
const loginUrl = "http://95.85.124.85:8000/api/me";
const [user, setUser] = useState();
const providerValue = useMemo(() => ({ user, setUser }), [user, setUser]);
useEffect(() => {
const userToken = localStorage.getItem("userToken");
if (userToken) {
getUserInfo(loginUrl, userToken, setUser);
}
}, []);
return (
<div className="App">
<Routes>
<Route path="/" element={<Main />} />
<Route path="/sign-in" element={<SignIn />} />
<Route path="/sign-up" element={<SignUp />} />
<Route path="/home" element={<Home ChildEl={Base} />} />
<Route path="/home/cards" element={<Home ChildEl={Cards} />} />
<Route path="/home/credits" element={<Home ChildEl={Credits} />} />
<Route path="/home/contact-us" element={<Home ChildEl={ContactUs} />} />
<Route path="/home/recovery" element={<Home ChildEl={Recovery} />} />
<Route path="/home/profile" element={<Home ChildEl={Profile} />} />
</Routes>
</div>
<UserContext.Provider value={providerValue}>
<div className="App">
<Routes>
<Route path="/" element={<Main />} />
<Route path="/sign-in" element={<SignIn />} />
<Route path="/sign-up" element={<SignUp />} />
<Route path="/home" element={<Home ChildEl={Base} />} />
<Route path="/home/cards" element={<Home ChildEl={Cards} />} />
<Route path="/home/credits" element={<Home ChildEl={Credits} />} />
<Route
path="/home/contact-us"
element={<Home ChildEl={ContactUs} />}
/>
<Route path="/home/recovery" element={<Home ChildEl={Recovery} />} />
<Route path="/home/profile" element={<Home ChildEl={Profile} />} />
</Routes>
</div>
</UserContext.Provider>
);
};

4
src/backend/UserContext.js Normal file
View File

@ -0,0 +1,4 @@
// IMPORT MODULES
import { createContext } from "react";
export const UserContext = createContext(null);

15
src/backend/getUserInfo.js Normal file
View File

@ -0,0 +1,15 @@
// IMPORT MODULES
import axios from "axios";
export const getUserInfo = (url, userToken, setState) => {
axios.get(`${url}?token=${userToken}`).then((res, err) => {
if (err) {
return `Failed to fetch user info: ${err}`;
}
if (setState) {
setState(res.data);
} else {
return res.data;
}
});
};

11
src/backend/loginUser.js Normal file
View File

@ -0,0 +1,11 @@
// IMPORT MODULES
import axios from "axios";
export const loginUser = (url, formData, setState, tokenSaved) => {
axios.post(url, formData).then((res, err) => {
setState(res.data.user);
if (tokenSaved) {
localStorage.setItem("userToken", res.data.token);
}
});
};

29
src/components/sign/SignForm.js
View File

@ -6,15 +6,16 @@ import { Link } from "react-router-dom";
import logout from "../../icons/logout.svg";
import up from "../../icons/clipboard.svg";
const SignForm = ({ setRecoveryOpen }) => {
const SignForm = ({ setRecoveryOpen, setFormData }) => {
const data = new FormData();
const [inputValid, setInputValid] = useState({
login: false,
password: false,
login: null,
password: null,
});
const [btnEnabled, setBtnEnabled] = useState(false);
useEffect(() => {
if (inputValid.login === true && inputValid.password === true) {
if (inputValid.login && inputValid.password) {
setBtnEnabled(true);
} else {
setBtnEnabled(false);
@ -38,9 +39,10 @@ const SignForm = ({ setRecoveryOpen }) => {
name="login"
onChange={(e) => {
if (e.target.value !== "") {
setInputValid({ ...inputValid, login: true });
setInputValid({ ...inputValid, login: e.target.value });
data.append("username", e.target.value);
} else {
setInputValid({ ...inputValid, login: false });
setInputValid({ ...inputValid, login: null });
}
}}
/>
@ -54,9 +56,9 @@ const SignForm = ({ setRecoveryOpen }) => {
id="password"
onChange={(e) => {
if (e.target.value.length >= 8) {
setInputValid({ ...inputValid, password: true });
setInputValid({ ...inputValid, password: e.target.value });
} else {
setInputValid({ ...inputValid, password: false });
setInputValid({ ...inputValid, password: null });
}
}}
/>
@ -75,7 +77,16 @@ const SignForm = ({ setRecoveryOpen }) => {
</div>
</div>
<div className="sign-bottom">
<button disabled={!btnEnabled} type="button" className="sign-btn">
<button
disabled={!btnEnabled}
type="button"
className="sign-btn"
onClick={() => {
data.append("username", inputValid.login);
data.append("password", inputValid.password);
setFormData(data);
}}
>
<div>
<h3>Войти</h3>
<div className="btn-img">

2
src/pages/Base.js
View File

@ -1,5 +1,5 @@
// IMPORT MODULES
import React, { useEffect } from "react";
import React from "react";
// IMPORT COMPONENTS
import Breadcrumb from "../components/global/Breadcrumb";

32
src/pages/SignIn.js
View File

@ -1,5 +1,10 @@
// IMPORT MODULES
import React, { useState } from "react";
import React, { useState, useContext, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../backend/UserContext";
// IMPORT FUNCTIONS
import { loginUser } from "../backend/loginUser";
// IMPORT COMPONENTS
import LogoBg from "../components/global/LogoBg";
@ -11,7 +16,27 @@ import SignForm from "../components/sign/SignForm";
import PasswordRec from "../components/sign/PasswordRec";
const SignIn = () => {
const checkFirstLoad = useRef(true);
const postUrl = "http://95.85.124.85:8000/api/login";
const [formData, setFormData] = useState();
const { user, setUser } = useContext(UserContext);
const [recoveryOpen, setRecoveryOpen] = useState(false);
const navigate = useNavigate();
useEffect(() => {
if (user) {
navigate("/home");
} else {
navigate("/sign-in");
}
}, [user]);
useEffect(() => {
if (checkFirstLoad.current) {
checkFirstLoad.current = false;
} else {
loginUser(postUrl, formData, setUser, true);
}
}, [formData]);
return (
<section className="sign-in">
<PasswordRec
@ -22,7 +47,10 @@ const SignIn = () => {
<LogoBg />
<div className="container">
<div className="sign-in-inner">
<SignForm setRecoveryOpen={setRecoveryOpen} />
<SignForm
setRecoveryOpen={setRecoveryOpen}
setFormData={setFormData}
/>
</div>
</div>
<Footer />