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

further api integrations

This commit is contained in:
Aydogdy Agabayev 2022-03-17 22:18:27 +05:00
parent 579f09386b
commit 6804323434
15 changed files with 214 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/backend/forgotPassword.js Normal file
View File

@ -0,0 +1,12 @@
import axios from "axios";
export const forgotPassword = (url, data, setState, unsetState) => {
axios
.post(url, data)
.then((res) => {
setState(res);
})
.catch(() => {
unsetState(false);
});
};

2
src/backend/sendRequest.js
View File

@ -25,7 +25,7 @@ export const sendRequest = (url, token, data, setState, setLoader) => {
axios
.post(`${url}?token=${token}`, form)
.then((res) => {
setState(res.data);
setState(res);
if (setLoader) {
setLoader(false);
}

23
src/components/CreditStages/CreditStage6.js
View File

@ -10,7 +10,13 @@ import next_reverse from "../../icons/next-reverse.svg";
import { sendRequest } from "../../backend/sendRequest";
import { getUserInfo } from "../../backend/getUserInfo";
const CreditStage6 = ({ setStage, data, setModalOpen, setLoader }) => {
const CreditStage6 = ({
setStage,
data,
setModalOpen,
setLoader,
setSuccess,
}) => {
const { setUser } = useContext(UserContext);
const token = localStorage.getItem("userToken");
const postUrl = "http://95.85.124.85:8000/api/online_credit";
@ -111,7 +117,20 @@ const CreditStage6 = ({ setStage, data, setModalOpen, setLoader }) => {
onClick={() => {
setModalOpen(false);
setLoader(true);
sendRequest(postUrl, token, data, () => null, setLoader);
sendRequest(
postUrl,
token,
data,
(res) => {
if (res.headers.status === "200") {
setSuccess(true);
setTimeout(() => {
setSuccess(false);
}, 2000);
}
},
setLoader
);
getUserInfo(getUrl, token, setUser, () => null);
}}
>

2
src/components/credits/CreditModal.js
View File

@ -28,6 +28,7 @@ const CreditModal = ({
stage,
setStage,
setLoader,
setSuccess,
}) => {
const window = useRef();
const [data, setData] = useState({});
@ -176,6 +177,7 @@ const CreditModal = ({
setData={setData}
setModalOpen={setModalOpen}
setLoader={setLoader}
setSuccess={setSuccess}
/>
) : (
""

18
src/components/global/Success.js Normal file
View File

@ -0,0 +1,18 @@
// IMPORT MODULES
import React from "react";
// IMPORT IMAGES
import { ReactComponent as Check } from "../../icons/check.svg";
const Success = ({ message }) => {
return (
<div className="success">
<div className="wrapper">
<Check />
</div>
<h1>{message}</h1>
</div>
);
};
export default Success;

11
src/components/passwordRec/Stage1.js
View File

@ -7,7 +7,7 @@ import Next from "../../icons/arrow-circle-right.svg";
// IMPORT HELPER
import { ValidateEmail } from "../../validators/ValidateEmail";
const Stage1 = ({ setRecStage }) => {
const Stage1 = ({ setRecStage, data, setData }) => {
const [inputValid, setInputValid] = useState({
email: false,
});
@ -15,7 +15,11 @@ const Stage1 = ({ setRecStage }) => {
const [validate, setValidate] = useState(false);
return (
<div className="recovery-block recovery-1">
<form>
<form
onSubmit={(e) => {
e.preventDefault();
}}
>
<h2 className="form-title">Восстановление пароля</h2>
<div className="reg-input-block rec-input">
<label htmlFor="mail">
@ -33,7 +37,7 @@ const Stage1 = ({ setRecStage }) => {
if (ValidateEmail(e.target.value)) {
setInputValid({
...inputValid,
email: true,
email: e.target.value,
});
} else {
setInputValid({
@ -57,6 +61,7 @@ const Stage1 = ({ setRecStage }) => {
type="button"
className="sign-btn"
onClick={() => {
setData({ ...data, email: inputValid.email });
setRecStage((prevStage) => prevStage + 1);
}}
>

47
src/components/passwordRec/Stage2.js
View File

@ -1,21 +1,25 @@
// IMPORT MODULES
import React, { useState, useEffect } from "react";
// IMPORT COMPONENTS
import Success from "../global/Success";
// IMPORT IMAGES
import Next from "../../icons/arrow-circle-right.svg";
// IMPORT HELPERS
import { ValidatePassword } from "../../validators/ValidatePassword";
import { forgotPassword } from "../../backend/forgotPassword";
const Stage2 = ({ setRecoveryOpen, setRecStage }) => {
const Stage2 = ({ setRecoveryOpen, setRecStage, data, setData, setLoader }) => {
const [inputValid, setInputValid] = useState({
newPassword: false,
confirm: false,
match: false,
});
const form = new FormData();
const [success, setSuccess] = useState(false);
const [valid, setValid] = useState(false);
const [input, setInput] = useState({
new: "",
confirm: "",
@ -38,9 +42,16 @@ const Stage2 = ({ setRecoveryOpen, setRecStage }) => {
}
}, [input]);
const postUrl = "http://95.85.124.85:8000/api/me";
return (
<div className="recovery-block recovery-2">
<form>
{success ? <Success message={"Пароль успешно изменен"} /> : null}
<form
onSubmit={(e) => {
e.preventDefault();
}}
>
<h2 className="form-title">Новый пароль</h2>
<div className="reg-input-block rec-input">
<label htmlFor="new-pass">
@ -58,7 +69,7 @@ const Stage2 = ({ setRecoveryOpen, setRecStage }) => {
if (ValidatePassword(e.target.value)) {
setInputValid({
...inputValid,
newPassword: true,
newPassword: e.target.value,
});
} else {
setInputValid({
@ -123,12 +134,26 @@ const Stage2 = ({ setRecoveryOpen, setRecStage }) => {
disabled={!btnEnabled}
type="button"
className="sign-btn"
onClick={(e) => {
e.preventDefault();
setRecoveryOpen(false);
setTimeout(() => {
setRecStage(1);
}, 400);
onClick={() => {
setData({ ...data, password: inputValid.newPassword });
setLoader(true);
form.append("email", data.email);
form.append("password", data.password);
form.append("password_confirmation", data.password);
forgotPassword(
postUrl,
form,
() => {
setSuccess(true);
setTimeout(() => {
setSuccess(false);
}, 2000);
setRecoveryOpen(false);
setRecStage(1);
setLoader(false);
},
setLoader
);
}}
>
<div>

39
src/components/sign/PasswordRec.js
View File

@ -1,40 +1,39 @@
// IMPORT MODULES
import React, { useState, useEffect, useRef } from "react";
import React, { useState, useRef } from "react";
// IMPORT PERSONAL COMPONENTS
import Stage1 from "../passwordRec/Stage1";
import Stage2 from "../passwordRec/Stage2";
// IMPORT COMPONENTS
import Loader from "../global/Loader";
const PasswordRec = ({ recoveryOpen, setRecoveryOpen }) => {
const [recStage, setRecStage] = useState(1);
const [data, setData] = useState({});
const [loader, setLoader] = useState(false);
const ref = useRef();
useEffect(() => {
if (!recoveryOpen) {
document.body.style.overflowY = "visible";
} else {
document.body.style.overflowY = "hidden";
}
window.addEventListener("mousedown", (e) => {
if (recoveryOpen && ref.current && !ref.current.contains(e.target)) {
setRecoveryOpen(false);
}
});
return () => {
window.removeEventListener("mousedown", () => {});
};
}, [recoveryOpen, setRecoveryOpen]);
return (
<section className={recoveryOpen ? "recovery active" : "recovery"}>
<section
className={recoveryOpen ? "recovery active" : "recovery"}
onClick={(e) => {
if (e.target.contains(ref.current)) {
setRecoveryOpen(false);
}
}}
>
<div className="recovery-container">
<div className="recovery-inner" ref={ref}>
{loader ? <Loader /> : null}
{recStage === 1 ? (
<Stage1 setRecStage={setRecStage} />
<Stage1 setRecStage={setRecStage} data={data} setData={setData} />
) : recStage === 2 ? (
<Stage2
setRecoveryOpen={setRecoveryOpen}
setRecStage={setRecStage}
data={data}
setData={setData}
setLoader={setLoader}
/>
) : (
""

5
src/icons/check.svg Normal file
View File

@ -0,0 +1,5 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 98.5 98.5" enable-background="new 0 0 98.5 98.5" xml:space="preserve">
<path class="checkmark" fill="none" stroke-width="8" stroke-miterlimit="10" d="M81.7,17.8C73.5,9.3,62,4,49.2,4
C24.3,4,4,24.3,4,49.2s20.3,45.2,45.2,45.2s45.2-20.3,45.2-45.2c0-8.6-2.4-16.6-6.5-23.4l0,0L45.6,68.2L24.7,47.3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 447 B

72
src/pages/Base.js
View File

@ -37,63 +37,23 @@ const Base = () => {
<th>Статус</th>
<th>Действие</th>
</tr>
{user
? user.online_credit.length !== 0
? user.online_credit.map((el, i) => {
return (
<tr key={i}>
<td>#{el.id}</td>
<td>{el.type}</td>
<td>{el.date}</td>
<td>--status</td>
<td>--action</td>
</tr>
);
})
: null
: null}
{user ? (
user.online_credit !== [] ? (
user.online_credit.map((el, i) => {
return (
<tr key={i}>
<td>#{el.id}</td>
<td>{el.type}</td>
<td>{el.date}</td>
<td>--status</td>
<td>--action</td>
</tr>
);
})
) : user ? (
user.online_card !== [] ? (
""
) : (
<tr>
<td>Заявок нет</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
)
) : (
<tr>
<td>Заявок нет</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
)
) : user ? (
user.online_card !== [] ? (
""
) : (
<tr>
<td>Заявок нет</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
)
) : (
<tr>
<td>Заявок нет</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
)}
{user ? (
user.online_card !== [] ? (
user.online_card.length !== 0 ? (
user.online_card.map((el, i) => {
return (
<tr key={i}>

22
src/pages/Cards.js
View File

@ -68,21 +68,19 @@ const Cards = () => {
<th>Действие</th>
</tr>
{user ? (
user.online_card !== [] ? (
user.online_card.length !== 0 ? (
user.online_card.map((el, i) => {
return (
<tr key={i}>
<td>#{el.id}</td>
<td>{el.selected_card}</td>
<td>{el.date}</td>
<td>--status</td>
<td>--action</td>
</tr>
);
<tr key={i}>
<td>#{el.id}</td>
<td>{el.selected_card}</td>
<td>{el.date}</td>
<td>--status</td>
<td>--action</td>
</tr>;
})
) : (
<tr>
<td>Заявок на карту нет</td>
<td>Заявок на карты нет</td>
<td></td>
<td></td>
<td></td>
@ -91,7 +89,7 @@ const Cards = () => {
)
) : (
<tr>
<td>Заявок на карту нет</td>
<td>Заявок на карты нет</td>
<td></td>
<td></td>
<td></td>

26
src/pages/Credits.js
View File

@ -6,12 +6,14 @@ import { UserContext } from "../backend/UserContext";
import Breadcrumb from "../components/global/Breadcrumb";
import CreditModal from "../components/credits/CreditModal";
import Loader from "../components/global/Loader";
import Success from "../components/global/Success";
// IMPORT IMAGES
import credit from "../icons/credit-black.svg";
import add from "../icons/add.svg";
const Credits = () => {
const [success, setSuccess] = useState(false);
const { user } = useContext(UserContext);
const [modalOpen, setModalOpen] = useState(false);
const [stage, setStage] = useState(1);
@ -26,6 +28,7 @@ const Credits = () => {
return (
<section className="cards">
{success ? <Success message={"ASDASDASD"} /> : null}
<Breadcrumb image={credit} link={"/home/credits"} linkTitle={"Кредиты"} />
<CreditModal
setModalOpen={setModalOpen}
@ -34,6 +37,7 @@ const Credits = () => {
setStage={setStage}
loader={loader}
setLoader={setLoader}
setSuccess={setSuccess}
/>
{loader ? <Loader /> : null}
<div className="container">
@ -65,21 +69,19 @@ const Credits = () => {
<th>Действие</th>
</tr>
{user ? (
user.online_credit !== [] ? (
user.online_credit.length !== 0 ? (
user.online_credit.map((el, i) => {
return (
<tr key={i}>
<td>#{el.id}</td>
<td>{el.type}</td>
<td>{el.date}</td>
<td>--status</td>
<td>--action</td>
</tr>
);
<tr key={i}>
<td>#{el.id}</td>
<td>{el.type}</td>
<td>{el.date}</td>
<td>--status</td>
<td>--action</td>
</tr>;
})
) : (
<tr>
<td>Заявок на карту нет</td>
<td>Заявок на кредиты нет</td>
<td></td>
<td></td>
<td></td>
@ -88,7 +90,7 @@ const Credits = () => {
)
) : (
<tr>
<td>Заявок на карту нет</td>
<td>Заявок на кредиты нет</td>
<td></td>
<td></td>
<td></td>

11
src/styles/_sing-in.scss
View File

@ -171,6 +171,17 @@
}
}
.recovery-inner {
position: relative;
.loader {
border-radius: 0.5rem;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
width: 100%;
height: 100%;
}
}
.recovery-container {
width: 100%;
max-width: 58rem;

40
src/styles/_success.scss Normal file
View File

@ -0,0 +1,40 @@
.success {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5rem;
position: fixed;
background: #fff;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 9000;
h1 {
font-size: 4rem;
color: $base-green;
}
}
.wrapper {
width: 100px;
margin: 4em auto 0;
}
.checkmark {
stroke: $base-green;
stroke-dashoffset: 745.74853515625;
stroke-dasharray: 745.74853515625;
animation: dash 2s ease-out forwards infinite;
}
@keyframes dash {
0% {
stroke-dashoffset: 745.74853515625;
}
100% {
stroke-dashoffset: 0;
}
}

1
src/styles/style.scss
View File

@ -21,3 +21,4 @@
@import "./profile";
@import "./modal-form";
@import "./credit-modal";
@import "./success.scss";