More views

davesavic · Jan 15, 2024 · 81d23f4 · 81d23f4
1 parent 166946b
commit 81d23f4
Show file tree

Hide file tree

Showing 7 changed files with 301 additions and 17 deletions.
diff --git a/services/serve/serve.go b/services/serve/serve.go
@@ -1,6 +1,7 @@
 package serve
 
 import (
+	"fmt"
 	templEngine "github.com/davesavic/aio/services/templ"
 	"github.com/davesavic/aio/view"
 	"github.com/gin-gonic/gin"
@@ -13,8 +14,18 @@ func Run() error {
 	r.Use(gin.Recovery())
 	r.Use(gin.Logger())
 
+	r.GET("/login", func(ctx *gin.Context) {
+		ctx.HTML(http.StatusOK, "login", view.Login())
+	})
+	r.POST("/login", func(ctx *gin.Context) {
+		fmt.Println(ctx.PostForm("email"))
+		fmt.Println(ctx.PostForm("password"))
+
+		ctx.Redirect(http.StatusFound, "/")
+	})
+
 	r.GET("/", func(ctx *gin.Context) {
-		ctx.HTML(http.StatusOK, "index", view.AuthorisedLayout())
+		ctx.HTML(http.StatusOK, "index", view.Dashboard())
 	})
 
 	return r.Run()

diff --git a/view/dashboard.templ b/view/dashboard.templ
@@ -0,0 +1,16 @@
+package view
+
+templ Dashboard() {
+	@AuthorisedLayout() {
+		<header>
+			<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+				<h1 class="text-3xl font-bold leading-tight tracking-tight text-gray-900">Dashboard</h1>
+			</div>
+		</header>
+		<main>
+			<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+				<!-- Your content -->
+			</div>
+		</main>
+	}
+}
diff --git a/view/dashboard_templ.go b/view/dashboard_templ.go
diff --git a/view/layout.templ b/view/layout.templ
@@ -175,18 +175,23 @@ templ AuthorisedLayout() {
 					</div>
 				</nav>
 				<div class="py-10">
-					<header>
-						<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-							<h1 class="text-3xl font-bold leading-tight tracking-tight text-gray-900">Dashboard</h1>
-						</div>
-					</header>
-					<main>
-						<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
-							<!-- Your content -->
-						</div>
-					</main>
+					{ children... }
 				</div>
 			</div>
 		</body>
 	</html>
 }
+
+templ UnauthorisedLayout() {
+	<!DOCTYPE html>
+	<html class="h-full">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<script src="https://cdn.tailwindcss.com"></script>
+		</head>
+		<body class="h-full">
+			{ children... }
+		</body>
+	</html>
+}
diff --git a/view/layout_templ.go b/view/layout_templ.go
diff --git a/view/login.templ b/view/login.templ
@@ -0,0 +1,40 @@
+package view
+
+templ Login() {
+	@UnauthorisedLayout() {
+		<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
+			<div class="sm:mx-auto sm:w-full sm:max-w-sm">
+				<img class="mx-auto h-10 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company"/>
+				<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your account</h2>
+			</div>
+			<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+				<form class="space-y-6" action="#" method="POST">
+					<div>
+						<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
+						<div class="mt-2">
+							<input id="email" name="email" type="email" autocomplete="email" required class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+						</div>
+					</div>
+					<div>
+						<div class="flex items-center justify-between">
+							<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
+							<div class="text-sm">
+								<a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">Forgot password?</a>
+							</div>
+						</div>
+						<div class="mt-2">
+							<input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
+						</div>
+					</div>
+					<div>
+						<button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign in</button>
+					</div>
+				</form>
+				<p class="mt-10 text-center text-sm text-gray-500">
+					Not a member?
+					<a href="#" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">Start a 14 day free trial</a>
+				</p>
+			</div>
+		</div>
+	}
+}
diff --git a/view/login_templ.go b/view/login_templ.go