basic navigation and basic forms
This commit is contained in:
parent
9c6ddf6c60
commit
faf460470e
27 changed files with 284 additions and 30 deletions
49
Lab01/app/templates/index.tmpl
Normal file
49
Lab01/app/templates/index.tmpl
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ .title }}</title>
|
||||
{{template "head" .}}
|
||||
</head>
|
||||
<body>
|
||||
{{template "navbar" .}}
|
||||
|
||||
<div class="position-absolute top-50 start-50 translate-middle">
|
||||
<div>Welcome</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
{{define "head"}}
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../static/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../static/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../static/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="../static/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="../static/icons/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
{{end}}
|
||||
|
||||
{{define "navbar"}}
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">SuperSave</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="ms-auto navbar-nav mb-2 mb-lg-0">
|
||||
<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}}
|
||||
29
Lab01/app/templates/login.tmpl
Normal file
29
Lab01/app/templates/login.tmpl
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ .title }}</title>
|
||||
{{template "head" .}}
|
||||
</head>
|
||||
<body>
|
||||
{{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>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
45
Lab01/app/templates/register.tmpl
Normal file
45
Lab01/app/templates/register.tmpl
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ .title }}</title>
|
||||
{{template "head" .}}
|
||||
</head>
|
||||
<body>
|
||||
{{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>
|
||||
|
||||
<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 formData = new FormData();
|
||||
formData.append("username", "Florian");
|
||||
formData.append("password", "SuperSafe");
|
||||
|
||||
let requestOptions = {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch("http://localhost:8080/register", requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in a new issue