mehr bootstrap updates

.vscode/extensions.json

@@ -1,12 +1,11 @@
 {
     "recommendations": [
-        "zarifprogrammer.tailwind-snippets",
-        "dawhite.mustache",
         "otovo-oss.htmx-tags",
         "devsense.phptools-vscode",
         "bmewburn.vscode-intelephense-client",
         "github.copilot",
         "github.copilot-chat",
-        "bradlc.vscode-tailwindcss"
+        "anbuselvanrocky.bootstrap5-vscode",
+        "hansuxdev.bootstrap5-snippets"
     ]
 }

web/inc/classes/Page.class.php

@@ -18,6 +18,7 @@ class Page
     public $menu_text;
     public $menu_image;
     public $menu_priority;
+    public $menu_classes;
     public $submenu;
 
     private $r;

web/inc/core.php

@@ -118,7 +118,7 @@ function getMenu()
                     {
                         while($arr[$menu_priority])
                             $menu_priority++;
-                        $arr[$menu_priority] = array('text'=>$menu_text,'image'=>$instance->menu_image, 'url'=>$file,'menu_class'=>$instance->menu_class,'submenu'=>$instance->submenu);
+                        $arr[$menu_priority] = array('text'=>$menu_text,'image'=>$instance->menu_image, 'url'=>$file,'menu_classes'=>$instance->menu_classes,'submenu'=>$instance->submenu);
                     }
                 }
             }

web/pages/admin/edituser.html

@@ -28,7 +28,7 @@
             </div>
             <!-- Modal footer -->
             <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
-                <button  type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Save</button>
+                <button  type="submit" class="btn btn-primary">Save</button>
                 <div id="response"></div>
             </div>
         </div>

web/pages/demo/controller.php

@@ -0,0 +1,27 @@
+<?php
+
+
+class Demo extends Page{
+    function setMenu()
+    {
+        $this->menu_text = 'Demo';
+        $this->menu_image = 'fas fa-do';
+        $this->menu_priority = 5;
+    }
+
+    function setSubmenu()
+    {
+        //$this->addSubmenuItem('Hunde anzeigen','/dogs','far fa-list-alt');
+        //$this->addSubmenuItem('Hund hinzufügen','/dogs/add','fas fa-plus-circle');
+    }
+
+    function index()
+    {
+        $this->set('successTitle','Erfolgreich');
+        $this->set('successMessage','Text davon');
+
+        $this->set('errorMessage','Fehler ohne Titel');
+
+        $this->set('template','demo.html');
+    }
+}

web/pages/demo/demo.html

@@ -0,0 +1,3 @@
+<?php include(ROOT.'/templates/partials/success.html') ?>
+
+<?php include(ROOT.'/templates/partials/error.html') ?>

web/pages/login/controller.php

