From 574695bfb01184f23663b875b09ab9a0c8a3b66f Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Thu, 11 Jul 2024 08:08:58 -0700
Subject: [PATCH] moved view components out of internal and added some more

---
 .../views => components}/bulma/button.templ   | 26 +++++-----
 .../views => components}/bulma/card.templ     |  0
 .../bulma/form/control.templ                  |  0
 .../bulma/form/field.templ                    |  0
 components/bulma/form/input.templ             | 15 ++++++
 .../bulma/form/label.templ                    |  0
 components/bulma/form/new.templ               | 13 +++++
 components/bulma/form/select.templ            | 33 +++++++++++++
 .../bulma/form/submit.templ                   |  0
 components/bulma/form/textarea.templ          |  5 ++
 components/bulma/form/util.go                 |  8 +++
 .../views => components}/bulma/hero.templ     |  0
 components/bulma/notification.templ           |  7 +++
 .../views => components}/bulma/section.templ  |  0
 components/bulma/tags.templ                   | 13 +++++
 components/bulma/title.templ                  | 49 +++++++++++++++++++
 {internal/views => components}/bulma/util.go  |  4 ++
 components/templ-html/br.templ                |  5 ++
 components/templ-html/href.templ              |  9 ++++
 internal/views/articles/list.templ            |  7 ++-
 internal/views/bulma/form/input.templ         |  9 ----
 internal/views/bulma/form/new.templ           |  7 ---
 internal/views/bulma/form/util.go             |  6 ---
 internal/views/home/index.templ               |  2 +-
 internal/views/sources/add.templ              | 19 ++++---
 internal/views/sources/addAfter.templ         | 11 +++++
 internal/views/sources/listAll.templ          | 10 +++-
 internal/views/users/afterLogin.templ         | 13 +++--
 internal/views/users/afterSignUp.templ        | 10 ++--
 internal/views/users/login copy.templ         | 18 ++++---
 internal/views/users/logout.templ             |  2 +-
 internal/views/users/profile.templ            | 18 ++++---
 internal/views/users/signup.templ             | 35 +++++++------
 33 files changed, 261 insertions(+), 93 deletions(-)
 rename {internal/views => components}/bulma/button.templ (55%)
 rename {internal/views => components}/bulma/card.templ (100%)
 rename {internal/views => components}/bulma/form/control.templ (100%)
 rename {internal/views => components}/bulma/form/field.templ (100%)
 create mode 100644 components/bulma/form/input.templ
 rename {internal/views => components}/bulma/form/label.templ (100%)
 create mode 100644 components/bulma/form/new.templ
 create mode 100644 components/bulma/form/select.templ
 rename {internal/views => components}/bulma/form/submit.templ (100%)
 create mode 100644 components/bulma/form/textarea.templ
 create mode 100644 components/bulma/form/util.go
 rename {internal/views => components}/bulma/hero.templ (100%)
 create mode 100644 components/bulma/notification.templ
 rename {internal/views => components}/bulma/section.templ (100%)
 create mode 100644 components/bulma/tags.templ
 create mode 100644 components/bulma/title.templ
 rename {internal/views => components}/bulma/util.go (71%)
 create mode 100644 components/templ-html/br.templ
 create mode 100644 components/templ-html/href.templ
 delete mode 100644 internal/views/bulma/form/input.templ
 delete mode 100644 internal/views/bulma/form/new.templ
 delete mode 100644 internal/views/bulma/form/util.go
 create mode 100644 internal/views/sources/addAfter.templ

diff --git a/internal/views/bulma/button.templ b/components/bulma/button.templ
similarity index 55%
rename from internal/views/bulma/button.templ
rename to components/bulma/button.templ
index 865a605..5385978 100644
--- a/internal/views/bulma/button.templ
+++ b/components/bulma/button.templ
@@ -1,21 +1,18 @@
 package bulma
 
