diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/components.templ | 51 | ||||
| -rw-r--r-- | view/login.templ | 55 | ||||
| -rw-r--r-- | view/main.templ | 11 |
3 files changed, 102 insertions, 15 deletions
diff --git a/view/components.templ b/view/components.templ new file mode 100644 index 0000000..b2383ba --- /dev/null +++ b/view/components.templ @@ -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>
+}
diff --git a/view/login.templ b/view/login.templ index 56e003c..1beb1d6 100644 --- a/view/login.templ +++ b/view/login.templ @@ -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, "")
}
-
diff --git a/view/main.templ b/view/main.templ index 4ae917b..04751b1 100644 --- a/view/main.templ +++ b/view/main.templ @@ -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>
|