HTML Templates and Web Applications with Go Gin

// main.go
package main

import (
    "net/http"
    "html/template"
    "time"
    
    "github.com/gin-gonic/gin"
)

// User represents user data for templates
type User struct {
    ID       int       `json:"id"`
    Username string    `json:"username"`
    Email    string    `json:"email"`
    FullName string    `json:"full_name"`
    JoinedAt time.Time `json:"joined_at"`
}

// PageData represents common data passed to all templates
type PageData struct {
    Title       string
    User        *User
    CurrentYear int
    NavItems    []NavItem
    FlashMsg    string
}

type NavItem struct {
    Name string
    URL  string
    Active bool
}

// Custom template functions
func setupTemplateFunctions() template.FuncMap {
    return template.FuncMap{
        "formatDate": func(t time.Time) string {
            return t.Format("January 2, 2006")
        },
        "formatDateTime": func(t time.Time) string {
            return t.Format("January 2, 2006 at 3:04 PM")
        },
        "add": func(a, b int) int {
            return a + b
        },
        "multiply": func(a, b int) int {
            return a * b
        },
        "truncate": func(s string, length int) string {
            if len(s) <= length {
                return s
            }
            return s[:length] + "..."
        },
        "isEven": func(n int) bool {
            return n%2 == 0
        },
        "dict": func(values ...interface{}) map[string]interface{} {
            if len(values)%2 != 0 {
                return nil
            }
            dict := make(map[string]interface{})
            for i := 0; i < len(values); i += 2 {
                key, ok := values[i].(string)
                if !ok {
                    return nil
                }
                dict[key] = values[i+1]
            }
            return dict
        },
    }
}

func main() {
    r := gin.Default()
    
    // Load templates with custom functions
    r.SetFuncMap(setupTemplateFunctions())
    r.LoadHTMLGlob("templates/**/*")
    
    // Serve static files
    r.Static("/static", "./static")
    r.StaticFile("/favicon.ico", "./static/favicon.ico")
    
    // Home page
    r.GET("/", func(c *gin.Context) {
        data := PageData{
            Title:       "Welcome to Our Site",
            CurrentYear: time.Now().Year(),
            NavItems: []NavItem{
                {Name: "Home", URL: "/", Active: true},
                {Name: "About", URL: "/about", Active: false},
                {Name: "Contact", URL: "/contact", Active: false},
            },
        }
        
        c.HTML(http.StatusOK, "base.html", data)
    })
    
    // User profile page
    r.GET("/profile/:username", func(c *gin.Context) {
        username := c.Param("username")
        
        // Simulate fetching user data
        user := &User{
            ID:       1,
            Username: username,
            Email:    username + "@example.com",
            FullName: "John Doe",
            JoinedAt: time.Now().AddDate(-1, -2, -15),
        }
        
        data := PageData{
            Title: "Profile - " + user.FullName,
            User:  user,
            CurrentYear: time.Now().Year(),
            NavItems: []NavItem{
                {Name: "Home", URL: "/", Active: false},
                {Name: "Profile", URL: "/profile/" + username, Active: true},
            },
        }
        
        c.HTML(http.StatusOK, "base.html", data)
    })
    
    r.Run(":8080")
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Title}} - My Website</title>
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    {{template "header" .}}
    
    <main class="container mt-4">
        {{if .FlashMsg}}
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            {{.FlashMsg}}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {{end}}
        
    {{if .User}}
        <h1>{{.User.FullName}}</h1>
        <p>Joined {{.User.JoinedAt.Format "January 2, 2006"}}</p>
    {{else}}
        <h1>{{.Title}}</h1>
        <p>Welcome to our site.</p>
    {{end}}
    </main>
    
    {{template "footer" .}}
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/main.js"></script>
</body>
</html>

{{define "header"}}
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">My Website</a>
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                {{range .NavItems}}
                <li class="nav-item">
                    <a class="nav-link {{if .Active}}active{{end}}" href="{{.URL}}">{{.Name}}</a>
                </li>
                {{end}}
            </ul>
            
            <ul class="navbar-nav">
                {{if .User}}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        {{.User.Username}}
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/profile/{{.User.Username}}">Profile</a></li>
                        <li><a class="dropdown-item" href="/settings">Settings</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/logout">Logout</a></li>
                    </ul>
                </li>
                {{else}}
                <li class="nav-item">
                    <a class="nav-link" href="/login">Login</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/register">Register</a>
                </li>
                {{end}}
            </ul>
        </div>
    </div>
</header>
{{end}}

{{define "footer"}}<footer class="container">My Website</footer>{{end}}

// handlers/auth.go
package handlers

import (
    "crypto/rand"
    "crypto/subtle"
    "encoding/hex"
    "net/http"
    "time"
    
    "github.com/gin-contrib/sessions"
    "github.com/gin-gonic/gin"
    "github.com/go-playground/validator/v10"
)

// LoginForm represents login form data
type LoginForm struct {
    Username string `form:"username" binding:"required,min=3,max=30"`
    Password string `form:"password" binding:"required,min=6"`
    Remember bool   `form:"remember"`
    CSRFToken string `form:"csrf_token" binding:"required"`
}

// RegisterForm represents registration form data
type RegisterForm struct {
    Username        string `form:"username" binding:"required,min=3,max=30,alphanum"`
    Email          string  `form:"email" binding:"required,email"`
    Password       string  `form:"password" binding:"required,min=8"`
    ConfirmPassword string `form:"confirm_password" binding:"required"`
    FullName       string  `form:"full_name" binding:"required,min=2,max=100"`
    Terms          bool    `form:"terms" binding:"required"`
    CSRFToken      string  `form:"csrf_token" binding:"required"`
}

// ValidationError represents form validation errors
type ValidationError struct {
    Field   string `json:"field"`
    Message string `json:"message"`
}

// generateCSRFToken creates a secure random token
func generateCSRFToken() (string, error) {
    bytes := make([]byte, 32)
    if _, err := rand.Read(bytes); err != nil { return "", err }
    return hex.EncodeToString(bytes), nil
}

// validateCSRFToken checks if the provided token matches the session token
func validateCSRFToken(c *gin.Context, providedToken string) bool {
    session := sessions.Default(c)
    sessionToken, ok := session.Get("csrf_token").(string)
    if !ok || len(providedToken) != len(sessionToken) {
        return false
    }
    return subtle.ConstantTimeCompare([]byte(sessionToken), []byte(providedToken)) == 1
}

// ShowLoginForm displays the login form
func ShowLoginForm(c *gin.Context) {
    session := sessions.Default(c)
    
    // Generate CSRF token
    csrfToken, err := generateCSRFToken()
    if err != nil { c.Status(http.StatusInternalServerError); return }
    session.Set("csrf_token", csrfToken)
    if err := session.Save(); err != nil { c.Status(http.StatusInternalServerError); return }
    
    // Get flash messages
    flashMsg := session.Get("flash_message")
    if flashMsg != nil {
        session.Delete("flash_message")
        if err := session.Save(); err != nil { c.Status(http.StatusInternalServerError); return }
    }
    
    data := gin.H{
        "Title":     "Login",
        "CSRFToken": csrfToken,
        "FlashMsg":  flashMsg,
        "NavItems": []gin.H{
            {"Name": "Home", "URL": "/", "Active": false},
            {"Name": "Login", "URL": "/login", "Active": true},
        },
    }
    
    c.HTML(http.StatusOK, "pages/login.html", data)
}

// ProcessLogin handles login form submission
func ProcessLogin(c *gin.Context) {
    var form LoginForm
    session := sessions.Default(c)
    
    // Bind form data
    if err := c.ShouldBind(&form); err != nil {
        // Handle validation errors
        var errors []ValidationError
        
        // Convert validation errors to user-friendly messages
        if validationErrors, ok := err.(validator.ValidationErrors); ok {
            for _, validationError := range validationErrors {
                field := validationError.Field()
                var message string
                
                switch validationError.Tag() {
                case "required":
                    message = field + " is required"
                case "min":
                    message = field + " must be at least " + validationError.Param() + " characters"
                case "max":
                    message = field + " must be at most " + validationError.Param() + " characters"
                default:
                    message = field + " is invalid"
                }
                
                errors = append(errors, ValidationError{
                    Field:   field,
                    Message: message,
                })
            }
        }
        
        // Re-display form with errors
        data := gin.H{
            "Title":        "Login",
            "CSRFToken":    session.Get("csrf_token"),
            "Errors":       errors,
            "FormData":     gin.H{"Username": form.Username, "Remember": form.Remember}, // Never re-render passwords.
            "NavItems": []gin.H{
                {"Name": "Home", "URL": "/", "Active": false},
                {"Name": "Login", "URL": "/login", "Active": true},
            },
        }
        
        c.HTML(http.StatusBadRequest, "pages/login.html", data)
        return
    }
    
    // Validate CSRF token
    if !validateCSRFToken(c, form.CSRFToken) {
        session.Set("flash_message", "Invalid security token. Please try again.")
        if err := session.Save(); err != nil { c.Status(http.StatusInternalServerError); return }
        c.Redirect(http.StatusSeeOther, "/login")
        return
    }
    
    // Simulate user authentication (in real apps, check against database)
    if form.Username == "admin" && form.Password == "password123" {
        // Successful login
        session.Set("user_id", 1)
        session.Set("username", form.Username)
        
        if form.Remember {
            // Set longer session timeout for "remember me"
            session.Options(sessions.Options{
                MaxAge: 30 * 24 * 3600, // 30 days
                HttpOnly: true,
                Secure: true, // Enable in production with HTTPS
            })
        }
        
        session.Set("flash_message", "Welcome back, " + form.Username + "!")
        if err := session.Save(); err != nil { c.Status(http.StatusInternalServerError); return }
        
        c.Redirect(http.StatusSeeOther, "/dashboard")
    } else {
        // Failed login
        session.Set("flash_message", "Invalid username or password")
        if err := session.Save(); err != nil { c.Status(http.StatusInternalServerError); return }
        c.Redirect(http.StatusSeeOther, "/login")
    }
}

// ShowRegisterForm displays the registration form
func ShowRegisterForm(c *gin.Context) {
    session := sessions.Default(c)
    
    csrfToken, err := generateCSRFToken()
    if err != nil { c.Status(http.StatusInternalServerError); return }
    session.Set("csrf_token", csrfToken)
    if err := session.Save(); err != nil { c.Status(http.StatusInternalServerError); return }
    
    data := gin.H{
        "Title":     "Register",
        "CSRFToken": csrfToken,
        "NavItems": []gin.H{
            {"Name": "Home", "URL": "/", "Active": false},
            {"Name": "Register", "URL": "/register", "Active": true},
        },
    }
    
    c.HTML(http.StatusOK, "pages/register.html", data)
}

// ProcessRegister handles registration form submission
func ProcessRegister(c *gin.Context) {
    var form RegisterForm
    session := sessions.Default(c)
    
    if err := c.ShouldBind(&form); err != nil {
        // Handle validation errors (similar to login)
        var errors []ValidationError
        
        // Add custom validation for password confirmation
        if form.Password != form.ConfirmPassword {
            errors = append(errors, ValidationError{
                Field:   "ConfirmPassword",
                Message: "Passwords do not match",
            })
        }
        
        data := gin.H{
            "Title":     "Register",
            "CSRFToken": session.Get("csrf_token"),
            "Errors":    errors,
            "FormData":  gin.H{"Username": form.Username, "Email": form.Email, "FullName": form.FullName}, // Never re-render passwords.
        }
        
        c.HTML(http.StatusBadRequest, "pages/register.html", data)
        return
    }
    
    // Validate CSRF token
    if !validateCSRFToken(c, form.CSRFToken) {
        session.Set("flash_message", "Invalid security token. Please try again.")
        if err := session.Save(); err != nil { c.Status(http.StatusInternalServerError); return }
        c.Redirect(http.StatusSeeOther, "/register")
        return
    }
    
    // Check if user already exists (simulate database check)
    if form.Username == "admin" || form.Email == "admin@example.com" {
        session.Set("flash_message", "Username or email already exists")
        if err := session.Save(); err != nil { c.Status(http.StatusInternalServerError); return }
        c.Redirect(http.StatusSeeOther, "/register")
        return
    }
    
    // Create user (simulate database insertion)
    session.Set("flash_message", "Registration successful! Please log in.")
    if err := session.Save(); err != nil { c.Status(http.StatusInternalServerError); return }
    
    c.Redirect(http.StatusSeeOther, "/login")
}

// Logout handles user logout
func Logout(c *gin.Context) {
    session := sessions.Default(c)
    session.Clear()
    if err := session.Save(); err != nil { c.Status(http.StatusInternalServerError); return }
    
    c.Redirect(http.StatusSeeOther, "/")
}