@@ -5,7 +5,9 @@ class Login extends Page {
     function setMenu()
     {
         if($_SESSION['user'])
+        {
             $this->menu_text = $_SESSION['userid'];
+        }
         else
             $this->menu_text = 'Login';
         $this->menu_image = 'far fa-user';
@@ -25,7 +27,7 @@ class Login extends Page {
 
     function index()
     {
-        $this->set('hello','world');
+        
         $this->set('template', 'login.html');
         //return print_r($_REQUEST, true);
     }
@@ -47,11 +49,48 @@ class Login extends Page {
 
     function validate()
     {
-        $email = $_REQUEST['email'];
+        $email = trim($_REQUEST['email']);
-        $password = $_REQUEST['password'];
+        $password = trim($_REQUEST['password']);
         $remember = $_REQUEST['remember'];
 
-        return print_r(['email'=>$email,'password'=>$password,'remember'=>$remember], true);
+        $error = false;
+
+        $u = new User();
+
+        if(!$email || !$password)
+            $error = 'Bitte gib deine E-Mail-Adresse und dein Passwort ein';
+        else if(!filter_var($email, FILTER_VALIDATE_EMAIL))
+            $error = 'Bitte gib eine gültige E-Mail-Adresse ein';
+        else if(!$u->exists($email))
+            $error = 'Benutzer nicht gefunden. Schon registriert?';
+        else {
+            
+            try{
+                $u->load($email);
+            }
+            catch(Exception $e){
+                $error = $e->getMessage();
+            }
+            if(!password_verify($password, $u->data['password']))
+                $error = 'E-Mail-Adresse oder Passwort falsch';
+            else if($u->data['active'] == 0)
+                $error = 'Dein Account ist noch nicht aktiviert';
+            else
+            {
+                $u->login();
+                $this->redirect('/');
+            }
+        }
+
+        if($error)
+        {
+            $this->set('template', '/templates/partials/error.html');
+            $this->set('errorTitle', 'Error');
+            $this->set('errorMessage', $error);
+        }
+        
+
+        //return print_r(['email'=>$email,'password'=>$password,'remember'=>$remember], true);
     }
 
 }

web/pages/login/login.html

@@ -1,39 +1,20 @@
-<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0">
+<form class="space-y-4 md:space-y-6" hx-post="/login/validate" hx-target="#response">
-    <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+    <div id="response" class="text-gray-900 dark:text-white"></div>
-        <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+    <div class="form-group">
-            <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+        <label for="exampleInputEmail1">Email address</label>
-                Sign in to your account
+        <input name="email" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-            </h1>
+        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
-            <div id="response" class="text-gray-900 dark:text-white">
-                <?= $hello ?>
-            </div>
-            <form class="space-y-4 md:space-y-6" hx-post="/login/validate" hx-target="#response">
-                <div>
-                    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
-                    <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required="">
-                </div>
-                <div>
-                    <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
-                    <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
-                </div>
-                <div class="flex items-center justify-between">
-                    <div class="flex items-start">
-                        <div class="flex items-center h-5">
-                            <input id="remember" name="remember" aria-describedby="remember" type="checkbox" value="true" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800">
-                        </div>
-                        <div class="ml-3 text-sm">
-                            <label for="remember" class="text-gray-500 dark:text-gray-300">Remember me</label>
-                        </div>
-                    </div>
-                    <a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500 dark:text-gray-400">Forgot password?</a>
-                </div>
-                <button type="submit" class="bg-sky-500 hover:bg-sky-700 p-2 rounded">
-                    Sign in
-                </button>
-                <p class="text-sm font-light text-gray-500 dark:text-gray-400">
-                    Don’t have an account yet? <a href="#" hx-get="/register" hx-push-url="/register" hx-target="#main" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Sign up</a>
-                </p>
-            </form>
-        </div>
     </div>
-</div>
+    <div class="form-group">
+        <label for="exampleInputPassword1">Password</label>
+        <input name="password" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+    </div>
+    <div class="form-group form-check">
+        <input name="remember"  type="checkbox" class="form-check-input" id="exampleCheck1">
+        <label class="form-check-label" for="exampleCheck1">Remember me</label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+    <p class="text-sm font-light text-gray-500 dark:text-gray-400">
+        Don't have an account yet? <a href="#" hx-get="/register" hx-push-url="/register" hx-target="#main" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Sign up</a>
+    </p>
+</form>

web/pages/register/register.html

@@ -1,28 +1,19 @@
-<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0">
+<h1>Registrieren</h1>
-    <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+
-        <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+<form class="space-y-4 md:space-y-6" hx-post="/register/validate" hx-target="#response">
-            <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+    <div id="response"></div>
-                Register
+    <div class="form-group">
-            </h1>
+        <label for="exampleInputEmail1">Email address</label>
-            <div id="response" class="text-gray-900 dark:text-white"></div>
+        <input name="email" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-            <form class="space-y-4 md:space-y-6" hx-post="/register/validate" hx-target="#response">
+        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
-                <div>
-                    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
-                    <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required="">
-                </div>
-                <div>
-                    <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
-                    <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
-                </div>
-                <div>
-                    <label for="password2" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Repeat Password</label>
-                    <input type="password" name="password2" id="password2" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
-                </div>
-                
-                <button type="submit" class="bg-sky-500 hover:bg-sky-700 p-2 rounded">
-                    Account erstellen
-                </button>
-            </form>
-        </div>
     </div>
-</div>
+    <div class="form-group">
+        <label for="exampleInputPassword1">Passwort</label>
+        <input name="password" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+    </div>
+    <div class="form-group">
+        <label for="exampleInputPassword2">Passwort wiederholen</label>
+        <input name="password2" type="password2" class="form-control" id="exampleInputPassword2" placeholder="Password">
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+</form>

web/templates/mainpage.html

@@ -15,8 +15,8 @@
 <body>
     <?php include(ROOT."/templates/menu.html") ?>
 
-    <main id="main" class="container" hx-get="/" hx-trigger="load" hx-indicator="#spinner">
+    <main id="main" class="container" hx-get="/" hx-trigger="load">
-        <i id="spinner" class="fa-solid fa-spinner"></i>
+        
     </main>
 
     <script src="/js/htmx.min.js"></script>

web/templates/menu.html

@@ -15,7 +15,7 @@
                 <li <?php if (count($item['submenu'])) : ?>
 
                 <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <a class="nav-link dropdown-toggle <?= $item['menu_classes'] ?>" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                         <?= $item['text']?>
                     </a>
                     <ul class="dropdown-menu">
@@ -34,7 +34,7 @@
                 </li>
                 <?php else : ?>
                 <li class="nav-item">
-                    <a class="nav-link" aria-current="page" href="/<?= $item['url'] ?>" hx-push-url="/<?= $item['url'] ?>" hx-get="/<?= $item['url'] ?>" hx-target="#main">
+                    <a class="nav-link <?= $item['menu_classes'] ?>" aria-current="page" href="/<?= $item['url'] ?>" hx-push-url="/<?= $item['url'] ?>" hx-get="/<?= $item['url'] ?>" hx-target="#main">
                         <i class="<?= $item['image'] ?>"></i>
                         <?= $item['text'] ?>
                     </a>

web/templates/partials/error.html

@@ -1,4 +1,6 @@
-<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 animate__animated animate__fadeInDown" role="alert">
+<div class="alert alert-danger" role="alert">
-    <p class="font-bold"><?= $errorTitle ?></p>
+  <?php if($errorTitle) : ?>
-    <p><?= $errorMessage ?></p>
+    <h4 class="alert-heading"><?= $errorTitle ?></h4>
-  </div>
+  <?php endif; ?>
+  <?= $errorMessage ?>
+</div>

web/templates/partials/info.html

@@ -1,4 +1,6 @@
-<div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 animate__animated animate__fadeInDown" role="alert">
+<div class="alert alert-info" role="alert">
-    <p class="font-bold"><?= $infoTitle ?></p>
+  <?php if($infoTitle) : ?>
-    <p><?= $infoMessage ?></p>
+    <h4 class="alert-heading"><?= $infoTitle ?></h4>
-  </div>
+  <?php endif; ?>
+  <?= $infoMessage ?>
+</div>

web/templates/partials/notice.html

@@ -1,4 +1,6 @@
-<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 animate__animated animate__fadeInDown" role="alert">
+<div class="alert alert-warning" role="alert">
-    <p class="font-bold"><?= $title ?></p>
+  <?php if($noticeTitle) : ?>
-    <p><?= $message ?></p>
+    <h4 class="alert-heading"><?= $noticeTitle ?></h4>
-  </div>
+  <?php endif; ?>
+  <?= $noticeMessage ?>
+</div>

web/templates/partials/success.html

@@ -1,4 +1,6 @@
-<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 animate__animated animate__fadeInDown" role="alert">
+<div class="alert alert-success" role="alert">
-    <p class="font-bold"><?= $successTitle ?></p>
+  <?php if($successTitle) : ?>
-    <p><?= $successMessage ?></p>
+    <h4 class="alert-heading"><?= $successTitle ?></h4>
-  </div>
+  <?php endif; ?>
+  <?= $successMessage ?>
+</div>