Create navbar and add template globals

main.go

@@ -90,6 +90,7 @@ func main() {
 	app.Use(middlewares.WelcomeMiddleware)
 	app.Use(middlewares.MfaEnrollMiddleware)
 	app.Use(middlewares.MfaVerifyMiddleware)
+	app.Use(middlewares.TemplatesMiddleware)
 
 	// Controllers
 	app.Get("/", controllers.Homepage)

middlewares/mfa.go

@@ -11,7 +11,7 @@ import (
 )
 
 func MfaEnrollMiddleware(c *fiber.Ctx) error {
-	if c.Path() == "/login" || c.Path() == "/welcome" || strings.HasPrefix(c.Path(), "/totp/") {
+	if c.Path() == "/login" || c.Path() == "/welcome" || strings.HasPrefix(c.Path(), "/totp/") || c.Path() == "/logout" {
 		return c.Next()
 	}
 
@@ -60,7 +60,7 @@ func MfaEnrollMiddleware(c *fiber.Ctx) error {
 }
 
 func MfaVerifyMiddleware(c *fiber.Ctx) error {
-	if c.Path() == "/login" || c.Path() == "/welcome" || strings.HasPrefix(c.Path(), "/totp/") {
+	if c.Path() == "/login" || c.Path() == "/welcome" || strings.HasPrefix(c.Path(), "/totp/") || c.Path() == "/logout" {
 		return c.Next()
 	}
 

middlewares/templates.go

@@ -0,0 +1,64 @@
+package middlewares
+
+import (
+	"fmt"
+
+	"git.readonly.ch/bouzoure/popvaud-people/helpers"
+	"git.readonly.ch/bouzoure/popvaud-people/models"
+	"github.com/gofiber/fiber/v2"
+)
+
+type TemplatesGlobals struct {
+	LoggedIn     bool
+	TotpVerified bool
+	UserID       uint
+	UserEmail    string
+	UserFullname string
+	UserIsAdmin  bool
+}
+
+func TemplatesMiddleware(c *fiber.Ctx) error {
+	globals := TemplatesGlobals{}
+
+	sess, err := helpers.GetSessionStore(c)
+	if err != nil {
+		return err
+	}
+
+	userid := sess.Get("userid")
+	if userid != nil {
+		switch userid.(type) {
+		case uint:
+		default:
+			return fmt.Errorf("type error, userid should be uint")
+		}
+
+		globals.LoggedIn = true
+		globals.UserID = userid.(uint)
+
+		db, err := helpers.GetDatabase()
+		if err != nil {
+			return err
+		}
+
+		var user models.User
+		result := db.First(&user, "id = ?", globals.UserID)
+
+		if result.Error == nil {
+			globals.UserEmail = user.Email
+			globals.UserFullname = user.Name
+			globals.UserIsAdmin = user.IsAdmin
+		}
+	}
+
+	totpVerified := sess.Get("totp-verified")
+	if totpVerified != nil {
+		globals.TotpVerified = true
+	}
+
+	c.Bind(fiber.Map{
+		"Globals": globals,
+	})
+
+	return c.Next()
+}

static/main.css

@@ -20,4 +20,17 @@ img#header-logo {
 .dashboard-tile .feather {
 	height: 42px;
 	width: auto;
+}
+
+.user-photo {
+	background-color: purple;
+	color: #fff;
+	display: inline-block;
+	width: 25px;
+	height: 25px;
+	border-radius: 50%;
+	font-weight: bold;
+	text-align: center;
+	font-size: 12px;
+	padding-top: 4px;
 }

views/partials/header.html

@@ -1,5 +1,5 @@
-<nav class="navbar bg-body-tertiary">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
-	<div class="container">
+	<div class="container-fluid">
 		<a href="/" class="navbar-brand">
 			<img
 				id="header-logo"
@@ -9,5 +9,115 @@
 			>
 			Camarades
 		</a>
+
+		{% if Globals.LoggedIn %}
+		<button
+			class="navbar-toggler"
+			type="button"
+			data-bs-toggle="collapse"
+			data-bs-target="#navbar-content"
+		>
+			<span class="navbar-toggler-icon"></span>
+		</button>
+
+		<div class="collapse navbar-collapse" id="navbar-content">
+			<ul class="navbar-nav me-auto mb-2 mb-lg-0">
+
+				{% if Globals.TotpVerified %}
+					<li class="nav-item">
+						<a class="nav-link" href="/membres">
+							<i class="feather me-1" data-feather="users"></i>
+							Membres
+						</a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="/sympathisants">
+							<i class="feather me-1" data-feather="users"></i>
+							Sympathisants
+						</a>
+					</li>
+
+					{% if Globals.UserIsAdmin %}
+					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
+						<li class="nav-item dropdown">
+							<a
+								class="nav-link dropdown-toggle"
+								href="javascript:;"
+								role="button"
+								data-bs-toggle="dropdown"
+							>
+								<i class="feather me-1" data-feather="settings"></i>
+								Administration
+							</a>
+							<ul class="dropdown-menu dropdown-menu-end">
+								<li>
+									<a class="dropdown-item" href="/account/manage">
+										<i class="feather me-1" data-feather="settings"></i>
+										Gérer mon compte
+									</a>
+								</li>
+								<li>
+									<a class="dropdown-item" href="/account/totp">
+										<i class="feather me-1" data-feather="smartphone"></i>
+										Gérer multifacteur (TOTP)
+									</a>
+								</li>
+								<li>
+									<a class="dropdown-item" href="/logout">
+										<i class="feather me-1" data-feather="log-out"></i>
+										Déconnexion
+									</a>
+								</li>
+							</ul>
+						</li>
+					</ul>
+					{% endif %}
+				{% endif %}
+
+			</ul>
+			<div class="d-flex">
+				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
+					<li class="nav-item dropdown">
+						<a
+							class="nav-link dropdown-toggle"
+							href="javascript:;"
+							role="button"
+							data-bs-toggle="dropdown"
+						>
+							<span class="user-photo me-1">{{ Globals.UserFullname|first }}</span>
+							{{ Globals.UserFullname }}
+						</a>
+						<ul class="dropdown-menu dropdown-menu-end">
+							{% if Globals.TotpVerified %}
+							<li>
+								<a class="dropdown-item" href="/account/manage">
+									<i class="feather me-1" data-feather="settings"></i>
+									Gérer mon compte
+								</a>
+							</li>
+							<li>
+								<a class="dropdown-item" href="/account/totp">
+									<i class="feather me-1" data-feather="smartphone"></i>
+									Gérer multifacteur (TOTP)
+								</a>
+							</li>
+							<li>
+								<hr class="dropdown-divider">
+							</li>
+							{% endif %}
+							
+							<li>
+								<a class="dropdown-item" href="/logout">
+									<i class="feather me-1" data-feather="log-out"></i>
+									Déconnexion
+								</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+		</div>
+		{% endif %}
+
 	</div>
 </nav>