{{define "content"}}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title mb-0">Login</h3>
            </div>
            <div class="card-body">
                {{if .Errors}}
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        {{range .Errors}}
                        <li>{{.Message}}</li>
                        {{end}}
                    </ul>
                </div>
                {{end}}
                
                <form method="POST" action="/login">
                    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
                    
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" name="username" 
                               value="{{if .FormData}}{{.FormData.Username}}{{end}}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="remember" name="remember"
                               {{if .FormData}}{{if .FormData.Remember}}checked{{end}}{{end}}>
                        <label class="form-check-label" for="remember">
                            Remember me
                        </label>
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-100">Login</button>
                </form>
                
                <div class="text-center mt-3">
                    <p><a href="/forgot-password">Forgot your password?</a></p>
                    <p>Don't have an account? <a href="/register">Register here</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}

{{template "layouts/base.html" .}}

// models/blog.go
package models

import (
    "time"
)

// Post represents a blog post
type Post struct {
    ID          int       `json:"id"`
    Title       string    `json:"title"`
    Slug        string    `json:"slug"`
    Content     string    `json:"content"`
    Excerpt     string    `json:"excerpt"`
    AuthorID    int       `json:"author_id"`
    Author      User      `json:"author"`
    Category    string    `json:"category"`
    Tags        []string  `json:"tags"`
    Published   bool      `json:"published"`
    CreatedAt   time.Time `json:"created_at"`
    UpdatedAt   time.Time `json:"updated_at"`
    ViewCount   int       `json:"view_count"`
}

// Comment represents a blog comment
type Comment struct {
    ID        int       `json:"id"`
    PostID    int       `json:"post_id"`
    AuthorID  int       `json:"author_id"`
    Author    User      `json:"author"`
    Content   string    `json:"content"`
    CreatedAt time.Time `json:"created_at"`
}

// handlers/blog.go
package handlers

import (
    "net/http"
    "strconv"
    "strings"
    "time"
    
    "github.com/gin-contrib/sessions"
    "github.com/gin-gonic/gin"
    "github.com/your-app/models"
)

// ShowBlogHome displays the blog homepage with recent posts
func ShowBlogHome(c *gin.Context) {
    // Simulate fetching recent posts
    posts := []models.Post{
        {
            ID:      1,
            Title:   "Getting Started with Go Gin",
            Slug:    "getting-started-with-go-gin",
            Excerpt: "Learn how to build web applications with Go and Gin framework...",
            Author:  models.User{Username: "john_doe", FullName: "John Doe"},
            Category: "Programming",
            Tags:    []string{"go", "gin", "web"},
            Published: true,
            CreatedAt: time.Now().AddDate(0, 0, -2),
            ViewCount: 150,
        },
        {
            ID:      2,
            Title:   "Advanced Template Patterns",
            Slug:    "advanced-template-patterns",
            Excerpt: "Explore advanced techniques for organizing and optimizing templates...",
            Author:  models.User{Username: "jane_smith", FullName: "Jane Smith"},
            Category: "Web Development",
            Tags:    []string{"templates", "html", "design"},
            Published: true,
            CreatedAt: time.Now().AddDate(0, 0, -5),
            ViewCount: 89,
        },
    }
    
    session := sessions.Default(c)
    var currentUser *models.User
    if userID := session.Get("user_id"); userID != nil {
        currentUser = &models.User{
            ID:       userID.(int),
            Username: session.Get("username").(string),
        }
    }
    
    data := gin.H{
        "Title":    "Blog Home",
        "Posts":    posts,
        "User":     currentUser,
        "NavItems": getBlogNavItems("/"),
    }
    
    c.HTML(http.StatusOK, "blog/home.html", data)
}

