mirror of
https://github.com/slynn1324/tinypin
synced 2026-05-03 17:40:28 +00:00
slynn1324
126 lines
4.5 KiB
HTML
126 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>tinypin</title>
|
|
<meta charset="utf-8">
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="pub/icons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="pub/icons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="pub/icons/favicon-16x16.png">
|
|
<link rel="manifest" href="pub/icons/site.webmanifest">
|
|
<link rel="mask-icon" href="pub/icons/safari-pinned-tab.svg" color="#5bbad5">
|
|
<link rel="shortcut icon" href="pub/icons/favicon.ico">
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
|
<meta name="msapplication-config" content="pub/icons/browserconfig.xml">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<link rel="stylesheet" href="pub/bulma-custom.css" />
|
|
</head>
|
|
<body>
|
|
<div class="modal is-active">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">tinypin » create account</p>
|
|
</header>
|
|
<form method="post" action="register">
|
|
<section class="modal-card-body">
|
|
|
|
<div class="field">
|
|
<label class="label" for="username">username</label>
|
|
<div class="control">
|
|
<input class="input" name="username" id="username" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label" for="password">password</label>
|
|
<div class="control">
|
|
<input class="input" name="password" id="password" type="password">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label" for="repeat-password">repeat password</label>
|
|
<div class="control">
|
|
<input class="input" name="repeat-password" id="repeat-password" type="password">
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<footer class="modal-card-foot">
|
|
<button id="submitButton" class="button is-success" disabled type="submit">create account</button>
|
|
<a class="button" href="login.html">login</a>
|
|
</footer>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<script>
|
|
|
|
const username = document.getElementById("username");
|
|
const password = document.getElementById("password");
|
|
const passwordRepeat = document.getElementById("repeat-password");
|
|
const submitButton = document.getElementById("submitButton");
|
|
|
|
const validate = () => {
|
|
|
|
let valid = true;
|
|
|
|
if ( username.value.length < 1 ){
|
|
if ( username.getAttribute("data-visited") == "y" ){
|
|
username.classList.add("is-danger");
|
|
}
|
|
valid = false;
|
|
} else {
|
|
username.classList.remove("is-danger");
|
|
}
|
|
|
|
if ( password.value.length < 1 ){
|
|
if ( password.getAttribute("data-visited") == "y" ){
|
|
password.classList.add("is-danger");
|
|
}
|
|
valid = false;
|
|
} else {
|
|
password.classList.remove('is-danger');
|
|
}
|
|
|
|
if ( password.value != passwordRepeat.value ){
|
|
if ( passwordRepeat.getAttribute("data-visited") == "y" ){
|
|
passwordRepeat.classList.add("is-danger");
|
|
}
|
|
valid = false;
|
|
} else {
|
|
passwordRepeat.classList.remove("is-danger");
|
|
}
|
|
|
|
if ( valid ){
|
|
submitButton.disabled = false;
|
|
} else {
|
|
submitButton.disabled = true;
|
|
}
|
|
|
|
}
|
|
|
|
document.addEventListener('input', validate);
|
|
document.addEventListener('focusin', (evt) => {
|
|
if ( evt.target == username ){
|
|
username.setAttribute("data-visited", "y");
|
|
} else if ( evt.target == password ){
|
|
password.setAttribute("data-visited", "y");
|
|
} else if ( evt.target == passwordRepeat ){
|
|
passwordRepeat.setAttribute("data-visited", "y");
|
|
}
|
|
});
|
|
document.addEventListener('focusout', (evt) => {
|
|
validate();
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |