Add multi-page app example demonstrating navigation

Add a comprehensive example showing client-side routing:
- Router setup with multiple routes (/, /about, /users, /admin)
- Route parameters (/users/:id) with the NumericIdGuard
- Navigation using Link component and programmatic Navigate/Back
- Route guards with AuthGuard for protected admin page
- Browser history integration with back/forward support

Closes #6

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

examples/auth/main.go

@@ -1,418 +0,0 @@
-//go:build js && wasm
-
-// Package main demonstrates OIDC authentication with Iris.
-//
-// This example shows:
-//   - OIDC client setup
-//   - Login/logout flow
-//   - Protected routes with auth guard
-//   - Displaying user info
-//   - Token handling
-package main
-
-import (
-	"encoding/base64"
-	"encoding/json"
-	"strings"
-	"syscall/js"
-
-	"git.flowmade.one/flowmade-one/iris/auth"
-	"git.flowmade.one/flowmade-one/iris/navigation"
-	"git.flowmade.one/flowmade-one/iris/reactive"
-	"git.flowmade.one/flowmade-one/iris/ui"
-)
-
-// Configuration - in production, these would come from environment/config
-const (
-	// OIDC provider configuration
-	// Update these values for your OIDC provider (e.g., Dex, Keycloak, Auth0)
-	OIDCIssuer  = "https://dex.example.com"
-	ClientID    = "iris-example-app"
-	RedirectURI = "http://localhost:8080/callback"
-)
-
-var (
-	// Global OIDC client
-	oidcClient *auth.OIDCClient
-
-	// Reactive state for authentication
-	isAuthenticated = reactive.NewSignal(false)
-	currentUser     = reactive.NewSignal[*UserDisplay](nil)
-	authError       = reactive.NewSignal("")
-	isLoading       = reactive.NewSignal(false)
-
-	// Font presets
-	fontTitle   = ui.NewFont().Size("32px").Weight("700")
-	fontHeading = ui.NewFont().Size("20px").Weight("600")
-)
-
-// UserDisplay holds user information for display
-type UserDisplay struct {
-	Email string
-	Name  string
-	Sub   string
-}
-
-func main() {
-	// Initialize OIDC client
-	oidcClient = auth.NewOIDCClient(OIDCIssuer, ClientID, RedirectURI)
-
-	// Check for existing tokens on startup
-	checkExistingSession()
-
-	// Check if this is an OAuth callback
-	if isCallbackPath() {
-		handleOAuthCallback()
-		return
-	}
-	router := navigation.NewRouter(getRoutes())
-	router.SetNotFoundHandler(notFoundView)
-	navigation.SetGlobalRouter(router)
-
-	// Create the main app with router
-	ui.NewAppWithRouter(router)
-
-	// Keep the application running
-	select {}
-}
-
-// getRoutes returns the route configuration for the application
-func getRoutes() []navigation.Route {
-	return []navigation.Route{
-		{
-			Path:    "/",
-			Handler: homeView,
-		},
-		{
-			Path:    "/callback",
-			Handler: callbackView,
-		},
-		{
-			Path:    "/profile",
-			Handler: profileView,
-			Guards:  []navigation.RouteGuard{authGuard()},
-		},
-		{
-			Path:    "/protected",
-			Handler: protectedView,
-			Guards:  []navigation.RouteGuard{authGuard()},
-		},
-	}
-}
-
-// checkExistingSession checks for existing valid tokens
-func checkExistingSession() {
-	if oidcClient.IsAuthenticated() {
-		isAuthenticated.Set(true)
-		loadUserFromToken()
-	}
-}
-
-// isCallbackPath checks if current path is the OAuth callback
-func isCallbackPath() bool {
-	pathname := js.Global().Get("window").Get("location").Get("pathname").String()
-	search := js.Global().Get("window").Get("location").Get("search").String()
-	return pathname == "/callback" && strings.Contains(search, "code=")
-}
-
-// handleOAuthCallback processes the OAuth callback
-func handleOAuthCallback() {
-	isLoading.Set(true)
-
-	// Discover OIDC configuration and handle callback
-	oidcClient.DiscoverConfigAsync(OIDCIssuer, func(err error) {
-		if err != nil {
-			authError.Set("Failed to load OIDC configuration: " + err.Error())
-			isLoading.Set(false)
-			renderApp()
-			return
-		}
-
-		// Exchange code for tokens
-		tokens, err := oidcClient.HandleCallback(OIDCIssuer)
-		if err != nil {
-			authError.Set("Authentication failed: " + err.Error())
-			isLoading.Set(false)
-			renderApp()
-			return
-		}
-
-		// Store tokens
-		oidcClient.StoreTokens(tokens)
-		isAuthenticated.Set(true)
-		loadUserFromToken()
-		isLoading.Set(false)
-
-		// Clear URL parameters and redirect to home
-		js.Global().Get("window").Get("history").Call("replaceState", nil, "", "/")
-		renderApp()
-	})
-}
-
-// renderApp initializes and renders the app after callback processing
-func renderApp() {
-	router := navigation.NewRouter(getRoutes())
-	router.SetNotFoundHandler(notFoundView)
-	navigation.SetGlobalRouter(router)
-
-	ui.NewAppWithRouter(router)
-
-	select {}
-}
-
-// loadUserFromToken extracts user info from the ID token
-func loadUserFromToken() {
-	tokens := oidcClient.GetStoredTokens()
-	if tokens == nil || tokens.IDToken == "" {
-		return
-	}
-
-	// Parse the ID token to get user info (JWT payload is the second part)
-	parts := strings.Split(tokens.IDToken, ".")
-	if len(parts) != 3 {
-		return
-	}
-
-	// Decode the payload
-	payload, err := base64.RawURLEncoding.DecodeString(parts[1])
-	if err != nil {
-		return
-	}
-
-	var claims struct {
-		Sub   string `json:"sub"`
-		Email string `json:"email"`
-		Name  string `json:"name"`
-	}
-	if err := json.Unmarshal(payload, &claims); err != nil {
-		return
-	}
-
-	currentUser.Set(&UserDisplay{
-		Email: claims.Email,
-		Name:  claims.Name,
-		Sub:   claims.Sub,
-	})
-}
-
-// authGuard creates a route guard that checks authentication
-func authGuard() navigation.RouteGuard {
-	return navigation.AuthGuard(func() bool {
-		return isAuthenticated.Get()
-	})
-}
-
-// login initiates the OIDC login flow
-func login() {
-	isLoading.Set(true)
-	authError.Set("")
-
-	oidcClient.DiscoverConfigAsync(OIDCIssuer, func(err error) {
-		if err != nil {
-			authError.Set("Failed to connect to authentication provider: " + err.Error())
-			isLoading.Set(false)
-			return
-		}
-
-		if err := oidcClient.StartAuthFlow(); err != nil {
-			authError.Set("Failed to start login: " + err.Error())
-			isLoading.Set(false)
-		}
-		// Note: If successful, the browser will redirect to the OIDC provider
-	})
-}
-
-// logout clears authentication state
-func logout() {
-	oidcClient.Logout()
-	isAuthenticated.Set(false)
-	currentUser.Set(nil)
-	navigation.Navigate("/")
-}
-
-// View functions
-
-func homeView(params map[string]string) ui.View {
-	return ui.VerticalGroup(
-		header(),
-		ui.VerticalGroup(
-			ui.TextFromString("Iris Auth Example").
-				Font(fontTitle).
-				Margin("20px 0"),
-			ui.TextFromString("This example demonstrates OIDC authentication with protected routes.").
-				Color("#666"),
-			ui.TextFromFunction(func() string {
-				if authError.Get() != "" {
-					return "Error: " + authError.Get()
-				}
-				return ""
-			}).Color("#ff4444"),
-			authSection(),
-		).Padding("20px").MaxWidth("800px"),
-	).Gap("0")
-}
-
-func header() ui.View {
-	return ui.HorizontalGroup(
-		ui.TextFromString("Auth Example").Font(fontHeading),
-		navigation.Link("/", ui.TextFromString("Home")),
-		navigation.Link("/profile", ui.TextFromString("Profile")),
-		navigation.Link("/protected", ui.TextFromString("Protected")),
-		ui.Spacer(),
-		authButton(),
-	).Padding("16px 24px").Background("#f5f5f5").BorderBottom("1px solid #ddd")
-}
-
-func authSection() ui.View {
-	return ui.VerticalGroup(
-		ui.TextFromFunction(func() string {
-			if isLoading.Get() {
-				return "Loading..."
-			}
-			if isAuthenticated.Get() {
-				user := currentUser.Get()
-				if user != nil {
-					return "Welcome, " + user.Name + "!"
-				}
-				return "You are logged in."
-			}
-			return "You are not logged in."
-		}).Margin("20px 0"),
-
-		ui.TextFromFunction(func() string {
-			if isAuthenticated.Get() {
-				return "Navigate to Profile or Protected pages to see authenticated content."
-			}
-			return "Click Login to authenticate with your OIDC provider."
-		}).Color("#666"),
-	).Padding("20px").Background("#fafafa").BorderRadius("8px").Margin("20px 0")
-}
-
-func authButton() ui.View {
-	return ui.Button(func() {
-		if isAuthenticated.Get() {
-			logout()
-		} else {
-			login()
-		}
-	}, ui.TextFromFunction(func() string {
-		if isLoading.Get() {
-			return "Loading..."
-		}
-		if isAuthenticated.Get() {
-			return "Logout"
-		}
-		return "Login"
-	})).Padding("8px 16px").Background("#007bff").Foreground("#fff").
-		Border("none").BorderRadius("4px").Cursor("pointer")
-}
-
-func callbackView(params map[string]string) ui.View {
-	return ui.VerticalGroup(
-		header(),
-		ui.VerticalGroup(
-			ui.TextFromString("Processing login...").Font(fontHeading),
-			ui.TextFromString("Please wait while we complete authentication.").Color("#666"),
-		).Padding("40px"),
-	).Gap("0")
-}
-
-func profileView(params map[string]string) ui.View {
-	return ui.VerticalGroup(
-		header(),
-		ui.VerticalGroup(
-			ui.TextFromString("User Profile").Font(fontTitle).Margin("20px 0"),
-			userInfoCard(),
-			tokenInfoCard(),
-		).Padding("20px").MaxWidth("800px"),
-	).Gap("0")
-}
-
-func userInfoCard() ui.View {
-	return ui.VerticalGroup(
-		ui.TextFromString("User Information").Font(fontHeading),
-		ui.TextFromFunction(func() string {
-			user := currentUser.Get()
-			if user == nil {
-				return "No user information available"
-			}
-			return "Name: " + user.Name
-		}),
-		ui.TextFromFunction(func() string {
-			user := currentUser.Get()
-			if user == nil {
-				return ""
-			}
-			return "Email: " + user.Email
-		}),
-		ui.TextFromFunction(func() string {
-			user := currentUser.Get()
-			if user == nil {
-				return ""
-			}
-			return "Subject: " + user.Sub
-		}).Color("#888"),
-	).Padding("20px").Background("#fafafa").BorderRadius("8px").Margin("10px 0").Gap("8px")
-}
-
-func tokenInfoCard() ui.View {
-	return ui.VerticalGroup(
-		ui.TextFromString("Token Information").Font(fontHeading),
-		ui.TextFromFunction(func() string {
-			tokens := oidcClient.GetStoredTokens()
-			if tokens == nil {
-				return "No tokens available"
-			}
-			return "Access Token: " + truncateToken(tokens.AccessToken)
-		}),
-		ui.TextFromFunction(func() string {
-			tokens := oidcClient.GetStoredTokens()
-			if tokens == nil {
-				return ""
-			}
-			return "ID Token: " + truncateToken(tokens.IDToken)
-		}),
-		ui.TextFromFunction(func() string {
-			authHeader := oidcClient.GetAuthHeader()
-			if authHeader == "" {
-				return ""
-			}
-			return "Auth Header: " + truncateToken(authHeader)
-		}).Color("#888"),
-	).Padding("20px").Background("#fafafa").BorderRadius("8px").Margin("10px 0").Gap("8px")
-}
-
-func protectedView(params map[string]string) ui.View {
-	return ui.VerticalGroup(
-		header(),
-		ui.VerticalGroup(
-			ui.TextFromString("Protected Content").Font(fontTitle).Margin("20px 0"),
-			ui.TextFromString("This page is only visible to authenticated users.").Color("#666"),
-			ui.VerticalGroup(
-				ui.TextFromString("Access Granted").Font(fontHeading).Color("#28a745"),
-				ui.TextFromString("You have successfully accessed a protected route."),
-				ui.TextFromString("The auth guard verified your authentication status before allowing access.").Color("#888"),
-			).Padding("20px").Background("#e8f5e9").BorderRadius("8px").Margin("20px 0"),
-		).Padding("20px").MaxWidth("800px"),
-	).Gap("0")
-}
-
-func notFoundView() ui.View {
-	return ui.VerticalGroup(
-		header(),
-		ui.VerticalGroup(
-			ui.TextFromString("404 - Page Not Found").Font(fontTitle).Color("#ff4444"),
-			ui.TextFromString("The requested page could not be found.").Color("#666"),
-			navigation.Link("/", ui.TextFromString("Go to Home").Color("#007bff")),
-		).Padding("40px"),
-	).Gap("0")
-}
-
-// Helper functions
-
-func truncateToken(token string) string {
-	if len(token) <= 20 {
-		return token
-	}
-	return token[:10] + "..." + token[len(token)-10:]
-}

