bootstrapping and routing login and logout process

app/controllers/AuthController.php

@@ -0,0 +1,54 @@
+<?php
+
+class AuthController {
+
+
+    public function showLoginForm($f3){
+        // store session errors or messages, then clear
+        $f3->set('error', $f3->get('SESSION.login_error'));
+        $f3->clear('SESSION.login_error');
+
+        // this can be in our controller base
+        $f3->set('content', '../ui/views/login.html');
+        echo \Template::instance()->render('../ui/templates/layout.html');
+        $f3->clear('error');
+    }
+
+    public function login($f3){
+        $username = $f3->get('POST.username');
+        $password = $f3->get('POST.password');
+
+        $db = $f3->get('DB');
+        // query for user
+        $result = $db->exec(
+            'SELECT id, username, password FROM users WHERE username =? LIMIT 1', $username
+        );
+
+        // verifiy password
+        if($result){
+            $user = $result[0]; // first row
+            if(password_verify($password, $user['password'])){
+                // valid
+                $f3->set('SESSION.user', [
+                    'id'=> $user['id'],
+                    'username' => $user['username']
+                ]);
+
+                $f3->reroute('/dashboard');
+            } else {
+                $f3->set('SESSION.login_error', 'Invalid password');
+            }
+        } else {
+            // if here, login failed.
+            $f3->set('SESSION.login_error', 'Invalid username');
+        }
+        $f3->reroute('/login');
+        
+    }
+
+    public function logout($f3){
+        $f3->clear('SESSION');
+        $f3->reroute('/');
+    }
+
+}

app/controllers/DashboardController.php

@@ -0,0 +1,9 @@
+<?php
+
+class DashboardController {
+
+    function index($f3){
+        $f3->set('content', '../ui/views/dashboard.html');
+        echo \Template::instance()->render('../ui/templates/layout.html');
+    }
+}

app/controllers/HomeController.php

@@ -6,7 +6,7 @@ class HomeController {
         // $db  = $f3->get('DB');
         // echo \Template::instance()->render('../ui/views/home.html');
 
-        echo \Template::instance()->render('../ui/views/home.html');
+        echo \Template::instance()->render('../ui/templates/layout.html');
 
         // Query
         // View

public/index.php

@@ -6,15 +6,32 @@ $f3 = \Base::instance();
 $f3->set('DEBUG', 3); // development debug
 $f3->config('../app/.env.cfg');
 
+$f3->set('DB', new \DB\SQL(
+    'mysql:host=localhost;port=3306;dbname=' . $f3->get('database.db_name'),
+    $f3->get('database.username'),
+    $f3->get('database.password')
+));
+
+new \DB\SQL\Session($f3->get('DB'));
+
 // Routing and Controller Setup
 
 // home
 $f3->route('GET /', 'HomeController->display');
 
 // auth
-$f3->route('GET /login', 'Auth->login');
+$f3->route('GET /login', 'AuthController->showLoginForm');
-$f3->route('POST /login', 'Auth->login');
+$f3->route('POST /login', 'AuthController->login');
-$f3->route('GET /logout', 'Auth->logout');
+$f3->route('GET /logout', 'AuthController->logout');
+
+// Example protected route
+$f3->route('GET /dashboard', function($f3){
+    if(!$f3->exists('SESSION.user')){
+        $f3->reroute('/login');
+    }
+    echo 'Welcome to the dashboard' . $f3->get('SESSION.username');
+    echo '<a href="/logout">logout</a>';
+});
 
 // tickets - CRUD (CREATE, READ, UPDATE, DELETE)
 $f3->route('GET /tickets', 'Tickets->list'); // view all tickets
@@ -24,7 +41,6 @@ $f3->route('GET /ticket/@id', 'Tickets->read'); // view ticket details
 $f3->route('GET /ticket/@id/edit', 'Tickets->edit'); // edit ticket
 $f3->route('POST /ticket/@id/update', 'Tickets->update(PARAMS.id)'); // 
 
-
 // knowledgebase
 $f3->route('GET /kb', 'KB->list');
 $f3->route('GET /kb/create', 'KB->create');
@@ -36,4 +52,6 @@ $f3->route('POST /kb/@id/edit', 'KB->update');
 $f3->route('GET /tags', 'Tag->list');
 $f3->route('POST /tag/create', 'Tag->create');
 
+$f3->route('GET /dashboard', 'DashboardController->index');
+
 $f3->run();

ui/templates/layout.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Desk - Work Streams</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-checkradio@2.1/dist/css/bulma-checkradio.min.css">
+  <link rel="stylesheet" 
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" 
+    integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" 
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+
+<body>
+  <!-- Navigation Bar -->
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="/">
+        <!-- Your logo or app name -->
+        <img src="logo.svg" alt="App Logo">
+      </a>
+      <!-- Burger menu for mobile -->
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mainNavbar">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="mainNavbar" class="navbar-menu">
+      <div class="navbar-start">
+        <a class="navbar-item" href="/dashboard">Dashboard</a>
+        <a class="navbar-item" href="/tickets">Tickets</a>
+        <a class="navbar-item" href="/projects">Projects</a>
+        <a class="navbar-item" href="/knowledge">Knowledge Base</a>
+      </div>
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <check if="{{ isset(@SESSION.user) }}">
+              <true>
+                <a class="button is-primary" href="/logout">Log Out</a>
+              </true>
+              <false>
+                <a class="button is-primary" href="/login">Log In</a>
+              </false>
+            </check>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Main Content Area -->
+  <main class="section" id="page">
+    <div class="container">
+      <!-- Fat-Free Framework content injection -->
+      <include href="{{@content}}" />
+    </div>
+  </main>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="content has-text-centered">
+      <p>&copy; <?php echo date('Y'); ?> Terry Probert</p>
+    </div>
+  </footer>
+
+ <!-- JavaScript for Bulma navbar burger (mobile) -->
+ <script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const burgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+    if (burgers.length > 0) {
+      burgers.forEach(el => {
+        el.addEventListener('click', () => {
+          const target = document.getElementById(el.dataset.target);
+          el.classList.toggle('is-active');
+          target.classList.toggle('is-active');
+        });
+      });
+    }
+  });
+</script>
+</body>
+</html>

ui/views/dashboard.html

@@ -0,0 +1 @@
+<h1 class="title">Dashboard</h1>

ui/views/login.html

@@ -0,0 +1,35 @@
+<h1 class="title">Please Log In</h1>
+
+<check if="{{ @error}}">
+    <div class="notification is-danger is-light">
+        <p style="color: red;">{{ @error }}</p>
+    </div>
+</check>
+
+<form action="/login" method="POST">
+
+    <div class="field">
+        <p class="control has-icons-left has-icons-right">
+            <input name="username" class="input" type="text" placeholder="Username">
+            <span class="icon is-small is-left">
+                <i class="fas fa-user"></i>
+            </span>
+        </p>
+    </div>
+    <div class="field">
+        <p class="control has-icons-left">
+            <input name="password" class="input" type="password" placeholder="Password">
+            <span class="icon is-small is-left">
+                <i class="fas fa-lock"></i>
+            </span>
+        </p>
+    </div>
+    <div class="field">
+        <p class="control">
+            <button class="button is-success">
+                Login
+            </button>
+        </p>
+    </div>
+
+</form>