Password reset

account.php

@@ -16,11 +16,12 @@
     <h2>Account settings</h2>
     <?php
     if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {
-      echo "<p>O hi ".$_SESSION["username"].". This is pretty empty right now. But it wont be soon!</p>";
+      echo "<p>O hi ".$_SESSION["username"].".</p>";
-      echo "<a class='btn alert-default space-top' href='https://superdupersecteteuploadtest.fluffybean.gay/logout.php'><img class='svg' src='assets/icons/sign-out.svg'>Logout</a>";
+      echo "<a class='btn alert-low space-top' href='https://superdupersecteteuploadtest.fluffybean.gay/password-reset.php'><img class='svg' src='assets/icons/password.svg'>Reset Password</a>";
+      echo "<a class='btn alert-low space-top' href='https://superdupersecteteuploadtest.fluffybean.gay/logout.php'><img class='svg' src='assets/icons/sign-out.svg'>Logout</a>";
     } else {
       echo "<p class='space-bottom-large'>You must be logged in to change your account settings!</p>";
-      echo "<a class='btn alert-high space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/signup.php'>Sign up!</a>";
+      echo "<a class='btn alert-high space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/login.php'>Login!</a>";
     }
     ?>
   </div>

assets/icons/github-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#e8e3e3" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M84,240a23.9,23.9,0,0,0,24-24V168" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M172,240a23.9,23.9,0,0,1-24-24V168" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M152,168h16a23.9,23.9,0,0,1,24,24v8a23.9,23.9,0,0,0,24,24" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M104,168H88a23.9,23.9,0,0,0-24,24v8a23.9,23.9,0,0,1-24,24" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M111.8,64A52,52,0,0,0,68,40a52,52,0,0,0-3.5,44.7A49.3,49.3,0,0,0,56,112v8a48,48,0,0,0,48,48h48a48,48,0,0,0,48-48v-8a49.3,49.3,0,0,0-8.5-27.3A52,52,0,0,0,188,40a52,52,0,0,0-43.8,24Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>

assets/icons/password.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#e8e3e3" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="56" x2="40" y2="200" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="104" y1="96" x2="104" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="73.6" y1="118.1" x2="104" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="85.2" y1="153.9" x2="104" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="122.8" y1="153.9" x2="104" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="134.4" y1="118.1" x2="104" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="200" y1="96" x2="200" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="169.6" y1="118.1" x2="200" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="181.2" y1="153.9" x2="200" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="218.8" y1="153.9" x2="200" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="230.4" y1="118.1" x2="200" y2="128" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>

assets/icons/telegram-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#e8e3e3" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M88,134.9,177.9,214a8,8,0,0,0,13.1-4.2L228.6,45.6a8,8,0,0,0-10.7-9.2L33.3,108.9c-7.4,2.9-6.4,13.7,1.4,15.3Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><line x1="88" y1="134.9" x2="224.1" y2="36.6" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M132.9,174.4l-31.2,31.2A8,8,0,0,1,88,200V134.9" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>

assets/icons/twitter-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#e8e3e3" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M128,88c0-22,18.5-40.3,40.5-40a40,40,0,0,1,36.2,24H240l-32.3,32.3A127.9,127.9,0,0,1,80,224c-32,0-40-12-40-12s32-12,48-36c0,0-64-32-48-120,0,0,40,40,88,48Z" fill="none" stroke="#e8e3e3" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>

css/master.css

@@ -9,6 +9,7 @@
 @import "signup.css";
 @import "login.css";
 @import "account.css";
+@import "password-reset.css";
 
 :root {
   --bg: #151515df;

css/password-reset.css

@@ -0,0 +1,16 @@
+/*
+  -=-=-= LONGIN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+*/
+.password-reset-root {
+  margin: 0 auto 2rem; padding: 0.5rem;
+
+  max-width: 621px; width: calc(100% - 2rem);
+
+  background-color: var(--bg); color: var(--fg);
+
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+
+  border-radius: var(--rad);
+  box-shadow: var(--shadow);
+}

password-reset.php

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Account</title>
+  <link rel="stylesheet" href="css/master.css">
+  <link href="https://fonts.googleapis.com/css2?family=Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
+</head>
+<body>
+  <?php
+  include("ui/header.php");
+  include_once("ui/conn.php");
+
+  // Initialize the session
+  session_start();
+
+  // Check if the user is logged in, otherwise redirect to login page
+  if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
+    header("location: https://superdupersecteteuploadtest.fluffybean.gay/login.php");
+    exit;
+  }
+
+  if (isset($_POST['reset'])) {
+
+    // Validate new password
+    if (empty(trim($_POST["new_password"]))) {
+      $error = "Enter new password!";
+    } elseif(strlen(trim($_POST["new_password"])) < 6) {
+      $error = "Password not long enough, must be 6 or more characters!";
+    } else {
+      $new_password = trim($_POST["new_password"]);
+    }
+
+    // Validate confirm password
+    if (empty(trim($_POST["confirm_password"]))) {
+      $error = "Pls confirm the password";
+    } else {
+      $confirm_password = trim($_POST["confirm_password"]);
+      if(empty($error) && ($new_password != $confirm_password)) {
+        $error = "Password did not match!!!!";
+      }
+    }
+
+    // Check for errors
+    if (empty($error)) {
+      // Prepare for wack
+      $sql = "UPDATE users SET password = ? WHERE id = ?";
+
+      if ($stmt = mysqli_prepare($conn, $sql)) {
+        mysqli_stmt_bind_param($stmt, "si", $param_password, $param_id);
+
+        // Setting up Password parameters
+        $param_password = password_hash($new_password, PASSWORD_DEFAULT);
+        $param_id = $_SESSION["id"];
+
+        // Attempt to execute (sus)
+        if (mysqli_stmt_execute($stmt)) {
+          // Password updated!!!! Now goodbye
+          session_destroy();
+          header("Location: https://superdupersecteteuploadtest.fluffybean.gay/login.php");
+        } else {
+          $error = "Oopsie woopsie, somthing brokie :c";
+        }
+
+        // Close connection
+        mysqli_close($stmt);
+      }
+    }
+
+    // Close connection
+    mysqli_close($conn);
+  }
+  ?>
+
+  <div class="password-reset-root">
+    <h2 class="space-bottom">Reset Password</h2>
+    <p class="space-bottom">After reset, you will be kicked out to login again</p>
+    <form class="flex-down between" method="POST" action="password-reset.php" enctype="multipart/form-data">
+      <input class="btn alert-default space-bottom" type="password" name="new_password" placeholder="New Password">
+      <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
+  include("ui/top.html");
+  include("ui/footer.html");
+  ?>
+</body>
+</html>

ui/footer.html

@@ -1,9 +1,9 @@
 <footer class="footer-root flex-left around">
   <div class="footer-child center flex-down">
     <h3>Contact me</h3>
-    <a href="https://t.me/Fluffy_Bean">Telegram</a>
+    <a href="https://t.me/Fluffy_Bean"><img class='svg' src='assets/icons/telegram-logo.svg'>Telegram</a>
-    <a href="https://twitter.com/fluffybeanUwU">Twitter</a>
+    <a href="https://twitter.com/fluffybeanUwU"><img class='svg' src='assets/icons/twitter-logo.svg'>Twitter</a>
-    <a href="https://github.com/Fluffy-Bean">GitHub</a>
+    <a href="https://github.com/Fluffy-Bean"><img class='svg' src='assets/icons/github-logo.svg'>GitHub</a>
   </div>
   <div class="footer-child center flex-down">
     <h3>Information</h3>