steven/timer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start work on styling

Browse Source
This commit is contained in:
Steven Le Rouzic
2024-04-28 01:13:27 +02:00
parent a55cfe8205
commit 3637edb816
7 changed files with 1076 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
view/components.templ Normal file
View File

@ -0,0 +1,51 @@
package view
templ textLikeField(fieldType string, name string, placeholder string) {
<input
type={ fieldType }
name={ name }
placeholder={ placeholder }
class="
bg-slate-800 focus:bg-slate-700
text-slate-200 placeholder-slate-500
p-2
rounded-md border border-slate-600 border-b-slate-500
focus:bg-slate-700
shadow-inner
"
/>
}
templ TextField(name string, placeholder string) {
@textLikeField("text", name, placeholder)
}
templ PasswordField(name string, placeholder string) {
@textLikeField("password", name, placeholder)
}
templ Button(fieldType string, name string, attrs templ.Attributes) {
<button
type={ fieldType }
class="
text-slate-200
bg-blue-500 hover:bg-blue-400 active:bg-blue-600
py-2 px-6
rounded-full border-t border-t-blue-400
"
{ attrs... }
>{ name }</button>
}
templ SecondaryButton(fieldType string, name string, attrs templ.Attributes) {
<button
type={ fieldType }
class="
text-slate-100/50
bg-transparent hover:bg-slate-300/10 active:bg-slate-300/20
py-2 px-6
rounded-full border border-slate-100/50
"
{ attrs... }
>{ name }</button>
}

55
view/login.templ
View File

@ -5,25 +5,52 @@ import (
)
templ LoginFormError(currentUser *model.User, err string) {
<div class="login-form">
if currentUser == nil {
<form hx-post="/login" hx-target-error="closest .login-form">
<p>
<input type="text" name="user" placeholder="User" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Sign in</button>
if err != "" {
<span class="error">{ err }</span>
}
</p>
</form>
<div class="login-form">
<form
hx-post="/login"
hx-target-error="closest .login-form"
class="
w-80
mx-auto
flex flex-col
gap-4
"
>
@TextField("user", "User name")
@PasswordField("password", "Password")
@Button("submit", "Sign in", templ.Attributes{})
if err != "" {
<span class="text-red-400">{ err }</span>
}
</form>
</div>
} else {
<p>Signed in as { currentUser.Name } <button type="button" hx-post="/logout" hx-refresh>Sign out</button></p>
<div class="
flex flex-row items-baseline justify-start
"
>
<h1
class="
grow
text-slate-300 text-4xl font-semibold
"
>Prout prout</h1>
<div
class="
flex flex-row justify-end items-center gap-4
"
>
<p>Signed in as <b>{ currentUser.Name }</b></p>
@SecondaryButton("button", "Sign out", templ.Attributes{
"hx-post": "/logout",
"hx-refresh": true,
})
</div>
</div>
}
</div>
}
templ LoginForm(currentUser *model.User) {
@LoginFormError(currentUser, "")
}

11
view/main.templ
View File

@ -14,7 +14,16 @@ templ Main(contents templ.Component, currentUser *model.User) {
<script src="/static/htmx.min.js"></script>
<script src="/static/response-targets.js"></script>
</head>
<body hx-boost="true" hx-ext="response-targets">
<body
hx-boost="true"
hx-ext="response-targets"
class="
w-full sm:max-w-screen-sm md:max-w-screen-md
mx-auto py-6
bg-slate-900
text-slate-400
"
>
@LoginForm(currentUser)
@contents
</body>