notherbase-fs 1.1.42 → 1.2.2

package/test/views/index.ejs

@@ -4,15 +4,35 @@
 
 <hr>
 
+<h3>Register Account</h3>
+<input type="email" placeholder="email" id="register-email">
+<input type="text" placeholder="username" id="register-user">
+<input type="password" placeholder="password" id="register-pass">
+<button id="register-button">register</button>
+<p id="register-info"></p>
+
+<hr>
+
 <div class="auth-form" id="login-form">
     <h1>NotherBase</h1>
     <h3>Login to Your Account</h3>
-    <input type="text" name="username" placeholder="username" id="login-user">
+    <input type="email" name="email" placeholder="user@email.com" id="login-email">
     <input type="password" name="password" placeholder="password" id="login-pass">
     <button id="login-button">Login</button>
+    <button id="reset-password">Reset Password</button>
     <p id="login-info"></p>
 </div>
 
+<div class="auth-form" id="reset-form">
+    <h1>NotherBase</h1>
+    <h3>Login to Your Account</h3>
+    <input type="number" name="token" placeholder="Your Reset Code" id="token">
+    <input type="password" name="password" placeholder="Type Your New Password Here" minlength="8" required id="password">
+    <input type="password" name="confirmation" placeholder="Type Your New Password Here Again" minlength="8" required id="confirmation">
+    <button id="change-password">Change Password</button>
+    <p id="change-info"></p>
+</div>
+
 <hr>
 
 <div class="locked to nother-base">
@@ -20,12 +40,17 @@
 </div>
 
 <a href="/coast/tall-beach/nono-cove" class="invisible to nother-base">
-    Go to Nono Cove
+    Go inside
 </a>
 
 <script>
+    let $resetPassword = $("#reset-password");
     let $loginButton = $("#login-button");
     let $loginInfo = $("#login-info");
+    let $registerButton = $("#register-button");
+    let $registerInfo = $("#register-info");
+    let $changePasswordButton = $("button#change-password");
+    let $changeInfo = $("#change-info");
     let $toNonoButton = $(".locked.to.nother-base");
     let $toNonoLink = $(".invisible.to.nother-base");
 
@@ -37,21 +62,86 @@
     $loginButton.on("click", async function () {
         try {
             await $.post("/user/login", {
-                username: $("#login-user").val(),
+                email: $("#login-email").val(),
                 password: $("#login-pass").val()
             }, (data) => {
                 $loginInfo.text("To your right you hear the sound of a bang against a chain-link fence. You've logged in.");
                 $toNonoButton.addClass("invisible");
                 $toNonoLink.removeClass("invisible");
+                
+                playerInventory.refresh();
+                playerAttributes.refresh();
+                accountServices.refresh();
+            });
+        } catch (error) {
+            if (error.status === 401) {
+                $loginInfo.text("Login Error: Email or password incorrect!");
+            }
+            else if (error.status === 500) {
+                $loginInfo.text("Server Error: Try again later!");
+            }
+        }
+    });
+
+    $registerButton.on("click", async function () {
+        try {
+            await $.post("/user/register", {
+                username: $("#register-user").val(),
+                password: $("#register-pass").val(),
+                email: $("#register-email").val()
+            }, (data) => {
+                $registerInfo.text("Account registered.");
             });
         } catch (error) {
             //console.log(error);
+            if (error.status === 400) {
+                $registerInfo.text("Login Error: Username already taken!");
+            }
+            else if (error.status === 500) {
+                $registerInfo.text("Server Error: Try again later!");
+            }
+        }
+    });
+
+    $resetPassword.on("click", async function () {
+        try {
+            await $.get("/user/password-reset", { email: $("#login-email").val() });
+            $loginInfo.text("Reset link sent to your email.");
+        } 
+        catch(err) {
             if (error.status === 401) {
-                $loginInfo.text("Login Error: Username or password incorrect!");
+                $loginInfo.text("Reset Error: Email not found!");
             }
             else if (error.status === 500) {
                 $loginInfo.text("Server Error: Try again later!");
             }
         }
     });
