Finish Login Data Request
This commit is contained in:
parent
d2874f9424
commit
33026f6a9e
@ -31,6 +31,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="error">
|
||||||
|
<label id="errlabel"></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<button id="loginb">Login</button>
|
<button id="loginb">Login</button>
|
||||||
</div>
|
</div>
|
||||||
@ -39,4 +43,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
<footer>HI</footer>
|
||||||
</html>
|
</html>
|
||||||
|
@ -0,0 +1,74 @@
|
|||||||
|
let loginb = document.getElementById("loginb");
|
||||||
|
let _username;
|
||||||
|
let _password;
|
||||||
|
|
||||||
|
loginb.addEventListener("click", validateLogin);
|
||||||
|
|
||||||
|
function validateName() {
|
||||||
|
var name = document.getElementById("username").value;
|
||||||
|
if(name=='' || name==null){
|
||||||
|
// console.log("falsevn");
|
||||||
|
document.getElementById("errlabel").innerHTML = "Enter Username!";
|
||||||
|
setTimeout(()=> {
|
||||||
|
document.getElementById("errlabel").innerHTML = "";
|
||||||
|
},3000)
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
// console.log("truevn");
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function validatePass() {
|
||||||
|
var pass = document.getElementById("password").value;
|
||||||
|
if(pass=='' || pass==null){
|
||||||
|
// console.log("falsevp");
|
||||||
|
document.getElementById("errlabel").innerHTML = "Enter Password!";
|
||||||
|
setTimeout(()=> {
|
||||||
|
document.getElementById("errlabel").innerHTML = "";
|
||||||
|
},3000)
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
// console.log("truevp");
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateLogin() {
|
||||||
|
if(validateName() && validatePass()) {
|
||||||
|
getLD();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getLD() {
|
||||||
|
_username = document.getElementById("username").value;
|
||||||
|
_mpassword = document.getElementById("password").value;
|
||||||
|
let loginData = {
|
||||||
|
user_name: _username,
|
||||||
|
password: _password
|
||||||
|
}
|
||||||
|
fetch('http://127.0.0.1:5000', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(loginData)
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
handleAuthRes(data);
|
||||||
|
})
|
||||||
|
.catch(error => console.log(`You have ${error}`))
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAuthRes(data) {
|
||||||
|
if(data.token){
|
||||||
|
localStorage.setItem('token', token.data);
|
||||||
|
console.log("Logged In...")
|
||||||
|
} else {
|
||||||
|
console.error('Login Failed:', data.error)
|
||||||
|
}
|
||||||
|
}
|
@ -11,6 +11,7 @@ body {
|
|||||||
background-image: url("bg.jpg");
|
background-image: url("bg.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
@ -117,12 +118,25 @@ body {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.help div{
|
.help div{
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error label {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
justify-content: center;
|
||||||
|
translate: -50% 3px;
|
||||||
|
color: rgba(184, 156, 255, 0.9);
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
font-style: bold;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
@ -134,3 +148,11 @@ a {
|
|||||||
a:active {
|
a:active {
|
||||||
color: rgb(196, 196, 196, 10);
|
color: rgb(196, 196, 196, 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
background-color: rgb(12, 12, 12);
|
||||||
|
height: 50px;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user