fix: use the fiber-htmx components

ZEISS · Sep 28, 2024 · 1d3b14b · 1d3b14b
1 parent 69ca185
commit 1d3b14b
Show file tree

Hide file tree

Showing 36 changed files with 206 additions and 47 deletions.
diff --git a/cmd/root.go b/cmd/root.go
@@ -10,8 +10,6 @@ import (
 	"github.com/zeiss/fiber-goth/providers"
 	"github.com/zeiss/fiber-goth/providers/entraid"
 	"github.com/zeiss/fiber-goth/providers/github"
-	reload "github.com/zeiss/fiber-reload"
-	seed "github.com/zeiss/gorm-seed"
 	"github.com/zeiss/service-lens/internal/adapters/db"
 	"github.com/zeiss/service-lens/internal/adapters/handlers"
 	"github.com/zeiss/service-lens/internal/cfg"
@@ -24,6 +22,10 @@ import (
 	"github.com/spf13/cobra"
 	goth "github.com/zeiss/fiber-goth"
 	adapter "github.com/zeiss/fiber-goth/adapters/gorm"
+	htmx "github.com/zeiss/fiber-htmx"
+	"github.com/zeiss/fiber-htmx/components/toasts"
+	reload "github.com/zeiss/fiber-reload"
+	seed "github.com/zeiss/gorm-seed"
 	"gorm.io/driver/postgres"
 	"gorm.io/gorm"
 	"gorm.io/gorm/schema"
@@ -146,9 +148,15 @@ func (s *WebSrv) Start(ctx context.Context, ready server.ReadyFunc, run server.R
 			CookieHTTPOnly: true,
 		}
 
+		userHandler := handlers.NewUserHandler()
+
 		handlers := handlers.New(store)
 
-		app := fiber.New()
+		app := fiber.New(
+			fiber.Config{
+				ErrorHandler: toasts.DefaultErrorHandler,
+			},
+		)
 		app.Use(requestid.New())
 		app.Use(logger.New())
 		app.Use(reload.Environment(s.cfg.Flags.Environment))
@@ -159,9 +167,13 @@ func (s *WebSrv) Start(ctx context.Context, ready server.ReadyFunc, run server.R
 
 		app.Use(goth.NewProtectMiddleware(gothConfig))
 
+		compFuncConfig := htmx.Config{
+			ErrorHandler: toasts.DefaultErrorHandler,
+		}
+
 		app.Get("/", handlers.Dashboard())
 		app.Post("/", handlers.PostDashboard())
-		app.Get("/login", handlers.Login())
+		app.Get("/login", htmx.NewCompFuncHandler(userHandler.Login(), compFuncConfig))
 		app.Get("/login/:provider", goth.NewBeginAuthHandler(gothConfig))
 		app.Get("/auth/:provider/callback", goth.NewCompleteAuthHandler(gothConfig))
 		app.Get("/logout", goth.NewLogoutHandler(gothConfig))

diff --git a/internal/adapters/handlers/user_handler.go b/internal/adapters/handlers/user_handler.go
@@ -0,0 +1,26 @@
+package handlers
+
+import (
+	"github.com/gofiber/fiber/v2"
+	htmx "github.com/zeiss/fiber-htmx"
+	"github.com/zeiss/service-lens/internal/components"
+	"github.com/zeiss/service-lens/internal/components/login"
+)
+
+type UserHandler struct{}
+
+func NewUserHandler() *UserHandler {
+	return &UserHandler{}
+}
+
+func (h *UserHandler) Login() htmx.CompFunc {
+	return func(c *fiber.Ctx) (htmx.Node, error) {
+		return components.Page(
+			components.PageProps{},
+			components.Wrap(
+				components.WrapProps{},
+				login.NewLogin(),
+			),
+		), nil
+	}
+}
diff --git a/internal/components/layout.go b/internal/components/layout.go
@@ -51,10 +51,7 @@ func Layout(p LayoutProps, children ...htmx.Node) htmx.Node {
 					drawers.DrawerContentProps{
 						ID: "drawer",
 					},
-					toasts.Toasts(
-						toasts.ToastsProps{},
-						toasts.Toaster(),
-					),
+					toasts.Toasts(),
 					htmx.Div(
 						htmx.ClassNames{
 							"h-full":        true,

diff --git a/internal/components/login/page.go b/internal/components/login/page.go
@@ -0,0 +1,129 @@
+package login
+
+import (
+	htmx "github.com/zeiss/fiber-htmx"
+	"github.com/zeiss/fiber-htmx/components/buttons"
+	"github.com/zeiss/fiber-htmx/components/cards"
+	"github.com/zeiss/fiber-htmx/components/dividers"
+	"github.com/zeiss/fiber-htmx/components/forms"
+	"github.com/zeiss/fiber-htmx/components/links"
+)
+
+func NewLogin() htmx.Node {
+	return htmx.Fragment(
+		htmx.Section(
+			htmx.Merge(
+				htmx.ClassNames{
+					"bg-gray-50":       true,
+					"dark:bg-gray-900": true,
+				},
+			),
+		),
+		htmx.Div(
+			htmx.Merge(
+				htmx.ClassNames{
+					"flex":           true,
+					"flex-col":       true,
+					"items-center":   true,
+					"justify-center": true,
+					"px-6":           true,
+					"py-8":           true,
+					"mx-auto":        true,
+					"md:h-screen":    true,
+					"lg:py-0":        true,
+				},
+			),
+			cards.CardBordered(
+				cards.CardProps{
+					ClassNames: htmx.ClassNames{
+						"w-96":     true,
+						"max-w-lg": true,
+					},
+				},
+				cards.Body(
+					cards.BodyProps{},
+					cards.Title(
+						cards.TitleProps{},
+						htmx.Text("Sign in to your account"),
+					),
+					htmx.Div(
+						htmx.ClassNames{
+							"mt-4": true,
+						},
+						links.Button(
+							links.LinkProps{
+								ClassNames: htmx.ClassNames{
+									"w-full":      true,
+									"btn-outline": true,
+								},
+								Href: "/login/entraid",
+							},
+							htmx.Text("Login on Microsoft Entra ID"),
+						),
+					),
+					htmx.Div(
+						htmx.ClassNames{
+							"mt-4": true,
+						},
+						links.Button(
+							links.LinkProps{
+								ClassNames: htmx.ClassNames{
+									"w-full":      true,
+									"btn-outline": true,
+								},
+								Href: "/login/github",
+							},
+							htmx.Text("Login on GitHub"),
+						),
+					),
+					dividers.Divider(
+						dividers.DividerProps{},
+						htmx.Text("OR"),
+					),
+					htmx.Form(
+						htmx.HxPost("/login"),
+						forms.FormControl(
+							forms.FormControlProps{
+								ClassNames: htmx.ClassNames{
+									"py-4": true,
+								},
+							},
+							forms.TextInputBordered(
+								forms.TextInputProps{
+									Name:        "username",
+									Placeholder: "indy@jones.com",
+								},
+							),
+						),
+						forms.FormControl(
+							forms.FormControlProps{},
+							forms.TextInputBordered(
+								forms.TextInputProps{
+									Name:        "password",
+									Placeholder: "supersecret",
+								},
+								htmx.Type("password"),
+							),
+						),
+						cards.Actions(
+							cards.ActionsProps{
+								ClassNames: htmx.ClassNames{
+									"py-4":  true,
+									"-mb-4": true,
+								},
+							},
+							buttons.Outline(
+								buttons.ButtonProps{
+									ClassNames: htmx.ClassNames{
+										"w-full": true,
+									},
+								},
+								htmx.Text("Login"),
+							),
+						),
+					),
+				),
+			),
+		),
+	)
+}
diff --git a/internal/components/page.go b/internal/components/page.go
@@ -38,6 +38,11 @@ func Page(props PageProps, children ...htmx.Node) htmx.Node {
 					htmx.Attribute("src", "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"),
 					htmx.Attribute("defer", ""),
 				),
+				htmx.Script(
+					htmx.Attribute("src", "https://unpkg.com/fiber-htmx@1.3.26"),
+					htmx.CrossOrigin("anonymous"),
+					htmx.Attribute("defer", ""),
+				),
 			}, props.Head...),
 		},
 		htmx.Body(

diff --git a/internal/controllers/dashboard/index.go b/internal/controllers/dashboard/index.go
@@ -29,7 +29,7 @@ func NewShowDashboardController(store seed.Database[ports.ReadTx, ports.ReadWrit
 
 // Error ...
 func (d *ShowDashboardController) Error(err error) error {
-	return toasts.RenderToasts(d.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Get ...

diff --git a/internal/controllers/designs/comments.go b/internal/controllers/designs/comments.go
@@ -27,7 +27,7 @@ func NewCommentsController(store seed.Database[ports.ReadTx, ports.ReadWriteTx])
 
 // Error ...
 func (l *CommentsControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Post ...

diff --git a/internal/controllers/designs/comments/reaction.go b/internal/controllers/designs/comments/reaction.go
@@ -27,7 +27,7 @@ func NewReactionCommentController(store seed.Database[ports.ReadTx, ports.ReadWr
 
 // Error ...
 func (l *ReactionCommentControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Delete ...

diff --git a/internal/controllers/designs/create.go b/internal/controllers/designs/create.go
@@ -58,7 +58,7 @@ func (l *CreateDesignControllerImpl) Prepare() error {
 
 // Error ...
 func (l *CreateDesignControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Post ...

diff --git a/internal/controllers/designs/delete.go b/internal/controllers/designs/delete.go
@@ -25,7 +25,7 @@ func NewDesignDeleteController(store seed.Database[ports.ReadTx, ports.ReadWrite
 
 // Error ...
 func (l *DesignDeleteControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Prepare ...

diff --git a/internal/controllers/designs/edit/body/update.go b/internal/controllers/designs/edit/body/update.go
@@ -39,7 +39,7 @@ func NewUpdateController(store seed.Database[ports.ReadTx, ports.ReadWriteTx]) *
 
 // Error ...
 func (l *UpdateControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Prepare ...

diff --git a/internal/controllers/designs/edit/title/update.go b/internal/controllers/designs/edit/title/update.go
@@ -31,7 +31,7 @@ func NewUpdateController(store seed.Database[ports.ReadTx, ports.ReadWriteTx]) *
 
 // Error ...
 func (l *UpdateControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Prepare ...

diff --git a/internal/controllers/designs/reactions.go b/internal/controllers/designs/reactions.go
@@ -26,7 +26,7 @@ func NewReactionController(store seed.Database[ports.ReadTx, ports.ReadWriteTx])
 
 // Error ...
 func (l *ReactionControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Delete ...

diff --git a/internal/controllers/designs/search-templates.go b/internal/controllers/designs/search-templates.go
@@ -32,7 +32,7 @@ func NewSearchTemplatesController(store seed.Database[ports.ReadTx, ports.ReadWr
 
 // Error ...
 func (l *SearchTemplatesControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Prepare ...

diff --git a/internal/controllers/designs/search-workflows.go b/internal/controllers/designs/search-workflows.go
@@ -32,7 +32,7 @@ func NewSearchWorkflowsController(store seed.Database[ports.ReadTx, ports.ReadWr
 
 // Error ...
 func (l *SearchWorkflowsControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Prepare ...

diff --git a/internal/controllers/designs/tags.go b/internal/controllers/designs/tags.go
@@ -26,7 +26,7 @@ func NewTagController(store seed.Database[ports.ReadTx, ports.ReadWriteTx]) *Tag
 
 // Error ...
 func (l *TagControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Delete ...

diff --git a/internal/controllers/designs/tasks.go b/internal/controllers/designs/tasks.go
@@ -42,7 +42,7 @@ func NewTaskController(store seed.Database[ports.ReadTx, ports.ReadWriteTx]) *Ta
 
 // Error ...
 func (l *TaskControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Prepare ...

diff --git a/internal/controllers/environments/create.go b/internal/controllers/environments/create.go
@@ -29,7 +29,7 @@ func NewCreateEnvironmentController(store seed.Database[ports.ReadTx, ports.Read
 
 // Error ...
 func (l *CreateEnvironmentControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Prepare ...

diff --git a/internal/controllers/lenses/new.go b/internal/controllers/lenses/new.go
@@ -28,7 +28,7 @@ func NewLensController(store seed.Database[ports.ReadTx, ports.ReadWriteTx]) *Ne
 
 // Error ...
 func (l *NewLensControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(l.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Post ...

diff --git a/internal/controllers/lenses/publish.go b/internal/controllers/lenses/publish.go
@@ -27,7 +27,7 @@ func NewLensPublishController(store seed.Database[ports.ReadTx, ports.ReadWriteT
 
 // Error ...
 func (c *LensPublishControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(c.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Delete ...

diff --git a/internal/controllers/profiles/create.go b/internal/controllers/profiles/create.go
@@ -29,11 +29,6 @@ func NewCreateProfileController(store seed.Database[ports.ReadTx, ports.ReadWrit
 	return &CreateProfileControllerImpl{store: store}
 }
 
-// Error ...
-func (l *CreateProfileControllerImpl) Error(err error) error {
-	return err
-}
-
 // Prepare ...
 func (l *CreateProfileControllerImpl) Prepare() error {
 	validate = validator.New()

diff --git a/internal/controllers/profiles/new.go b/internal/controllers/profiles/new.go
@@ -59,7 +59,7 @@ func (p *NewProfileControllerImpl) Post() error {
 		return tx.CreateProfile(ctx, &profile)
 	})
 	if err != nil {
-		return toasts.RenderToasts(p.Ctx(), toasts.Error(err.Error()))
+		return toasts.Error(err.Error())
 	}
 
 	return p.Redirect(fmt.Sprintf(utils.ShowProfileUrlFormat, profile.ID))

diff --git a/internal/controllers/tags/new.go b/internal/controllers/tags/new.go
@@ -29,7 +29,7 @@ func NewTagController(store seed.Database[ports.ReadTx, ports.ReadWriteTx]) *New
 
 // Error ...
 func (t *NewTagControllerImpl) Error(err error) error {
-	return toasts.RenderToasts(t.Ctx(), toasts.Error(err.Error()))
+	return toasts.Error(err.Error())
 }
 
 // Prepare ...