Make accounts frontend!

2025-06-26 18:08:59 +03:00
parent 652b391d6f
commit 169c4faa7d
7 changed files with 285 additions and 64 deletions
--- a/index.html
+++ b/index.html
@@ -7,6 +7,12 @@
      name="viewport"
      content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+JP+N&display=swap"
+      rel="stylesheet"
+    />
    <link rel="stylesheet" href="src/assets/style.css" />
    <script type="module" src="src/js/accounts.js"></script>
  </head>
@@ -22,37 +28,46 @@
      <div class="header-right">
        <button class="account-button" id="login-button">LOGIN</button>
        <button class="account-button" id="signup-button">SIGN UP</button>
+        <button class="account-button" id="logout-button">LOGOUT</button>
+        <button class="account-button" id="forgot-button">
+          FORGOT - DEBUG
+        </button>
      </div>
    </div>
    <canvas id="main-canvas"></canvas>
    <script type="module" src="src/js/game.js"></script>
-    <div class="popup">
+    <div class="popup" id="popup">
+      <span class="close" id="close">&times;</span>
      <div class="popup-tab" id="login">
-        <span class="info" id="login-info"></span>
        <form id="login-form" class="form">
+          <label for="username">USERNAME</label>
          <input type="text" name="username" placeholder="Username" required />
+          <label for="pass">PASSWORD</label>
          <input type="password" name="pass" placeholder="Password" required />
-          <button type="submit">Login</button>
+          <button type="submit">LOGIN</button>
+          <span class="info" id="login-info"></span>
        </form>
      </div>
      <div class="popup-tab" id="signup">
        <form id="signup-form" class="form">
-          <span class="info" id="signup-info"></span>
+          <label for="username">USERNAME</label>
          <input type="text" name="username" placeholder="Username" required />
+          <label for="email">EMAIL</label>
          <input type="email" name="email" placeholder="Email" required />
+          <label for="pass">PASSWORD</label>
          <input type="password" name="pass" placeholder="Password" required />
-          <button type="submit">Sign Up</button>
+          <button type="submit">SIGN UP</button>
+          <span class="info" id="signup-info"></span>
        </form>
      </div>
      <div class="popup-tab" id="forgot-pass">
-        <span class="info" id="forgot-info"></span>
        <form id="forgot-form" class="form">
          <input type="email" name="email" placeholder="Email" />
-          <button type="submit">Submit</button>
+          <button type="submit">SUBMIT</button>
+          <span class="info" id="forgot-info"></span>
        </form>
      </div>
      <div class="popup-tab" id="reset-pass">
-        <span class="info" id="reset-info"></span>
        <form id="reset-form" class="form">
          <input type="password" name="pass" placeholder="Password" required />
          <input
@@ -61,7 +76,8 @@
            placeholder="Confirm Password"
            required
          />
-          <button type="submit">Submit</button>
+          <button type="submit">SUBMIT</button>
+          <span class="info" id="reset-info"></span>
        </form>
      </div>
    </div>
--- a/main.rb
+++ b/main.rb
@@ -115,9 +115,28 @@ post "/forgot_password" do
    status 400
    return { "message" => "Bad request made (Email not provided)!" }.to_json
  end
-  Players.pass_req(data["email"])
+  if Players.pass_req(data["email"])
    status 200
    return { "message" => "Email sent successfully!" }.to_json
+  else
+    status 400
+    return { "message" => "Couldn't send email!" }.to_json
+  end
+end
+
+post "/pass_reset?" do
+  data = JSON.parse(request.body.read)
+  if data["code"].nil?
+    status 400
+    return { "message" => "Bad request made!" }.to_json
+  end
+  if Players.pass_reset?(data["code"])
+    status 200
+    return { "message" => "Password reset link exists!" }.to_json
+  else
+    status 400
+    return { "message" => "Code doesn't exist!" }.to_json
+  end
 end

 get "/reset_password/:code" do
--- a/players.rb
+++ b/players.rb
@@ -41,12 +41,16 @@ module Players
  end

  def self.pass_req(email)
-    return unless self[email]
+    return false unless by_email(email)

    code = Array.new(24) { ALPHANUM.sample }.join
    DB["update Players set new_pass_code = ? where email = ?", code, email].update

