sylv/fyp
1
0
Fork 0
Code Issues 29 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: added users db, login, register, logout

Browse Source
This commit is contained in:
Andre Henriques
2023-09-19 13:39:59 +01:00
parent b22d64a568
commit f2bf34b931
15 changed files with 586 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
views/js/main.js
View File

@@ -5,6 +5,10 @@ function load() {
});
}
}
window.onload = load;
htmx.on('htmx:afterSwap', load);
htmx.on('htmx:beforeSwap', (env) => {
if (env.detail.xhr.status === 401) {
window.location = "/login"
}
});

13
views/login.html
View File

@@ -6,18 +6,27 @@
<h1>
Login
</h1>
<form method="post" action="/login" >
<form method="post" action="/login" {{if .Submited}}class="submitted"{{end}} >
<fieldset>
<label for="email">Email</label>
<input type="email" required name="email" />
<input type="email" required name="email" {{if .Email}} value="{{.Email}}" {{end}} />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input required name="password" type="password" />
{{if .NoUserOrPassword}}
<span class="form-msg error">
Either the password or the email are incorrect
</span>
{{end}}
</fieldset>
<button>
Login
</button>
<div class="spacer"></div>
<a class="simple-link text-center w100 spacer" hx-get="/register" hx-headers='{"REQUEST-TYPE": "htmlfull"}' hx-push-url="true" hx-swap="outerHTML" hx-target=".app">
Register
</a>
</form>
</div>
</div>

20
views/partials/header.html
View File

@@ -1,10 +1,24 @@
<nav>
<ul>
<div class="expand"></div>
<li>
<a hx-get="/login" hx-headers='{"REQUEST-TYPE": "htmlfull"}' hx-push-url="true" hx-swap="outerHTML" hx-target=".app">
Login
<a hx-get="/" hx-headers='{"REQUEST-TYPE": "htmlfull"}' hx-push-url="true" hx-swap="outerHTML" hx-target=".app">
Index
</a>
</li>
<li class="expand"></li>
{{ .context }}
{{ if .Context.User }}
<li>
<a hx-get="/logout" hx-headers='{"REQUEST-TYPE": "htmlfull"}' hx-push-url="true" hx-swap="outerHTML" hx-target=".app">
Logout
</a>
</li>
{{else}}
<li>
<a hx-get="/login" hx-headers='{"REQUEST-TYPE": "htmlfull"}' hx-push-url="true" hx-swap="outerHTML" hx-target=".app">
Login
</a>
</li>
{{end}}
</ul>
</nav>

49
views/register.html Normal file
View File

@@ -0,0 +1,49 @@
{{define "title"}}
Register : AI Stuff
{{end}}
{{define "mainbody"}}
<div class="login-page">
<div>
<h1>
Register
</h1>
<form method="post" action="/register" {{if .Submited}}class="submitted"{{end}} >
<fieldset>
<label for="username">Username</label>
<input required name="username" value="{{.Username}}" />
{{if .UserError}}
<span class="form-msg error">
Username already in use
</span>
{{end}}
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" required name="email" value="{{.Email}}" />
{{if .EmailError}}
<span class="form-msg error">
Email already in use
</span>
{{end}}
</fieldset>
<fieldset>
<label for="password">Password</label>
<input required name="password" type="password" />
{{if .PasswordToLong}}
<span class="form-msg error">
Password is to long
</span>
{{end}}
</fieldset>
<button>
Register
</button>
<div class="spacer"></div>
<a class="simple-link text-center w100" hx-get="/login" hx-headers='{"REQUEST-TYPE": "htmlfull"}' hx-push-url="true" hx-swap="outerHTML" hx-target=".app">
Login
</a>
</form>
</div>
</div>
{{end}}

31
views/styles/main.css
View File

@@ -18,6 +18,20 @@ body {
padding: 0;
}
.w100 {
width: 100%;
display: block;
}
.text-center {
text-align: center;
}
.simple-link {
color: var(--sec);
text-decoration: none;
}
/* Nav bar */
nav {
@@ -70,6 +84,7 @@ nav ul li a {
.login-page {
display: grid;
place-items: center;
margin-bottom: 40px;
}
.login-page > div {
width: 40vw;
@@ -81,6 +96,10 @@ nav ul li a {
/* forms */
a {
cursor: pointer;
}
form {
padding: 30px;
border-radius: 10px;
@@ -109,11 +128,23 @@ form.submitted input:valid {
box-shadow: 0 2px 5px 1px rgba(var(--green), 0.2);
}
form .spacer {
padding-bottom: 10px;
}
form fieldset {
padding-bottom: 15px;
border: none;
}
form fieldset .form-msg {
font-size: 0.9rem;
}
form fieldset .error {
color: rgb(var(--red))
}
form button {
border-radius: 9px 10px;
text-align: center;