+
+    $changePasswordButton.on("click", async function () {
+        try {
+            let token = $("#reset-form #token").val();
+
+            await $.post(`/user/password-reset/${token}`, {
+                token: token,
+                password: $("#reset-form #password").val(),
+                confirmation: $("#reset-form #confirmation").val()
+            }, (data) => {
+                $changeInfo.text("Password changed.");
+            });
+        } catch (error) {
+            if (error.status === 498) {
+                $changeInfo.text("Change Error: Your reset code expired! Please request a new one.");
+            }
+            else if (error.status === 400) {
+                $changeInfo.text("Change Error: Passwords must match!");
+            }
+            else if (error.status === 404) {
+                $changeInfo.text("Change Error: Reset code not valid!");
+            }
+            else if (error.status === 500) {
+                $changeInfo.text("Server Error: Try again later!");
+            }
+        }
+    });
 </script>

package/views/account.ejs

@@ -0,0 +1,161 @@
+<div id="account" class="invisible content">
+    <p id="please-login">Please login to view your account settings.</p>
+
+    <div class="invisible settings">
+        <h3>Email:</h3>
+        <div class="setting" id="email">
+            <p></p>
+            <button onclick="accountServices.editEmail()">Change Email</button>
+        </div>
+        <div class="edit invisible" id="email">
+            <input type="email" name="email">
+            <button onclick="accountServices.updateEmail()">Update</button>
+            <button onclick="accountServices.cancelEmail()">Cancel</button>
+        </div>
+    
+        <hr>
+    
+        <h3>Username:</h3>
+        <div class="setting" id="username">
+            <p></p>
+            <button onclick="accountServices.editUsername()">Change Username</button>
+        </div>
+        <div class="edit invisible" id="username">
+            <input type="text" name="username">
+            <button onclick="accountServices.updateUsername()">Update</button>
+            <button onclick="accountServices.cancelUsername()">Cancel</button>
+        </div>
+    
+        <hr>
+    
+        <h3>Password:</h3>
+        <div class="setting" id="password">
+            <p>*********</p>
+            <button onclick="accountServices.editPassword()">Change Password</button>
+        </div>
+        <div class="edit invisible" id="password">
+            <input type="password" name="password">
+            <button onclick="accountServices.updatePassword()">Update</button>
+            <button onclick="accountServices.cancelPassword()">Cancel</button>
+        </div>
+
+        <p id="info"></p>
+    </div>
+</div>
+
+<script>
+    class AccountServices {
+        constructor() {
+            this.$emailSetting = $(".content#account .setting#email");
+            this.$email = this.$emailSetting.find("p");
+            this.$emailEdit = $(".content#account .edit#email");
+            this.$emailInput = this.$emailEdit.find("input");
+
+            this.$usernameSetting = $(".content#account .setting#username");
+            this.$username = this.$usernameSetting.find("p");
+            this.$usernameEdit = $(".content#account .edit#username");
+            this.$usernameInput = this.$usernameEdit.find("input");
+
+            this.$passwordSetting = $(".content#account .setting#password");
+            this.$passwordEdit = $(".content#account .edit#password");
+            this.$passwordInput = this.$passwordEdit.find("input");
+
+            this.$info = $(".content#account #info");
+
+            <% if (user) { %>
+                this.refresh();
+            <% } %>
+        }
+
+        async refresh() {
+            try {
+                $.get("/user/basic", (data) => {
+                    this.$email.text(data.email);
+                    this.$emailInput.val(data.email);
+                    this.$username.text(data.username);
+                    this.$usernameInput.val(data.username);
+
+                    $(".content#account .settings").removeClass("invisible");
+                    $(".content#account #please-login").addClass("invisible");
+                });
+            } 
+            catch(err) {
+                this.$info.text(err);
+            }
+        }
+
+        editEmail() {
+            this.$emailSetting.addClass("invisible");
+            this.$emailEdit.removeClass("invisible");
+        }
+
+        cancelEmail() {
+            this.$emailSetting.removeClass("invisible");
+            this.$emailEdit.addClass("invisible");
+            this.$emailInput.val(this.$email.text());
+        }
+
+        async updateEmail() {
+            try {
+                await $.post("/user/email", { email: this.$emailInput.val() }, (data) => {
+                    this.$email.text(this.$emailInput.val());
+                    this.cancelEmail();
+                    this.$info.text("Email Updated!");
+                });
+            } 
+            catch(err) {
+                this.$info.text(err);
+            }
+        }
+
+        editUsername() {
+            this.$usernameSetting.addClass("invisible");
+            this.$usernameEdit.removeClass("invisible");
+        }
+
+        cancelUsername() {
+            this.$usernameSetting.removeClass("invisible");
+            this.$usernameEdit.addClass("invisible");
+            this.$usernameInput.val(this.$username.text());
+        }
+
+        async updateUsername() {
+            try {
+                await $.post("/user/username", { username: this.$usernameInput.val() }, (data) => {
+                    this.$username.text(this.$usernameInput.val());
+                    this.cancelUsername();
+                    this.$info.text("Username Updated!");
+                });
+            } 
+            catch(err) {
+                if (err.status === 401) this.$info.text("Username already taken!");
+                else this.$info.text("Server Error");
+            }
+        }
+
+        editPassword() {
+            this.$passwordSetting.addClass("invisible");
+            this.$passwordEdit.removeClass("invisible");
+        }
+
+        cancelPassword() {
+            this.$passwordSetting.removeClass("invisible");
+            this.$passwordEdit.addClass("invisible");
+            this.$passwordInput.val("");
+        }
+
+        async updatePassword() {
+            try {
+                await $.post("/user/password", { password: this.$passwordInput.val() }, (data) => {
+                    this.cancelPassword();
+                    this.$info.text("Password Updated!");
+                });
+            } 
+            catch(err) {
+                this.$info.text(err);
+            }
+        }
+    }
+
+    let accountServices = new AccountServices();
+</script>

