added warning when wrong password is entered

app/public/css/login.css

@@ -101,3 +101,12 @@ input[type="submit"]:hover{
   border-color: #2691d9;
   transition: .5s;
 }
+
+.warnings {
+  outline: none;
+  margin-top: 0px;
+  margin-bottom: 10px;
+  background-color: #ff8080;
+  border-radius: 4px;
+  padding: 4px;
+}

app/public/login.php

@@ -2,6 +2,8 @@
     session_start();
     include("../scripts/connection.php");
     include("../scripts/functions.php");
+    $password_wrong = false;
+    $wrong_data = false;
 
     if($_SERVER['REQUEST_METHOD'] == "POST"){
         $user_name = sanitize_input($_POST['user_name']);
@@ -21,14 +23,14 @@
                     }
                     die;
                 } else {
-                    echo "Benutzername oder Passwort stimmen nicht";
+                    $password_wrong = true;
                 }
             } else {
-                echo "Benutzername oder Passwort stimmen nicht";
+                $password_wrong = true;
             }
 
         } else {
-            echo "Gib bitte gültige Daten ein!";
+            $wrong_data = true;
         }
     }
     $con = null;
@@ -57,6 +59,21 @@
                 <span></span>
                 <label>Passwort</label>
             </div>
+            <?php
+                if ($password_wrong == true) {
+                    echo "
+                    <div class=\"warnings\" id=\"wrong_user_name\">
+                        <label for=\"warnings\">Benutzername oder <br>Passwort stimmen nicht!</label>
+                    </div>";
+                }
+
+                if ($wrong_data == true) {
+                    echo "
+                    <div class=\"warnings\" id=\"wrong_data\">
+                        <label for=\"warnings\">Gib bitte gültige Daten ein!</label>
+                    </div>";
+                }
+            ?>
             <input class="button" id="button" type="submit" value="Login"><br><br>
         </form>
     </div>