login.html
<!-- This codebase desgin according to mozilla open source license.
Redistribution , contribution and improve codebase under license
convensions. @contact Ali Hassan AliMatrixCode@protonmail.com -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Roboto+Mono:wght@500&display=swap"
rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<link rel="stylesheet" type="text/css" href="/css/login.css">
<title>Wizdwarfs</title>
</head>
<body style=" background-color: white;">
<div class="container"
style="border: 1px solid gray; width: 50%; display: flex; flex-direction: column; justify-content: center; margin-top: 40px; border-radius: 31px; position: relative; transform-style: preserve-3d;top:80px;box-shadow: 7px 7px whitesmoke;">
<img src="/images/logo.png" alt="WizDwarfs"
style="width: 35%; align-self: center;height: 50%; margin-top: 20px; margin-bottom: 20px; align-self: center;" />
<h4 style="text-align: center; font-family: 'Roboto Mono', monospace; color: #424242;">Login</h4>
<form action="/login" method="post" class="login-form" style="margin-top: 20px; font-family: 'Lato', sans-serif;">
<div class="form-row align-items-center"
style="text-rendering: geometricPrecision; display: flex; justify-content: center;">
<div class="form-group has-search" style="width: 80%;">
<span class="fa fa-user-circle-o form-control-feedback"
style="position: absolute; z-index: 2; display: block; width: 2.375rem;
height: 2.375rem; line-height: 2.375rem; text-align: center; pointer-events: none; color: black; background: #ced4da; border-radius: 6px;"></span>
<input type="email" class="form-control emailclass" id="inlineFormInput" placeholder="Email" name="email"
style="padding-left: 55px; box-shadow: 5px 5px whitesmoke;">
</div>
<div class="form-group has-search" style="width: 80%;">
<span class="fa fa-lock form-control-feedback"
style="position: absolute; z-index: 2; display: block; width: 2.375rem;
height: 2.375rem; line-height: 2.375rem; text-align: center; pointer-events: none; color: black; background: #ced4da; border-radius: 6px;"></span>
<input type="password" class="form-control passclass" id="inlineFormInput" placeholder="Password" name="password"
style="padding-left: 55px;box-shadow: 5px 5px whitesmoke;">
</div>
<div class="mt-3 mb-3" style="width: 80%;">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="autoSizingCheck" name="check" style="box-shadow: 5px 5px whitesmoke;">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
<input class="form-check-input" type="checkbox" id="legalTerms" name="terms" style="box-shadow: 5px 5px whitesmoke;position: absolute;left: 325px;">
<a href="/terms" alt="legal_terms" style="position: absolute;left: 332px;"> I'm obligate </a>
</div>
</div>
<div class="col-auto" style=" width: 80%; display: flex; justify-content: center; margin-bottom: 25px;">
<button type="submit" class="btn btn-success mb-2"
style="width: 45%; background-color: #31dc58; border-radius: 41px; box-shadow: 5px 5px whitesmoke;">
<i class="fa fa-sign-in" aria-hidden="true"></i>
</button>
</div>
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script type="text/javascript">
// weblocal "browser cache"
const weblocal = window.localStorage;
weblocal.length > 0 ? weblocal.clear() : weblocal.getItem(0);
// credentials states
const pass_option = document.getElementsByClassName('form-check-input')[0];
const email = document.getElementsByClassName('emailclass')[0];
const password = document.getElementsByClassName('passclass')[0];
const htmlcontent = document.getElementsByClassName('form-check-label')[0];
navigator.permissions.query({name:'geolocation'}).then((result)=>{
if(result.state === 'granted'){
alert("Please Reset Permissions");
}else if(result.state === 'denied'){
alert('Change your permission to denied');
}else{
alert('Permission in default mode');
}
});
pass_option.addEventListener('change', (event) =>{
navigator.credentials.store(new PasswordCredential({
id : email.value,
password : password.value,
})).then(() =>{
navigator.credentials.get({password : true}).then(() =>{
htmlcontent.innerHTML = "Your password have saved now";
htmlcontent.style.color = "green";
}).catch((event) =>{
htmlcontent.innerHTML = "Week password! reset Please";
htmlcontent.style.color = "red";
alert("Error:", event)});
}).catch((event)=>{
alert("Operation Failed" + event.message);
});
});
</script>
</body>
</html>