Added login form html and styling

handlers/page.go

@@ -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)
+		},
+	)
+}

server/routes.go

@@ -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()))
 }

view/component/footer/footer.templ

@@ -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

view/component/form/loginform.templ

@@ -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>
+}

view/component/nav/navbar.templ

@@ -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

view/page/about.templ

@@ -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>
+	}
+}

view/page/index.templ

@@ -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>
 	}
 }

view/page/login.templ

@@ -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>
+	}
+}