@@ -117,6 +118,3 @@ const Home = () => {
};
export default Home;
-
-
-
diff --git a/src/pages/login/login.css b/src/pages/login/login.css
index f374fb1..9dbe3e5 100644
--- a/src/pages/login/login.css
+++ b/src/pages/login/login.css
@@ -10,17 +10,16 @@
} */
.container {
-
- font-family: 'Open Sans', sans-serif;
- color: var(--font-color);
- box-sizing: border-box;
- font-size: 16px;
- height: fit-content;
- display: flex;
- align-items: center;
- --font-color: #DCCAE9;
- justify-content: center;
- /* background: linear-gradient(90deg, rgba(44, 27, 71, 1) 0%, rgba(114, 76, 157, 1) 100%); */
+ font-family: "Open Sans", sans-serif;
+ color: var(--font-color);
+ box-sizing: border-box;
+ font-size: 16px;
+ height: fit-content;
+ display: flex;
+ align-items: center;
+ --font-color: #dccae9;
+ justify-content: center;
+ /* background: linear-gradient(90deg, rgba(44, 27, 71, 1) 0%, rgba(114, 76, 157, 1) 100%); */
}
/* body {
@@ -32,64 +31,65 @@
} */
.form {
- display: flex;
- flex-direction: column;
- /* background: rgba(0, 0, 0, .5); */
- box-sizing: border-box;
- /* box-shadow: 0 15px 25px rgba(0, 0, 0, .6); */
- border-radius: 1em;
- border: 1px solid var(--font-color);
- padding: 1em 2em;
+ display: flex;
+ flex-direction: column;
+ /* background: rgba(0, 0, 0, .5); */
+ box-sizing: border-box;
+ /* box-shadow: 0 15px 25px rgba(0, 0, 0, .6); */
+ border-radius: 1em;
+ border: 1px solid var(--font-color);
+ padding: 1em 2em;
}
.header {
- text-transform: uppercase;
- font-weight: normal;
- margin: 0 auto;
- font-size: 1.5em;
+ text-transform: uppercase;
+ font-weight: normal;
+ margin: 0 auto;
+ font-size: 1.5em;
}
.form__div {
- position: relative;
- padding: 2em;
+ position: relative;
+ padding: 2em;
}
input {
- width: 100%;
- background: transparent;
- color: var(--font-color);
- font-size: 18px;
- border: none;
- border-bottom: 2px solid var(--font-color);
- padding: 0.7em;
+ width: 100%;
+ background: transparent;
+ color: var(--font-color);
+ font-size: 18px;
+ border: none;
+ border-bottom: 2px solid var(--font-color);
+ padding: 0.7em;
}
.form__label {
- position: absolute;
- left: 2em;
- /* top: ; */
- transition: all 300ms ease;
+ position: absolute;
+ left: 2em;
+ /* top: ; */
+ z-index: -1;
+ transition: all 300ms ease;
}
-input:focus~.form__label,
-input:valid~.form__label {
- font-size: 14px;
- color: rgba(114, 76, 157, 1);
- top: 1em;
+input:focus ~ .form__label,
+input:valid ~ .form__label {
+ font-size: 14px;
+ color: rgba(114, 76, 157, 1);
+ top: 1em;
}
input:focus {
- outline: none;
+ outline: none;
}
.submite {
- width: 100%;
- color: #DCCAE9;
- border: 1px solid var(--font-color);
- border-radius: 5px;
- cursor: pointer;
+ width: 100%;
+ color: #dccae9;
+ border: 1px solid var(--font-color);
+ border-radius: 5px;
+ cursor: pointer;
}
.submite:hover {
- background: rgba(114, 76, 157, 1);
-}
\ No newline at end of file
+ background: rgba(114, 76, 157, 1);
+}
diff --git a/src/pages/login/login.js b/src/pages/login/login.js
index 4734cff..2fc47ee 100644
--- a/src/pages/login/login.js
+++ b/src/pages/login/login.js
@@ -3,81 +3,93 @@ import "./login.css";
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
-const Login = () => {
+const Login = (props) => {
- const navigate = useNavigate()
+ const [loading, setLoading] = useState(false)
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [fetchError, setFetchError] = useState(null);
+ const navigate = useNavigate()
const authRedirect = () => {
- if(localStorage.getItem("auth-token") !== null){
+ if (localStorage.getItem("auth-token") !== null) {
navigate("/ratings")
}
}
useEffect(() => {
// authRedirect();
-
+
},
[]
)
const handleSubmit = (e) => {
e.preventDefault();
- // setIsPending(true);
- const data = {username,password}
+ setLoading(true);
+ const data = { username, password }
fetch("https://cricwars.herokuapp.com/auth/token/login", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify(data),
}).then((res) => {
- if(!res.ok){
- console.log(res)
- setFetchError("Invalid Credentials!!!")
- throw Error("Could not fetch the data.");
- }
- return res.json();
+ if (!res.ok) {
+ props.toast.toast.error("Error: Invalid Credentials!")
+ setFetchError("Invalid Credentials!!!")
+ setLoading(false);
+ throw Error("Could not fetch the data.");
+ }
+ setLoading(false);
+ return res.json();
}).then((data) => {
- localStorage.setItem("auth-token",data.auth_token)
- localStorage.setItem("username",username)
+ localStorage.setItem("auth-token", data.auth_token)
+ localStorage.setItem("username", username)
setFetchError(null)
- navigate("/");
+ props.toast.toast.success("Logged in successfully!")
+ setTimeout(() => {
+ setLoading(false);
+ }, 1600)
+ setTimeout(() => {
+ navigate("/");
+ }, 1800)
});
- };
-
- return (
-