package/views/explorer.ejs

@@ -9,12 +9,18 @@
     <% } %>
 </style>
 
+<script>
+    let itemIDs = [];
+    <% for (let i = 0; i < itemIDs.length; i++) { %>
+        itemIDs.push("<%= itemIDs[i] %>");
+    <% } %>
+</script>
+
 <main class="override">
     <%- include(`${main}.ejs`); %>
 </main>
 
 <div class="ui">
-    <%- include("./inventory.ejs", {inventory: inventory}); %>
     <%- include("./menu.ejs", {user: user}); %>
 </div>
 

package/views/head.ejs

@@ -14,8 +14,11 @@
     <link href="https://fonts.googleapis.com/css2?family=Redacted+Script:wght@300&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="/styles/main.css">
-    <link rel="stylesheet" href="/styles/inventory.css">
     <link rel="stylesheet" href="/styles/menu.css">
+    <link rel="stylesheet" href="/styles/inventory.css">
+    <link rel="stylesheet" href="/styles/player.css">
+    <link rel="stylesheet" href="/styles/account.css">
+    <link rel="stylesheet" href="/styles/more.css">
 </head>
 
 <body>

package/views/inventory.ejs

@@ -1,51 +1,30 @@
-<% if (inventory) { %>
-    <% if (inventory.items) { %>
-        <div class="inventory invisible">
-            <% if (user.authLevels.length > 0) { 
-                for (let i = 0; i < user.authLevels.length; i++) {
-                    if (user.authLevels[i] === "Creator") { %>
-
-                        <div class="item-spawner">
-                            <input type="text" class="search">
-                            <div class="search-results">
-                                
-                            </div>
-                        </div>
-
-                        <% break;
-                    }
-                }
-            } %>
-
-            <div class="item-list">
-            </div>
+<div class="inventory content invisible" id="inventory">
+    <div id="error">
+        Please login to view your inventory.
+    </div>
+
+    <div class="item-spawner invisible">
+        <input type="text" class="search">
+        <div class="search-results">
+            
         </div>
+    </div>
 
-        <button id="inventory">
-            <i class="fas fa-database"></i>
-        </button>
-    <% } else { %>
-        <button id="inventory">
-            ERR
-        </button>
-    <% } %>
-<% } %>
+    <div class="item-list">
+    </div>
+</div>
 
 <script>
     class Inventory {
         constructor() {
             this.$div = $(".inventory");
-            this.$list = $(".item-list");
+            this.$list = $(".inventory .item-list");
             this.$search = $(".search");
             this.$searchResults = $(".search-results");
             this.searchResults = [];
-            this.$button = $("button#inventory");
+            this.$error = $("#inventory #error");
             this.items = [];
 
-            this.$button.on("click", () => {
-                this.$div.toggleClass("invisible");
-            });
-
             this.$search.on("keyup", () => {
                 let searchString = this.$search.val();
 
@@ -54,17 +33,13 @@
                 });
             });
 
