added login, logout and registration sites and functionality as well as an protected profile page

config.php

@@ -4,7 +4,7 @@ return [
     'database' => [
     'host' => 'localhost',
     'port' => 3306,
-    'dbname' => 'myapp',
+    'dbname' => 'MatheApp',
     'charset' => 'utf8mb4'
     ]
 ];

controllers/login.php

@@ -1,3 +1,28 @@
 <?php
-    $heading = "Login";
+$heading = "Login";
+$username = "MatheApp";
+$password = "password";
+$config = require('config.php');
+$db = new Database($config['database'], $username, $password);
+
+if (isset($_POST["submit"])) {
+  $stmt = $db->query("SELECT * FROM user WHERE username = :user", ['user' => $_POST["username"]])->get();
+  $count = sizeof($stmt);
+  if ($count == 1) {
+    $stmt = $stmt[0];;
+    
+    if (password_verify($_POST['password'], $stmt["password"])) {
+      session_start();
+      $_SESSION["username"] = $stmt['username'];
+      //require "views/profile.php";
+      //urlIs("/profile");
+      header("Location: /profile");
+    } else {
+      echo "Anmeldung fehlgeschlagen!";
+    }
+  } else {
+    echo "Anmeldung fehlgeschlagen!";
+  }
+}
+
    require "views/login.view.php";

controllers/logout.php

@@ -0,0 +1,4 @@
+<?php
+session_start();
+session_destroy();
+header("Location: /");

controllers/profile.php

@@ -0,0 +1,8 @@
+<?php
+$heading = "profile";
+session_start();
+if(!isset($_SESSION["username"])){
+  header("Location: /");
+  exit;
+}
+require "views/profile.view.php";

controllers/register.php

@@ -0,0 +1,39 @@
+<?php
+  $heading = "Register";
+  require 'Validator.php';
+  $username = 'MatheApp';
+  $password = 'password';
+  $config = require('config.php');
+  $db = new Database($config['database'], $username, $password);
+  
+  if (isset($_POST["submit"])) {
+  $stmt = $db->query("SELECT * FROM user WHERE username = :user", ['user' => $_POST['Username']])->get();
+  $count = sizeof($stmt);
+  if($count == 0 && Validator::string($_POST['Username'], 1, 255)){
+    $checkEmail = $db->query("SELECT * FROM user WHERE email = :email", ['email' => $_POST['Email-Adresse']])->find();
+    if(!$checkEmail && Validator::string($_POST['Email-Adresse'], 1, 255)) {
+      if($_POST["Passwort"] == $_POST["pw2"] && Validator::string($_POST['Passwort'], 8, 255)) {
+    //Username ist frei
+      //User anlegen
+        $hash = password_hash($_POST["Passwort"], PASSWORD_BCRYPT);
+        $db->query("INSERT INTO user (username, vorname, nachname, email, password, level, xp, coins) VALUES (
+          :username, :vorname, :nachname, :email, :password, :level, :xp, :coins )", [
+            'username' => $_POST['Username'],
+            'vorname' => $_POST['Vorname'],
+            'nachname' => $_POST['Nachname'],
+            'email' => $_POST['Email-Adresse'],
+            'password' => $hash,
+            'level' => 1,
+            'xp' => 0,
+            'coins' => 0
+          ]);
+      } else {
+        echo "Die Passwörter stimmen nicht überein";
+      }
+  } else {
+    echo "Der Username ist bereits vergeben";
+  }
+}
+}
+
+  require "views/register.view.php";

index.php

@@ -4,4 +4,9 @@ require 'Database.php';
 require 'router.php';
 require 'Response.php';
 
+$username = 'MatheApp';
+$password = 'password';
+$config = require('config.php');
+$db = new Database($config['database'], $username, $password);
+
 //dd($posts);

routes.php

@@ -5,5 +5,8 @@ return[
     '/mathe' => 'controllers/mathe.php',
     '/game' => 'controllers/game.php',
     '/addition' => 'controllers/addition.php',
-    '/login' => 'controllers/login.php'
+    '/login' => 'controllers/login.php',
+    '/register' => 'controllers/register.php',
+    '/profile' => 'controllers/profile.php',
+    '/logout' => 'controllers/logout.php'
 ];

views/index.view.php

