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

include axios and show toasts

Browse source
This commit is contained in:
Florian Hoss 2022-04-05 21:21:48 +02:00
parent 712af41c28
commit 5b2252d6bd
5 changed files with 69 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Lab01/app/.idea/app.iml
View file

@ -6,5 +6,6 @@
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="bootstrap" level="application" />
<orderEntry type="library" name="axios" level="application" />
</component>
</module>

2
Lab01/app/.idea/jsLibraryMappings.xml
View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="PROJECT" libraries="{bootstrap}" />
<file url="PROJECT" libraries="{axios, bootstrap}" />
</component>
</project>

49
Lab01/app/templates/_base.tmpl
View file

@ -10,6 +10,31 @@
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
{{end}}
{{define "toasts"}}
<div class="position-absolute bottom-0 end-0 mb-3 me-3">
<div id="errorToast" class="toast align-items-center text-white bg-danger border-0" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div id="errorToastContent" class="toast-body">
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
</div>
<div class="position-absolute bottom-0 end-0 mb-3 me-3">
<div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div id="successToastContent" class="toast-body">
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
</div>
{{end}}
{{define "navbar"}}
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
@ -63,12 +88,33 @@
{{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 src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const button_logout = document.getElementById("button-logout");
const username = getCookie("username");
const myHeaders = new Headers();
myHeaders.append('username', username);
const errorToastEl = document.getElementById('errorToast');
const errorToastContent = document.getElementById('errorToastContent');
const errorToast = new bootstrap.Toast(errorToastEl, {delay: 3000})
const successToastEL = document.getElementById('successToast');
const successToastContent = document.getElementById('successToastContent');
const successToast = new bootstrap.Toast(successToastEL, {delay: 3000});
function showErrorToast(message) {
errorToastContent.innerText = message;
errorToast.show();
}
function showSuccessToast(message) {
successToastContent.innerText = message;
successToast.show();
}
function setCookie(cookie_name, cookie_value, cookie_expiry) {
const d = new Date();
d.setTime(d.getTime() + (cookie_expiry * 24 * 60 * 60 * 1000));
@ -126,7 +172,6 @@
event.preventDefault();
event.stopPropagation();
} else {
document.getElementById("button").disabled = true;
event.preventDefault();
let data = new FormData();
let form_element = document.getElementsByClassName('form-control');
@ -139,4 +184,4 @@
}, false);
}
</script>
{{end}}
{{end}}

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

@ -6,6 +6,7 @@
{{template "head" .}}
</head>
<body>
{{template "toasts" .}}
{{template "navbar" .}}
<div class="position-absolute top-50 start-50 translate-middle">
@ -20,15 +21,15 @@
<script>
userLoggedIn().then((loggedIn) => loggedIn && redirect("/"));
async function submitForm(formData) {
const response = await fetch("/auth/login", {method: 'POST', body: formData, redirect: 'follow'});
if (response.ok) {
const json = await response.json();
setCookie("username", json.username, 1);
redirect("/");
} else {
redirect("/view/login");
}
function submitForm(formData) {
axios({method: 'POST', url: '/auth/login', data: formData})
.then((response) => {
setCookie("username", response.data.username, 1);
redirect("/");
})
.catch((response) => {
showErrorToast(response.message);
});
}
</script>
</body>

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

@ -6,6 +6,7 @@
{{template "head" .}}
</head>
<body>
{{template "toasts" .}}
{{template "navbar" .}}
<div class="position-absolute top-50 start-50 translate-middle">
@ -18,13 +19,15 @@
{{template "scripts" .}}
{{template "formScripts" .}}
<script>
async function submitForm(formData) {
const response = await fetch("/auth/register", {method: 'POST', body: formData, redirect: 'follow'});
if (response.ok) {
redirect("/");
} else {
redirect("/view/register");
}
function submitForm(formData) {
axios({method: 'POST', url: '/auth/register', data: formData})
.then((response) => {
showSuccessToast(response.data.message);
redirect("/login");
})
.catch((err) => {
showErrorToast(err.message);
});
}
</script>
</body>