New alert system

2025-01-29 17:28:27 +00:00 · 2022-08-01 14:09:53 +01:00 · 2022-08-01 14:09:53 +01:00 · 9fd958648b
parent 41667bff0a
commit 9fd958648b
9 changed files with 141 additions and 57 deletions
--- 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>

--- 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
--- 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>

--- 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);
 }
--- 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=?";
--- 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>";
  }
  ?>

--- a/scripts/alert.js
+++ b/scripts/alert.js
@ -0,0 +1,5 @@
+let alertClose = document.querySelectorAll(".alert");
+
+function closeAlert(aaaa) {
+  aaaa.closest(".alert").style.display="none";
+};
--- 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;
+}
 ?>
--- 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