@@ -12,7 +12,7 @@
             <h1 class="text-4xl font-bold tracking-tight sm:text-center sm:text-6xl">Automatisiere spielerisch das 1x1</h1>
             <p class="mt-6 text-lg leading-8 text-gray-600 sm:text-center">Zeige was du kannst und kämpfe dich durch denn Dungeon.</p>
             <div class="mt-8 flex gap-x-4 sm:justify-center">
-<a href="/login" class="<?= urlIs("/login") ?> nes-btn is-primary">
+              <a href="/login" class="<?= urlIs("/login") ?> nes-btn is-primary">
                 Los geht's
                 <span class="text-indigo-200" aria-hidden="true">&rarr;</span>
               </a>

views/login.view.php

@@ -3,21 +3,21 @@
 
 <div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
   <div class="w-full max-w-md space-y-8 nes-container">
-<form action="#" method="POST">
+<form action="/login" method="POST">
   <div>
     <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Melde dich mit deinem Konto an.</h2>
     <p class="mt-2 text-center text-sm text-gray-600">
       Oder
-      <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">registriere dich noch Heute</a>
+<a href="/register" class="<?= urlIs("/register") ?> font-medium text-indigo-600 hover:text-indigo-500">registriere dich noch Heute</a>
     </p>
   </div> 
   <div class="nes-field">
-    <!--<label for="name_field">Email-Adresses</label>-->
+    <!--<label for="name_field">Username</label>-->
-    <input type="text" class="nes-input" placeholder="Email-Adresses">
+    <input name="username" type="text" class="nes-input" placeholder="Username">
   </div>
   <div class="nes-field">
     <!--<label for="name_field">Passwort</label>-->
-    <input type="text" class="nes-input" placeholder="Passwort">
+    <input name="password" type="password" class="nes-input" placeholder="Passwort">
   </div>
   <div class="flex items-center justify-between">
     <label class="flex items-center justify-between">
@@ -29,7 +29,7 @@
     </div> 
   </div>
  <div>
-    <button type="submit" class="nes-btn is-primary">
+    <button type="submit" name="submit" class="nes-btn is-primary">
       <span class="absolute inset-y-0 left-0 flex items-center pl-3">
       </span>
         Anmelden

views/partials/nav.php

@@ -29,14 +29,14 @@
           </button>
         </div>
         <div class="hidden lg:flex lg:min-w-0 lg:flex-1 lg:justify-center lg:gap-x-12">
-          <a href="/" class="<?= urlIs('/') ?> font-semibold text-gray-900 hover:text-gray-900">Home</a>
+          <a href="/" class="<?= urlIs('/') ?> text-sm font-semibold text-gray-900 hover:text-gray-900">Home</a>
-          <a href="/learn" class="<?= urlIs('/learn') ?>font-semibold text-gray-900 hover:text-gray-900">Lernen</a>
+          <a href="/learn" class="<?= urlIs('/learn') ?> text-sm font-semibold text-gray-900 hover:text-gray-900">Lernen</a>
-          <a href="/mathe" class="<?= urlIs('/mathe') ?>font-semibold text-gray-900 hover:text-gray-900">Mathe</a>
+          <a href="/mathe" class="<?= urlIs('/mathe') ?> text-sm font-semibold text-gray-900 hover:text-gray-900">Mathe</a>
-          <a href="/game" class="<?= urlIs('/game') ?>font-semibold text-gray-900 hover:text-gray-900">Game</a>
+          <a href="/game" class="<?= urlIs('/game') ?> text-sm font-semibold text-gray-900 hover:text-gray-900">Game</a>
         </div>
         <div class="hidden lg:flex lg:min-w-0 lg:flex-1 lg:justify-end">
-          <a href="/login" class="<?= urlIs('/login') ?> nes-btn">Anmelden</a>
+          <a href="/login" class="<?= urlIs('/login') ?> nes-btn text-sm">Anmelden</a>
-          <a href="/register" class="<?= urlIs('/register') ?> nes-btn">Registrieren</a>
+          <a href="/register" class="<?= urlIs('/register') ?> nes-btn text-sm">Registrieren</a>
         </div>
       </nav>
       <!-- Mobile menu, show/hide based on menu open state. -->
@@ -44,14 +44,14 @@
         <div focus="true" class="fixed inset-0 z-10 overflow-y-auto bg-white px-6 py-6 lg:hidden">
           <div class="flex h-9 items-center justify-between">
             <div class="flex">
-              <a href="#" class="-m-1.5 p-1.5">
+              <a href="/" class="<?= urlIs('/') ?> -m-1.5 p-1.5">
-                <span class="sr-only">Your Company</span>
+                <span class="sr-only">The Math Wizard</span>
                 <img class="h-8" src="./../../images/icon.png" alt="">
               </a>
             </div>
             <div class="flex">
               <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