examples/multipage/main.go

@@ -0,0 +1,265 @@
+//go:build js && wasm
+
+// Package main demonstrates Iris client-side routing capabilities.
+//
+// This example shows:
+//   - Router setup with multiple routes
+//   - Route parameters (/users/:id)
+//   - Navigation between pages using Link and Navigate
+//   - Route guards for protected routes
+//   - History management (back/forward)
+package main
+
+import (
+	"fmt"
+
+	"git.flowmade.one/flowmade-one/iris/navigation"
+	"git.flowmade.one/flowmade-one/iris/reactive"
+	"git.flowmade.one/flowmade-one/iris/ui"
+)
+
+// Global auth state to demonstrate route guards
+var isAuthenticated = reactive.NewSignal(false)
+
+func main() {
+	// Define routes with their handlers and guards
+	routes := []navigation.Route{
+		{Path: "/", Handler: homePage},
+		{Path: "/about", Handler: aboutPage},
+		{Path: "/users", Handler: usersPage},
+		{Path: "/users/:id", Handler: userDetailPage, Guards: []navigation.RouteGuard{
+			navigation.NumericIdGuard(),
+		}},
+		{Path: "/admin", Handler: adminPage, Guards: []navigation.RouteGuard{
+			navigation.AuthGuard(func() bool { return isAuthenticated.Get() }),
+		}},
+	}
+
+	// Create router and set up navigation
+	router := navigation.NewRouter(routes)
+	router.SetNotFoundHandler(notFoundPage)
+	navigation.SetGlobalRouter(router)
+
+	// Mount the app with router support
+	ui.NewAppWithRouter(router)
+
+	// Keep the application running
+	select {}
+}
+
+// homePage renders the landing page with navigation links
+func homePage(params map[string]string) ui.View {
+	return pageLayout("Home",
+		ui.VerticalGroup(
+			ui.TextFromString("Welcome to the Iris Multi-Page Demo").
+				Color("#333").
+				Padding("16px"),
+			ui.TextFromString("This example demonstrates client-side routing with:").
+				Color("#666").
+				Padding("8px"),
+			ui.VerticalGroup(
+				ui.TextFromString("- Multiple routes and page navigation").Color("#888"),
+				ui.TextFromString("- Route parameters (see /users/:id)").Color("#888"),
+				ui.TextFromString("- Route guards for protected pages").Color("#888"),
+				ui.TextFromString("- Browser history integration").Color("#888"),
+			).Padding("8px 24px"),
+			ui.TextFromString("Use the navigation bar above to explore.").
+				Color("#666").
+				Padding("16px"),
+		),
+	)
+}
+
+// aboutPage renders information about the demo
+func aboutPage(params map[string]string) ui.View {
+	return pageLayout("About",
+		ui.VerticalGroup(
+			ui.TextFromString("About Iris Navigation").
+				Color("#333").
+				Padding("16px"),
+			ui.TextFromString("The navigation package provides:").
+				Color("#666").
+				Padding("8px"),
+			ui.VerticalGroup(
+				ui.TextFromString("Router - Define routes with path patterns and handlers").Color("#888"),
+				ui.TextFromString("RouteGuard - Protect routes with custom logic").Color("#888"),
+				ui.TextFromString("HistoryManager - Integrate with browser history").Color("#888"),
+				ui.TextFromString("Link - Create navigational elements").Color("#888"),
+				ui.TextFromString("Navigate/Back/Forward - Programmatic navigation").Color("#888"),
+			).Padding("8px 24px"),
+		),
+	)
+}
+
+// usersPage renders a list of users with links to their detail pages
+func usersPage(params map[string]string) ui.View {
+	users := []struct {
+		ID   string
+		Name string
+	}{
+		{"1", "Alice"},
+		{"2", "Bob"},
+		{"3", "Charlie"},
+		{"4", "Diana"},
+	}
+
+	var userLinks []ui.View
+	for _, user := range users {
+		// Capture user in closure
+		u := user
+		userLinks = append(userLinks,
+			navigation.Link(fmt.Sprintf("/users/%s", u.ID),
+				ui.TextFromString(fmt.Sprintf("View %s (ID: %s)", u.Name, u.ID)).
+					Color("#0066cc"),
+			).Padding("8px").Cursor("pointer"),
+		)
+	}
+
+	return pageLayout("Users",
+		ui.VerticalGroup(
+			ui.TextFromString("User Directory").
+				Color("#333").
+				Padding("16px"),
+			ui.TextFromString("Click a user to see their details:").
+				Color("#666").
+				Padding("8px"),
+			ui.VerticalGroup(userLinks...).Padding("8px"),
+		),
+	)
+}
+
+// userDetailPage shows details for a specific user using the :id parameter
+func userDetailPage(params map[string]string) ui.View {
+	userID := params["id"]
+
+	// Simulated user data
+	userData := map[string]struct {
+		Name  string
+		Email string
+		Role  string
+	}{
+		"1": {"Alice", "alice@example.com", "Admin"},
+		"2": {"Bob", "bob@example.com", "User"},
+		"3": {"Charlie", "charlie@example.com", "User"},
+		"4": {"Diana", "diana@example.com", "Moderator"},
+	}
+
+	user, exists := userData[userID]
+	if !exists {
+		return pageLayout("User Not Found",
+			ui.VerticalGroup(
+				ui.TextFromString(fmt.Sprintf("User with ID %s not found", userID)).
+					Color("#ff4444").
+					Padding("16px"),
+				ui.Button(func() {
+					navigation.Navigate("/users")
+				}, ui.TextFromString("Back to Users")).
+					Padding("8px"),
+			),
+		)
+	}
+
+	return pageLayout(fmt.Sprintf("User: %s", user.Name),
+		ui.VerticalGroup(
+			ui.TextFromString(fmt.Sprintf("User Details (ID: %s)", userID)).
+				Color("#333").
+				Padding("16px"),
+			ui.VerticalGroup(
+				ui.TextFromString(fmt.Sprintf("Name: %s", user.Name)).Color("#666"),
+				ui.TextFromString(fmt.Sprintf("Email: %s", user.Email)).Color("#666"),
+				ui.TextFromString(fmt.Sprintf("Role: %s", user.Role)).Color("#666"),
+			).Padding("8px 24px"),
+			ui.HorizontalGroup(
+				ui.Button(func() {
+					navigation.Back()
+				}, ui.TextFromString("Go Back")).Padding("8px"),
+				ui.Button(func() {
+					navigation.Navigate("/users")
+				}, ui.TextFromString("All Users")).Padding("8px"),
+			).Padding("16px"),
+		),
+	)
+}
+
+// adminPage is a protected route that requires authentication
+func adminPage(params map[string]string) ui.View {
+	return pageLayout("Admin",
+		ui.VerticalGroup(
+			ui.TextFromString("Admin Dashboard").
+				Color("#333").
+				Padding("16px"),
+			ui.TextFromString("Welcome to the protected admin area!").
+				Color("#28a745").
+				Padding("8px"),
+			ui.TextFromString("This page is protected by an AuthGuard.").
+				Color("#666").
+				Padding("8px"),
+			ui.Button(func() {
+				isAuthenticated.Set(false)
+				navigation.Navigate("/")
+			}, ui.TextFromString("Logout")).
+				Padding("8px").
+				Background("#dc3545").
+				Foreground("#fff"),
+		),
+	)
+}
+
+// notFoundPage renders when no route matches
+func notFoundPage() ui.View {
+	return pageLayout("404",
+		ui.VerticalGroup(
+			ui.TextFromString("404 - Page Not Found").
+				Color("#ff4444").
+				Padding("16px"),
+			ui.TextFromString("The page you are looking for does not exist.").
+				Color("#666").
+				Padding("8px"),
+			ui.Button(func() {
+				navigation.Navigate("/")
+			}, ui.TextFromString("Go Home")).Padding("8px"),
+		),
+	)
+}
+
+// pageLayout provides consistent page structure with navigation
+func pageLayout(title string, content ui.View) ui.View {
+	return ui.VerticalGroup(
+		navBar(),
+		ui.VerticalGroup(
+			ui.TextFromString(title).
+				Color("#333").
+				Padding("8px").
+				Background("#f0f0f0").
+				Width("100%"),
+			content,
+		).Padding("16px"),
+	).MinHeight("100vh")
+}
+
+// navBar creates the navigation header with links
+func navBar() ui.View {
+	return ui.HorizontalGroup(
+		navigation.Link("/", ui.TextFromString("Home").Color("#fff")),
+		navigation.Link("/about", ui.TextFromString("About").Color("#fff")),
+		navigation.Link("/users", ui.TextFromString("Users").Color("#fff")),
+		authButton(),
+	).Background("#333").Padding("8px 16px").AlignItems("center")
+}
+
+// authButton shows login/admin based on auth state
+func authButton() ui.View {
+	return ui.Button(func() {
+		if isAuthenticated.Get() {
+			navigation.Navigate("/admin")
+		} else {
+			isAuthenticated.Set(true)
+			navigation.Navigate("/admin")
+		}
+	}, ui.TextFromFunction(func() string {
+		if isAuthenticated.Get() {
+			return "Admin"
+		}
+		return "Login"
+	}).Color("#fff")).Background("transparent").Border("1px solid #fff").Padding("4px 12px").Cursor("pointer")
+}