Todo/pages/templates/login.templ

77 lines
2.5 KiB
Plaintext

package templates
templ loginSkeleton(basic_css bool) {
<!Doctype HTML>
<html lang="en-US">
<head>
<title>Todo login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
if basic_css {
<link rel="stylesheet" href="/css/login_basic.css"/>
} else {
<link rel="stylesheet" href="/css/login.css"/>
}
<script src="/js/login.js"></script>
<script src="/js/lib/htmx.min.js"></script>
</head>
<body>
{ children... }
</body>
</html>
}
templ LoginPage(basic_css bool) {
@loginSkeleton(basic_css) {
<form id="login-box" hx-post="/login" hx-swap="none">
<h1>Welcome</h1>
<div class="credentials-wrapper">
<label for="username">Username</label>
<input id="username" class="credentials" name="username" type="text" placeholder="Username" required/>
<div class="gap"></div>
<label for="password">Password</label>
<input id="password" class="credentials" name="password" type="password" placeholder="Password" required/>
<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>
<button type="submit" class="login-btn">Log in</button>
<a href="/create-account">No Account? Create one!</a>
</div>
</form>
}
}
templ CreateAccountBox(basic_css bool) {
@loginSkeleton(basic_css) {
<form id="login-box" hx-post="/create-account">
<h1>Create Account</h1>
<div class="credentials-wrapper">
<label for="username">Username</label>
<input id="username" class="credentials" name="username" type="text" placeholder="Username" required/>
<div class="gap"></div>
<label for="password">Password</label>
<input id="password" class="credentials" name="password" type="password" placeholder="Password" required/>
<div class="gap"></div>
<label for="confirm-password">Confirm Password</label>
<input id="confirm-password" class="credentials" name="confirm-password" type="password" placeholder="Re-Type Password" required/>
<button type="submit" class="login-btn">Create account</button>
</div>
</form>
}
}