-    send_email(:pass_req, email, code)
+    Logman.log "Pass req: #{email} & #{code}\n"
+
+    true
+
+    # send_email(:pass_req, email, code)
  end

  def self.pass_reset(new_pass, code)
@@ -54,10 +58,18 @@ module Players
    DB["update Players set digest = ?, new_pass_code = ? where new_pass_code = ?", digest, "", code].update != 0
  end

+  def self.pass_reset?(code)
+    DB["select * from Players where new_pass_code = ?", code].first
+  end
+
  def self.[](username)
    DB["select * from Players where username = ?", username].first
  end

+  def self.by_email(email)
+    DB["select * from Players where email = ?", email].first
+  end
+
  def self.[]=(username, data)
    DB["update Players set data = ? where username = ?", data, username].update
  end
--- a/public/src/assets/fonts/changa.woff
+++ b/public/src/assets/fonts/changa.woff
--- a/public/src/assets/style.css
+++ b/public/src/assets/style.css
@@ -1,15 +1,10 @@
+@import url("https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+JP+N&display=swap");
+
 body {
  margin: 0;
  overflow: hidden;
 }

-@font-face {
-  font-family: "Changa";
-  src: url("fonts/changa.woff") format("opentype");
-  font-weight: normal;
-  font-style: normal;
-}
-
 .header {
  width: 100%;
  height: 90px;
@@ -18,7 +13,12 @@ body {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  font-family: "Changa";
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+}
+
+button {
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+  font-size: 18px;
 }

 .logo {
@@ -32,17 +32,100 @@ body {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
-  width: 500px;
-  height: 500px;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
+  width: 400px;
+  padding-top: 20px;
+  background-color: #1b262c70;
+  backdrop-filter: blur(8px);
+  display: none;
+  border-radius: 30px;
  justify-content: center;
  align-items: center;
  z-index: 9999;
 }

+.close {
+  position: absolute;
+  top: 5px;
+  right: 15px;
+  font-size: 24px;
+  cursor: pointer;
+  font-size: 29px;
+  color: white;
+}
+
+.close:hover {
+  color: #fa908c;
+}
+
+.popup.active {
+  display: flex;
+}
+
 .popup-tab {
  display: none;
+  width: calc(100% - 60px);
+  height: calc(100% - 60px);
+  padding: 20px 30px;
+  border-radius: 8px;
+  padding: 30px;
+}
+
+.info {
+  margin-bottom: 10px;
+  color: red;
+  font-weight: bold;
+  opacity: none;
+}
+
+.info:empty::before {
+  content: "\00a0";
+  visibility: hidden;
+  display: inline-block;
+}
+
+.info.active {
+  opacity: 1;
+}
+
+.form {
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 80%;
+}
+
+.form input {
+  padding: 10px;
+  width: 80%;
+  border: 1px solid #ccc;
+  border-radius: 12px;
+}
+
+.form label {
+  font-size: 16px;
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+  color: white;
+}
+
+.form button {
+  margin-top: 20px;
+  padding: 10px;
+  background-color: #3498db;
+  color: white;
+  border: none;
+  width: 25%;
+  border-radius: 12px;
+  cursor: pointer;
+}
+
+.form button:hover {
+  background-color: #2980b9;
+}
+
+.popup-tab.active {
+  display: block;
 }

 .header-right {
--- a/public/src/js/accounts.js
+++ b/public/src/js/accounts.js
@@ -1,17 +1,63 @@
-const login_form = document.getElementById("login-form");
-const login_button = document.getElementById("login-button");
-const signup_form = document.getElementById("signup-form");
-const signup_button = document.getElementById("signup-button");
+window.onload = async () => {
+  const login_form = document.getElementById("login-form");
+  const login_button = document.getElementById("login-button");
+  const signup_form = document.getElementById("signup-form");
+  const signup_button = document.getElementById("signup-button");
+  const logout_button = document.getElementById("logout-button");
+  const forgot_button = document.getElementById("forgot-button");
+  const forgot_form = document.getElementById("forgot-form");

-login_button.onclick = () => {
-  document.getElementById("login").style.display = "block";
-};
+  forgot_button.onclick = () => {
+    document.getElementById("popup").classList.add("active");
+    document.getElementById("forgot-pass").classList.add("active");
+    document.getElementById("login").classList.remove("active");
+    document.getElementById("signup").classList.remove("active");
+    document.getElementById("reset-pass").classList.remove("active");
+  };

-signup_button.onclick = () => {
-  document.getElementById("signup").style.display = "block";
-};
+  forgot_form.onsubmit = async (e) => {
+    e.preventDefault();
+    const email = forgot_form.email.value;
+    const res = await fetch("/forgot_password", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email }),
+    });
+    const data = await res.json();
+    document.getElementById("forgot-info").innerHTML = data.message;
+  };

-login_form.onsubmit = async (e) => {
+  logout_button.onclick = () => {
+    window.location.href = "/logout";
+  };
+
+  login_button.onclick = () => {
+    document.getElementById("popup").classList.add("active");
+    document.getElementById("login").classList.add("active");
+    document.getElementById("signup").classList.remove("active");
+    document.getElementById("forgot-pass").classList.remove("active");
+    document.getElementById("reset-pass").classList.remove("active");
+  };
+
+  signup_button.onclick = () => {
+    document.getElementById("popup").classList.add("active");
+    document.getElementById("signup").classList.add("active");
+    document.getElementById("login").classList.remove("active");
+    document.getElementById("forgot-pass").classList.remove("active");
+    document.getElementById("reset-pass").classList.remove("active");
+  };
+
+  document.getElementById("close").onclick = () => {
+    document.getElementById("popup").classList.remove("active");
+    document.getElementById("login").classList.remove("active");
+    document.getElementById("signup").classList.remove("active");
+    document.getElementById("forgot-pass").classList.remove("active");
+    document.getElementById("reset-pass").classList.remove("active");
+  };
+
+  login_form.onsubmit = async (e) => {
    e.preventDefault();
    const username = login_form.username.value;
    const pass = login_form.pass.value;
@@ -24,9 +70,9 @@ login_form.onsubmit = async (e) => {
    });
    response = await response.json();
    document.getElementById("login-info").innerText = response.message;
-};
+  };

