refactor views template

prismelabs · Jan 16, 2024 · 88e2cd5 · 88e2cd5
1 parent 0005efb
commit 88e2cd5
Show file tree

Hide file tree

Showing 13 changed files with 114 additions and 102 deletions.
diff --git a/cmd/server/fiber.go b/cmd/server/fiber.go
@@ -21,6 +21,7 @@ func ProvideFiber(
 	getSignInHandler handlers.GetSignIn,
 	postSignInHander handlers.PostSignIn,
 	getIndexHander handlers.GetIndex,
+	notFoundHandler handlers.NotFound,
 ) *fiber.App {
 	fiberCfg := fiber.Config{
 		ServerHeader:          "prisme",
@@ -60,8 +61,10 @@ func ProvideFiber(
 	// Authenticated endpoints.
 	app.Use(fiber.Handler(withSessionMiddleware))
 
-	// Default to index handler.
-	app.Use(fiber.Handler(getIndexHander))
+	app.Get("/", fiber.Handler(getIndexHander))
+
+	// 404 not found handler.
+	app.Use(fiber.Handler(notFoundHandler))
 
 	return app
 }
diff --git a/cmd/server/wire.go b/cmd/server/wire.go
@@ -35,6 +35,7 @@ func initialize(logger BootstrapLogger) App {
 		handlers.ProvideGetSignIn,
 		handlers.ProvidePostSignIn,
 		handlers.ProvideGetIndex,
+		handlers.ProvideNotFound,
 		ProvideFiber,
 		ProvideApp,
 	)

diff --git a/cmd/server/wire_gen.go b/cmd/server/wire_gen.go
diff --git a/internal/embedded/views/layouts/empty.html b/internal/embedded/views/layouts/empty.html
@@ -1,9 +1,3 @@
-<!DOCTYPE html>
-<html>
-{{- template "partials/head" . -}}
+{{- $_ := set . "bodyClass" "bg-slate-50 dark:bg-slate-900 text-slate-950 dark:text-slate-50 min-h-screen" -}}
 
-<body class="bg-slate-50 dark:bg-slate-900 text-slate-950 dark:text-slate-50">
-	{{- embed -}}
-</body>
-
-</html>
+{{- embed -}}
diff --git a/internal/embedded/views/partials/alert.html b/internal/embedded/views/partials/alert.html
@@ -1,6 +1,6 @@
 <div class="bg-red-100 border border-sm border-rose-300 p-4 text-sm flex gap-4 text-slate-950">
 	<div class="text-red-400 w-8">
-		{{- template "partials/information-circle" -}}
+		{{- template "partials/icons/information-circle" -}}
 	</div>
 	<div>
 		<span class="font-bold block">

diff --git a/internal/embedded/views/partials/css.html b/internal/embedded/views/partials/css.html
diff --git a/internal/embedded/views/partials/head.html b/internal/embedded/views/partials/head.html
@@ -1,4 +1,4 @@
 <head>
-	<title>{{ .title }}</title>
-	{{ template "partials/css" . }}
+	<title>{{ template "title" }}</title>
+	{{ template "css" }}
 </head>
diff --git a/internal/embedded/views/partials/icons/information-circle.html b/internal/embedded/views/partials/icons/information-circle.html
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+	<path stroke-linecap="round" stroke-linejoin="round"
+		d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+</svg>
diff --git a/internal/embedded/views/partials/js.html b/internal/embedded/views/partials/js.html
diff --git a/internal/embedded/views/sign_in.html b/internal/embedded/views/sign_in.html
@@ -1,36 +1,48 @@
-<div
-	class="absolute h-full w-full flex flex-col justify-between bg-cover bg-center bg-gradient-to-br from-orange-100 via-purple-100 to-sky-600 overflow-auto"
-	style="background-size: 150% 150%">
-	<main class="flex-1 flex justify-center items-center">
-		<form class="bg-slate-50 dark:bg-slate-900 border-round rounded-md py-4 w-full max-w-lg" method="POST">
-			<div class="flex flex-col justify-center max-w-md my-12 mx-8">
-				<img src="/static/logo.svg" class="max-h-24 aspect-square mx-auto" />
-				<h1 class="text-2xl text-center mt-8">Welcome to Prisme Analytics</h1>
-			</div>
-			{{- with .error -}}
-			<div class="max-w-md px-4 pb-8 mx-auto">
-				{{- template "partials/alert" (dict "title" "Sign up failed" "message" .) -}}
-			</div>
-			{{- end -}}
-			<div class="max-w-md px-4 pb-8 mx-auto">
-				<div class="mb-4 flex flex-col justify-center">
-					<label for="email" class="text-xs mb-1">Email</label><br />
-					<input type="email" id="email" name="email" placeholder="Your email" required
-						class="border dark:border-slate-600 rounded-sm text-sm px-2 py-1 w-full dark:bg-slate-800" />
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Sign In - Prisme Analytics</title>
+	{{ template "partials/tailwindcss" }}
+</head>
+
+<body class="{{ .bodyClass }}">
+	<div
+		class="absolute h-full w-full flex flex-col justify-between bg-cover bg-center bg-gradient-to-br from-orange-100 via-purple-100 to-sky-600 overflow-auto"
+		style="background-size: 150% 150%">
+		<main class="flex-1 flex justify-center items-center">
+			<form class="bg-slate-50 dark:bg-slate-900 border-round rounded-md py-4 w-full max-w-lg" method="POST">
+				<div class="flex flex-col justify-center max-w-md my-12 mx-8">
+					<img src="/static/logo.svg" class="max-h-24 aspect-square mx-auto" />
+					<h1 class="text-2xl text-center mt-8">Welcome to Prisme Analytics</h1>
 				</div>
-				<div class="flex flex-col justify-center">
-					<label for="password" class="text-xs mb-1">Password</label><br />
-					<input type="password" id="password" name="password" placeholder="Your password" required minlength="6"
-						class="border dark:border-slate-600 rounded-sm text-sm px-2 py-1 w-full dark:bg-slate-800" />
+				{{- with .error -}}
+				<div class="max-w-md px-4 pb-8 mx-auto">
+					{{- template "partials/alert" (dict "title" "Sign up failed" "message" .) -}}
 				</div>
-				<div class="flex flex-col justify-center">
-					<button type="submit"
-						class="w-full mt-4 bg-purple-500 text-slate-50 rounded-sm text-sm p-2 w-full active:bg-purple-600">
-						Sign up
-					</button>
+				{{- end -}}
+				<div class="max-w-md px-4 pb-8 mx-auto">
+					<div class="mb-4 flex flex-col justify-center">
+						<label for="email" class="text-xs mb-1">Email</label><br />
+						<input type="email" id="email" name="email" placeholder="Your email" required
+							class="border dark:border-slate-600 rounded-sm text-sm px-2 py-1 w-full dark:bg-slate-800" />
+					</div>
+					<div class="flex flex-col justify-center">
+						<label for="password" class="text-xs mb-1">Password</label><br />
+						<input type="password" id="password" name="password" placeholder="Your password" required minlength="6"
+							class="border dark:border-slate-600 rounded-sm text-sm px-2 py-1 w-full dark:bg-slate-800" />
+					</div>
+					<div class="flex flex-col justify-center">
+						<button type="submit"
+							class="w-full mt-4 bg-purple-500 text-slate-50 rounded-sm text-sm p-2 w-full active:bg-purple-600">
+							Sign up
+						</button>
+					</div>
 				</div>
-			</div>
-		</form>
-	</main>
-	{{- template "partials/sign_forms/footer" . -}}
-</div>
+			</form>
+		</main>
+		{{- template "partials/sign_forms/footer" -}}
+	</div>
+</body>
+
+</html>
diff --git a/internal/embedded/views/sign_up.html b/internal/embedded/views/sign_up.html
@@ -1,41 +1,53 @@
-<div
-	class="absolute h-full w-full flex flex-col justify-between bg-cover bg-center bg-gradient-to-br from-orange-100 via-purple-100 to-sky-600 overflow-auto"
-	style="background-size: 150% 150%">
-	<main class="flex-1 flex justify-center items-center">
-		<form class="bg-slate-50 dark:bg-slate-900 border-round rounded-md py-4 w-full max-w-lg" method="POST">
-			<div class="flex flex-col justify-center max-w-md my-12 mx-8">
-				<img src="/static/logo.svg" class="max-h-24 aspect-square mx-auto" />
-				<h1 class="text-2xl text-center mt-8">Welcome to Prisme Analytics</h1>
-			</div>
-			{{- with .error -}}
-			<div class="max-w-md px-4 pb-8 mx-auto">
-				{{- template "partials/alert" (dict "title" "Sign up failed" "message" .) -}}
-			</div>
-			{{- end -}}
-			<div class="max-w-md px-4 pb-8 mx-auto">
-				<div class="mb-4 flex flex-col justify-center">
-					<label for="name" class="text-xs mb-1">Name</label><br />
-					<input type="name" id="name" name="name" placeholder="Your name" required minlength="3" maxlength="64"
-						class="border dark:border-slate-600 rounded-sm text-sm px-2 py-1 w-full dark:bg-slate-800" />
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Sign Up - Prisme Analytics</title>
+	{{ template "partials/tailwindcss" }}
+</head>
+
+<body class="{{ .bodyClass }}">
+	<div
+		class="absolute h-full w-full flex flex-col justify-between bg-cover bg-center bg-gradient-to-br from-orange-100 via-purple-100 to-sky-600 overflow-auto"
+		style="background-size: 150% 150%">
+		<main class="flex-1 flex justify-center items-center">
+			<form class="bg-slate-50 dark:bg-slate-900 border-round rounded-md py-4 w-full max-w-lg" method="POST">
+				<div class="flex flex-col justify-center max-w-md my-12 mx-8">
+					<img src="/static/logo.svg" class="max-h-24 aspect-square mx-auto" />
+					<h1 class="text-2xl text-center mt-8">Welcome to Prisme Analytics</h1>
 				</div>
-				<div class="mb-4 flex flex-col justify-center">
-					<label for="email" class="text-xs mb-1">Email</label><br />
-					<input type="email" id="email" name="email" placeholder="Your email" required
-						class="border dark:border-slate-600 rounded-sm text-sm px-2 py-1 w-full dark:bg-slate-800" />
+				{{- with .error -}}
+				<div class="max-w-md px-4 pb-8 mx-auto">
+					{{- template "partials/alert" (dict "title" "Sign up failed" "message" .) -}}
 				</div>
-				<div class="flex flex-col justify-center">
-					<label for="password" class="text-xs mb-1">Password</label><br />
-					<input type="password" id="password" name="password" placeholder="Your password" required minlength="6"
-						class="border dark:border-slate-600 rounded-sm text-sm px-2 py-1 w-full dark:bg-slate-800" />
+				{{- end -}}
+				<div class="max-w-md px-4 pb-8 mx-auto">
+					<div class="mb-4 flex flex-col justify-center">
+						<label for="name" class="text-xs mb-1">Name</label><br />
+						<input type="name" id="name" name="name" placeholder="Your name" required minlength="3" maxlength="64"
+							class="border dark:border-slate-600 rounded-sm text-sm px-2 py-1 w-full dark:bg-slate-800" />
+					</div>
+					<div class="mb-4 flex flex-col justify-center">
+						<label for="email" class="text-xs mb-1">Email</label><br />
+						<input type="email" id="email" name="email" placeholder="Your email" required
+							class="border dark:border-slate-600 rounded-sm text-sm px-2 py-1 w-full dark:bg-slate-800" />
+					</div>
+					<div class="flex flex-col justify-center">
+						<label for="password" class="text-xs mb-1">Password</label><br />
+						<input type="password" id="password" name="password" placeholder="Your password" required minlength="6"
+							class="border dark:border-slate-600 rounded-sm text-sm px-2 py-1 w-full dark:bg-slate-800" />
+					</div>
+					<div class="flex flex-col justify-center">
+						<button type="submit"
+							class="w-full mt-4 bg-purple-500 text-slate-50 rounded-sm text-sm p-2 w-full active:bg-purple-600">
+							Sign up
+						</button>
+					</div>
 				</div>
-				<div class="flex flex-col justify-center">
-					<button type="submit"
-						class="w-full mt-4 bg-purple-500 text-slate-50 rounded-sm text-sm p-2 w-full active:bg-purple-600">
-						Sign up
-					</button>
-				</div>
-			</div>
-		</form>
-	</main>
-	{{- template "partials/sign_forms/footer" . -}}
-</div>
+			</form>
+		</main>
+		{{- template "partials/sign_forms/footer" -}}
+	</div>
+</body>
+
+</html>
diff --git a/internal/handlers/sign_in.go b/internal/handlers/sign_in.go
@@ -14,9 +14,7 @@ type GetSignIn fiber.Handler
 
 func ProvideGetSignIn() GetSignIn {
 	return func(c *fiber.Ctx) error {
-		return c.Render("sign_in", fiber.Map{
-			"title": "Sign in - Prisme Analytics",
-		})
+		return c.Render("sign_in", fiber.Map{})
 	}
 }
 
@@ -42,7 +40,6 @@ func ProvidePostSignIn(authService auth.Service, sessionsService sessions.Servic
 		if err != nil {
 			mustRender(c, fiber.StatusBadRequest,
 				"sign_in", fiber.Map{
-					"title": "Sign in - Prisme Analytics",
 					"error": err.Error(),
 				},
 			)
@@ -56,7 +53,6 @@ func ProvidePostSignIn(authService auth.Service, sessionsService sessions.Servic
 			if errors.Is(err, auth.ErrInvalidCredentials) {
 				mustRender(c, fiber.StatusUnauthorized,
 					"sign_in", fiber.Map{
-						"title": "Sign in - Prisme Analytics",
 						"error": err.Error(),
 					},
 				)
@@ -65,7 +61,6 @@ func ProvidePostSignIn(authService auth.Service, sessionsService sessions.Servic
 
 			mustRender(c, fiber.StatusInternalServerError,
 				"sign_in", fiber.Map{
-					"title": "Sign in - Prisme Analytics",
 					"error": "Internal server error, please try again later",
 				},
 			)
@@ -76,7 +71,6 @@ func ProvidePostSignIn(authService auth.Service, sessionsService sessions.Servic
 		if err != nil {
 			mustRender(c, fiber.StatusInternalServerError,
 				"sign_in", fiber.Map{
-					"title": "Sign in - Prisme Analytics",
 					"error": "Internal server error, please try again later",
 				},
 			)

diff --git a/internal/handlers/sign_up.go b/internal/handlers/sign_up.go
@@ -14,9 +14,7 @@ type GetSignUp fiber.Handler
 // ProvideGetSignUp define a wire provider for GET sign up handler.
 func ProvideGetSignUp() GetSignUp {
 	return func(c *fiber.Ctx) error {
-		return c.Render("sign_up", fiber.Map{
-			"title": "Sign up - Prisme Analytics",
-		})
+		return c.Render("sign_up", fiber.Map{})
 	}
 }
 
@@ -44,7 +42,6 @@ func ProvidePostSignUp(userService users.Service, sessionsService sessions.Servi
 		if err != nil {
 			mustRender(c, fiber.StatusBadRequest,
 				"sign_up", fiber.Map{
-					"title": "Sign up - Prisme Analytics",
 					"error": err.Error(),
 				},
 			)
@@ -56,7 +53,6 @@ func ProvidePostSignUp(userService users.Service, sessionsService sessions.Servi
 		if err != nil {
 			mustRender(c, fiber.StatusBadRequest,
 				"sign_up", fiber.Map{
-					"title": "Sign up - Prisme Analytics",
 					"error": err.Error(),
 				},
 			)
@@ -68,7 +64,6 @@ func ProvidePostSignUp(userService users.Service, sessionsService sessions.Servi
 		if err != nil {
 			mustRender(c, fiber.StatusBadRequest,
 				"sign_up", fiber.Map{
-					"title": "Sign up - Prisme Analytics",
 					"error": err.Error(),
 				},
 			)
@@ -85,7 +80,6 @@ func ProvidePostSignUp(userService users.Service, sessionsService sessions.Servi
 			if errors.Is(err, users.ErrUserAlreadyExists) {
 				mustRender(c, fiber.StatusBadRequest,
 					"sign_up", fiber.Map{
-						"title": "Sign up - Prisme Analytics",
 						"error": "email already taken",
 					},
 				)
@@ -95,7 +89,6 @@ func ProvidePostSignUp(userService users.Service, sessionsService sessions.Servi
 			mustRender(c, fiber.StatusInternalServerError,
 				"sign_up",
 				fiber.Map{
-					"title": "Sign up - Prisme Analytics",
 					"error": "Internal server error, please try again later",
 				},
 			)
@@ -108,7 +101,6 @@ func ProvidePostSignUp(userService users.Service, sessionsService sessions.Servi
 			mustRender(c, fiber.StatusInternalServerError,
 				"sign_up",
 				fiber.Map{
-					"title": "Sign up - Prisme Analytics",
 					"error": "Internal server error, please try again later",
 				},
 			)