-                <span class="sr-only">Close menu</span>
+                <span class="sr-only">Schließen</span>
                 <!-- Heroicon name: outline/x-mark -->
                 <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -62,15 +62,14 @@
           <div class="mt-6 flow-root">
             <div class="-my-6 divide-y divide-gray-500/10">
               <div class="space-y-2 py-6">
-                <a href="/" class="<?= urlIs('/') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Home</a>
+                <a href="/" class="<?= urlIs('/') ?> text-sm -mx-3 block rounded-lg py-2 px-3 font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Home</a>
-
+                <a href="/learn" class="<?= urlIs('/learn') ?> text-sm -mx-3 block rounded-lg py-2 px-3 font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Lernen</a>
-                <a href="/learn" class="<?= urlIs('/learn') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Lernen</a>
+                <a href="/mathe" class="<?= urlIs('/mathe') ?> text-sm -mx-3 block rounded-lg py-2 px-3 font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Mathe</a>
-                <a href="/mathe" class="<?= urlIs('/mathe') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Mathe</a>
+                <a href="/game" class="<?= urlIs('/game') ?> text-sm -mx-3 block rounded-lg py-2 px-3 font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Game</a>
-                <a href="/game" class="<?= urlIs('/game') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Game</a>
               </div>
               <div class="py-6">
-                <a href="/login" class="<?= urlIs('/login') ?> -mx-3 block rounded-lg py-2.5 px-3 text-base font-semibold leading-6 text-gray-900 hover:bg-gray-400/10">Anmelden</a>
+                <a href="/login" class="<?= urlIs('/login') ?> text-sm -mx-3 block rounded-lg py-2.5 px-3 font-semibold leading-6 text-gray-900 hover:bg-gray-400/10">Anmelden</a>
-                <a href="/register" class="<?= urlIs('/register') ?> -mx-3 block rounded-lg py-2.5 px-3 text-base font-semibold leading-6 text-gray-900 hover:bg-gray-400/10">Registrieren</a>
+                <a href="/register" class="<?= urlIs('/register') ?> text-sm -mx-3 block rounded-lg py-2.5 px-3 font-semibold leading-6 text-gray-900 hover:bg-gray-400/10">Registrieren</a>
               </div>
             </div>
           </div>

views/profile.view.php

@@ -0,0 +1,10 @@
+<?php require('partials/head.php') ?>
+<?php require('partials/nav.php') ?>
+
+<div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+<div class="w-full max-w-md space-y-8 nes-container">
+<h1>Dieses ist die Profile Page</h1>
+<a href="/logout" class="<?= urlIs("/logout") ?> nes-btn">Abmelden</a>
+</div>
+</div>
+<?php require('partials/footer.php') ?>

views/register.view.php

@@ -0,0 +1,42 @@
+<?php require('partials/head.php') ?>
+<?php require('partials/nav.php') ?>
+<div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+  <div class="w-full max-w-md space-y-8 nes-container">
+<form action="/login" method="POST">
+
+  <div class="nes-field">
+    <label for="username">Username</label>
+    <input name="Username" type="text" class="nes-input" placeholder="Username">
+  </div>
+  <div class="nes-field">
+    <label for="vorname">Vorname</label>
+    <input name="Vorname" type="text" class="nes-input" placeholder="Vorname">
+  </div>
+  <div class="nes-field">
+    <label for="nachname">Namename</label>
+    <input name="Nachname" type="text" class="nes-input" placeholder="Nachname">
+  </div>
+  <div class="nes-field">
+    <label for="enail">Email-Adresse</label>
+    <input name="Email-Adresse" type="text" class="nes-input" placeholder="Email-Adresse">
+  </div>
+  <div class="nes-field">
+    <label for="password">Passwort</label>
+    <input name="Passwort" type="password" class="nes-input" placeholder="Passwort">
+  </div>
+  <div class="nes-field">
+    <label for="password_check">Passwort wiederholen</label>
+    <input name="pw2" type="password" class="nes-input" placeholder="Passwort wiederholen">
+  </div>
+
+ <div>
+    <button type="submit" name="submit" class="nes-btn is-primary mt-10">
+      <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+      </span>
+        Registrieren
+    </button>
+  </div> 
+</form>
+</div>
+</div>
+<?php require('partials/footer.php') ?>