components

package
v0.0.8 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Dec 31, 2025 License: Apache-2.0 Imports: 9 Imported by: 0

README

Dashboard Components (Gomponents)

This directory contains the gomponents-based UI components for the minimal AuthSome dashboard plugin.

Structure

components/
├── README.md              # This file
├── base.go                # Base HTML layout with head, body, navigation
├── navigation.go          # Header, nav menu, footer, icons
└── pages/                 # Individual page components
    ├── dashboard.go       # Dashboard stats & activity
    ├── error.go           # Generic error page
    ├── login.go           # Standalone login page
    ├── notfound.go        # 404 page
    └── users.go           # Users list with search/pagination

Key Components

Base Layout
import "github.com/xraph/authsome/plugins/dashboard/components"

pageData := components.PageData{
    Title:      "Dashboard",
    User:       currentUser,
    ActivePage: "dashboard",
    CSRFToken:  token,
    BasePath:   "/auth",
    Year:       2025,
}

page := components.BaseLayout(pageData, yourContentHere)
page.Render(w)
Pages
import "github.com/xraph/authsome/plugins/dashboard/components/pages"

// Dashboard page
content := pages.DashboardPage(stats, basePath)

// Users list
content := pages.UsersPage(usersData, basePath)

// Login (standalone - no base layout)
page := pages.Login(loginData)

// 404 (standalone)
page := pages.NotFound(basePath)

Icons

Uses gomponents-lucide:

import "github.com/eduardolat/gomponents-lucide"

lucide.Users(Class("h-5 w-5"))
lucide.ShieldCheck(Class("h-6 w-6 text-violet-600"))
lucide.Search(Class("h-4 w-4"))

Available icons used:

  • Users, UserCircle
  • ShieldCheck, Lock, AlertCircle, CheckCircle
  • Search, X, ArrowRight, ArrowLeft
  • Home, Settings, Menu
  • Sun, Moon (theme toggle)
  • Heart, ChevronDown, TrendingUp
  • And more...

Adding a New Page

  1. Create components/pages/mypage.go:
package pages

import (
    "github.com/eduardolat/gomponents-lucide"
    g "maragu.dev/gomponents"
    . "maragu.dev/gomponents/html"
)

func MyPage(data MyData, basePath string) g.Node {
    return Div(
        Class("space-y-6"),
        H1(Class("text-2xl font-bold"), g.Text("My Page")),
        // ... your content
    )
}
  1. Use in handler:
func (h *Handler) ServeMyPage(c forge.Context) error {
    pageData := components.PageData{
        Title:      "My Page",
        ActivePage: "mypage",
        // ...
    }
    
    content := pages.MyPage(myData, h.basePath)
    page := components.BaseLayout(pageData, content)
    
    return h.render(c, page)
}

Alpine.js Integration

For client-side interactivity (dropdowns, tabs, theme toggle):

// Alpine.js directive as attributes
Button(
    g.Attr("@click", "toggleDropdown()"),
    g.Attr("x-show", "isOpen"),
    // ...
)

// x-data for component state
Div(
    g.Attr("x-data", "{ open: false }"),
    // ...
)

// Conditional rendering
Div(
    g.Attr("x-show", "activeTab === 'users'"),
    g.Attr("x-cloak", ""), // Hide until Alpine initializes
    // ...
)

Styling

Uses Tailwind CSS via CDN (configured in base.go):

// Responsive classes
Class("hidden lg:flex")

// Dark mode
Class("bg-white dark:bg-gray-900")

// States
Class("hover:bg-gray-50 active:bg-gray-100")

// Custom colors (configured in base.go)
Class("bg-violet-600 text-white")

Testing

func TestDashboardPage(t *testing.T) {
    stats := &pages.DashboardStats{
        TotalUsers: 100,
        UserGrowth: 10.5,
    }
    
    html := pages.DashboardPage(stats, "/auth").String()
    
    assert.Contains(t, html, "100")
    assert.Contains(t, html, "Total Users")
}

Performance

  • Compile-time safety: No runtime template errors
  • Fast rendering: No template parsing overhead
  • Type-safe: Full Go type checking
  • Cacheable: Render once, cache as needed

Migration from Templates

