HS-Esslingen/swb6-it-sec
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix register and login handler for future edits

Browse source
This commit is contained in:
Florian Hoss 2022-04-04 09:15:02 +02:00
parent b5f1ccf98d
commit 177a26a2e9
6 changed files with 97 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

56
Lab01/app/templates/index.tmpl
View file

@ -9,8 +9,10 @@
{{template "navbar" .}}
<div class="position-absolute top-50 start-50 translate-middle text-center">
<div>Welcome to the Super Save Store.</div>
<div>Login to continue.</div>
<div>Welcome to the {{ .title }}.</div>
<div>
<a class="link-secondary" href="/login">Login</a> to continue.
</div>
</div>
{{template "scripts" .}}
@ -43,17 +45,61 @@
<li class="nav-item">
<a class="btn btn-primary" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="btn btn-secondary" href="/register">Register</a>
</li>
</ul>
</div>
</div>
</nav>
{{end}}
{{define "userForm"}}
<form class="row g-3 needs-validation mb-3" novalidate>
<div class="col-12">
<label for="username" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="username"
aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-12">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" aria-describedby="passwordHelp" required>
<div id="invalidPassword" class="invalid-feedback">
Please choose a password.
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" id="button" type="submit">Submit form</button>
</div>
</form>
{{end}}
{{define "scripts"}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script>
let form = document.querySelector('.needs-validation')
if (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
} else {
document.getElementById("button").disabled = true;
event.preventDefault();
let data = new FormData();
let form_element = document.getElementsByClassName('form-control');
for (let i = 0; i < form_element.length; i++) {
data.append(form_element[i].id, form_element[i].value);
}
submitForm(data);
}
form.classList.add('was-validated');
}, false);
}
</script>
{{end}}

27
Lab01/app/templates/login.tmpl
View file

@ -9,21 +9,22 @@
{{template "navbar" .}}
<div class="position-absolute top-50 start-50 translate-middle">
<form action="http://localhost:8080/register" method="POST">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">The username needs to be unique</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" aria-describedby="passwordHelp">
<div id="passwordHelp" class="form-text">The password needs to be different from the username</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="fs-3">{{ .title }}</div>
<hr>
{{template "userForm" .}}
<a class="link-secondary" href="/register">Register instead</a>
</div>
{{template "scripts" .}}
<script>
function submitForm(formData) {
fetch("/login", {method: 'POST', body: formData, redirect: 'follow'})
.then(response => response.json())
.then((json) => {
console.log(json)
}
).catch(error => console.log(error));
}
</script>
</body>
</html>

23
Lab01/app/templates/register.tmpl
View file

@ -9,29 +9,16 @@
{{template "navbar" .}}
<div class="position-absolute top-50 start-50 translate-middle">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">The username needs to be unique</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" aria-describedby="passwordHelp">
<div id="passwordHelp" class="form-text">The password needs to be different from the username</div>
</div>
<button onclick="registerUser()" class="btn btn-primary">Submit</button>
<div class="fs-3">{{ .title }}</div>
<hr>
{{template "userForm" .}}
<a class="link-secondary" href="/login">Login instead</a>
</div>
{{template "scripts" .}}
<script>
function registerUser() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
let formData = new FormData();
formData.append("username", username);
formData.append("password", password);
function submitForm(formData) {
fetch("/register", {method: 'POST', body: formData, redirect: 'follow'})
.then(response => response.json())
.then(() => {