Added login form html and styling
This commit is contained in:
14
handlers/page.go
Normal file
14
handlers/page.go
Normal file
@@ -0,0 +1,14 @@
|
||||
package handlers
|
||||
|
||||
import (
|
||||
"github.com/a-h/templ"
|
||||
"net/http"
|
||||
)
|
||||
|
||||
func HandlePage(Page templ.Component) http.Handler {
|
||||
return http.HandlerFunc(
|
||||
func(w http.ResponseWriter, r *http.Request) {
|
||||
Page.Render(r.Context(), w)
|
||||
},
|
||||
)
|
||||
}
|
||||
@@ -3,6 +3,7 @@ package server
|
||||
import (
|
||||
"net/http"
|
||||
"projectreshoot/handlers"
|
||||
"projectreshoot/view/page"
|
||||
)
|
||||
|
||||
func addRoutes(
|
||||
@@ -10,4 +11,6 @@ func addRoutes(
|
||||
) {
|
||||
mux.Handle("GET /static/", http.StripPrefix("/static/", handlers.HandleStatic()))
|
||||
mux.Handle("GET /", handlers.HandleRoot())
|
||||
mux.Handle("GET /about", handlers.HandlePage(page.About()))
|
||||
mux.Handle("GET /login", handlers.HandlePage(page.Login()))
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ func getFooterItems() []FooterItem {
|
||||
}
|
||||
|
||||
templ Footer() {
|
||||
<footer class="bg-mantle">
|
||||
<footer class="bg-mantle mt-10">
|
||||
<div
|
||||
class="relative mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8"
|
||||
>
|
||||
@@ -53,7 +53,7 @@ templ Footer() {
|
||||
<p
|
||||
class="mx-auto max-w-md text-center leading-relaxed
|
||||
text-subtext0"
|
||||
>A better way to find and review movies</p>
|
||||
>A better way to discover and rate films</p>
|
||||
</div>
|
||||
<ul
|
||||
class="mt-12 flex flex-wrap justify-center gap-6 md:gap-8
|
||||
|
||||
132
view/component/form/loginform.templ
Normal file
132
view/component/form/loginform.templ
Normal file
@@ -0,0 +1,132 @@
|
||||
package form
|
||||
|
||||
import "fmt"
|
||||
|
||||
templ LoginForm(loginError string) {
|
||||
{{
|
||||
var errCreds string
|
||||
if loginError == "Username or password is incorrect" {
|
||||
errCreds = "true"
|
||||
} else {
|
||||
errCreds = "false"
|
||||
}
|
||||
xdata := fmt.Sprintf("{credentialError: %s, errorMessage: '%s'}", errCreds, loginError)
|
||||
}}
|
||||
<form>
|
||||
<div
|
||||
class="grid gap-y-4"
|
||||
x-data={ xdata }
|
||||
>
|
||||
<!-- Form Group -->
|
||||
<div>
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm mb-2"
|
||||
>Username</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
class="py-3 px-4 block w-full rounded-lg text-sm
|
||||
focus:border-blue focus:ring-blue bg-base
|
||||
disabled:opacity-50
|
||||
disabled:pointer-events-none"
|
||||
required
|
||||
aria-describedby="username-error"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-y-0 end-0
|
||||
pointer-events-none pe-3 pt-3"
|
||||
x-show="credentialError"
|
||||
x-cloak
|
||||
>
|
||||
<svg
|
||||
class="size-5 text-red"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<label
|
||||
for="password"
|
||||
class="block text-sm mb-2"
|
||||
>Password</label>
|
||||
<a
|
||||
class="inline-flex items-center gap-x-1 text-sm
|
||||
text-blue decoration-2 hover:underline
|
||||
focus:outline-none focus:underline font-medium"
|
||||
href="/recover-account"
|
||||
>Forgot password?</a>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="py-3 px-4 block w-full rounded-lg text-sm
|
||||
focus:border-blue focus:ring-blue bg-base
|
||||
disabled:opacity-50 disabled:pointer-events-none"
|
||||
required
|
||||
aria-describedby="password-error"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-y-0 end-0
|
||||
pointer-events-none pe-3 pt-3"
|
||||
x-show="credentialError"
|
||||
x-cloak
|
||||
>
|
||||
<svg
|
||||
class="size-5 text-red"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
class="text-center text-xs text-red mt-2"
|
||||
id="password-error"
|
||||
x-show="errorMessage"
|
||||
x-cloak
|
||||
x-text="errorMessage"
|
||||
></p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex">
|
||||
<input
|
||||
id="remember-me"
|
||||
name="remember-me"
|
||||
type="checkbox"
|
||||
class="shrink-0 mt-0.5 border-gray-200 rounded
|
||||
text-blue focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<label
|
||||
for="remember-me"
|
||||
class="text-sm"
|
||||
>Remember me</label>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full py-3 px-4 inline-flex justify-center items-center
|
||||
gap-x-2 rounded-lg border border-transparent transition
|
||||
bg-green hover:bg-green/75 text-mantle hover:cursor-pointer"
|
||||
>Login</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
@@ -22,7 +22,7 @@ templ Navbar() {
|
||||
class="mx-auto flex h-16 max-w-screen-xl items-center gap-8
|
||||
px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
<a class="block" href="#">
|
||||
<a class="block" href="/">
|
||||
<!-- logo here -->
|
||||
<span class="text-3xl font-bold transition hover:text-green">
|
||||
<span class="hidden sm:inline">Project</span> Reshoot
|
||||
|
||||
40
view/page/about.templ
Normal file
40
view/page/about.templ
Normal file
@@ -0,0 +1,40 @@
|
||||
package page
|
||||
|
||||
import "projectreshoot/view/layout"
|
||||
|
||||
templ About() {
|
||||
@layout.Global() {
|
||||
<div class="text-center max-w-150 m-auto">
|
||||
<div class="text-4xl mt-8">About</div>
|
||||
<div class="text-xl font-bold mt-4">What is Project Reshoot?</div>
|
||||
<div class="text-lg mt-2">
|
||||
Project Reshoot is a movie review site that aims to provide
|
||||
a better experience for the users. Instead of a single number
|
||||
that shows the average, or a spread of star ratings, Project
|
||||
Reshoot asks you to rate movies with a vibe. These ratings
|
||||
are shown as an easy to see pie chart showing how everyone
|
||||
felt.
|
||||
</div>
|
||||
<div class="text-lg mt-2">
|
||||
The other major feature is the ability for you to customize
|
||||
what details you see about movies, hiding details you don't
|
||||
want to see until after you've watched it. This gives you peace
|
||||
of mind when searching for new movies to watch.
|
||||
</div>
|
||||
<div class="text-xl font-bold mt-4">Why the name?</div>
|
||||
<div class="text-lg mt-2">
|
||||
The name came partially from the premise of wanting to deliver
|
||||
a new take on movie reviews, and partially from it being rewritten
|
||||
from scratch in a new technology stack (Goodbye NextJS, Hello GOTH).
|
||||
</div>
|
||||
<div class="text-xl font-bold mt-4">Who's behind it?</div>
|
||||
<div class="text-lg mt-2">
|
||||
Currently Project Reshoot is being built by a team of 1.
|
||||
It is somewhat of a passion project and a way to practice
|
||||
my development skills. For the time being, it will likely stay
|
||||
that way, but if you want to contribute, you can check out the
|
||||
<a href="https://github.com/haelnorr/moviedb">Github repo here</a>.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,9 @@ import "projectreshoot/view/layout"
|
||||
|
||||
templ Index() {
|
||||
@layout.Global() {
|
||||
<div></div>
|
||||
<div class="text-center mt-24">
|
||||
<div class="text-4xl lg:text-6xl">Project Reshoot</div>
|
||||
<div>A better way to discover and rate films</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
41
view/page/login.templ
Normal file
41
view/page/login.templ
Normal file
@@ -0,0 +1,41 @@
|
||||
package page
|
||||
|
||||
import "projectreshoot/view/layout"
|
||||
import "projectreshoot/view/component/form"
|
||||
|
||||
templ Login() {
|
||||
@layout.Global() {
|
||||
<div class="max-w-100 mx-auto px-2">
|
||||
<div class="mt-7 bg-mantle border border-surface1 rounded-xl">
|
||||
<div class="p-4 sm:p-7">
|
||||
<div class="text-center">
|
||||
<h1
|
||||
class="block text-2xl font-bold"
|
||||
>Login</h1>
|
||||
<p
|
||||
class="mt-2 text-sm text-subtext0"
|
||||
>
|
||||
Don't have an account yet?
|
||||
<a
|
||||
class="text-blue decoration-2 hover:underline
|
||||
focus:outline-none focus:underline"
|
||||
href="/register"
|
||||
>
|
||||
Sign up here
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<div
|
||||
class="py-3 flex items-center text-xs text-subtext0
|
||||
uppercase before:flex-1 before:border-t
|
||||
before:border-overlay1 before:me-6 after:flex-1
|
||||
after:border-t after:border-overlay1 after:ms-6"
|
||||
>Or</div>
|
||||
@form.LoginForm("")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user