// ShowPost displays a single blog post with comments
func ShowPost(c *gin.Context) {
    slug := c.Param("slug")
    
    // Simulate fetching post by slug
    post := models.Post{
        ID:      1,
        Title:   "Getting Started with Go Gin",
        Slug:    slug,
        Content: `# Getting Started with Go Gin

Go Gin is a fantastic web framework that makes building web applications and APIs incredibly straightforward. In this comprehensive guide, we'll explore everything you need to know to get started.

## What is Gin?

Gin is a Go HTTP framework with routing, middleware, and HTML rendering. Performance depends on the workload; benchmark your own application rather than assuming a fixed speedup.

## Basic Setup

Here's how to create your first Gin application:

` + "```go" + `
package main

import "github.com/gin-gonic/gin"

func main() {
    r := gin.Default()
    r.GET("/ping", func(c *gin.Context) {
        c.JSON(200, gin.H{
            "message": "pong",
        })
    })
    r.Run()
}
` + "```" + `

And that's it! You now have a working web server.`,
        Author:    models.User{Username: "john_doe", FullName: "John Doe"},
        Category:  "Programming",
        Tags:      []string{"go", "gin", "web"},
        Published: true,
        CreatedAt: time.Now().AddDate(0, 0, -2),
        ViewCount: 151, // Increment view count
    }
    
    // Simulate fetching comments
    comments := []models.Comment{
        {
            ID:        1,
            PostID:    1,
            Author:    models.User{Username: "alice", FullName: "Alice Brown"},
            Content:   "Great tutorial! This really helped me understand Gin better.",
            CreatedAt: time.Now().AddDate(0, 0, -1),
        },
        {
            ID:        2,
            PostID:    1,
            Author:    models.User{Username: "bob", FullName: "Bob Wilson"},
            Content:   "Thanks for sharing. Looking forward to more Go content!",
            CreatedAt: time.Now().AddHours(-6),
        },
    }
    
    session := sessions.Default(c)
    var currentUser *models.User
    if userID := session.Get("user_id"); userID != nil {
        currentUser = &models.User{
            ID:       userID.(int),
            Username: session.Get("username").(string),
        }
    }
    
    data := gin.H{
        "Title":    post.Title,
        "Post":     post,
        "Comments": comments,
        "User":     currentUser,
        "NavItems": getBlogNavItems("/blog/" + slug),
    }
    
    c.HTML(http.StatusOK, "blog/post.html", data)
}

// getBlogNavItems returns navigation items for blog pages
func getBlogNavItems(currentPath string) []gin.H {
    items := []gin.H{
        {"Name": "Home", "URL": "/", "Active": currentPath == "/"},
        {"Name": "Blog", "URL": "/blog", "Active": strings.HasPrefix(currentPath, "/blog")},
        {"Name": "About", "URL": "/about", "Active": currentPath == "/about"},
        {"Name": "Contact", "URL": "/contact", "Active": currentPath == "/contact"},
    }
    return items
}

{{define "content"}}
<div class="row">
    <div class="col-lg-8">
        <h1 class="mb-4">Latest Blog Posts</h1>
        
        {{range .Posts}}
        <article class="card mb-4">
            <div class="card-body">
                <h2 class="card-title">
                    <a href="/blog/{{.Slug}}" class="text-decoration-none">{{.Title}}</a>
                </h2>
                
                <div class="text-muted mb-2">
                    <small>
                        By <strong>{{.Author.FullName}}</strong>
                        on {{formatDate .CreatedAt}}
                        in <span class="badge bg-secondary">{{.Category}}</span>
                    </small>
                </div>
                
                <p class="card-text">{{.Excerpt}}</p>
                
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        {{range .Tags}}
                        <span class="badge bg-light text-dark me-1">#{{.}}</span>
                        {{end}}
                    </div>
                    <small class="text-muted">{{.ViewCount}} views</small>
                </div>
                
                <a href="/blog/{{.Slug}}" class="btn btn-primary mt-2">Read More</a>
            </div>
        </article>
        {{else}}
        <div class="alert alert-info">
            <h4>No Posts Yet</h4>
            <p>Check back later for new content!</p>
        </div>
        {{end}}
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5>Categories</h5>
            </div>
            <div class="card-body">
                <a href="/blog/category/programming" class="d-block">Programming (5)</a>
                <a href="/blog/category/web-development" class="d-block">Web Development (3)</a>
                <a href="/blog/category/tutorials" class="d-block">Tutorials (8)</a>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5>Popular Tags</h5>
            </div>
            <div class="card-body">
                <span class="badge bg-primary me-1 mb-1">#go</span>
                <span class="badge bg-primary me-1 mb-1">#gin</span>
                <span class="badge bg-primary me-1 mb-1">#web</span>
                <span class="badge bg-primary me-1 mb-1">#templates</span>
                <span class="badge bg-primary me-1 mb-1">#html</span>
            </div>
        </div>
    </div>
</div>
{{end}}

{{template "layouts/base.html" .}}

type Project struct {
    ID          int      `json:"id"`
    Title       string   `json:"title"`
    Description string   `json:"description"`
    Technologies []string `json:"technologies"`
    URL         string   `json:"url"`
    ImageURL    string   `json:"image_url"`
}

func main() {
    r := gin.Default()
    r.LoadHTMLGlob("templates/**/*")
    r.Static("/static", "./static")
    
    // TODO: Implement portfolio routes
    // - GET / (home page)
    // - GET /about (about page)
    // - GET /projects (projects showcase)
    // - GET /contact (contact form)
    // - POST /contact (form submission)
    
    r.Run(":8080")
}