feat(web): add mock create server method

Author: 0xmad

README.md

@@ -83,7 +83,7 @@ This project uses Go modules and follows a standard Go project layout:
 
     This will compile the application into the `out/` directory and start the server (defaulting to `localhost:8080`).
 
-2. **Access the UI (Placeholder):** Open your browser to `http://localhost:8080/ui`.
+2. **Access the UI (Placeholder):** Open your browser to `http://localhost:8080`.
 
 ## API Documentation
 

internal/web/handlers/ui.go

@@ -2,6 +2,7 @@
 package handlers
 
 import (
+	"fmt"
 	"net/http"
 
 	"github.com/co-browser/agent-browser/internal/log"
@@ -19,8 +20,9 @@ func NewUIHandler(logger log.Logger) http.Handler {
 	h := &UIHandler{log: logger}
 	mux := http.NewServeMux()
 
-	mux.HandleFunc("/ui", h.serveIndex)
-	mux.HandleFunc("/ui/add", h.serveAddPage)
+	mux.HandleFunc("/", h.serveIndex)
+	mux.HandleFunc("/add", h.serveAddPage)
+	mux.HandleFunc("/success", h.serveSuccessPage)
 
 	return mux
 }
@@ -43,10 +45,34 @@ func (h *UIHandler) serveIndex(w http.ResponseWriter, r *http.Request) {
 			},
 		},
 	}).Render(r.Context(), w)
+
 	if err != nil {
 		// Use the injected logger
 		h.log.Error().Err(err).Msg("failed to render index page template")
 		http.Error(w, "failed to render page", http.StatusInternalServerError)
 		// Removed old comment: // Consider logging the error as well: log.Printf(\"Error rendering template: %v\", err)
 	}
 }
+
+func (h *UIHandler) serveAddPage(w http.ResponseWriter, r *http.Request) {
+	err := templates.AddPage(templates.AddPageProps{}).Render(r.Context(), w)
+
+	if err != nil {
+		h.log.Error().Err(err).Msg("failed to render add page template")
+		http.Error(w, "failed to render page", http.StatusInternalServerError)
+	}
+}
+
+func (h *UIHandler) serveSuccessPage(w http.ResponseWriter, r *http.Request) {
+	name := r.URL.Query().Get("name")
+	ip := r.URL.Query().Get("ip")
+
+	text := fmt.Sprintf("Successfully added server '%s' with IP %s.", name, ip)
+
+	err := templates.SuccessPage(templates.SuccessPageProps{Text: text}).Render(r.Context(), w)
+
+	if err != nil {
+		h.log.Error().Err(err).Msg("failed to render success page template")
+		http.Error(w, "failed to render page", http.StatusInternalServerError)
+	}
+}

internal/web/middleware/middleware.go

@@ -1,15 +1,2 @@
 // Package middleware provides HTTP middleware components for the web server.
 package middleware
-
-import "net/http"
-
-func StripTrailingSlash(next http.Handler) http.Handler {
-	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		if len(r.URL.Path) > 1 && r.URL.Path[len(r.URL.Path)-1] == '/' {
-			http.Redirect(w, r, r.URL.Path[:len(r.URL.Path)-1], http.StatusMovedPermanently)
-			return
-		}
-
-		next.ServeHTTP(w, r)
-	})
-}

internal/web/server.go

@@ -12,24 +12,27 @@ import (
 )
 
 // NewMux creates the main HTTP ServeMux.