See GOMPONENTS_MIGRATION_SUMMARY.md in parent directory for:

  • Migration status
  • Remaining tasks
  • Handler updates
  • Testing strategy

References

Documentation

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func AppSwitcher 

func AppSwitcher(data PageData) g.Node

func BaseLayout 

func BaseLayout(data PageData, content g.Node) g.Node

BaseLayout renders the main HTML structure

func BaseSidebarLayout added in v0.0.3 

func BaseSidebarLayout(data PageData, content g.Node) g.Node

BaseSidebarLayout renders a sidebar-based layout inspired by Preline CMS template

func BuildSettingsURL 

func BuildSettingsURL(basePath string, appID, page string) string

BuildSettingsURL builds a settings page URL

func DashboardFooter 

func DashboardFooter(data PageData) g.Node

Footer renders the page footer

func DashboardHeader 

func DashboardHeader(data PageData) g.Node

Header renders the page header with navigation

func DesktopNavigation 

func DesktopNavigation(data PageData) g.Node

func EmptyLayout added in v0.0.3 

func EmptyLayout(data PageData, content g.Node) g.Node

BaseLayout renders the main HTML structure

func EnvironmentSwitcher 

func EnvironmentSwitcher(data PageData) g.Node
func Logo(basePath string, currentApp *app.App) g.Node

func MobileNavToggle 

func MobileNavToggle() g.Node

func MobileNavigation 

func MobileNavigation(data PageData) g.Node

func SettingsActions 

func SettingsActions(saveText string, cancelURL string, extraActions ...g.Node) g.Node

SettingsActions renders action buttons for settings forms

func SettingsFormField 

func SettingsFormField(label, description, fieldID string, field g.Node) g.Node

SettingsFormField renders a form field with label and description

func SettingsLayout 

func SettingsLayout(data SettingsLayoutData) g.Node

SettingsLayout renders the settings page with sidebar navigation

func SettingsPageHeader 

func SettingsPageHeader(title, description string) g.Node

SettingsPageHeader renders a consistent header for settings pages

func SettingsSection 

func SettingsSection(title, description string, content g.Node) g.Node

SettingsSection renders a settings section card

func ThemeToggle 

func ThemeToggle() g.Node

func UserDropdown 

func UserDropdown(data PageData) g.Node

Types

type ExtensionNavItemData added in v0.0.3 

type ExtensionNavItemData struct {
	Label    string
	Icon     g.Node
	URL      string
	IsActive bool
}

ExtensionNavItemData holds raw data for extension navigation items

type PageData 

type PageData struct {
	Title              string
	User               *user.User
	CSRFToken          string
	ActivePage         string
	BasePath           string
	Data               interface{}
	Error              string
	Success            string
	Year               int
	EnabledPlugins     map[string]bool
	IsMultiApp         bool                       // Whether multitenancy is enabled (deprecated - use ShowAppSwitcher)
	CurrentApp         *app.App                   // Current app in context
	UserApps           []*app.App                 // Apps user has access to
	ShowAppSwitcher    bool                       // Whether to show app switcher in header
	CurrentEnvironment *environment.Environment   // Current environment in context
	UserEnvironments   []*environment.Environment // Environments for current app
	ShowEnvSwitcher    bool                       // Whether to show environment switcher in header
	ExtensionNavItems  []g.Node                   // Navigation items from dashboard extensions (for header nav)
	ExtensionNavData   []ExtensionNavItemData     // Raw navigation item data for sidebar rendering
	ExtensionWidgets   []g.Node                   // Dashboard widgets from extensions
}

PageData represents common data for all pages

type SettingsLayoutData 

type SettingsLayoutData struct {
	NavItems    []SettingsNavItem
	ActivePage  string
	BasePath    string
	CurrentApp  *app.App
	PageContent g.Node
}

SettingsLayoutData contains data for the settings layout

type SettingsNavItem 

type SettingsNavItem struct {
	ID            string
	Label         string
	Icon          g.Node
	URL           string
	Category      string // "general", "security", "communication", "integrations", "advanced"
	RequirePlugin string // Optional plugin requirement
}

SettingsNavItem represents a navigation item in the settings sidebar

Source Files

View all Source files

Directories

Path Synopsis

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.