From 9fd958648b22e12b8bd891aa5f06fc11c3d412a4 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Mon, 1 Aug 2022 14:09:53 +0100
Subject: [PATCH] New alert system

---
 account/login.php          | 20 ++++++++++++--------
 account/password-reset.php | 14 +++++++++-----
 account/signup.php         | 20 ++++++++++++--------
 css/master.css             | 13 +++++++++++++
 image.php                  | 36 ++++++++++++++++++++++--------------
 index.php                  | 36 ++++++++++++++++++++++--------------
 scripts/alert.js           |  5 +++++
 ui/functions.php           | 34 ++++++++++++++++++++++++++++++++++
 upload.php                 | 20 ++++++++++++--------
 9 files changed, 141 insertions(+), 57 deletions(-)
 create mode 100644 scripts/alert.js

diff --git a/account/login.php b/account/login.php
index cb36f97..8046253 100644
--- a/account/login.php
+++ b/account/login.php
@@ -91,6 +91,18 @@
   }
   ?>
 
+  <div class="alert-banner">
+    <?php
+    if (isset($error)) {
+      echo notify($error, "low");
+    }
+    if (isset($success)) {
+      echo notify($success, "hight");
+    }
+    ?>
+    <script src='../scripts/alert.js'></script>
+  </div>
+
   <div class="login-root default-window">
     <h2 class="space-bottom">Login</h2>
     <p class="space-bottom">Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p>
@@ -99,14 +111,6 @@
       <input class="btn alert-default space-bottom-large" type="password" name="password" placeholder="Password">
       <button class="btn alert-high" type="submit" name="login"><img class="svg" src="../assets/icons/sign-in.svg">Login</button>
     </form>
-    <?php
-    if (isset($error)) {
-      echo "<p class='alert alert-low space-top'>".$error."</p>";
-    }
-    if (isset($success)) {
-      echo "<p class='alert alert-high space-top'>".$success."</p>";
-    }
-    ?>
     <a class='btn alert-default space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php'><img class="svg" src="../assets/icons/sign-in.svg">Need an account? Sign up!</a>
   </div>
 
diff --git a/account/password-reset.php b/account/password-reset.php
index 416f686..980dfac 100644
--- a/account/password-reset.php
+++ b/account/password-reset.php
@@ -74,6 +74,15 @@
   }
   ?>
 
+  <div class="alert-banner">
+    <?php
+    if (isset($error)) {
+      echo notify($error, "low");
+    }
+    ?>
+    <script src='../scripts/alert.js'></script>
+  </div>
+
   <div class="password-reset-root default-window">
     <h2 class="space-bottom">Reset Password</h2>
     <p class="space-bottom">After reset, you will be kicked out to login again</p>
@@ -82,11 +91,6 @@
       <input class="btn alert-default space-bottom" type="password" name="confirm_password" placeholder="Confirm Password">
       <button class="btn alert-low" type="submit" name="reset"><img class="svg" src="../assets/icons/sign-in.svg">Reset</button>
     </form>
-    <?php
-    if (isset($error)) {
-      echo "<p class='alert alert-low space-top'>".$error."</p>";
-    }
-    ?>
   </div>
 
   <?php
diff --git a/account/signup.php b/account/signup.php
index 0bbbada..4541332 100644
--- a/account/signup.php
+++ b/account/signup.php
@@ -155,6 +155,18 @@
   }
   ?>
 
+  <div class="alert-banner">
+    <?php
+    if (isset($error)) {
+      echo notify($error, "low");
+    }
+    if (isset($success)) {
+      echo notify($success, "hight");
+    }
+    ?>
+    <script src='../scripts/alert.js'></script>
+  </div>
+
   <div class="signup-root default-window">
     <h2 class="space-bottom">Make account</h2>
     <p class="space-bottom">And amazing things happened here...</p>
