feat(web): add error page

Author: 0xmad

internal/web/handlers/ui.go

@@ -23,6 +23,7 @@ func NewUIHandler(logger log.Logger) http.Handler {
 	mux.HandleFunc("/", h.serveIndex)
 	mux.HandleFunc("/add", h.serveAddPage)
 	mux.HandleFunc("/success", h.serveSuccessPage)
+	mux.HandleFunc("/error", h.serveErrorPage)
 
 	return mux
 }
@@ -32,17 +33,17 @@ func (h *UIHandler) serveIndex(w http.ResponseWriter, r *http.Request) {
 	err := templates.IndexPage(templates.IndexPageProps{
 		Servers: []domain.ServerItem{
 			{
-				ID: "1",
+				ID:   "1",
 				Name: "Server Alpha",
 				IP:   "192.168.1.10",
 			},
 			{
-				ID: "2",
+				ID:   "2",
 				Name: "Server Beta",
 				IP:   "192.168.1.11",
 			},
 			{
-				ID: "3",
+				ID:   "3",
 				Name: "Server Charlie",
 				IP:   "192.168.1.12",
 			},
@@ -83,3 +84,20 @@ func (h *UIHandler) serveSuccessPage(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "failed to render page", http.StatusInternalServerError)
 	}
 }
+
+func (h *UIHandler) serveErrorPage(w http.ResponseWriter, r *http.Request) {
+	errorText := r.URL.Query().Get("error")
+
+	var text string
+
+	if errorText != "" {
+		text = fmt.Sprintf("Operation failed. Reason: '%s'", errorText)
+	}
+
+	err := templates.ErrorPage(templates.ErrorPageProps{Text: text}).Render(r.Context(), w)
+
+	if err != nil {
+		h.log.Error().Err(err).Msg("failed to render error page template")
+		http.Error(w, "failed to render page", http.StatusInternalServerError)
+	}
+}

internal/web/templates/error.templ

@@ -0,0 +1,51 @@
+package templates
+
+import (
+	"github.com/co-browser/agent-browser/internal/web/templates/blocks"
+	"github.com/co-browser/agent-browser/internal/web/templates/components"
+)
+
+type ErrorPageProps struct {
+	Text string
+}
+
+css errorContainer() {
+	padding: 20px 16px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+css errorGoBackLink() {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 40px;
+	background-color: #ff4d4d;
+	color: white;
+	border: none;
+	border-radius: 4px;
+}
+
+css errorText() {
+	text-align: center;
+}
+
+templ ErrorPageComponent(props ErrorPageProps) {
+	<section class={ errorContainer() } data-testid="error-page">
+		<h2>Error</h2>
+		<div>
+			if props.Text != "" {
+				<p class={ errorText() }>{ props.Text }</p>
+			} else {
+				<p class={ errorText() }>Operation failed!</p>
+			}
+			@components.Link(components.LinkProps{Name: "Go back to home", Href: "/", Class: errorGoBackLink()})
+		</div>
+	</section>
+}
+
+templ ErrorPage(props ErrorPageProps) {
+	@blocks.Main(ErrorPageComponent(props))
+}

internal/web/templates/success.templ

@@ -28,14 +28,18 @@ css successGoBackLink() {
 	border-radius: 4px;
 }
 
+css successText() {
+	text-align: center;
+}
+
 templ SuccessPageComponent(props SuccessPageProps) {
 	<section class={ successContainer() } data-testid="success-page">
 		<h2>Success</h2>
 		<div>
 			if props.Text != "" {
-				<p>{ props.Text }</p>
+				<p class={ successText() }>{ props.Text }</p>
 			} else {
-				<p>Operation completed successfully!</p>
+				<p class={ successText() }>Operation completed successfully!</p>
 			}
 			@components.Link(components.LinkProps{Name: "Go back to home", Href: "/", Class: successGoBackLink()})
 		</div>