2024-09-23 18:50:21 +00:00
|
|
|
package templates
|
|
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
templ loginSkeleton(basic_css bool) {
|
2024-09-23 18:50:21 +00:00
|
|
|
<!Doctype HTML>
|
|
|
|
|
<html lang="en-US">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Todo login</title>
|
|
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
if basic_css {
|
|
|
|
|
<link rel="stylesheet" href="/css/login_basic.css"/>
|
|
|
|
|
} else {
|
|
|
|
|
<link rel="stylesheet" href="/css/login.css"/>
|
|
|
|
|
}
|
2024-09-23 18:50:21 +00:00
|
|
|
|
|
|
|
|
<script src="/js/login.js"></script>
|
|
|
|
|
<script src="/js/lib/htmx.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
{ children... }
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
}
|
|
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
templ LoginPage(basic_css bool) {
|
|
|
|
|
@loginSkeleton(basic_css) {
|
2024-09-23 18:50:21 +00:00
|
|
|
<form id="login-box" hx-post="/login" hx-swap="none">
|
2024-10-01 18:30:33 +00:00
|
|
|
<h1>Welcome</h1>
|
2024-09-23 18:50:21 +00:00
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
<div class="credentials-wrapper">
|
|
|
|
|
<label for="username">Username</label>
|
|
|
|
|
<input id="username" class="credentials" name="username" type="text" placeholder="Username" required/>
|
2024-09-23 18:50:21 +00:00
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
<div class="gap"></div>
|
2024-09-23 18:50:21 +00:00
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
<label for="password">Password</label>
|
|
|
|
|
<input id="password" class="credentials" name="password" type="password" placeholder="Password" required/>
|
2024-09-23 18:50:21 +00:00
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
<div>
|
|
|
|
|
<label class="normal-text" for="stay-logged-in">Keep me logged in</label>
|
|
|
|
|
<input id="stay-logged-in" name="stay-logged-in" type="checkbox"/>
|
|
|
|
|
</div>
|
2024-09-23 18:50:21 +00:00
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
<button type="submit" class="login-btn">Log in</button>
|
|
|
|
|
<a href="/create-account">No Account? Create one!</a>
|
2024-09-23 18:50:21 +00:00
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
templ CreateAccountBox(basic_css bool) {
|
|
|
|
|
@loginSkeleton(basic_css) {
|
2024-09-23 18:50:21 +00:00
|
|
|
<form id="login-box" hx-post="/create-account">
|
|
|
|
|
<h1>Create Account</h1>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<label for="username">Username</label><br/>
|
|
|
|
|
<input id="username" name="username" type="text" required/>
|
|
|
|
|
|
|
|
|
|
<div style="margin: 20px"></div>
|
|
|
|
|
|
|
|
|
|
<label for="password">Password</label><br/>
|
|
|
|
|
<input id="password" name="password" type="password" required/>
|
|
|
|
|
|
|
|
|
|
<div style="margin: 20px"></div>
|
|
|
|
|
|
|
|
|
|
<label for="confirm-password">Confirm Password</label><br/>
|
|
|
|
|
<input id="confirm-password" name="confirm-password" type="password" required/>
|
|
|
|
|
|
|
|
|
|
<button type="submit">Create account</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
}
|
|
|
|
|
}
|