@@ -164,14 +176,6 @@
       <input class="btn alert-default space-bottom-large" type="password" name="confirm_password" placeholder="Re-enter Password">
       <input class="btn alert-default space-bottom-large" type="text" name="token" placeholder="Invite Code">
       <button class="btn alert-high" type="submit" name="signup"><img class="svg" src="../assets/icons/sign-in.svg">Sign Up</button>
-      <?php
-      if (isset($error)) {
-        echo "<p class='alert alert-low space-top'>".$error."</p>";
-      }
-      if (isset($success)) {
-        echo "<p class='alert alert-high space-top'>".$success."</p>";
-      }
-      ?>
     </form>
   </div>
 
diff --git a/css/master.css b/css/master.css
index d07963f..6da06d5 100644
--- a/css/master.css
+++ b/css/master.css
@@ -315,6 +315,18 @@ body {
 /*
   -=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 */
+.alert-banner {
+  margin: 0; padding: 0;
+
+  max-width: 621px; width: calc(100% - 2rem);
+  height: auto;
+
+  top: 1rem; left: 50%;
+  transform: translateX(-50%);
+
+  position: fixed; z-index: 9999999;
+}
+
 .alert {
   padding: 1rem;
 
@@ -328,6 +340,7 @@ body {
 
   outline: 0.5rem solid var(--bg);
 }
+
 .alert-high {
   background-color: var(--green);
 }
diff --git a/image.php b/image.php
index 3b31d87..8ea0c80 100644
--- a/image.php
+++ b/image.php
@@ -16,19 +16,27 @@
   <meta property="og:description" content="Only Legs, a gallery made and hosted by Fluffy">
 </head>
 <body>
+  <?php include("ui/header.php"); ?>
+
+  <div class="alert-banner">
+    <?php
+    /*
+      If theres a success in updating the image,
+      it'll let the user know
+    */
+    if ($_GET["update"] == "success") {
+      echo notify("Information updated", "high");
+    } elseif ($_GET["update"] == "error") {
+      echo notify("Something went fuckywucky, please try later", "default");
+    }
+    if ($_GET["del"] == "fail") {
+      echo notify("Failed to delete image", "low");
+    }
+    ?>
+    <script src='scripts/alert.js'></script>
+  </div>
+
   <?php
-  include("ui/header.php");
-
-  /*
-    If theres a success in updating the image,
-    it'll let the user know
-  */
-  if ($_GET["update"] == "success") {
-    echo "<p class='alert alert-high space-bottom-large'>Information updated</p>";
-  } elseif ($_GET["update"] == "error") {
-    echo "<p class='alert alert-default space-bottom-large'>Something went fuckywucky, please try later</p>";
-  }
-
   // If ID present pull all image data
   if (isset($_GET['id'])) {
     $image = get_image_info($conn, $_GET['id']);
@@ -107,7 +115,7 @@
       }
       header("Location:index.php?del=true&id=".$image['id']);
     } else {
-      $error = "Could not delete image";
+      header("Location: image.php?id=".$image['id']."&del=fail>");
     }
   }
 
@@ -184,7 +192,7 @@
     }
 
     // Clean input
-    $tags_string = clean(trim($_POST['add_tags']));
+    $tags_string = tag_clean(trim($_POST['add_tags']));
 
     // getting ready forSQL asky asky
     $sql = "UPDATE swag_table SET tags=? WHERE id=?";
diff --git a/index.php b/index.php
index 360bfe5..c343143 100644
--- a/index.php
+++ b/index.php
@@ -10,19 +10,27 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
 </head>
 <body>
+  <?php include("ui/header.php"); ?>
+
+  <div class="alert-banner">
+    <?php
+    /*
+      If theres a success in updating the image,
+      it'll let the user know
+    */
+    // Deletion toast
+    if ($_GET["del"] == "true") {
+      echo notify("Successfully deleted image: ".$_GET['id'], "high");
+    }
+    // Account toast
+    if ($_GET["login"] == "success") {
+      echo notify("O hi ".$_SESSION['username'], "high");
+    }
+    ?>
+    <script src='scripts/alert.js'></script>
+  </div>
+
   <?php