-func NewMux(uiHandler http.Handler /* add apiHandler http.Handler later */) *http.ServeMux {
+func NewMux(params struct {
+	fx.In
+
+	UIHandler  http.Handler `name:"uiHandler"`
+	APIHandler http.Handler `name:"apiHandler"`
+}) *http.ServeMux {
 	mux := http.NewServeMux()
 	// Define routes here
-	mux.Handle("/ui", uiHandler)
-	// Add metrics endpoint
 	mux.Handle("/metrics", promhttp.Handler())
-	// TODO: Add routes for API handlers
-	// mux.Handle("/api/", apiHandler)
+	mux.Handle("/", params.UIHandler)
+	mux.Handle("/api/", params.APIHandler)
+
 	return mux
 }
 
-
 // NewServer creates the main HTTP server instance.
 func NewServer(mux *http.ServeMux) *http.Server {
 	// TODO: Make address configurable
 	return &http.Server{
 		Addr:    ":8080",
-		Handler: middleware.StripTrailingSlash(mux),
+		Handler: mux,
 	}
 }
 

internal/web/templates/blocks/add_server_form.templ

@@ -43,7 +43,7 @@ css addServerFormButton() {
 templ AddServerForm() {
 	<section class={ addServerForm() } data-testid="add-server-form">
 		<h2>Add New Server</h2>
-		<form method="POST" action="/ui/add">
+		<form method="POST" action="/api/create">
 			<div class={ addServerFormField() }>
 				<label class={ addServerFormFieldLabel() } for="name">
 					Server Name:
@@ -53,6 +53,7 @@ templ AddServerForm() {
 					id="name"
 					type="text"
 					name="name"
+					pattern="^[a-zA-Z0-9]([a-zA-Z0-9-_]{0,62}[a-zA-Z0-9])?$"
 					placeholder="Enter server name"
 					required
 				/>

internal/web/templates/blocks/header.templ

@@ -18,6 +18,6 @@ css headerLink() {
 
 templ Header(name string) {
 	<header class={ header() } data-testid="header">
-		<a class={ headerLink() } href="/ui"><h1 class={ headerTitle() }>{ name }</h1></a>
+		<a class={ headerLink() } href="/"><h1 class={ headerTitle() }>{ name }</h1></a>
 	</header>
 }

internal/web/templates/blocks/servers.templ

@@ -56,11 +56,19 @@ css serverSectionHeader() {
 	align-items: center;
 }
 
+css serverListItemRemove() {
+	background-color: #ff4d4d;
+	color: #fff;
+	padding: 5px 10px;
+	border: none;
+	border-radius: 4px;
+}
+
 templ Servers(servers []domain.ServerItem) {
 	<section class={ serverSection() }>
 		<div class={ serverSectionHeader() }>
 			<h2 class={ serverTitle() }>MCP servers</h2>
-			@components.Link("Add server", "/ui/add")
+			@components.Link(components.LinkProps{ Name: "Add server", Href: "/add" })
 		</div>
 		<ul class={ serverList() } data-testid="servers">
 			for _, item := range servers {
@@ -76,6 +84,6 @@ templ Server(server domain.ServerItem) {
 			<strong class={ serverListItemName() }>{ server.Name }</strong>
 			<div class={ serverListItemIP() }>{ server.IP }</div>
 		</div>
-		@components.Button(components.ButtonProps{Label: "Remove", Type: "button"})
+		@components.Button(components.ButtonProps{Label: "Remove", Type: "button", Class: serverListItemRemove()})
 	</li>
 }

internal/web/templates/components/link.templ

@@ -1,5 +1,11 @@
 package components
 
+type LinkProps struct {
+	Name string
+	Href templ.SafeURL
+	Class templ.CSSClass
+}
+
 css link() {
 	text-decoration: none;
 	text-transform: none;
@@ -11,6 +17,6 @@ css link() {
 	display: block;
 }
 
-templ Link(name string, href templ.SafeURL) {
-	<a class={ link() } href={ href }>{ name }</a>
+templ Link(props LinkProps) {
+	<a class={ link(), props.Class } href={ props.Href }>{ props.Name }</a>
 }

internal/web/templates/success.templ

@@ -0,0 +1,47 @@
+package templates
+
+import (
+	"github.com/co-browser/agent-browser/internal/web/templates/blocks"
+	"github.com/co-browser/agent-browser/internal/web/templates/components"
+)
+
+type SuccessPageProps struct {
+	Text string
+}
+
+css successContainer() {
+	padding: 20px 16px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+css successGoBackLink() {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 40px;
+	background-color: #007bff;
+	color: white;
+	border: none;
+	border-radius: 4px;
+}
+
+templ SuccessPageComponent(props SuccessPageProps) {
+	<section class={ successContainer() } data-testid="success-page">
+		<h2>Success</h2>
+		<div>
+			if props.Text != "" {
+				<p>{ props.Text }</p>
+			} else {
+				<p>Operation completed successfully!</p>
+			}
+			@components.Link(components.LinkProps{Name: "Go back to home", Href: "/", Class: successGoBackLink()})
+		</div>
+	</section>
+}
+
+templ SuccessPage(props SuccessPageProps) {
+	@blocks.Main(SuccessPageComponent(props))
+}