-templ Button(color string, isLight, isDark bool) {
-	if isLight {
-		<button type="button" class={ "button", "is-light", color }>
-			{ children... }
-		</button>
-	}
-	if isDark {
-		<button type="button" class={ "button", "is-dark", color }>
-			{ children... }
-		</button>
-	}
-	if !isLight && !isDark {
-		<button type="button" class={ "button", color }>
+// This creates a button that accepts children under it.
+templ Button() {
+	<button type="button" class={ "button" }>
+		{ children... }
+	</button>
+}
+
+// Used to create a button and lets you define the color.
+// Accepts children.
+templ ButtonColor(color string) {
+	<button type="button" class={ "button", color }>
 		{ children... }
 	</button>
-	}
 }
 
 templ ButtonNewTab(url, text string) {
@@ -24,7 +21,6 @@ templ ButtonNewTab(url, text string) {
 	</button>
 }
 
-
 templ ALink(url, title string) {
 	<a href={ templ.SafeURL(url) }>{ title }</a>
 }
diff --git a/internal/views/bulma/card.templ b/components/bulma/card.templ
similarity index 100%
rename from internal/views/bulma/card.templ
rename to components/bulma/card.templ
diff --git a/internal/views/bulma/form/control.templ b/components/bulma/form/control.templ
similarity index 100%
rename from internal/views/bulma/form/control.templ
rename to components/bulma/form/control.templ
diff --git a/internal/views/bulma/form/field.templ b/components/bulma/form/field.templ
similarity index 100%
rename from internal/views/bulma/form/field.templ
rename to components/bulma/form/field.templ
diff --git a/components/bulma/form/input.templ b/components/bulma/form/input.templ
new file mode 100644
index 0000000..d793c66
--- /dev/null
+++ b/components/bulma/form/input.templ
@@ -0,0 +1,15 @@
+package form
+
+templ TextInput(color, id, fieldType, placeholder string) {
+	if color == "" {
+		<input class={ "input" } name={ id } id={ id } type={ fieldType } placeholder={ placeholder }/>
+	} else {
+		<input class={ "input", color } name={ id } id={ id } type={ fieldType } placeholder={ placeholder }/>
+	}
+}
+
+templ Checkbox(text, id string) {
+	<label class="checkbox">
+		<input type="checkbox" id={ id }/> { text }
+	</label>
+}
diff --git a/internal/views/bulma/form/label.templ b/components/bulma/form/label.templ
similarity index 100%
rename from internal/views/bulma/form/label.templ
rename to components/bulma/form/label.templ
diff --git a/components/bulma/form/new.templ b/components/bulma/form/new.templ
new file mode 100644
index 0000000..8f5029e
--- /dev/null
+++ b/components/bulma/form/new.templ
@@ -0,0 +1,13 @@
+package form
+
+type NewParam struct {
+	HxPost string
+}
+
+templ New(param NewParam) {
+	if param.HxPost != "" {
+		<form hx-post={ param.HxPost }>
+			{ children... }
+		</form>
+	}
+}
diff --git a/components/bulma/form/select.templ b/components/bulma/form/select.templ
new file mode 100644
index 0000000..8adffdc
--- /dev/null
+++ b/components/bulma/form/select.templ
@@ -0,0 +1,33 @@
+package form
+
+templ SelectOne(color string, isRound bool) {
+	if isRound {
+		<div class="select is-round">
+			<select>
+				{ children... }
+			</select>
+		</div>
+	} else {
+		<div class="select">
+			<select>
+				{ children... }
+			</select>
+		</div>
+	}
+}
+
+templ SelectOneItem(name string) {
+	<option>{ name }</option>
+}
+
+templ SelectMany(howManySelectable int, color string, isRound bool) {
+	<div class="select is-multiple">
+		<select multiple size="{ howManySelectable }">
+			{ children... }
+		</select>
+	</div>
+}
+
+templ SelectManyItem(name string) {
+	<option value={ name }>{ name }</option>
+}
diff --git a/internal/views/bulma/form/submit.templ b/components/bulma/form/submit.templ
similarity index 100%
rename from internal/views/bulma/form/submit.templ
rename to components/bulma/form/submit.templ
diff --git a/components/bulma/form/textarea.templ b/components/bulma/form/textarea.templ
new file mode 100644
index 0000000..d922742
--- /dev/null
+++ b/components/bulma/form/textarea.templ
@@ -0,0 +1,5 @@
+package form
+
+templ TextArea(id, placeholder, color string) {
+    <textarea class={ "textarea", color } id={ id } placeholder={ placeholder }/>
+}
\ No newline at end of file
diff --git a/components/bulma/form/util.go b/components/bulma/form/util.go
new file mode 100644
index 0000000..9b22a74
--- /dev/null
+++ b/components/bulma/form/util.go
@@ -0,0 +1,8 @@
+package form
+
+const (
+	InputTypeText        = "text"
+	InputTypePassword    = "password"
+	InputTypeEmail       = "email"
+	InputTypePhoneNumber = "tel"
+)
diff --git a/internal/views/bulma/hero.templ b/components/bulma/hero.templ
similarity index 100%
rename from internal/views/bulma/hero.templ
rename to components/bulma/hero.templ
diff --git a/components/bulma/notification.templ b/components/bulma/notification.templ
new file mode 100644
index 0000000..13f34a8
--- /dev/null
+++ b/components/bulma/notification.templ
@@ -0,0 +1,7 @@
+package bulma
+
+templ Notification(message, color string) {
+	<div class={ "notification", color }>
+		{ message }
+	</div>
+}
diff --git a/internal/views/bulma/section.templ b/components/bulma/section.templ
similarity index 100%
rename from internal/views/bulma/section.templ
rename to components/bulma/section.templ
diff --git a/components/bulma/tags.templ b/components/bulma/tags.templ
new file mode 100644
index 0000000..12b6735
--- /dev/null
+++ b/components/bulma/tags.templ
@@ -0,0 +1,13 @@
+package bulma
+
+templ Tag(message string) {
+	<span class={ "tag" }>{ message }</span>
+}
+
+templ TagColor(message, color string) {
+	<span class={ "tag", color }>{ message }</span>
+}
+
+templ TagColorSize(message, color, size string) {
+	<span class={ "tag", color, size }>{ message }</span>
+}
diff --git a/components/bulma/title.templ b/components/bulma/title.templ
new file mode 100644
index 0000000..2f95eba
--- /dev/null
+++ b/components/bulma/title.templ
@@ -0,0 +1,49 @@
+package bulma
+
+templ Title(message string) {
+	<h1 class="title">{ message }</h1>
+}
+
+templ Subitle(message string) {
+	<h2 class="subtitle">{ message }</h2>
+}
+
+templ H1(message string, isSubtitle bool) {
+	if isSubtitle {
+		<h1 class="subtitle is-1">{ message }</h1>
+	} else {
+		<h1 class="title is-1">{ message }</h1>
+	}
+}
+
+templ H2(message string, isSubtitle bool) {
+	if isSubtitle {
+		<h2 class="subtitle is-2">{ message }</h2>
+	} else {
+		<h2 class="title is-2">{ message }</h2>
+	}
+}
+
+templ H3(message string, isSubtitle bool) {
+	if isSubtitle {
+		<h3 class="subtitle is-3">{ message }</h3>
+	} else {
+		<h3 class="title is-3">{ message }</h3>
+	}
+}
+
+templ H4(message string, isSubtitle bool) {
+	if isSubtitle {
+		<h4 class="subtitle is-4">{ message }</h4>
+	} else {
+		<h4 class="title is-4">{ message }</h4>
+	}
+}
+
+templ H5(message string, isSubtitle bool) {
+	if isSubtitle {
+		<h5 class="subtitle is-5">{ message }</h5>
+	} else {
+		<h5 class="title is-5">{ message }</h5>
+	}
+}
diff --git a/internal/views/bulma/util.go b/components/bulma/util.go
similarity index 71%
rename from internal/views/bulma/util.go
rename to components/bulma/util.go
index f53dfd9..319fbca 100644
--- a/internal/views/bulma/util.go
+++ b/components/bulma/util.go
@@ -7,4 +7,8 @@ const (
 	ColorWarning = "is-warning"
 	ColorSuccess = "is-success"
 	ColorError   = "is-error"
+
+	SizeNormal = "is-normal"
+	SizeMedium = "is-medium"
+	SizeLarge  = "is-large"
 )
diff --git a/components/templ-html/br.templ b/components/templ-html/br.templ
new file mode 100644
index 0000000..13177ec
--- /dev/null
+++ b/components/templ-html/br.templ
@@ -0,0 +1,5 @@
+package templhtml
+
+templ Br(){
+    <br/>
+}
\ No newline at end of file
diff --git a/components/templ-html/href.templ b/components/templ-html/href.templ
new file mode 100644
index 0000000..038cbdb
--- /dev/null
+++ b/components/templ-html/href.templ
@@ -0,0 +1,9 @@
+package templhtml
+
+templ ALink(url, title string) {
+	<a href={ templ.SafeURL(url) }>{ title }</a>
+}
+
+templ ANewTab(url, text string) {
+	<a href={ templ.SafeURL(url) } target="_blank" rel="noopener noreferrer">{ text }</a>
+}
\ No newline at end of file
diff --git a/internal/views/articles/list.templ b/internal/views/articles/list.templ
index 10cff5d..1d9497c 100644
--- a/internal/views/articles/list.templ
+++ b/internal/views/articles/list.templ
@@ -1,17 +1,16 @@
 package articles
 
 import (
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
 templ List(model models.ListArticlesViewModel) {
 	@layout.WithTemplate() {
 		@filterBar()
 		for _, item := range model.Items {
-			@bulma.ArticleCardWithThumbnail(item.Article.Title, item.Article.Thumbnail, item.Article.Url, item.Article.PubDate.String(), item.Source.DisplayName )
-			
+			@bulma.ArticleCardWithThumbnail(item.Article.Title, item.Article.Thumbnail, item.Article.Url, item.Article.PubDate.String(), item.Source.DisplayName)
 		}
 	}
 }
diff --git a/internal/views/bulma/form/input.templ b/internal/views/bulma/form/input.templ
deleted file mode 100644
index 5255d18..0000000
--- a/internal/views/bulma/form/input.templ
+++ /dev/null
@@ -1,9 +0,0 @@
-package form
-
-templ Input(color, id, fieldType string) {
-	if color == "" {
-		<input class={ "input" } id={ id } type={ fieldType }/>
-	} else {
-		<input class={ "input", color } id={ id } type={ fieldType }/>
-	}
-}
diff --git a/internal/views/bulma/form/new.templ b/internal/views/bulma/form/new.templ
deleted file mode 100644
index a0a4190..0000000
--- a/internal/views/bulma/form/new.templ
+++ /dev/null
@@ -1,7 +0,0 @@
-package form
-
-templ New(postUrl string) {
-    <form hx-post={ postUrl }>
-        { children... }
-    </form>
-}
\ No newline at end of file
diff --git a/internal/views/bulma/form/util.go b/internal/views/bulma/form/util.go
deleted file mode 100644
index 34750a1..0000000
--- a/internal/views/bulma/form/util.go
+++ /dev/null
@@ -1,6 +0,0 @@
-package form
-
-const (
-	InputTypeText     = "text"
-	InputTypePassword = "password"
-)
diff --git a/internal/views/home/index.templ b/internal/views/home/index.templ
index b90be24..8ecaa65 100644
--- a/internal/views/home/index.templ
+++ b/internal/views/home/index.templ
@@ -1,7 +1,7 @@
 package home
 
 import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
 
 templ Index() {
 	@layout.WithTemplate() {
diff --git a/internal/views/sources/add.templ b/internal/views/sources/add.templ
index bdd3cda..7a7d546 100644
--- a/internal/views/sources/add.templ
+++ b/internal/views/sources/add.templ
@@ -1,18 +1,25 @@
 package sources
 
 import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma/form"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
+var (
+	p = form.NewParam{
+		HxPost: "/sources/add",
+	}
+)
+
 templ Add(model models.AddSourcePayloadModel) {
 	@layout.WithTemplate() {
-		<h2>New Source</h2>
-		<p>At this time only direct RSS links are allowed to be provided</p>
-		@form.New("/sources/add") {
-			@form.Input("", "url", "text")
+		@bulma.H2("New Source", false)
+		<p>At this time only direct RSS links are allowed to be provided.</p>
+		@form.New(p) {
+			@form.TextInput("", "name", form.InputTypeText, "Name of the site")
+			@form.TextInput("", "url", form.InputTypeText, "RSS URL")
 			@form.Submit("Submit", bulma.ColorPrimary)
 		}
 	}
diff --git a/internal/views/sources/addAfter.templ b/internal/views/sources/addAfter.templ
new file mode 100644
index 0000000..c0d9046
--- /dev/null
+++ b/internal/views/sources/addAfter.templ
@@ -0,0 +1,11 @@
+package sources
+
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+
+templ AddAfter(message string, isError bool) {
+    if isError {
+        @bulma.Notification(message, bulma.ColorError)
+    } else {
+        @bulma.Notification("The requested source was added to the server", bulma.ColorSuccess)
+    }
+}
\ No newline at end of file
diff --git a/internal/views/sources/listAll.templ b/internal/views/sources/listAll.templ
index 6f2379b..2c3786e 100644
--- a/internal/views/sources/listAll.templ
+++ b/internal/views/sources/listAll.templ
@@ -1,15 +1,21 @@
 package sources
 
 import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+	templhtml "git.jamestombleson.com/jtom38/newsbot-portal/components/templ-html"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
 templ ListAll(model models.ListAllSourcesViewModel) {
 	@layout.WithTemplate() {
+		@bulma.Button() {
+			@templhtml.ALink("/sources/add", "New Source")
+		}
+		@templhtml.Br()
+		@templhtml.Br()
 		for _, item := range model.Items {
-			@bulma.Button(bulma.ColorPrimary, false, false) {
+			@bulma.ButtonColor(bulma.ColorPrimary) {
 				@bulma.ANewTab(item.Url, item.DisplayName)
 			}
 			<br/>
diff --git a/internal/views/users/afterLogin.templ b/internal/views/users/afterLogin.templ
index 213f221..1c0a0e1 100644
--- a/internal/views/users/afterLogin.templ
+++ b/internal/views/users/afterLogin.templ
@@ -1,17 +1,16 @@
 package users
 
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+)
 
 // This is returned after the user logs into the application.
 // It just returns a partial view because it will overlap with the existing template.
 templ AfterLogin(vm models.AfterLoginViewModel) {
 	if vm.Success {
-		<div class="notification is-success">
-			{ vm.Message }
-		</div>
+		@bulma.Notification(vm.Message, bulma.ColorSuccess)
 	} else {
-		<div class="notification is-error">
-			{ vm.Message }
-		</div>
+		@bulma.Notification(vm.Message, bulma.ColorError)
 	}
 }
diff --git a/internal/views/users/afterSignUp.templ b/internal/views/users/afterSignUp.templ
index dfe3fd5..699dbf6 100644
--- a/internal/views/users/afterSignUp.templ
+++ b/internal/views/users/afterSignUp.templ
@@ -1,15 +1,13 @@
 package users
 
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+
 // This is returned after the user creates an account.
 // It just returns a partial view because it will overlap with the existing template.
 templ AfterSignUp(message string, success bool) {
 	if success {
-		<div class="notification is-success">
-			{ message }
-		</div>
+		@bulma.Notification(message, bulma.ColorSuccess)
 	} else {
-        <div class="notification is-error">
-			{ message }
-		</div>
+		@bulma.Notification(message, bulma.ColorError)
     }
 }
diff --git a/internal/views/users/login copy.templ b/internal/views/users/login copy.templ
index 8cb72a2..2f47cf2 100644
--- a/internal/views/users/login copy.templ	
+++ b/internal/views/users/login copy.templ	
@@ -1,23 +1,29 @@
 package users
 
 import (
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma/form"
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
+var (
+	p = form.NewParam{
+		HxPost: "/users/login",
+	}
+)
+
 templ LoginNew() {
 	@layout.WithTemplate() {
-		@form.New("/users/login") {
+		@form.New(p) {
 			@form.Field() {
 				@form.Label("Username")
 				@form.Control() {
-					@form.Input("", "username", "text")
+					@form.TextInput("", "username", "text", "email address")
 				}
 			}
-			@form.Field(){
+			@form.Field() {
 				@form.Label("Password")
-				@form.Control(){
-					@form.Input("", "password", form.InputTypePassword)
+				@form.Control() {
+					@form.TextInput("", "password", form.InputTypePassword, "")
 				}
 			}
 			@form.Submit("Submit", "is-primary")
diff --git a/internal/views/users/logout.templ b/internal/views/users/logout.templ
index 8bfb52b..7f43639 100644
--- a/internal/views/users/logout.templ
+++ b/internal/views/users/logout.templ
@@ -1,7 +1,7 @@
 package users
 
 import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
 
 templ Logout() {
     @layout.WithTemplate(){
diff --git a/internal/views/users/profile.templ b/internal/views/users/profile.templ
index 8edd35e..7a0962c 100644
--- a/internal/views/users/profile.templ
+++ b/internal/views/users/profile.templ
@@ -1,15 +1,19 @@
 package users
 
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+	templhtml "git.jamestombleson.com/jtom38/newsbot-portal/components/templ-html"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+)
 
 templ Profile() {
 	@layout.WithTemplate() {
 		@bulma.Hero("Profile", "Here you can update your profile 😀")
-		
-		<button type="button" class="button">
-            <a href="/users/forcelogout">Logout Everywhere</a>
-        Logout Everywhere</button>
-        <p class="subtitle">This will force all active sessions to stop working and require a new login.</p>
+
+		@bulma.H2("Sessions", false)
+		@bulma.Button() {
+			@templhtml.ALink("/users/forcelogout", "Terminate all active sessions")
+		}
+		@bulma.Subitle("This will force you to login again as the application will give you a new session value.")
 	}
 }
diff --git a/internal/views/users/signup.templ b/internal/views/users/signup.templ
index 03c8a7e..ba46e98 100644
--- a/internal/views/users/signup.templ
+++ b/internal/views/users/signup.templ
@@ -1,23 +1,26 @@
 package users
 
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+)
 
 templ SignUp() {
 	@layout.WithTemplate() {
-		<form hx-post="/users/signup">
-			<div class="field">
-				<label class="label">Username</label>
-				<div class="control">
-					<input class="input" type="text" name="username" id="username"/>
-				</div>
-			</div>
-			<div class="field">
-				<label class="label">Password</label>
-				<div class="control">
-					<input class="input" type="password" name="password" id="exampleInputPassword1"/>
-				</div>
-			</div>
-			<button type="submit" class="button is-primary">Submit</button>
-		</form>
+		@form.New(form.NewParam{HxPost: "/users/signup"}) {
+			@form.Field(){
+				@form.Label("Username")
+				@form.Control() {
+					@form.TextInput("", "username", form.InputTypeText, "username or email address")
+				}
+			}
+			@form.Field() {
+				@form.Label("Password")
+				@form.Control() {
+					@form.TextInput("", "password", form.InputTypePassword, "Nice strong password, like Ox!")
+				}
+			}
+			@form.Submit("Submit", "")
+		}
 	}
 }