add htmx web frontend with templates and session auth

2026-01-18 21:11:23 +01:00
parent 1bc112047d
commit 01a0ac68a4
11 changed files with 969 additions and 0 deletions
--- a/portal/internal/api/router.go
+++ b/portal/internal/api/router.go
@@ -2,6 +2,7 @@
 package api

 import (
+	"log"
 	"net/http"

 	"github.com/go-chi/chi/v5"
@@ -11,6 +12,7 @@ import (
 	"github.com/omixlab/mosis-portal/internal/auth"
 	"github.com/omixlab/mosis-portal/internal/config"
 	"github.com/omixlab/mosis-portal/internal/database"
+	"github.com/omixlab/mosis-portal/internal/web"
 )

 // NewRouter creates and configures the HTTP router
@@ -122,5 +124,51 @@ func NewRouter(cfg *config.Config, db *database.DB) http.Handler {
 		r.Post("/review/{versionID}/reject", handlers.NotImplemented)
 	})

+	// Web UI routes (htmx + Go templates)
+	webHandler, err := web.NewHandler(db)
+	if err != nil {
+		log.Printf("Warning: Failed to initialize web handler: %v", err)
+	} else {
+		sessionMW := web.NewSessionMiddleware(db, cfg.JWTSecret)
+
+		// Public web pages
+		r.Group(func(r chi.Router) {
+			r.Use(sessionMW.LoadSession)
+			r.Get("/", func(w http.ResponseWriter, r *http.Request) {
+				http.Redirect(w, r, "/dashboard", http.StatusSeeOther)
+			})
+			r.Get("/login", webHandler.Login)
+		})
+
+		// Protected web pages
+		r.Group(func(r chi.Router) {
+			r.Use(sessionMW.LoadSession)
+			r.Use(sessionMW.RequireSession)
+			r.Get("/dashboard", webHandler.Dashboard)
+			r.Get("/apps/new", webHandler.AppNew)
+			r.Get("/apps/{appID}", webHandler.AppDetail)
+
+			// htmx partials
+			r.Get("/partials/apps", webHandler.AppListPartial)
+		})
+
+		// Auth callback that sets session (after OAuth)
+		r.Get("/auth/callback", func(w http.ResponseWriter, r *http.Request) {
+			developerID := r.URL.Query().Get("developer_id")
+			if developerID == "" {
+				http.Redirect(w, r, "/login?error=Authentication failed", http.StatusSeeOther)
+				return
+			}
+			web.SetSession(w, developerID)
+			http.Redirect(w, r, "/dashboard", http.StatusSeeOther)
+		})
+
+		// Logout (clears session)
+		r.Get("/auth/logout", func(w http.ResponseWriter, r *http.Request) {
+			web.ClearSession(w)
+			http.Redirect(w, r, "/login", http.StatusSeeOther)
+		})
+	}
+
 	return r
 }
