De-jquery the javascript

This commit is contained in:
Las Zenow 2021-04-30 16:48:38 +00:00
parent 836a71b2d0
commit 867c19f97c
3 changed files with 22 additions and 23 deletions

View file

@ -22,3 +22,8 @@ a {
body { body {
background: url(/img/bright_squares.png) repeat 0 0; background: url(/img/bright_squares.png) repeat 0 0;
} }
iframe {
width: 100%;
height: 1080px;
border: none;
}

View file

@ -1,22 +1,16 @@
{{template "header.html" .S}} {{template "header.html" .S}}
<script> <script>
$(document).ready(function () {
$("#passCheck").keyup(checkPasswordMatch);
});
function checkPasswordMatch() { function checkPasswordMatch() {
var password = $("#pass").val(); var password = document.forms["createAccount"]["pass"].value;
var confirmPassword = $("#confirmPass").val(); var confirmPassword = document.forms["createAccount"]["confirmPass"].value;
if (password != confirmPassword) { if (password != confirmPassword) {
$("#passCheck").removeClass("success"); document.getElementById("confirmPass").classList.remove("is-valid");
$("#passCheck").addClass("error"); document.getElementById("confirmPass").classList.add("is-invalid");
$("#passCheckHelp").html("Passwords don't match!");
} else { } else {
$("#passCheck").removeClass("error"); document.getElementById("confirmPass").classList.remove("is-invalid");
$("#passCheck").addClass("success"); document.getElementById("confirmPass").classList.add("is-valid");
$("#passCheckHelp").html("");
} }
} }
</script> </script>
@ -54,7 +48,7 @@ function checkPasswordMatch() {
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h3>Create an Account</h3> <h3>Create an Account</h3>
<form id="login" method="POST" action="/create_user/" enctype="application/x-www-form-urlencoded"> <form id="createAccount" method="POST" action="/create_user/" enctype="application/x-www-form-urlencoded">
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-text" id="user"> <span class="input-group-text" id="user">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor"> <svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
@ -69,7 +63,7 @@ function checkPasswordMatch() {
<use xlink:href="/img/bootstrap-icons.svg#key-fill"/> <use xlink:href="/img/bootstrap-icons.svg#key-fill"/>
</svg> </svg>
</span> </span>
<input type="password" class="form-control" placeholder="Password" name="pass" aria-label="Password" aria-describedby="pass" id="pass"> <input type="password" class="form-control" placeholder="Password" name="pass" aria-label="Password" aria-describedby="pass" id="pass" onchange="checkPasswordMatch()">
</div> </div>
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-text" id="pass"> <span class="input-group-text" id="pass">
@ -77,7 +71,8 @@ function checkPasswordMatch() {
<use xlink:href="/img/bootstrap-icons.svg#key-fill"/> <use xlink:href="/img/bootstrap-icons.svg#key-fill"/>
</svg> </svg>
</span> </span>
<input type="password" class="form-control" placeholder="Confirm password" name="confirmPass" aria-label="Password" aria-describedby="confirmPass" id="confirmPass"> <input type="password" class="form-control" placeholder="Confirm password" name="confirmPass" aria-label="Password" aria-describedby="confirmPass" id="confirmPass" onchange="checkPasswordMatch()">
<div class="invalid-feedback">Passwords don't match!</div>
</div> </div>
<input class="btn btn-primary" type="submit" name="submit" value="Create" /> <input class="btn btn-primary" type="submit" name="submit" value="Create" />
</form> </form>

View file

@ -34,13 +34,6 @@
{{end}} {{end}}
<div class="col"> <div class="col">
<script type="text/javascript">
function resizeIframe() {
var contentHeight = $("#bookContent").contents().find("html").height();
$("#bookContent").height(ContentHeight);
}
</script>
{{if not .Book.Active}} {{if not .Book.Active}}
<div class="text-center"> <div class="text-center">
<p class="badge bg-warning">waiting for moderation</p> <p class="badge bg-warning">waiting for moderation</p>
@ -60,7 +53,7 @@
</ul> </ul>
</nav> </nav>
<iframe id="bookContent" onload="resizeIframe();" style="width: 100%; height: 1080px; border: 0;" scrolling="auto" src="{{.Content}}" seamless="seamless" sandbox="allow-same-origin" frameborder=0></iframe> <iframe id="bookContent" scrolling="auto" src="{{.Content}}" seamless="seamless" sandbox="allow-same-origin" frameborder=0></iframe>
<nav class="d-flex justify-content-center" arial-label="Book navigation"> <nav class="d-flex justify-content-center" arial-label="Book navigation">
<ul class="pagination"> <ul class="pagination">
@ -80,5 +73,11 @@
</div> </div>
<script>
var bookContent = document.getElementById("bookContent");
bookContent.onload = function() {
bookContent.style.height = bookContent.contentWindow.document.body.scrollHeight + "px";
}
</script>
{{template "footer.html" .S}} {{template "footer.html" .S}}