diff --git a/index.html b/index.html index 50d74b5..bdcde8e 100644 --- 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" /> + + + @@ -22,37 +28,46 @@
+ +
-
+ diff --git a/main.rb b/main.rb index e0dbd46..11250c7 100644 --- 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"]) - status 200 - return { "message" => "Email sent successfully!" }.to_json + 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 diff --git a/players.rb b/players.rb index 5dc3b59..9cfdd5a 100644 --- 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 diff --git a/public/src/assets/fonts/changa.woff b/public/src/assets/fonts/changa.woff deleted file mode 100644 index e41b363..0000000 Binary files a/public/src/assets/fonts/changa.woff and /dev/null differ diff --git a/public/src/assets/style.css b/public/src/assets/style.css index 4630f76..50d59e2 100644 --- 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 { diff --git a/public/src/js/accounts.js b/public/src/js/accounts.js index 39d9ef9..583326b 100644 --- a/public/src/js/accounts.js +++ b/public/src/js/accounts.js @@ -1,43 +1,132 @@ -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) => { - 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 }), - }); - response = await response.json(); - document.getElementById("login-info").innerText = response.message; -}; + logout_button.onclick = () => { + window.location.href = "/logout"; + }; -signup_form.onsubmit = 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", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ username, email, pass }), - }); - response = await response.json(); - document.getElementById("signup-info").innerText = response.message; + 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; + let response = await fetch("/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ username, pass }), + }); + response = await response.json(); + document.getElementById("login-info").innerText = response.message; + }; + + signup_form.onsubmit = 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", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ username, email, pass }), + }); + 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 = "/"; + } + } }; diff --git a/session.rb b/session.rb index 1c0d9fa..2525e4a 100644 --- 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",