-            $.get("/inventory", (data) => {
-                this.items = data.foundInventory.items;
-
-                this.render();
-            });
+            this.refresh();
 
             setInterval(this.update, this.updateCooldown);
         }
 
-        change(change) {
-            $.post("/inventory", { change: change }, (data, status) => {
+        async change(change) {
+            await $.post("/inventory", { change: change }, (data, status) => {
                 if (status === "success") {
                     let holding = false;
 
@@ -87,28 +62,62 @@
             });
         }
 
+        async getData() {
+            try {
+                await $.get("/inventory", (data) => {
+                    if (data.foundInventory) this.items = data.foundInventory.items;
+    
+                    this.clearError();
+                });
+            } 
+            catch(err) {
+                
+            }
+        }
+        
         render() {
             this.$list.empty();
-
+            
             for (let i = 0; i < this.items.length; i++) {
                 let $new = this.$list.append(
-                                                `<div class="item-card">
-                                                    <h5>${this.items[i].item.name}</h5>
-                                                    <button id="${i}">X</button>
-                                                    <hr>
-                                                    <p>${this.items[i].amount}</p>
-                                                </div>`
-                                            ).children().last();
-
-                $new.find("button").on("click", (e) => {
-                    let which = parseInt(e.currentTarget.id);
-
-                    this.change({
-                        item: this.items[which].item._id,
-                        amount: -1
+                    `<div class="item-card">
+                        <h5>${this.items[i].item.name}</h5>
+                        <button id="${i}">X</button>
+                        <hr>
+                        <p>${this.items[i].amount}</p>
+                        </div>`
+                        ).children().last();
+
+                    $new.find("button").on("click", (e) => {
+                        let which = parseInt(e.currentTarget.id);
+                        
+                        this.change({
+                            item: this.items[which].item._id,
+                            amount: -1
+                        });
+
+                        this.clearError();
                     });
-                });
+                }
             }
+        
+        async refresh() {
+            try {
+                await this.getData();
+                this.render();
+            } 
+            catch(err) {
+                
+            }
+        }
+        
+        clearError() {
+            this.$error.addClass("invisible");
+        }
+
+        setError(text) {
+            this.$error.text(text);
+            this.$error.removeClass("invisible");
         }
 
         renderSearchResults(results) {

package/views/menu.ejs

@@ -1,6 +1,8 @@
-<div class="menu invisible">
-    
+<div class="fade invisible">
+
+</div>
 
+<div class="menu invisible">
     <div class="tabs">
         <button id="inventory">
             Inventory
@@ -8,35 +10,70 @@
         <button id="player">
             Player
         </button>
-        <button id="contact">
-            Contact
+        <button id="account">
+            Account
         </button>
-
-        <button id="close">
-            X
+        <button id="more">
+            More
         </button>
     </div>
 
-    <div class="content">
-        <%- include("./contact.ejs"); %>
+    <button id="close">
+        X
+    </button>
 
+    <div id="content-window">
+        <%- include("./inventory.ejs"); %>
+        <%- include("./player.ejs"); %>
+        <%- include("./account.ejs"); %>
+        <%- include("./more.ejs"); %>
     </div>
 
-    <% if (user) { %> 
-        <a href="/user/logout">Logout</a>
-    <% } %> 
+    <a href="/user/logout" id="logout">Logout</a>
 </div>
 
 <button id="menu"><i class="fas fa-cog"></i></button>
 
 <script>
     let $menu = $(".menu");
+    let $fade = $(".ui .fade");
+    let menuClosing = false;
+
+    let closeMenu = function closeMenu() {
+        menuClosing = true;
+        $fade.addClass("camo");
+        
+        setTimeout(() => { 
+            $menu.addClass("invisible");
+            $fade.addClass("invisible");
+            menuClosing = false;
+        }, 100);
+    }
 
     $("button#menu").on("click", function () {
         $menu.toggleClass("invisible");
+        $fade.removeClass("camo");
+        $fade.removeClass("invisible");
     });
 
-    $("button#close").on("click", function () {
-        $menu.toggleClass("invisible");
+    $fade.on("click", function () {
+        if (!menuClosing) closeMenu();
     });
+
+    $(".menu button#close").on("click", function () {
+        closeMenu();
+    });
+
+    $(".menu .tabs button").on("click", function (e) {
+        switchTab(e.currentTarget.id);
+    });
+
+    let switchTab = function switchTab(id) {
+        $("#content-window .content").addClass("invisible");
+        $(".menu .tabs button").removeClass("selected");
+        $(`#content-window #${id}`).removeClass("invisible");
+        $(`.menu .tabs #${id}`).addClass("selected");
+    }
+
+    switchTab("inventory");
 </script>

package/views/{contact.ejs → more.ejs}

@@ -1,6 +1,6 @@
-<div id="contact-form" class="invisible">
+<div class="content invisible" id="more">
     <h4>Message Nother</h4>
-    <input type="text" name="content" id="content">
+    <textarea id="content"></textarea>
     <button id="send">Send Message</button>
 </div>
 

package/views/player.ejs

@@ -0,0 +1,47 @@
+<div class="content invisible" id="player">
+    <p id="please-login">Please login to view your player stats.</p>
+</div>
+
+<script>
+    class PlayerAttributes {
+        constructor() {
+            this.$content = $(".content#player");
+
+            <% if (user) { %>
+                this.refresh();
+            <% } %>
+        }
+
+        async setAtt(change, to) {
+            await $.post("/user/attributes", { change: change, to: to }, async (data) => {
+                await this.refresh();
+            });
+        }
+
+        async refresh() {
+            try {
+                await $.get("/user/attributes", (data) => {
+                    this.$content.empty();
+                    for (const [key, value] of Object.entries(data)) {
+                        <% if (user) { 
+                             if (user.authLevels.includes("Creator")) { %>
+                                this.$content.append(`<h3 id="${key}">
+                                    ${key}: ${value}
+                                    <input type="number"></input>
+                                    <button onclick="playerAttributes.setAtt('${key}', $('.content#player h3#${key} input').val())">Set</button>
+                                </h3>`);
+                            <% } 
+                        } else { %>
+                            this.$content.append(`<h3 id="${key}">${key}: ${value}</h3>`);
+                        <% } %>
+                    }
+                });
+            } 
+            catch(err) {
+                console.log(err);
+            }
+        }
+    }
+
+    let playerAttributes = new PlayerAttributes();
+</script>