{{ define "base" }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dela</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="/static/stylesheet.css"> -->
<link rel="shortcut icon" href="/static/images/favicon.png" type="image/x-icon">
</head>
<body class="d-flex flex-column h-100">
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<div class="col-md-3 mb-2 mb-md-0">
<a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
<svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
</div>
<!-- <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="/" class="nav-link px-2">Home</a></li>
<li><a href="/about" class="nav-link px-2">About</a></li>
<li><span href="#" class="nav-link px-2" id="logged-in-as"></span></li>
</ul> -->
<div class="col-md-3 text-end" id="bar-auth">
<a href="/login" class="btn btn-outline-primary me-2">Log in</a>
<a href="/register" class="btn btn-primary">Register</a>
</div>
</header>
<div style="margin: auto;
margin-top: 5ch;
margin-bottom: 10ch;
max-width: 120ch;">
{{ template "content" . }}
</div>
</body>
</html>
<script src="/scripts/auth.js"></script>
<script src="/scripts/api.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async function() {
let username = getUsername();
let password = getUserPassword();
if (username == null | username == "" | password == null | password == "") {
if (window.location.pathname != "/about" && window.location.pathname != "/login" && window.location.pathname != "/register") {
window.location.replace("/about");
}
return;
}
// Check if auth info is indeed valid
let response = await get_user(username, password);
if (response.ok) {
let barAuth = document.getElementById("bar-auth");
barAuth.innerHTML = "<b>" + username + "</b>" + " | ";
barAuth.innerHTML += '<button id="log-out-btn" class="btn btn-primary" type="button">Log out</button>';
document.getElementById("log-out-btn").addEventListener("click", (event) => {
// Log out
forgetAuthInfo();
window.location.replace("/about");
});
} else {
forgetAuthInfo();
window.location.replace("/about");
}
}, false)
</script>
{{ end }}