Working on temp ban system

Sniffle/sniffle.css

@@ -43,9 +43,14 @@
 
   box-shadow: var(--shadow);
 
-  transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.25s cubic-bezier(.19,1,.22,1);
-
   border-radius: var(--rad);
+
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
 }
 .sniffle-notification:hover {
   transform: scale(1.05);
@@ -53,25 +58,36 @@
   cursor: pointer;
 }
 
-.sniffle-notification:not(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3)) {
+.sniffle-notification:not(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3), :nth-of-type(4)) {
   display: none;
   opacity: 0;
 }
 .sniffle-notification:nth-of-type(1) {
   z-index: 1;
   transform: scale(1);
+  opacity: 1;
+  transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.25s cubic-bezier(.19,1,.22,1);
 }
 .sniffle-notification:nth-of-type(2) {
   z-index: -1;
   transform: scale(0.95);
-  transition: none;
   margin-top: -4.8rem;
+  opacity: 1;
+  transition: transform 1.25s, opacity 0.5s;
 }
 .sniffle-notification:nth-of-type(3) {
   z-index: -2;
   transform: scale(0.9);
-  transition: none;
   margin-top: -4.8rem;
+  opacity: 1;
+  transition: transform 1.5s, opacity 0.75s;
+}
+.sniffle-notification:nth-of-type(4) {
+  z-index: -3;
+  transform: scale(0.85);
+  margin-top: -4.8rem;
+  opacity: 0;
+  transition: transform 1.75s, opacity 1s;
 }
 
 /*

account.php

@@ -11,8 +11,10 @@
 	require_once __DIR__."/ui/nav.php";
 
 	use App\Account;
+	use App\Diff;
 
 	$user_info = new Account();
+	$diff = new Diff();
 	?>
 
 		<?php
@@ -62,7 +64,34 @@
 											<p><?php echo $log['action']; ?></p>
 											<?php
 												$log_time = new DateTime($log['time']);
-												echo "<p>" . $log_time->format('d/m/Y H:i:s T') . "</p>";
+												echo "<p>" . $log_time->format('d/m/Y H:i:s T') . "<br>" . $diff->time($log['time']) . "</p>";
+											?>
+										</div>
+									<?php
+								}
+							?>
+						</div>
+						<br>
+						<h3>Bans/Timeouts</h3>
+						<div id="bans" class="bans">
+							<?php
+								// Reading images from table
+								$bans_request = mysqli_query($conn, "SELECT * FROM bans ORDER BY id DESC");
+
+								while ($ban = mysqli_fetch_array($bans_request)) {
+									if ($ban['permanent']) {
+										echo "<div class='ban perm'>";
+									} else {
+										echo "<div class='ban'>";
+									}
+									?>
+											<p><?php echo $ban['id']; ?></p>
+											<p><?php echo $ban['ipaddress']; ?></p>
+											<p><?php echo $ban['reason']; ?></p>
+											<p><?php echo $ban['length']; ?></p>
+											<?php
+												$log_time = new DateTime($ban['time']);
+												echo "<p>" . $log_time->format('d/m/Y H:i:s T') . "<br>" . $diff->time($ban['time']) . "</p>";
 											?>
 										</div>
 									<?php

app/account/account.php

@@ -29,6 +29,45 @@ if (isset($_POST['submit_login'])) {
      */
     $error = 0;
 
