Finish Login Data Request

This commit is contained in:
Modo 2023-10-15 01:31:54 +05:30
parent d2874f9424
commit 33026f6a9e
3 changed files with 102 additions and 0 deletions

View File

@ -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>

View File

@ -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)
}
}

View File

@ -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;
}