Update README.md

.gitignore

@@ -2,3 +2,4 @@
 tmp.*
 *.log
 .env
+p.vim

.rubocop.yml

@@ -37,6 +37,15 @@ Metrics/MethodLength:
 Metrics/ClassLength:
   Enabled: false
 
+Metrics/BlockLength:
+  Enabled: false
+
+Layout/FirstHashElementIndentation:
+  Enabled: false
+
+Layout/FirstArrayElementIndentation:
+  Enabled: false
+
 Layout/EmptyLineAfterGuardClause:
   Enabled: false
 

Gemfile

@@ -1,6 +1,7 @@
 source "https://rubygems.org"
 
 gem "base64"
+gem "erb"
 gem "json"
 gem "net-http"
 gem "sequel"

Gemfile.lock

@@ -3,6 +3,7 @@ GEM
   specs:
     base64 (0.3.0)
     bigdecimal (3.2.2)
+    erb (5.0.1)
     json (2.12.2)
     logger (1.7.0)
     mustermann (3.0.3)
@@ -38,6 +39,7 @@ PLATFORMS
 
 DEPENDENCIES
   base64
+  erb
   json
   net-http
   sequel

README.md

@@ -0,0 +1,25 @@
+# Infinsweeper Game.
+It's like minesweeper, but with an infinite board.
+
+The static web-app is here: [https://portfolio.syedm.dev/infinsweeper/](https://portfolio.syedm.dev/infinsweeper/)
+(This version is without any signing up or logging in.)
+
+## Working
+
+- This game has some crazy optimizations.
+- It uses cryptography hashes of a seed provided to the game api (randomly generated) and uses that with the cell index to generate the board.
+- This allows for not having to save board data if it is off the screen if that area is maked as solved.
+- When bought back into view it will be re-generated with the same seed.
+- It also uses compression algorithms to store compressed form of the data in the browser storage.
+
+## Features
+
+- Also has full account control with email and password and resets and everything necessary.
+- It originally aims to be an example of a full stack web-app, but now it's just a game.
+- The full sinatra based web-app can be hosted using this repo.
+- It also has a ton of animations made using pure JavaScript Canvas API.
+- The entire game is made using just the JS Canvas API while the backend is made using Sinatra (Ruby) and SQLite.
+
+## A screenshot
+
+![image1](./images/1.png)

index.erb

@@ -7,8 +7,17 @@
       name="viewport"
       content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
       />
+    <meta name="signed_in" content="<%= @signed_in %>">
+    <meta name="csrf" content="<%= @csrf_token %>">
+    <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>
+    <script type="module" src="src/js/game.js"></script>
   </head>
   <body>
     <div class="header">
@@ -20,39 +29,62 @@
         />
       </a>
       <div class="header-right">
+        <button class="account-button" id="logout-button">LOGOUT</button>
         <button class="account-button" id="login-button">LOGIN</button>
         <button class="account-button" id="signup-button">SIGN UP</button>
       </div>
     </div>
+    <span id="message"><%= @message %></span>
     <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="link" id="forgot-link">Forgot password?</span>
+          <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 />
-          <input type="email" name="email" placeholder="Email" required />
+          <label for="email">EMAIL</label>
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            required
+            autocapitalize="off"
+          />
+          <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="settings">
+        <!-- TODO: settings -->
+      </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>
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            required
+            autocapitalize="off"
+            autocomplete="off"
+          />
+          <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 +93,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>

logman.rb

@@ -1,10 +1,11 @@
 # module for logging
 module Logman
   def self.log(log)
-    File.write("log/main.log", "[#{Time.now}] #{log}\n", mode: "a")
+    file, line = caller(1, 1)[0].split(":")
+    File.write("log/main.log", "[#{Time.now}] {#{file}:#{line}} #{log}\n", mode: "a") if ENV_HASH["ENV"] == "dev"
   end
 
   def self.imp(log)
-    File.write("log/imp.log", "[#{Time.now}] #{log}\n", mode: "a")
+    File.write("log/imp.log", "[#{Time.now}] #{log}\n", mode: "a") if ENV_HASH["ENV"] == "dev"
   end
 end

main.rb

@@ -1,4 +1,5 @@
 require "base64"
+require "erb"
 require "json"
 require "net/http"
 require "sequel"
@@ -9,24 +10,22 @@ require "zlib"
 
 ALPHANUM = [*"0".."9", *"A".."Z", *"a".."z", "-", "_"].freeze
 
-env_data = File.read(".env")
+env_data = File.exist?(".env") ? File.read(".env") : ""
 ENV_HASH = {}
 
 env_data.each_line do |line|
-  if (match = line.match(/^([A-Z_][A-Z0-9_]*)=(.*)$/))
-    _, key, val = match
-    ENV_HASH[key] = val
-  end
+  next unless (match = line.match(/^([A-Z_][A-Z0-9_]*)=(.*)$/))
+  ENV_HASH[match[1]] = match[2]
 end
 
-CODE_ENV = :dev
+load "logman.rb"
+# Logman.log ENV_HASH.inspect
 
 db_file = File.expand_path("infinsweeper.db")
 DB = Sequel.connect("sqlite:///#{db_file}", single_threaded: false)
 DB.run("PRAGMA foreign_keys = ON;")
 $active_users = DB[:SignedInUsers].all.map { |x| [x[:code], x[:player]] }.to_h
 
-load "logman.rb"
 load "mailer.rb"
 load "players.rb"
 load "session.rb"
@@ -35,8 +34,12 @@ set :public_folder, "public"
 
 get "/" do
   session = Sessions.new request, response
-  Logman.log session["message"]
-  send_file "index.html"
+  @message = session.message || ""
+  session.message = ""
+  @signed_in = session.signed_in?.nil? ? false : true
+  @csrf_token = Array.new(32) { ALPHANUM.sample }.join
+  session["csrf_token"] = @csrf_token
+  ERB.new(File.read("index.erb")).result(binding)
 end
 
 get "/debug" do
@@ -46,24 +49,36 @@ end
 
 post "/signup" do
   session = Sessions.new request, response
+  uid = session["user"]
+  session.logout unless uid.nil? || $active_users[uid].nil?
   data = JSON.parse(request.body.read)
+  unless session.csrf_auth?
+    status 401
+    return { "message" => "Unauthorized (invalid CSRF token)!" }.to_json
+  end
+  session["csrf_token"] = Array.new(32) { ALPHANUM.sample }.join
   if data["email"].nil? || data["pass"].nil? || data["username"].nil?
     status 400
-    return { "message" => "Bad request made!" }.to_json
+    return { "message" => "Bad request made!", "csrf_token" => session["csrf_token"] }.to_json
   end
   signup_status = Players.mk_player(data["username"], data["email"], data["pass"])
   if signup_status[0] == 200
     login_status = session.login(data["username"], data["pass"])
+    if login_status[0] == 200
+      status 200
+      return { "message" => login_status[1], "success" => "true", "csrf_token" => session["csrf_token"] }.to_json
+    else
       status login_status[0]
-    return { "message" => login_status[1] }.to_json
+      return { "message" => login_status[1], "csrf_token" => session["csrf_token"] }.to_json
+    end
   end
   status signup_status[0]
-  return { "message" => signup_status[1] }.to_json
+  return { "message" => signup_status[1], "csrf_token" => session["csrf_token"] }.to_json
 end
 
 get "/verify/:code" do
   session = Sessions.new request, response
-  session["message"] = Players.verify(params[:code]) ? "Verified successfully!" : "Verification failed!"
+  session.message = Players.verify(params[:code]) ? "Verified successfully!" : "Verification failed!"
   redirect "/"
 end
 
@@ -71,13 +86,31 @@ post "/login" do
   data = JSON.parse(request.body.read)
   session = Sessions.new request, response
   uid = session["user"]
-  if $active_users[uid] && !session.logout(uid)
+  Logman.log(request.env["HTTP_X_CSRF_TOKEN"].to_s + " " + session["csrf_token"].to_s)
+  unless session.csrf_auth?
+    status 401
+    return { "message" => "Unauthorized (invalid CSRF token)!" }.to_json
+  end
+  session["csrf_token"] = Array.new(32) { ALPHANUM.sample }.join
+  if $active_users[uid] && !session.logout
     status 500
-    return { "message" => "Internal server error when signing the existing session out!" }.to_json
+    return {
+             "message" => "Internal server error when signing the existing session out!",
+             "csrf_token" => session["csrf_token"],
+           }.to_json
+  end
+  if data["username"].nil? || data["pass"].nil?
+    status 400
+    return { "message" => "Bad request made!", "csrf_token" => session["csrf_token"] }.to_json
   end
   login_status = session.login(data["username"], data["pass"])
+  if login_status[0] == 200
+    status 200
+    return { "message" => login_status[1], "success" => "true", "csrf_token" => session["csrf_token"] }.to_json
+  else
     status login_status[0]
-  return { "message" => login_status[1] }.to_json
+    return { "message" => login_status[1], "csrf_token" => session["csrf_token"] }.to_json
+  end
 end
 
 post "/logout" do
@@ -85,14 +118,22 @@ post "/logout" do
   uid = session["user"]
   if $active_users[uid].nil?
     status 400
-    return { "message" => "Not signed in!" }.to_json
+    return { "message" => "Not logged in!" }.to_json
   end
-  unless session.logout(uid)
+  unless session.logout
     status 500
-    return { "message" => "Internal server error when signing you out!" }.to_json
+    return { "message" => "Internal server error when logging you out!" }.to_json
   end
   status 200
-  return { "message" => "Signed out successfully!" }.to_json
+  return { "message" => "Logged out successfully!", "success" => "true" }.to_json
+end
+
+get "/logout" do
+  session = Sessions.new request, response
+  uid = session["user"]
+  session.logout unless $active_users[uid].nil?
+  session.message = "Logged out successfully!"
+  redirect "/"
 end
 
 post "/forgot_password" do
@@ -101,9 +142,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
@@ -132,7 +192,7 @@ delete "/rm_player" do
     status 400
     return { "message" => "Not signed in!" }.to_json
   end
-  if session.logout(uid) && Players.rm_player($active_users[uid])
+  if session.logout && Players.rm_player($active_users[uid])
     status 200
     return { "message" => "Sorry to see you go.." }.to_json
   else
@@ -140,3 +200,7 @@ delete "/rm_player" do
     return { "message" => "Couldn't delete!" }.to_json
   end
 end
+
+get "*" do
+  redirect "/"
+end

players.rb

@@ -9,27 +9,30 @@ module Players
   end
 
   def self.mk_player(username, email, pass)
-    raise ArgumentError, "Email format is wrong!" unless email.match?(/\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/)
+    # rubocop:disable Layout/LineLength
+    raise ArgumentError, "Email format is wrong!" unless
+      email.match?(%r[(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])])
+    # rubocop:enable Layout/LineLength
     raise ArgumentError, "Username must be at least 4 characters long and of valid format." unless
       username.match?(/\A[a-zA-Z][a-zA-Z0-9_.-]+\z/) && username.length >= 4
     raise ArgumentError, "Password must be at least 8 characters and of valid format." unless
       pass.match?(/\A[a-zA-Z0-9_.!?@#$%^&*()+=-]+\z/) && pass.length >= 8
 
     digest = XXhash.xxh32(pass, ENV_HASH["SALT"])
-    code = CODE_ENV == :prod ? Array.new(24) { ALPHANUM.sample }.join : "!"
+    code = ENV_HASH["ENV"] == "prod" ? Array.new(24) { ALPHANUM.sample }.join : "!"
 
     DB[
       "insert into Players (username, digest, email, activation_code) values (?, ?, ?, ?)",
       username, digest, email, code
     ].insert
 
-    send_email(:new, email, username, code) if CODE_ENV == :prod
+    send_email(:new, email, username, code) if ENV_HASH["ENV"] == "prod"
 
     [200, "Successfully signed up!"]
   rescue ArgumentError => e
     [400, e.message]
   rescue Sequel::UniqueConstraintViolation
-    [400, "Account already exists with this username or username!"]
+    [400, "Account already exists with this email or username!"]
   end
 
   def self.verify(code)
@@ -41,12 +44,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}"
+
+    true
+
+    # send_email(:pass_req, email, code)
   end
 
   def self.pass_reset(new_pass, code)
@@ -54,16 +61,25 @@ 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
 
   def self.authorized?(username, pass)
     digest = XXhash.xxh32(pass, ENV_HASH["SALT"])
+    Logman.log "Authorized: #{username} & #{digest}"
     player = self[username]
     player && player[:digest].to_i == digest.to_i ? player : false
   end
@@ -80,7 +96,7 @@ module Players
         rm_player(player[:username]) if player[:created_at] + 24 * 60 * 60 < Time.now
       end
     rescue StandardError => e
-      Logman.log "Thread error: #{e.message}\n"
+      Logman.log "Thread error: #{e.message}"
     ensure
       sleep 60 * 60
     end

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,71 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-family: "Changa";
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+}
+
+#message {
+  color: white;
+  position: absolute;
+  background-color: #1b262c;
+  width: calc(100vw - 10px);
+  padding: 5px;
+  display: block;
+  text-align: center;
+  font-size: 21px;
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}
+
+#message.hide {
+  opacity: 0;
+}
+
+#message::after {
+  content: "X";
+  color: white;
+  position: absolute;
+  right: 10px;
+  cursor: pointer;
+}
+
+#message:hover::after {
+  color: #90bdd9;
+}
+
+#message:empty {
+  display: none;
+}
+
+#message:empty:after {
+  display: none;
+}
+
+button {
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+  font-size: 18px;
+}
+
+input {
+  outline: none;
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+  font-size: 18px;
+  background-color: white;
+  color: #1b262c;
+  border: none;
+}
+
+.link {
+  color: #90bdd9;
+  text-decoration: none;
+  cursor: pointer;
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+}
+
+.link:hover {
+  color: #adcee3;
+  text-decoration: underline;
 }
 
 .logo {
@@ -32,21 +91,122 @@ 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: white;
+  font-weight: bold;
+  opacity: none;
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+}
+
+.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: 10px;
+  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 {
   margin-right: 20px;
+  display: flex;
+  white-space: nowrap;
+  gap: 10px;
+}
+
+.account-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #90bdd9;
+  font-size: 23px;
+  font-family: "WDXL Lubrifont JP N", sans-serif;
+}
+
+.account-button:hover {
+  color: #adcee3;
+  text-decoration: underline;
 }
 
 .pixelart {

public/src/js/accounts.js

@@ -1,43 +1,165 @@
-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 csrfMeta = document.querySelector('meta[name="csrf"]');
+var csrf = csrfMeta?.content;
+window.onload = async () => {
+  const popup = document.getElementById("popup");
+  const loginSection = document.getElementById("login");
+  const signupSection = document.getElementById("signup");
+  const forgotPassSection = document.getElementById("forgot-pass");
+  const resetPassSection = document.getElementById("reset-pass");
 
-login_button.onclick = () => {
-  document.getElementById("login").style.display = "block";
-};
+  const loginForm = document.getElementById("login-form");
+  const signupForm = document.getElementById("signup-form");
+  const forgotForm = document.getElementById("forgot-form");
+  const resetForm = document.getElementById("reset-form");
 
-signup_button.onclick = () => {
-  document.getElementById("signup").style.display = "block";
-};
+  const loginInfo = document.getElementById("login-info");
+  const signupInfo = document.getElementById("signup-info");
+  const forgotInfo = document.getElementById("forgot-info");
+  const resetInfo = document.getElementById("reset-info");
 
-login_form.onsubmit = async (e) => {
-  e.preventDefault();
-  const username = login_form.username.value;
-  const pass = login_form.pass.value;
-  let response = await fetch("/login", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ username, pass }),
+  const loginButton = document.getElementById("login-button");
+  const signupButton = document.getElementById("signup-button");
+  const logoutButton = document.getElementById("logout-button");
+  const forgotButton = document.getElementById("forgot-link");
+  const closeButton = document.getElementById("close");
+
+  const message = document.getElementById("message");
+  message.onclick = () => message.classList.add("hide");
+
+  const signedInMeta = document.querySelector('meta[name="signed_in"]');
+  const isSignedIn = signedInMeta?.content === "true";
+  if (isSignedIn) {
+    loginButton.style.display = "none";
+    signupButton.style.display = "none";
+  } else {
+    logoutButton.style.display = "none";
+  }
+
+  const showPopup = (section) => {
+    popup.classList.add("active");
+    loginSection.classList.remove("active");
+    signupSection.classList.remove("active");
+    forgotPassSection.classList.remove("active");
+    resetPassSection.classList.remove("active");
+    if (section) section.classList.add("active");
+  };
+
+  const hidePopup = () => {
+    popup.classList.remove("active");
+    loginSection.classList.remove("active");
+    signupSection.classList.remove("active");
+    forgotPassSection.classList.remove("active");
+    resetPassSection.classList.remove("active");
+  };
+
+  loginButton?.addEventListener("click", () => showPopup(loginSection));
+  signupButton?.addEventListener("click", () => showPopup(signupSection));
+  logoutButton?.addEventListener("click", async () => {
+    const res = await fetch("/logout", { method: "POST" });
+    const data = await res.json();
+    message.innerText = data.message;
+    message.classList.remove("hide");
+    if (data.success == "true") {
+      loginButton.style.display = "block";
+      signupButton.style.display = "block";
+      logoutButton.style.display = "none";
+    }
   });
-  response = await response.json();
-  document.getElementById("login-info").innerText = response.message;
-};
+  forgotButton?.addEventListener("click", () => showPopup(forgotPassSection));
+  closeButton?.addEventListener("click", hidePopup);
 
-signup_form.onsubmit = async (e) => {
+  loginForm?.addEventListener("submit", async (e) => {
     e.preventDefault();
-  const username = signup_form.username.value;
-  const email = signup_form.email.value;
-  const pass = signup_form.pass.value;
-  let response = await fetch("/signup", {
+    const { username, pass } = loginForm;
+    const res = await fetch("/login", {
       method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ username, email, pass }),
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf },
+      body: JSON.stringify({ username: username.value, pass: pass.value }),
     });
-  response = await response.json();
-  document.getElementById("signup-info").innerText = response.message;
+    const data = await res.json();
+    loginInfo.innerText = data.message;
+    csrf = data.csrf_token;
+    if (data.success == "true") {
+      loginButton.style.display = "none";
+      signupButton.style.display = "none";
+      logoutButton.style.display = "block";
+      message.innerText = data.message;
+      message.classList.remove("hide");
+      hidePopup();
+    }
+  });
+
+  signupForm?.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const { username, email, pass } = signupForm;
+    const res = await fetch("/signup", {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf },
+      body: JSON.stringify({
+        username: username.value,
+        email: email.value,
+        pass: pass.value,
+      }),
+    });
+    const data = await res.json();
+    signupInfo.innerText = data.message;
+    csrf = data.csrf_token;
+    if (data.success == "true") {
+      loginButton.style.display = "none";
+      signupButton.style.display = "none";
+      logoutButton.style.display = "block";
+      message.innerText = data.message;
+      message.classList.remove("hide");
+      hidePopup();
+    }
+  });
+
+  forgotForm?.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const email = forgotForm.email.value;
+    const res = await fetch("/forgot_password", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email }),
+    });
+    const data = await res.json();
+    forgotInfo.innerHTML = data.message;
+  });
+
+  // Handle reset code in URL
+  const params = new URLSearchParams(window.location.search);
+  const resetCode = params.get("reset_code");
+
+  if (resetCode) {
+    const res = await fetch("/pass_reset?", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ code: resetCode }),
+    });
+
+    if (res.status === 200) {
+      showPopup(resetPassSection);
+
+      resetForm?.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const pass = resetForm.pass.value;
+        const passConfirm = resetForm.pass_confirm.value;
+
+        if (pass !== passConfirm) {
+          resetInfo.innerText = "Passwords do not match";
+          return;
+        }
+
+        const res = await fetch(`/reset_password/${resetCode}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ pass }),
+        });
+        const data = await res.json();
+        resetInfo.innerText = data.message;
+      });
+    } else {
+      window.location.href = "/";
+    }
+  }
 };

session.rb

@@ -5,30 +5,32 @@ class Sessions
     @response = response
   end
 
-  def signed_in?(code)
-    $active_users[code]
+  def signed_in?
+    $active_users[self["user"]]
   end
 
-  def logout(uid)
+  def logout
+    uid = self["user"]
     $active_users.delete(uid)
     delete("user")
     DB["delete from SignedInUsers where code = ?", uid].delete
     true
   rescue Sequel::Error => e
-    Logman.log "DB Error: #{e.message}\n"
+    Logman.log "DB Error: #{e.message}"
     false
   end
 
   def login(username, pass)
+    Logman.log "Logging in: #{username} & #{pass} #{ENV_HASH["SALT"]}"
     player = Players.authorized?(username, pass)
     if player
       code = Array.new(24) { ALPHANUM.sample }.join
-      self["user", code] = code
+      self["user"] = code
       $active_users[code] = username
       begin
         DB["insert into SignedInUsers (code, player) values (?, ?)", code, username].insert
       rescue Sequel::Error => e
-        Logman.log "DB Error: #{e.message}\n"
+        Logman.log "DB Error: #{e.message}"
         return [500, "Internal server error when signing you in!"]
       end
       return [200, "Remember to verify your email!"] unless Players.verified?(username)
@@ -38,32 +40,39 @@ class Sessions
     end
   end
 
-  def []=(key, uid, val)
+  # TODO: Use .all here
+  def []=(key, val)
     session = @request.cookies["session"]
     session = session.nil? ? "{}" : Zlib::Inflate.inflate(Base64.decode64(session))
     session = JSON.parse(session)
     session[key] = val
+    Logman.log "Updated: #{key} to #{val}"
     compressed = Zlib::Deflate.deflate(JSON.generate(session))
     encoded = Base64.encode64(compressed)
     @response.set_cookie("session",
                          value: encoded,
                          path: "/",
-                         expires: Time.now + 360 * 24 * 60 * 60)
+                         expires: Time.now + 360 * 24 * 60 * 60,
+                         httponly: true,
+                         secure: ENV_HASH["ENV"] == "prod",
+                         samesite: :strict)
+    uid = session["user"]
     DB["UPDATE SignedInUsers SET last_used_at = CURRENT_TIMESTAMP WHERE code = ?", uid].update if uid
   rescue JSON::ParserError, Zlib::Error
     @response.delete_cookie("session")
   rescue Sequel::Error => e
-    Logman.log "DB Error: #{e.message} when updating last_used_at for #{uid}\n"
+    Logman.log "DB Error: #{e.message} when updating last_used_at for #{uid}"
   end
 
-  def [](key, uid: nil)
+  def [](key)
     session = @request.cookies["session"]
     session = session.nil? ? "{}" : Zlib::Inflate.inflate(Base64.decode64(session))
     session = JSON.parse(session)
     begin
+      uid = session["user"]
       DB["UPDATE SignedInUsers SET last_used_at = CURRENT_TIMESTAMP WHERE code = ?", uid].update if uid
     rescue Sequel::Error => e
-      Logman.log "DB Error: #{e.message} when updating last_used_at for #{uid}\n"
+      Logman.log "DB Error: #{e.message} when updating last_used_at for #{uid}"
     end
     session[key]
   rescue JSON::ParserError, Zlib::Error
@@ -71,6 +80,23 @@ class Sessions
     ""
   end
 
+  def message=(val)
+    @response.set_cookie("message",
+                         value: val,
+                         path: "/",
+                         expires: Time.now + 360 * 24 * 60 * 60,
+                         secure: ENV_HASH["ENV"] == "prod",
+                         samesite: :strict)
+  end
+
+  def message
+    @request.cookies["message"]
+  end
+
+  def csrf_auth?
+    @request.env["HTTP_X_CSRF_TOKEN"] == self["csrf_token"]
+  end
+
   def all
     session = @request.cookies["session"]
     session = session.nil? ? "{}" : Zlib::Inflate.inflate(Base64.decode64(session))
@@ -85,12 +111,17 @@ 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",
                          value: encoded,
                          path: "/",
-                         expires: Time.now + 360 * 24 * 60 * 60)
+                         expires: Time.now + 360 * 24 * 60 * 60,
+                         httponly: true,
+                         secure: ENV_HASH["ENV"] == "prod",
+                         samesite: :strict)
   rescue JSON::ParserError, Zlib::Error
     @response.delete_cookie("session")
   end
@@ -106,16 +137,16 @@ class Sessions
         begin
           DB[:SignedInUsers].where(code: session[:code]).delete
         rescue StandardError => e
-          Logman.log "Thread DB error: #{e.message} on #{session[:code]} for #{session[:player]}\n"
+          Logman.log "Thread DB error: #{e.message} on #{session[:code]} for #{session[:player]}"
         end
         $active_users.delete(session[:code])
         puts "Auto-logged out: #{session[:player]} (expired session)"
       end
     rescue StandardError => e
-      Logman.log "Thread error: #{e.message}\n"
+      Logman.log "Thread error: #{e.message}"
     ensure
       sleep 60 * 60 * 24
-      Logman.log "Thread sleeping\n"
+      Logman.log "Thread sleeping"
     end
   end
 end