Limited message size on client side

components/guestbookform.go

@@ -12,7 +12,8 @@ type guestbookForm struct {
 	name    string
 	message string
 
-	OnSubmit func(
+	gbModalOpen bool
+	OnSubmit    func(
 		name string,
 		message string,
 	) // Handler to implement which calls the api
@@ -45,9 +46,23 @@ func (g *guestbookForm) Render() app.UI {
 				if g.name == "" || g.message == "" {
 					fmt.Printf("Error: one or more field(s) are empty. For now unhandled\n")
 				}
-				g.OnSubmit(g.name, g.message)
+				if len(g.name) > 40 || len(g.message) > 360 {
+					fmt.Printf("Error: Your message is too long fucker\n")
+					g.gbModalOpen = true
+					return
+				}
 				g.clear()
+				g.OnSubmit(g.name, g.message)
 			}),
+		app.If(
+			g.gbModalOpen,
+			&guestbookAlertModal{
+				OnClose: func() {
+					g.gbModalOpen = false
+					g.Update()
+				},
+			},
+		),
 	).Class("content")
 }
 
@@ -55,3 +70,32 @@ func (g *guestbookForm) clear() {
 	g.name = ""
 	g.message = ""
 }
+
+type guestbookAlertModal struct {
+	app.Compo
+
+	PreviousAttempts int
+	OnClose          func() // For when we close the modal
+}
+
+func (g *guestbookAlertModal) Render() app.UI {
+	return app.Div().
+		Class("gb-modal").
+		ID("gbModal").
+		OnClick(func(ctx app.Context, e app.Event) {
+			g.OnClose()
+		}).
+		Body(
+			app.Div().
+				Class("gb-modal-content").
+				Body(
+					app.Span().Class("close").Text("X").
+						OnClick(func(ctx app.Context, e app.Event) {
+							//modal := app.Window().GetElementByID("gbModal")
+							//modal.Set("style", "none")
+							g.OnClose()
+						}),
+					app.P().Text("Your name must be <= 40 and your message must be <= 360 characters"),
+				),
+		)
+}

web/static/style.css

@@ -101,6 +101,41 @@ div .date {
 	color:white;
 }
 
+.gb-modal {
+	position: fixed;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background-color: rgb(0,0,0);
+	background-color: rgba(0,0,0,0.4);
+}
+
+.gb-modal-content {
+	background-color: #fefefe;
+	color: black;
+	margin: 15% auto; 
+	padding: 20px;
+	border: 1px solid #888;
+	width: 80%; 
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
 .friend-frame {
 	width: 290px;
 	height: 200px;