-  include("ui/header.php");
-
-  // Deletion toast
-  if ($_GET["del"] == "true") {
-    echo "<p class='alert alert-high space-bottom'>Successfully deleted image: ".$_GET['id']."</p>";
-  }
-
-  // Account toast
-  if ($_GET["login"] == "success") {
-    echo "<p class='alert alert-high space-bottom'>O hi ".$_SESSION['username']."</p>";
-  }
-
   // Show search
   if ($_GET["srch"] == "show") {
     $header = "Search for a tags!";
@@ -42,12 +50,12 @@
     unset($header, $content, $action);
 
     // Clean input
-    $tags_string = clean(trim($_POST['search']));
+    $tags_string = tag_clean(trim($_POST['search']));
 
     header("Location:https://superdupersecteteuploadtest.fluffybean.gay?q=".$tags_string);
   }
   if (isset($_GET["q"])) {
-    echo "<p class='alert alert-high space-bottom'>Search results for: ".$_GET['q']."</p>";
+    echo "<p class='alert alert-default space-bottom'>Search results for: ".$_GET['q']."</p>";
   }
   ?>
 
diff --git a/scripts/alert.js b/scripts/alert.js
new file mode 100644
index 0000000..c801f24
--- /dev/null
+++ b/scripts/alert.js
@@ -0,0 +1,5 @@
+let alertClose = document.querySelectorAll(".alert");
+
+function closeAlert(aaaa) {
+  aaaa.closest(".alert").style.display="none";
+};
diff --git a/ui/functions.php b/ui/functions.php
index 8cb251d..f5a341a 100644
--- a/ui/functions.php
+++ b/ui/functions.php
@@ -151,4 +151,38 @@ function flyout($header, $content, $action) {
   echo "<button class='btn alert-default space-top flyout-close'>Close</button>
   </div>";
 }
+
+
+/*
+  Notification of an action done, takes in min 3 inputs:
+
+  Text is the text that shows up on the notification
+    Takes in string input
+
+  Level is the level of the notification
+    high is a good response or the colour green
+    low is a bad response or the colour red
+    default is a neutral response or the colour black/gray
+
+  returns notification html including classes
+
+  ===== Editors note ==================================
+   I made this so I didn't have to remake the html
+   portion of the notification, it was annoying.
+   This also allows for expanding the system later on!
+  =====================================================
+*/
+function notify($text, $level) {
+  if ($level == "high") {
+    $text_string = "<p class='alert alert-high space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
+  } elseif ($level == "low") {
+    $text_string = "<p class='alert alert-low space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
+  } elseif ($level == "default") {
+    $text_string = "<p class='alert alert-default space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
+  } else {
+    $text_string = "<p class='alert alert-default space-bottom-large' onclick='closeAlert(this)'>".$text."</p>";
+  }
+
+  return $text_string;
+}
 ?>
diff --git a/upload.php b/upload.php
index d98df5c..741beb6 100644
--- a/upload.php
+++ b/upload.php
@@ -69,6 +69,18 @@
   }
   ?>
 
+  <div class="alert-banner">
+    <?php
+    if (isset($error)) {
+      echo notify($error, "low");
+    }
+    if (isset($success)) {
+      echo notify($success, "hight");
+    }
+    ?>
+    <script src='scripts/alert.js'></script>
+  </div>
+
   <div class="upload-root default-window">
     <h2 class="space-bottom">Upload image</h2>
     <p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
@@ -77,14 +89,6 @@
         <input class="btn alert-default space-bottom-large" type="text" name="alt" placeholder="Description/Alt for image">
         <button class="btn alert-high" type="submit" name="upload"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
     </form>
-    <?php
-    if (isset($error)) {
-      echo "<p class='alert alert-low space-top'>".$error."</p>";
-    }
-    if (isset($success)) {
-      echo "<p class='alert alert-high space-top'>".$success."</p>";
-    }
-    ?>
   </div>
 
   <?php