diff --git a/components/guestbookform.go b/components/guestbookform.go index b7b71a1..d8289d7 100644 --- a/components/guestbookform.go +++ b/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"), + ), + ) +} diff --git a/web/static/style.css b/web/static/style.css index 107d2ef..ce60cbc 100644 --- a/web/static/style.css +++ b/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;