-signup_form.onsubmit = async (e) => {
+  signup_form.onsubmit = async (e) => {
    e.preventDefault();
    const username = signup_form.username.value;
    const email = signup_form.email.value;
@@ -40,4 +86,47 @@ signup_form.onsubmit = async (e) => {
    });
    response = await response.json();
    document.getElementById("signup-info").innerText = response.message;
+  };
+
+  const params = new URLSearchParams(window.location.search);
+  const reset_code = params.get("reset_code");
+  if (reset_code) {
+    let response = await fetch("/pass_reset?", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ code: reset_code }),
+    });
+    let status = response.status;
+    if (status == 200) {
+      document.getElementById("popup").classList.add("active");
+      document.getElementById("reset-pass").classList.add("active");
+      document.getElementById("login").classList.remove("active");
+      document.getElementById("signup").classList.remove("active");
+      document.getElementById("forgot-pass").classList.remove("active");
+      document.getElementById("reset-form").onsubmit = async (e) => {
+        e.preventDefault();
+        const pass = document.getElementById("reset-form").pass.value;
+        const pass_confirm =
+          document.getElementById("reset-form").pass_confirm.value;
+        if (pass != pass_confirm) {
+          document.getElementById("reset-info").innerText =
+            "Passwords do not match";
+          return;
+        }
+        let response = await fetch("/reset_password/" + reset_code, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ pass }),
+        });
+        response = await response.json();
+        document.getElementById("reset-info").innerText = response.message;
+      };
+    } else {
+      window.location.href = "/";
+    }
+  }
 };
--- a/session.rb
+++ b/session.rb
@@ -98,6 +98,8 @@ class Sessions
    session = session.nil? ? "{}" : Zlib::Inflate.inflate(Base64.decode64(session))
    session = JSON.parse(session)
    session.delete(key)
+    Logman.log "Deleted: #{key}"
+    Logman.log session.inspect
    compressed = Zlib::Deflate.deflate(JSON.generate(session))
    encoded = Base64.encode64(compressed)
    @response.set_cookie("session",