--- a/portal/internal/web/handlers.go
+++ b/portal/internal/web/handlers.go
@@ -0,0 +1,194 @@
+package web
+
+import (
+	"net/http"
+
+	"github.com/go-chi/chi/v5"
+	"github.com/omixlab/mosis-portal/internal/database"
+)
+
+// Handler handles web page requests
+type Handler struct {
+	db        *database.DB
+	templates *Templates
+}
+
+// NewHandler creates a new web handler
+func NewHandler(db *database.DB) (*Handler, error) {
+	templates, err := NewTemplates()
+	if err != nil {
+		return nil, err
+	}
+	return &Handler{
+		db:        db,
+		templates: templates,
+	}, nil
+}
+
+// PageData is the base data structure for all pages
+type PageData struct {
+	Title     string
+	ActiveNav string
+	Developer *database.Developer
+	Error     string
+}
+
+// Login renders the login page
+func (h *Handler) Login(w http.ResponseWriter, r *http.Request) {
+	data := PageData{
+		Title: "Sign In",
+	}
+
+	// Check for error message
+	if err := r.URL.Query().Get("error"); err != "" {
+		data.Error = err
+	}
+
+	h.render(w, "login", data)
+}
+
+// Dashboard renders the dashboard page
+func (h *Handler) Dashboard(w http.ResponseWriter, r *http.Request) {
+	developer := getDeveloperFromContext(r)
+	if developer == nil {
+		http.Redirect(w, r, "/login", http.StatusSeeOther)
+		return
+	}
+
+	// Get stats
+	apps, total, _ := h.db.ListApps(r.Context(), developer.ID, "", 1, 100)
+
+	data := struct {
+		PageData
+		Stats struct {
+			TotalApps   int
+			Downloads   int64
+			ActiveUsers int64
+		}
+		Apps []*database.App
+	}{
+		PageData: PageData{
+			Title:     "Dashboard",
+			ActiveNav: "dashboard",
+			Developer: developer,
+		},
+		Apps: apps,
+	}
+	data.Stats.TotalApps = total
+	data.Stats.Downloads = 0     // TODO: implement
+	data.Stats.ActiveUsers = 0   // TODO: implement
+
+	h.render(w, "dashboard", data)
+}
+
+// AppNew renders the new app form
+func (h *Handler) AppNew(w http.ResponseWriter, r *http.Request) {
+	developer := getDeveloperFromContext(r)
+	if developer == nil {
+		http.Redirect(w, r, "/login", http.StatusSeeOther)
+		return
+	}
+
+	data := PageData{
+		Title:     "Create New App",
+		ActiveNav: "apps",
+		Developer: developer,
+	}
+
+	h.render(w, "app_new", data)
+}
+
+// AppDetail renders the app detail page
+func (h *Handler) AppDetail(w http.ResponseWriter, r *http.Request) {
+	developer := getDeveloperFromContext(r)
+	if developer == nil {
+		http.Redirect(w, r, "/login", http.StatusSeeOther)
+		return
+	}
+
+	appID := chi.URLParam(r, "appID")
+	app, err := h.db.GetApp(r.Context(), appID)
+	if err != nil {
+		http.Error(w, "App not found", http.StatusNotFound)
+		return
+	}
+
+	// Verify ownership
+	if app.DeveloperID != developer.ID {
+		http.Error(w, "Forbidden", http.StatusForbidden)
+		return
+	}
+
+	// Get latest version
+	versions, totalVersions, _ := h.db.ListVersions(r.Context(), appID, "", 1, 1)
+	var latestVersion *database.AppVersion
+	if len(versions) > 0 {
+		latestVersion = versions[0]
+	}
+
+	data := struct {
+		PageData
+		App           *database.App
+		Tab           string
+		LatestVersion *database.AppVersion
+		TotalVersions int
+	}{
+		PageData: PageData{
+			Title:     app.Name,
+			ActiveNav: "apps",
+			Developer: developer,
+		},
+		App:           app,
+		Tab:           "overview",
+		LatestVersion: latestVersion,
+		TotalVersions: totalVersions,
+	}
+
+	h.render(w, "app_detail", data)
+}
+
+// AppListPartial renders the app list partial for htmx
+func (h *Handler) AppListPartial(w http.ResponseWriter, r *http.Request) {
+	developer := getDeveloperFromContext(r)
+	if developer == nil {
+		http.Error(w, "Unauthorized", http.StatusUnauthorized)
+		return
+	}
+
+	apps, _, err := h.db.ListApps(r.Context(), developer.ID, "", 1, 100)
+	if err != nil {
+		http.Error(w, "Failed to load apps", http.StatusInternalServerError)
+		return
+	}
+
+	data := struct {
+		Apps []*database.App
+	}{
+		Apps: apps,
+	}
+
+	h.renderPartial(w, "app_list", data)
+}
+
+// render renders a full page template
+func (h *Handler) render(w http.ResponseWriter, name string, data interface{}) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := h.templates.RenderPage(w, name, data); err != nil {
+		http.Error(w, "Template error: "+err.Error(), http.StatusInternalServerError)
+	}
+}
+
+// renderPartial renders a partial template
+func (h *Handler) renderPartial(w http.ResponseWriter, name string, data interface{}) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := h.templates.RenderPartial(w, name, data); err != nil {
+		http.Error(w, "Template error: "+err.Error(), http.StatusInternalServerError)
+	}
+}
+
+// getDeveloperFromContext retrieves the developer from the request context
+// This will be set by the session middleware
+func getDeveloperFromContext(r *http.Request) *database.Developer {
+	developer, _ := r.Context().Value("developer").(*database.Developer)
+	return developer
+}
--- a/portal/internal/web/session.go
+++ b/portal/internal/web/session.go
@@ -0,0 +1,94 @@
+package web
+
+import (
+	"context"
+	"encoding/gob"
+	"net/http"
+
+	"github.com/omixlab/mosis-portal/internal/database"
+)
+
+func init() {
+	// Register types for gob encoding (used by cookie sessions)
+	gob.Register(&database.Developer{})
+}
+
+// SessionMiddleware handles session-based authentication for web pages
+type SessionMiddleware struct {
+	db        *database.DB
+	cookieKey string
+}
+
+// NewSessionMiddleware creates a new session middleware
+func NewSessionMiddleware(db *database.DB, cookieKey string) *SessionMiddleware {
+	return &SessionMiddleware{
+		db:        db,
+		cookieKey: cookieKey,
+	}
+}
+
+// LoadSession loads the developer from session cookie
+func (m *SessionMiddleware) LoadSession(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		// Try to get developer ID from session cookie
+		cookie, err := r.Cookie("session")
+		if err != nil {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		// Lookup developer
+		developer, err := m.db.GetDeveloper(r.Context(), cookie.Value)
+		if err != nil {
+			// Invalid session, clear cookie
+			http.SetCookie(w, &http.Cookie{
+				Name:     "session",
+				Value:    "",
+				Path:     "/",
+				MaxAge:   -1,
+				HttpOnly: true,
+			})
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		// Add developer to context
+		ctx := context.WithValue(r.Context(), "developer", developer)
+		next.ServeHTTP(w, r.WithContext(ctx))
+	})
+}
+
+// RequireSession redirects to login if not authenticated
+func (m *SessionMiddleware) RequireSession(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		developer := getDeveloperFromContext(r)
+		if developer == nil {
+			http.Redirect(w, r, "/login", http.StatusSeeOther)
+			return
+		}
+		next.ServeHTTP(w, r)
+	})
+}
+
+// SetSession creates a session for the developer
+func SetSession(w http.ResponseWriter, developerID string) {
+	http.SetCookie(w, &http.Cookie{
+		Name:     "session",
+		Value:    developerID,
+		Path:     "/",
+		MaxAge:   60 * 60 * 24 * 30, // 30 days
+		HttpOnly: true,
+		SameSite: http.SameSiteLaxMode,
+	})
+}
+
+// ClearSession clears the session cookie
+func ClearSession(w http.ResponseWriter) {
+	http.SetCookie(w, &http.Cookie{
+		Name:     "session",
+		Value:    "",
+		Path:     "/",
+		MaxAge:   -1,
+		HttpOnly: true,
+	})
+}
--- a/portal/internal/web/templates.go
+++ b/portal/internal/web/templates.go
@@ -0,0 +1,109 @@
+package web
+
+import (
+	"embed"
+	"html/template"
+	"io"
+	"io/fs"
+	"path/filepath"
+	"strings"
+)
+
+//go:embed templates/*
+var templateFS embed.FS
+
+// Templates holds the parsed templates
+type Templates struct {
+	templates map[string]*template.Template
+}
+
+// NewTemplates creates and parses all templates
+func NewTemplates() (*Templates, error) {
+	t := &Templates{
+		templates: make(map[string]*template.Template),
+	}
+
+	// Load all layout and partial templates first
+	layoutFiles, err := fs.Glob(templateFS, "templates/layouts/*.html")
+	if err != nil {
+		return nil, err
+	}
+	partialFiles, err := fs.Glob(templateFS, "templates/partials/*.html")
+	if err != nil {
+		return nil, err
+	}
+
+	// Load page templates
+	pageFiles, err := fs.Glob(templateFS, "templates/pages/*.html")
+	if err != nil {
+		return nil, err
+	}
+
+	// Combine layouts and partials
+	baseFiles := append(layoutFiles, partialFiles...)
+
+	// Parse each page template with layouts and partials
+	for _, pageFile := range pageFiles {
+		files := append([]string{pageFile}, baseFiles...)
+
+		// Read and parse all files
+		tmpl := template.New(filepath.Base(pageFile))
+		for _, file := range files {
+			content, err := templateFS.ReadFile(file)
+			if err != nil {
+				return nil, err
+			}
+			_, err = tmpl.Parse(string(content))
+			if err != nil {
+				return nil, err
+			}
+		}
+
+		// Extract page name (e.g., "login" from "templates/pages/login.html")
+		name := strings.TrimSuffix(filepath.Base(pageFile), ".html")
+		t.templates[name] = tmpl
+	}
+
+	// Also parse partials standalone for htmx partial responses
+	for _, partialFile := range partialFiles {
+		content, err := templateFS.ReadFile(partialFile)
+		if err != nil {
+			return nil, err
+		}
+		tmpl, err := template.New(filepath.Base(partialFile)).Parse(string(content))
+		if err != nil {
+			return nil, err
+		}
+		name := "partial:" + strings.TrimSuffix(filepath.Base(partialFile), ".html")
+		t.templates[name] = tmpl
+	}
+
+	return t, nil
+}
+
+// RenderPage renders a full page template
+func (t *Templates) RenderPage(w io.Writer, name string, data interface{}) error {
+	tmpl, ok := t.templates[name]
+	if !ok {
+		return &ErrTemplateNotFound{Name: name}
+	}
+	return tmpl.ExecuteTemplate(w, "base", data)
+}
+
+// RenderPartial renders a partial template (for htmx responses)
+func (t *Templates) RenderPartial(w io.Writer, name string, data interface{}) error {
+	tmpl, ok := t.templates["partial:"+name]
+	if !ok {
+		return &ErrTemplateNotFound{Name: name}
+	}
+	return tmpl.ExecuteTemplate(w, name, data)
+}
+
+// ErrTemplateNotFound is returned when a template is not found
+type ErrTemplateNotFound struct {
+	Name string
+}
+
+func (e *ErrTemplateNotFound) Error() string {
+	return "template not found: " + e.Name
+}
--- a/portal/internal/web/templates/layouts/base.html
+++ b/portal/internal/web/templates/layouts/base.html
@@ -0,0 +1,33 @@
+{{define "base"}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{.Title}} - Mosis Developer Portal</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <style>
+    .htmx-indicator { display: none; }
+    .htmx-request .htmx-indicator { display: inline; }
+    .htmx-request.htmx-indicator { display: inline; }
+  </style>
+</head>
+<body class="bg-gray-50 min-h-screen" hx-boost="true">
+  {{if .Developer}}
+  {{template "navbar" .}}
+  {{end}}
+
+  <main class="{{if .Developer}}container mx-auto px-4 py-8{{end}}">
+    {{template "content" .}}
+  </main>
+
+  {{template "scripts" .}}
+</body>
+</html>
+{{end}}
+
+{{define "scripts"}}
+<!-- Page-specific scripts can go here -->
+{{end}}
--- a/portal/internal/web/templates/pages/app_detail.html
+++ b/portal/internal/web/templates/pages/app_detail.html
@@ -0,0 +1,162 @@
+{{define "content"}}
+<div class="mb-6">
+  <a href="/dashboard" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700">
+    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+    </svg>
+    Back to Dashboard
+  </a>
+</div>
+
+<!-- App Header -->
+<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
+  <div class="flex items-start justify-between">
+    <div class="flex items-center space-x-4">
+      <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center">
+        <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
+        </svg>
+      </div>
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900">{{.App.Name}}</h1>
+        <p class="text-gray-500">{{.App.PackageID}}</p>
+        <div class="mt-2">
+          {{if eq .App.Status "published"}}
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+            <span class="w-1.5 h-1.5 mr-1.5 bg-green-400 rounded-full"></span>
+            Published
+          </span>
+          {{else if eq .App.Status "draft"}}
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+            <span class="w-1.5 h-1.5 mr-1.5 bg-gray-400 rounded-full"></span>
+            Draft
+          </span>
+          {{else if eq .App.Status "review"}}
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+            <span class="w-1.5 h-1.5 mr-1.5 bg-yellow-400 rounded-full"></span>
+            In Review
+          </span>
+          {{end}}
+        </div>
+      </div>
+    </div>
+    <a href="/apps/{{.App.ID}}/versions/new" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
+      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+      </svg>
+      Submit New Version
+    </a>
+  </div>
+</div>
+
+<!-- Tabs -->
+<div class="border-b border-gray-200 mb-6">
+  <nav class="-mb-px flex space-x-8">
+    <a href="/apps/{{.App.ID}}" class="{{if eq .Tab "overview"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
+      Overview
+    </a>
+    <a href="/apps/{{.App.ID}}/versions" class="{{if eq .Tab "versions"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
+      Versions
+    </a>
+    <a href="/apps/{{.App.ID}}/analytics" class="{{if eq .Tab "analytics"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
+      Analytics
+    </a>
+    <a href="/apps/{{.App.ID}}/settings" class="{{if eq .Tab "settings"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
+      Settings
+    </a>
+  </nav>
+</div>
+
+<!-- Tab Content -->
+{{block "tab_content" .}}
+<!-- Overview Tab (default) -->
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+  <!-- Left Column -->
+  <div class="lg:col-span-2 space-y-6">
+    <!-- Latest Version -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h2 class="text-lg font-semibold text-gray-900 mb-4">Latest Version</h2>
+      {{if .LatestVersion}}
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-2xl font-bold text-gray-900">{{.LatestVersion.VersionName}}</p>
+          <p class="text-sm text-gray-500">Version code: {{.LatestVersion.VersionCode}}</p>
+        </div>
+        <div class="text-right">
+          {{if .LatestVersion.PublishedAt}}
+          <p class="text-sm text-gray-500">Published</p>
+          <p class="text-sm text-gray-700">{{.LatestVersion.PublishedAt.Format "Jan 2, 2006"}}</p>
+          {{else}}
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+            {{.LatestVersion.Status}}
+          </span>
+          {{end}}
+        </div>
+      </div>
+      {{else}}
+      <p class="text-gray-500">No versions uploaded yet.</p>
+      <a href="/apps/{{.App.ID}}/versions/new" class="inline-flex items-center mt-4 text-indigo-600 hover:text-indigo-700">
+        Upload your first version
+        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+        </svg>
+      </a>
+      {{end}}
+    </div>
+
+    <!-- Description -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h2 class="text-lg font-semibold text-gray-900 mb-4">Description</h2>
+      {{if .App.Description}}
+      <p class="text-gray-700">{{.App.Description}}</p>
+      {{else}}
+      <p class="text-gray-500">No description provided.</p>
+      {{end}}
+    </div>
+  </div>
+
+  <!-- Right Column -->
+  <div class="space-y-6">
+    <!-- Quick Stats -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h2 class="text-lg font-semibold text-gray-900 mb-4">Statistics</h2>
+      <dl class="space-y-4">
+        <div class="flex justify-between">
+          <dt class="text-sm text-gray-500">Downloads</dt>
+          <dd class="text-sm font-medium text-gray-900">0</dd>
+        </div>
+        <div class="flex justify-between">
+          <dt class="text-sm text-gray-500">Active Users</dt>
+          <dd class="text-sm font-medium text-gray-900">0</dd>
+        </div>
+        <div class="flex justify-between">
+          <dt class="text-sm text-gray-500">Total Versions</dt>
+          <dd class="text-sm font-medium text-gray-900">{{.TotalVersions}}</dd>
+        </div>
+      </dl>
+    </div>
+
+    <!-- App Info -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h2 class="text-lg font-semibold text-gray-900 mb-4">Information</h2>
+      <dl class="space-y-4">
+        {{if .App.Category}}
+        <div class="flex justify-between">
+          <dt class="text-sm text-gray-500">Category</dt>
+          <dd class="text-sm font-medium text-gray-900">{{.App.Category}}</dd>
+        </div>
+        {{end}}
+        <div class="flex justify-between">
+          <dt class="text-sm text-gray-500">Created</dt>
+          <dd class="text-sm font-medium text-gray-900">{{.App.CreatedAt.Format "Jan 2, 2006"}}</dd>
+        </div>
+        <div class="flex justify-between">
+          <dt class="text-sm text-gray-500">Updated</dt>
+          <dd class="text-sm font-medium text-gray-900">{{.App.UpdatedAt.Format "Jan 2, 2006"}}</dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</div>
+{{end}}
+{{end}}
--- a/portal/internal/web/templates/pages/app_new.html
+++ b/portal/internal/web/templates/pages/app_new.html
@@ -0,0 +1,85 @@
+{{define "content"}}
+<div class="max-w-2xl mx-auto">
+  <div class="mb-8">
+    <a href="/dashboard" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700">
+      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+      </svg>
+      Back to Dashboard
+    </a>
+    <h1 class="text-2xl font-bold text-gray-900 mt-4">Create New App</h1>
+    <p class="text-gray-600 mt-1">Fill in the details to register your app on Mosis.</p>
+  </div>
+
+  <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+    <form hx-post="/apps" hx-target="#form-result" hx-swap="outerHTML" class="space-y-6">
+      <div>
+        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
+          App Name <span class="text-red-500">*</span>
+        </label>
+        <input type="text" name="name" id="name" required
+               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+               placeholder="My Awesome App"
+               hx-post="/validate/name"
+               hx-trigger="blur"
+               hx-target="next .error-text">
+        <span class="error-text text-sm text-red-600 mt-1"></span>
+      </div>
+
+      <div>
+        <label for="package_id" class="block text-sm font-medium text-gray-700 mb-1">
+          Package ID <span class="text-red-500">*</span>
+        </label>
+        <input type="text" name="package_id" id="package_id" required
+               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+               placeholder="com.yourname.appname"
+               hx-post="/validate/package-id"
+               hx-trigger="blur"
+               hx-target="next .error-text">
+        <span class="error-text text-sm text-red-600 mt-1"></span>
+        <p class="text-sm text-gray-500 mt-1">Unique identifier for your app. Cannot be changed later.</p>
+      </div>
+
+      <div>
+        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
+          Description
+        </label>
+        <textarea name="description" id="description" rows="4"
+                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                  placeholder="Describe what your app does..."></textarea>
+        <p class="text-sm text-gray-500 mt-1">Up to 500 characters.</p>
+      </div>
+
+      <div>
+        <label for="category" class="block text-sm font-medium text-gray-700 mb-1">
+          Category
+        </label>
+        <select name="category" id="category"
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+          <option value="">Select a category</option>
+          <option value="productivity">Productivity</option>
+          <option value="communication">Communication</option>
+          <option value="entertainment">Entertainment</option>
+          <option value="utilities">Utilities</option>
+          <option value="games">Games</option>
+          <option value="education">Education</option>
+          <option value="health">Health & Fitness</option>
+          <option value="finance">Finance</option>
+          <option value="other">Other</option>
+        </select>
+      </div>
+
+      <div id="form-result"></div>
+
+      <div class="flex justify-end space-x-4 pt-4 border-t border-gray-200">
+        <a href="/dashboard" class="px-4 py-2 text-gray-700 hover:text-gray-900">
+          Cancel
+        </a>
+        <button type="submit" class="px-6 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors">
+          Create App
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{{end}}
--- a/portal/internal/web/templates/pages/dashboard.html
+++ b/portal/internal/web/templates/pages/dashboard.html
@@ -0,0 +1,76 @@
+{{define "content"}}
+<div class="mb-8">
+  <h1 class="text-2xl font-bold text-gray-900">Welcome back, {{.Developer.Name}}!</h1>
+  <p class="text-gray-600 mt-1">Here's what's happening with your apps.</p>
+</div>
+
+<!-- Stats Cards -->
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+  <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-sm text-gray-600">Total Apps</p>
+        <p class="text-3xl font-bold text-gray-900 mt-1">{{.Stats.TotalApps}}</p>
+      </div>
+      <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
+        <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
+        </svg>
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-sm text-gray-600">Total Downloads</p>
+        <p class="text-3xl font-bold text-gray-900 mt-1">{{.Stats.Downloads}}</p>
+      </div>
+      <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
+        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+        </svg>
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-sm text-gray-600">Active Users</p>
+        <p class="text-3xl font-bold text-gray-900 mt-1">{{.Stats.ActiveUsers}}</p>
+      </div>
+      <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
+        <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Apps Section -->
+<div class="bg-white rounded-lg shadow-sm border border-gray-200">
+  <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
+    <h2 class="text-lg font-semibold text-gray-900">Your Apps</h2>
+    <a href="/apps/new" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
+      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+      </svg>
+      New App
+    </a>
+  </div>
+
+  <div id="app-list" hx-get="/partials/apps" hx-trigger="load" class="divide-y divide-gray-200">
+    <div class="p-8 text-center text-gray-500">
+      <div class="htmx-indicator inline-flex items-center">
+        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        Loading apps...
+      </div>
+    </div>
+  </div>
+</div>
+{{end}}
--- a/portal/internal/web/templates/pages/login.html
+++ b/portal/internal/web/templates/pages/login.html
@@ -0,0 +1,54 @@
+{{define "content"}}
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-white">
+  <div class="w-full max-w-md">
+    <div class="bg-white rounded-xl shadow-lg p-8">
+      <!-- Logo -->
+      <div class="text-center mb-8">
+        <svg class="w-12 h-12 text-indigo-600 mx-auto" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+        </svg>
+        <h1 class="text-2xl font-bold text-gray-900 mt-4">Sign in to Mosis</h1>
+        <p class="text-gray-600 mt-2">Developer Portal</p>
+      </div>
+
+      {{if .Error}}
+      <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+        {{.Error}}
+      </div>
+      {{end}}
+
+      <!-- OAuth Buttons -->
+      <div class="space-y-3">
+        <a href="/v1/auth/oauth/github" class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors">
+          <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+          Continue with GitHub
+        </a>
+
+        <a href="/v1/auth/oauth/google" class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors">
+          <svg class="w-5 h-5 mr-3" viewBox="0 0 24 24">
+            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+          </svg>
+          Continue with Google
+        </a>
+      </div>
+
+      <p class="mt-8 text-center text-sm text-gray-500">
+        By signing in, you agree to our
+        <a href="/terms" class="text-indigo-600 hover:underline">Terms of Service</a>
+        and
+        <a href="/privacy" class="text-indigo-600 hover:underline">Privacy Policy</a>
+      </p>
+    </div>
+
+    <p class="mt-4 text-center text-sm text-gray-500">
+      New to Mosis?
+      <a href="/docs/getting-started" class="text-indigo-600 hover:underline">Get started</a>
+    </p>
+  </div>
+</div>
+{{end}}
--- a/portal/internal/web/templates/partials/app_list.html
+++ b/portal/internal/web/templates/partials/app_list.html
@@ -0,0 +1,59 @@
+{{define "app_list"}}
+{{if .Apps}}
+{{range .Apps}}
+<a href="/apps/{{.ID}}" class="block px-6 py-4 hover:bg-gray-50 transition-colors">
+  <div class="flex items-center justify-between">
+    <div class="flex items-center space-x-4">
+      <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
+        <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
+        </svg>
+      </div>
+      <div>
+        <h3 class="text-sm font-medium text-gray-900">{{.Name}}</h3>
+        <p class="text-sm text-gray-500">{{.PackageID}}</p>
+      </div>
+    </div>
+    <div class="flex items-center space-x-6">
+      {{if eq .Status "published"}}
+      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+        Published
+      </span>
+      {{else if eq .Status "draft"}}
+      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+        Draft
+      </span>
+      {{else if eq .Status "review"}}
+      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+        In Review
+      </span>
+      {{else}}
+      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+        {{.Status}}
+      </span>
+      {{end}}
+      <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+      </svg>
+    </div>
+  </div>
+</a>
+{{end}}
+{{else}}
+<div class="px-6 py-12 text-center">
+  <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
+  </svg>
+  <h3 class="mt-2 text-sm font-medium text-gray-900">No apps yet</h3>
+  <p class="mt-1 text-sm text-gray-500">Get started by creating your first app.</p>
+  <div class="mt-6">
+    <a href="/apps/new" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
+      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+      </svg>
+      New App
+    </a>
+  </div>
+</div>
+{{end}}
+{{end}}
--- a/portal/internal/web/templates/partials/navbar.html
+++ b/portal/internal/web/templates/partials/navbar.html
@@ -0,0 +1,55 @@
+{{define "navbar"}}
+<nav class="bg-white shadow-sm border-b border-gray-200">
+  <div class="container mx-auto px-4">
+    <div class="flex justify-between items-center h-16">
+      <!-- Logo -->
+      <a href="/dashboard" class="flex items-center space-x-2">
+        <svg class="w-8 h-8 text-indigo-600" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+        </svg>
+        <span class="font-bold text-xl text-gray-900">Mosis</span>
+      </a>
+
+      <!-- Navigation Links -->
+      <div class="hidden md:flex items-center space-x-8">
+        <a href="/dashboard" class="text-gray-600 hover:text-gray-900 {{if eq .ActiveNav "dashboard"}}text-indigo-600 font-medium{{end}}">
+          Dashboard
+        </a>
+        <a href="/apps" class="text-gray-600 hover:text-gray-900 {{if eq .ActiveNav "apps"}}text-indigo-600 font-medium{{end}}">
+          Apps
+        </a>
+        <a href="/docs" class="text-gray-600 hover:text-gray-900 {{if eq .ActiveNav "docs"}}text-indigo-600 font-medium{{end}}">
+          Docs
+        </a>
+        <a href="/settings" class="text-gray-600 hover:text-gray-900 {{if eq .ActiveNav "settings"}}text-indigo-600 font-medium{{end}}">
+          Settings
+        </a>
+      </div>
+
+      <!-- User Menu -->
+      <div class="flex items-center space-x-4">
+        <div class="relative" x-data="{ open: false }">
+          <button class="flex items-center space-x-2 text-gray-600 hover:text-gray-900">
+            {{if .Developer.AvatarURL}}
+            <img src="{{.Developer.AvatarURL}}" alt="{{.Developer.Name}}" class="w-8 h-8 rounded-full">
+            {{else}}
+            <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
+              <span class="text-indigo-600 font-medium text-sm">{{slice .Developer.Name 0 1}}</span>
+            </div>
+            {{end}}
+            <span class="hidden md:inline">{{.Developer.Name}}</span>
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+            </svg>
+          </button>
+        </div>
+        <a href="/auth/logout" class="text-gray-500 hover:text-gray-700">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
+</nav>
+{{end}}