+    $sql = "SELECT * FROM bans WHERE ipaddress = '$user_ip' ORDER BY id DESC LIMIT 1";
+    $query = mysqli_query($conn, $sql);
+    
+    while ($ban_check = mysqli_fetch_assoc($query)) {
+        $ban_time = $ban_check['time'];
+        $ban_perm = $ban_check['permanent'];
+    }
+
+    $ban_diff = time() - strtotime($ban_time);
+
+    if ($ban_perm) {
+        ?>
+            <script>
+                sniffleAdd('Bye bye!', 'You have been banned, contact the owner if you feel that this was a mistake', 'var(--red)', 'assets/icons/warning.svg');
+            </script>
+        <?php
+        $error += 1;
+    } elseif (($ban_diff / 60) <= 60) {
+        ?>
+            <script>
+                sniffleAdd('Slow down!', 'You have attempted to login too many times in the last 10 minutes. Come back in <?php echo round(60-($ban_diff/60)); ?> minutes', 'var(--red)', 'assets/icons/warning.svg');
+            </script>
+        <?php
+        $error += 1;
+    } else {
+        $attemps = 0;
+
+        $sql = "SELECT * FROM logs WHERE ipaddress = '$user_ip' ORDER BY id DESC LIMIT 5";
+        $query = mysqli_query($conn, $sql);
+
+        while ($log_array = mysqli_fetch_assoc($query)) {
+            $log_diff = time() - strtotime($log_array['time']);
+            if ($log_array['action'] == 'Failed to enter correct Password' && ($log_diff / 60) <= 10 ) {
+                $attemps += 1;
+            }
+        }
+        if ($attemps >= 5) {
+            mysqli_query($conn,"INSERT INTO bans (ipaddress, reason, length, permanent) VALUES('$user_ip','Attempted password too many times', '60', '0')");
+        } else {
             // Checking if Username is empty
             if (empty(trim($_POST["username"]))) {
                 ?>
@@ -36,7 +75,7 @@ if (isset($_POST['submit_login'])) {
                         sniffleAdd('Who dis?', 'You must enter a username to login!', 'var(--red)', 'assets/icons/cross.svg');
                     </script>
                 <?php
-        $error = $error + 1;
+                $error += 1;
             } else {
                 $username = trim($_POST["username"]);
             }
@@ -48,10 +87,13 @@ if (isset($_POST['submit_login'])) {
                         sniffleAdd('Whats the magic word?', 'Pls enter the super duper secrete word(s) to login!', 'var(--red)', 'assets/icons/cross.svg');
                     </script>
                 <?php
-        $error = $error + 1;
+                $error += 1;
             } else {
                 $password = trim($_POST["password"]);
             }
+        }
+    }
+
 
     if ($error <= 0) {
         // Prepare so SQL doesnt get spooked

app/app.php

@@ -137,5 +137,35 @@ class Image {
             return False;
         }
     }
-
+}
+
+class Diff {
+    function time($past_time, $full_date = false) {
+        $now = new \DateTime;
+        $ago = new \DateTime($past_time);
+        $diff = $now->diff($ago);
+
+        $diff->w = floor($diff->d / 7);
+        $diff->d -= $diff->w * 7;
+
+        $string = array(
+            'y' => 'year',
+            'm' => 'month',
+            'w' => 'week',
+            'd' => 'day',
+            'h' => 'hour',
+            'i' => 'minute',
+            's' => 'second',
+        );
+        foreach ($string as $k => &$v) {
+            if ($diff->$k) {
+                $v = $diff->$k . ' ' . $v . ($diff->$k > 1 ? 's' : '');
+            } else {
+                unset($string[$k]);
+            }
+        }
+
+        if (!$full_date) $string = array_slice($string, 0, 1);
+        return $string ? implode(', ', $string) . ' ago' : 'just now';
+    }
 }

css/main.css

@@ -671,6 +671,53 @@ nav .btn {
   width: 20%;
 }
 
+.bans {
+  width: 100%;
+  max-height: 20rem;
+  min-height: 5rem;
+  padding: 0;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  background-color: #151515;
+  border-radius: calc(0.25rem - (0.5rem + 3px));
+}
+
+.ban {
+  min-width: 769px;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.ban:nth-child(odd) {
+  background-color: rgba(255, 255, 255, 0.0666666667);
+}
+.ban > * {
+  margin: 0 0.5rem 0 0;
+  padding: 0;
+  word-wrap: break-word;
+}
+.ban > *:nth-child(1) {
+  width: 5%;
+}
+.ban > *:nth-child(2) {
+  width: 20%;
+}
+.ban > *:nth-child(3) {
+  width: 45%;
+}
+.ban > *:nth-child(4) {
+  width: 10%;
+}
+.ban > *:nth-child(5) {
+  width: 20%;
+}
+
+.perm {
+  border: 1px #B66467 solid;
+}
+
 .signup-root {
   margin-bottom: 1rem;
   padding: 0.5rem 0.5rem 0 0.5rem;

css/scss/_body.scss

@@ -393,6 +393,58 @@
     }
 }
 
+.bans {
+    width: 100%;
+    max-height: 20rem; min-height: 5rem;
+
+    padding: 0;
+
+    overflow-y: scroll;
+
+    display: flex; flex-direction: column;
+
+    background-color: $bg;
+    border-radius: calc($rad - (0.5rem + 3px));
+}
+.ban {
+    min-width: 769px;
+
+    padding: 0.5rem;
+
+    display: flex; flex-direction: row;
+
+    justify-content: space-between;
+
+    &:nth-child(odd) {
+        background-color: #ffffff11;
+    }
+
+    & > * {
+        margin: 0 0.5rem 0 0;
+        padding: 0;
+        word-wrap: break-word;
+
+        &:nth-child(1) {
+            width: 5%;
+        }
+        &:nth-child(2) {
+            width: 20%;
+        }
+        &:nth-child(3) {
+            width: 45%;
+        }
+        &:nth-child(4) {
+            width: 10%;
+        }
+        &:nth-child(5) {
+            width: 20%;
+        }
+    }
+}
+.perm {
+    border: 1px $red solid;
+}
+
 .signup-root {
     @include defaultDecoration($page-accent);
     @include defaultFont();