notherbase-fs 1.2.1 → 1.2.2

package/controllers/authCheck.js

@@ -1,27 +1,12 @@
-const { user, connectionSuccess } = require("../models");
+const { connectionSuccess } = require("../models");
 
 const authCheck = async function authCheck(req, res, next){
     if (connectionSuccess) {
-        try {
-            if (req.session.currentUser) {
-                const foundAccount = await user.findById(req.session.currentUser);
-        
-                if (foundAccount) {
-                    req.session.currentUserFull = foundAccount;
-                    next();
-                }
-                else {
-                    req.session.currentUserFull = null;
-                    res.redirect("/the-front");
-                }
-            }
-            else{
-                res.redirect("/the-front");
-            }
+        if (req.session.currentUser) {
+            next();
         }
-        catch(err) {
-            console.log("database error");
-            console.log(err);
+        else {
+            res.redirect("/the-front");
         }
     }
     else {

package/controllers/inventory.js

@@ -7,7 +7,7 @@ const { inventory, item, connectionSuccess } = require("../models");
 router.get("/", async function(req, res) {
     if (connectionSuccess) {
         try {
-            if (req.session.currentUserFull) {
+            if (req.session.currentUser) {
                 let foundInventory = await inventory.findOne({user: req.session.currentUser}).populate("items.item");
     
                 res.status(200).send({ foundInventory: foundInventory });

package/controllers/the-front.js

@@ -1,4 +1,4 @@
-const { inventory, connectionSuccess } = require("../models");
+const { user, inventory, connectionSuccess } = require("../models");
 
 let router = require("express").Router();
 let dir = "";
@@ -30,11 +30,11 @@ let front = function front(detail) {
         return script;
     });
 
-    detail.options.main = "index";
-    if (detail.name !== "") detail.options.main = detail.name;
-    detail.options.main = `${dir}/views/${detail.options.main}`;
-
     router.get(`/${detail.name}`, async function(req, res) {
+        detail.options.main = "index";
+        if (detail.name !== "") detail.options.main = detail.name;
+        detail.options.main = `${dir}/views/${detail.options.main}`;
+
         let foundItemIDs = [];
         for (let m = 0; m < detail.options.requiredItems.length; m++) {
             let foundItem = await item.findOne({name: detail.options.requiredItems[m]});
@@ -55,13 +55,11 @@ let front = function front(detail) {
         }
 
         if (connectionSuccess) {
-            context.user = req.session.currentUserFull;
-
             try {
-                const foundInventory = await inventory.findOne({ user: req.session.currentUser }).populate("items.item");
-                context.inventory = foundInventory;
+                context.user = await user.findById(req.session.currentUser);
+                context.inventory = await inventory.findOne({ user: req.session.currentUser }).populate("items.item");
             
-                if (detail.options.needsKey !== "" && foundInventory) {
+                if (detail.options.needsKey !== "" && context.inventory) {
                     let hasKey = false;
     
                     for (let i = 0; i < foundInventory.items.length; i++) {

package/controllers/user.js

@@ -1,15 +1,173 @@
 const express = require("express");
 const router = express.Router();
 const bcrypt = require("bcrypt");
+const nodemailer = require("nodemailer");
 
 // Import my Data
-const { user, inventory } = require("../models");
+const { user, inventory, sendMail } = require("../models");
 
 const authCheck = require("./authCheck");
 
+let getAttributes = async function getAttributes(userID) {
+    try {
+        let foundUser = await user.findById(userID, 'attributes');
+    
+        if (!foundUser.attributes || foundUser.attributes == {}) {
+            foundUser.attributes = {
+                translation: 0,
+                strength: 0,
+                agility: 0,
+                defense: 0
+            }
+    
+            await foundUser.save();
+        }
+    
+        return foundUser;
+    } 
+    catch (err) {
+        console.log(err);
+        return null;
+    }
+}
+
+router.get("/basic", async function(req, res) {
+    try {
+        if (req.session.currentUser) {
+            let foundUser = await user.findById(req.session.currentUser, 'username email');
+    
+            res.status(200).send(foundUser);
+        }
+        else {
+            res.status(401).send("Please login first!");
+        }
+    }
+    catch(err) {
+        console.log(err);
+        res.status(500).end();
+    }
+});
+
+router.get("/logout", authCheck, async function(req, res) {
+    try {
+        await req.session.destroy();
+
+        res.redirect(`/`);
+    }
+    catch {
+        console.log(err);
+    }
+});
+
+router.get("/all", async function(req, res) {
+    try {
+        let foundUsers = await user.find({}, 'username coin home authLevels location attributes');
+
+        res.status(200).send({ foundUsers: foundUsers });
+    }
+    catch(err) {
+        res.status(500).end();
+        console.log(err);
+    }
+});
+
+router.get("/password-reset", async function(req, res) {
+    try {
+        let foundUser = await user.findOne({ email: req.query.email });
+        
+        if (foundUser) {
+            foundUser.reset.token = Math.floor(Math.random() * 9999);
+            foundUser.reset.exp = Date.now() + (1000 * 60 * 30);
+            
+            await foundUser.save();
+
+            sendMail.passwordReset(req.query.email, foundUser.reset.token);
+
+            res.status(200).send("Reset link sent!");
+        }
+        else {
+            res.status(401).send("Failed: user not found!");
+        }
+    }
+    catch(err) {
+        console.log(err);
+
+        res.status(500).send("Update Failed: Database error!");
+    }
+});
+
+router.post("/password-reset/:token", async function(req, res) {
+    try {
+        const foundUser = await user.findOne({ "reset.token": req.params.token });
+
+        if (foundUser) {
+            if (foundUser.reset.exp > Date.now()) {
+                if (req.body.password !== req.body.confirmation) res.status(400).send("Passwords must match!");
+                else {
+                    foundUser.reset = {};
+
+                    const salt = await bcrypt.genSalt(10);
+                    const hash = await bcrypt.hash(req.body.password, salt);
+        
+                    foundUser.password = hash;
+                    await foundUser.save();
+
+                    res.status(200).send("Password changed successfully!");
+                }
+            }
+            else res.status(498).send("Reset token expired!");
+        }
+        else {
+            res.status(404).send("Reset token not valid!");
+        }
+    }
+    catch(err) {
+        console.log(err);
+
+        res.status(500).send("Internal Server Error!");
+    }
+});
+
+router.get("/attributes", async function(req, res) {
+    try {
+        if (req.session.currentUser) {
+            let foundUser = await getAttributes(req.session.currentUser);
+
+            res.status(200).send(foundUser.attributes);
+        }
+        else {
+            res.status(401).send("Please login first!");
+        }
+    }
+    catch(err) {
+        res.status(500).end();
+        console.log(err);
+    }
+});
+
+router.get("/attributes/check", authCheck, async function(req, res) {
+    try {
+        if (req.session.currentUser) {
+            let foundUser = await getAttributes(req.session.currentUser);
+
+            if (foundUser.attributes[req.query.check] >= parseInt(req.query.against)) {
+                res.status(200).send("Pass");
+            }
+            else res.status(200).send("Fail");
+        }
+        else {
+            res.status(401).send("Please login first!");
+        }
+    }
+    catch(err) {
+        res.status(500).end();
+        console.log(err);
+    }
+});
+
 router.post("/register", async function(req, res) {
     try {
-        const foundAccount = await user.findOne({ username: req.body.username });
+        let foundAccount = await user.findOne({ username: req.body.username });
 
         if (!foundAccount) {
             const salt = await bcrypt.genSalt(10);
@@ -18,10 +176,17 @@ router.post("/register", async function(req, res) {
             let qAuth = await user.create({
                 username: req.body.username,
                 password: hash,
-                email: "temp@example.com",
+                email: req.body.email,
                 coin: 0,
                 home: "/",
-                authLevels: [ "Basic" ]
+                authLevels: [ "Basic" ],
+                location: "/the-front",
+                attributes: {
+                    translation: 0,
+                    strength: 0,
+                    agility: 0,
+                    defense: 0
+                }
             });
 
             await inventory.create({
@@ -44,12 +209,11 @@ router.post("/register", async function(req, res) {
 
 router.post("/login", async function(req, res) {
     try {
-        const foundAccount = await user.findOne({ username: req.body.username });
+        const foundAccount = await user.findOne({ email: req.body.email });
 
         if (foundAccount) {
             if (await bcrypt.compare(req.body.password, foundAccount.password)) {
                 req.session.currentUser = foundAccount._id;
-                req.session.currentUserFull = foundAccount;
 
                 res.status(200).send("Login successful!");
             }
@@ -58,7 +222,7 @@ router.post("/login", async function(req, res) {
             }
         }
         else {
-            res.status(401).send("Login Failed: username not found!");
+            res.status(401).send("Login Failed: Email not found!");
         }
     }
     catch(err) {
@@ -68,41 +232,171 @@ router.post("/login", async function(req, res) {
     }
 });
 
-router.get("/logout", authCheck, async function(req, res) {
+router.post("/email", async function(req, res) {
     try {
-        await req.session.destroy();
+        if (req.session.currentUser) {
+            let foundAccount = await user.findOne({ email: req.body.email });
 
-        res.redirect(`/`);
+            if (!foundAccount) {
+                let foundUser = await user.findById(req.session.currentUser);
+
+                if (foundUser) {
+                    foundUser.email = req.body.email;
+                    await foundUser.save();
+
+                    res.status(200).send("Update successful!");
+                }
+                else {
+                    res.status(401).send("Update Failed: user not found!");
+                }
+            }
+            else {
+                res.status(401).send("Update Failed: email already in use!");
+            }
+        }
+        else {
+            res.status(401).send("Please login first!");
+        }
     }
-    catch {
+    catch(err) {
         console.log(err);
+
+        res.status(500).send("Update Failed: Database error!");
     }
 });
 
-router.get("/all", authCheck, async function(req, res) {
+router.post("/username", async function(req, res) {
     try {
-        let foundUsers = await user.find({}, 'username coin home authLevels location');
+        if (req.session.currentUser) {
+            let foundAccount = await user.findOne({ username: req.body.username });
 
-        res.status(200).send({ foundUsers: foundUsers });
+            if (!foundAccount) {
+                let foundUser = await user.findById(req.session.currentUser);
+        
+                if (foundUser) {
+                    foundUser.username = req.body.username;
+                    await foundUser.save();
+        
+                    res.status(200).send("Update successful!");
+                }
+                else {
+                    res.status(401).send("Update Failed: user not found!");
+                }
+            }
+            else {
+                res.status(401).send("Update Failed: username taken!");
+            }
+        }
+        else {
+            res.status(401).send("Please login first!");
+        }
     }
     catch(err) {
-        res.status(500).end();
         console.log(err);
+
+        res.status(500).send("Update Failed: Database error!");
     }
 });
 
-router.delete("/", authCheck, async function(req, res) {
+router.post("/password", async function(req, res) {
+    try {
+        if (req.session.currentUser) {
+            let foundUser = await user.findById(req.session.currentUser);
+        
+            if (foundUser) {
+                const salt = await bcrypt.genSalt(10);
+                const hash = await bcrypt.hash(req.body.password, salt);
+                foundUser.password = hash;
+                await foundUser.save();
+
+                res.status(200).send("Update successful!");
+            }
+            else {
+                res.status(401).send("Update Failed: user not found!");
+            }
+        }
+        else {
+            res.status(401).send("Please login first!");
+        }
+    }
+    catch(err) {
+        console.log(err);
+
+        res.status(500).send("Update Failed: Database error!");
+    }
+});
+
+router.post("/attributes", async function(req, res) {
     try {
-        const found = await user.findByIdAndDelete(req.session.currentUser);
+        if (req.session.currentUser) {
+            let foundUser = await getAttributes(req.session.currentUser);
 
-        if (!found) console.log("Could not find account. No deletion!");
+            if (foundUser) {
+                foundUser.attributes[req.body.change] = parseInt(req.body.to);
+                await foundUser.save();
 
-        await req.session.destroy();
+                res.status(200).send("AttUp successful!");
+            }
+            else {
+                res.status(401).send("AttUp Failed: user not found!");
+            }
+        }
+        else {
+            res.status(401).send("Please login first!");
+        }
+    }
+    catch(err) {
+        console.log(err);
+
+        res.status(500).send("AttUp Failed: Database error!");
+    }
+});
 
-        res.redirect("/");
+router.post("/attributes/increment", async function(req, res) {
+    try {
+        if (req.session.currentUser) {
+            let foundUser = await getAttributes(req.session.currentUser);
+
+            if (foundUser) {
+                if (foundUser.attributes[req.body.change] < req.body.max) {
+                    foundUser.attributes[req.body.change]++;
+                    await foundUser.save();
+                    res.status(200).send({ newLevel: foundUser.attributes[req.body.change] });
+                } 
+                else {
+                    res.status(304).send({ newLevel: foundUser.attributes[req.body.change] });
+                }
+            }
+            else {
+                res.status(401).send("AttUp Failed: user not found!");
+            }
+        }
+        else {
+            res.status(401).send("Please login first!");
+        }
+    }
+    catch(err) {
+        console.log(err);
+
+        res.status(500).send("AttUp Failed: Database error!");
+    }
+});
+
+router.delete("/", authCheck, async function(req, res) {
+    try {
+        if (req.session.currentUser) {
+            await user.findByIdAndDelete(req.session.currentUser);
+            await req.session.destroy();
+
+            res.redirect("/");
+        }
+        else {
+            res.status(401).send("Please login first!");
+        }
     }
     catch {
         console.log(err);
+        res.status(500).send("Delete Failed: Database error!");
     }
 });
 

package/models/index.js

@@ -5,5 +5,6 @@ module.exports = {
     user: require("./user"),
     contact: require("./contact"),
     inventory: require("./inventory"),
-    game: require("./game")
+    game: require("./game"),
+    sendMail: require("./send-mail")
 }

package/models/send-mail.js

@@ -0,0 +1,26 @@
+const nodemailer = require("nodemailer");
+
+const passwordReset = async (toEmail, resetToken) => {
+    var transporter = nodemailer.createTransport({
+        service: 'gmail',
+        auth: {
+          user: process.env.NOREPLY,
+          pass: process.env.NOREPLYPW
+        }
+    });
+      
+    var mailOptions = {
+        from: process.env.NOREPLY,
+        to: toEmail,
+        subject: 'Password Reset for NotherBase',
+        html: `<h1>Your One-Time Password Reset Code: ${resetToken}<h1>`
+    };
+    
+    transporter.sendMail(mailOptions, function(error, info){
+        if (error) console.log(error);
+    });
+};
+
+module.exports = {
+    passwordReset: passwordReset
+};

package/models/user.js

@@ -9,7 +9,17 @@ const user = mongoose.model('users',
         coin: Number,
         home: String,
         authLevels: [ String ],
-        location: String
+        location: String,
+        attributes: {
+            translation: Number,
+            strength: Number,
+            agility: Number,
+            defense: Number
+        },
+        reset: {
+            token: Number,
+            exp: Number
+        }
     })
 );
 

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "notherbase-fs",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Functions to help make developing for NotherBase easier.",
   "main": "index.js",
   "scripts": {
-    "test": "nodemon test.js"
+    "test": "nodemon test.js",
+    "gmail-auth": "node gmail-auth.js",
+    "gmail-token": "node gmail-token.js"
   },
   "repository": {
     "type": "git",
@@ -23,8 +25,10 @@
     "ejs": "^3.1.6",
     "express": "^4.17.1",
     "express-session": "^1.17.2",
+    "googleapis": "^100.0.0",
     "method-override": "^3.0.0",
     "mongoose": "^6.1.7",
+    "nodemailer": "^6.7.5",
     "serve-favicon": "^2.5.0",
     "socket.io": "^4.4.1"
   }

package/public/styles/account.css

@@ -0,0 +1,41 @@
+.content#account {
+    padding: 10px;
+}
+
+.content#account hr {
+    margin: 10px 0;
+}
+
+.content#account #info {
+    text-align: center;
+    width: 100%;
+    margin-top: 40px;
+}
+
+.content#account .setting {
+    background: var(--darkBgColor);
+    padding: 25px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    flex-wrap: wrap;
+}
+
+.content#account p {
+    width: 100%;
+}
+
+.content#account button {
+    width: 40%;
+}
+
+.content#account .edit {
+    background: var(--darkWoodColor);
+    padding: 25px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    flex-wrap: wrap;
+}

package/public/styles/inventory.css

@@ -3,11 +3,9 @@
     color: var(--textColor);
     width: 100%;
     height: 100%;
-    background-color: var(--bgColor);
+    /* background-color: var(--bgColor); */
     padding: 5px;
     z-index: 500;
-    display: flex;
-    flex-wrap: wrap;
     overflow: auto;
 }
 
@@ -56,6 +54,7 @@
     top: 0;
     margin: 0;
     padding: 0;
+    border-radius: 0;
 }
 
 .item-card hr {

package/public/styles/main.css

@@ -1,6 +1,8 @@
 :root {
     --bgColor: rgb(37, 37, 37);
+    --bgColorTransparent: rgba(37, 37, 37, 0.404);
     --darkBgColor: rgb(27, 27, 27);
+    --veryDarkBgColorTransparent: rgba(15, 15, 15, 0.404);
     --veryDarkBgColor: rgb(15, 15, 15);
     --lightBgColor: rgb(57, 57, 57);
     --shadowColor: rgb(26, 26, 26);
@@ -22,6 +24,11 @@
     display: none !important;
 }
 
+.camo {
+    transition: all .15s;
+    opacity: 0;
+}
+
 body {
     background-color: var(--darkBgColor);
     min-height: 100vh;
@@ -86,7 +93,7 @@ p {
     width: 80%;
 }
 
-main input, main textarea {
+input, textarea {
     padding: 10px;
     width: calc(100% - 10px);
     background-color: var(--bgColor);
@@ -96,7 +103,7 @@ main input, main textarea {
     font-size: 15px;
 }
 
-main input[type=submit], main button, main a {
+input[type=submit], button, a {
     background-color: var(--bgColor);
     padding: 10px;
     border-radius: 5px;
@@ -108,7 +115,7 @@ main input[type=submit], main button, main a {
     text-align: center;
 }
 
-main input[type=submit]:hover, main button:hover, main a:hover {
+input[type=submit]:hover, button:hover, a:hover {
     border: 1px solid var(--textColorBright);
     color: var(--textColorBright);
     cursor: pointer;

package/public/styles/menu.css

@@ -1,20 +1,37 @@
 .menu {
     width: 75%;
-    height: 75%;
-    margin: 5% 12.5%;
+    height: 50%;
     border: 1px solid var(--textColor);
     color: var(--textColor);
     position: fixed;
-    left: 0;
-    top: 0;
-    background-color: var(--bgColor);
+    left: 12.5%;
+    top: 5%;
+    background-color: var(--bgColorTransparent);
+    backdrop-filter: blur(3px);
     border-radius: 5px;
     z-index: 500;
 }
 
+.menu hr {
+    margin: 0;
+}
+
+.ui .fade {
+    background-color: var(--veryDarkBgColorTransparent);
+    backdrop-filter: blur(3px);
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 400;
+}
+
 .ui button {
     background-color: var(--bgColor);
     border: 1px solid var(--textColor);
+    margin: 0;
+
 }
 
 .ui button:hover {
@@ -29,6 +46,7 @@
     right: 5px;
     width: 64px;
     height: 64px;
+    border-radius: 5px;
 }
 
 .menu button#close {
@@ -37,6 +55,7 @@
     width: 32px;
     height: 32px;
     position: absolute;
+    border-radius: 0;
 }
 
 .menu .tabs {
@@ -77,5 +96,4 @@
     border-top: none;
     border-radius: 0 0 5px 5px;
     text-align: center;
-    z-index: 499;
 }

package/public/styles/more.css

@@ -0,0 +1,3 @@
+.content#more {
+    padding: 10px;
+}

package/public/styles/player.css

@@ -0,0 +1,12 @@
+.content#player {
+    padding: 10px;
+}
+
+.content#player h3 {
+    width: 100%;
+    text-transform: capitalize;
+}
+
+.content#player h3 button {
+    width: 40px;
+}

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">
@@ -24,8 +44,13 @@
 </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,25 +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");
                 
-                if (playerInventory) {
-                    playerInventory.refresh();
-                }
+                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/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

@@ -63,11 +63,16 @@
         }
 
         async getData() {
-            await $.get("/inventory", (data) => {
-                if (data.foundInventory) this.items = data.foundInventory.items;
-
-                this.clearError();
-            });
+            try {
+                await $.get("/inventory", (data) => {
+                    if (data.foundInventory) this.items = data.foundInventory.items;
+    
+                    this.clearError();
+                });
+            } 
+            catch(err) {
+                
+            }
         }
         
         render() {
@@ -97,8 +102,13 @@
             }
         
         async refresh() {
-            await this.getData();
-            this.render();
+            try {
+                await this.getData();
+                this.render();
+            } 
+            catch(err) {
+                
+            }
         }
         
         clearError() {

package/views/menu.ejs

@@ -1,3 +1,7 @@
+<div class="fade invisible">
+
+</div>
+
 <div class="menu invisible">
     <div class="tabs">
         <button id="inventory">
@@ -6,11 +10,11 @@
         <button id="player">
             Player
         </button>
-        <button id="contact-form">
-            Contact
+        <button id="account">
+            Account
         </button>
-        <button id="debug">
-            Debug
+        <button id="more">
+            More
         </button>
     </div>
 
@@ -21,8 +25,8 @@
     <div id="content-window">
         <%- include("./inventory.ejs"); %>
         <%- include("./player.ejs"); %>
-        <%- include("./contact.ejs"); %>
-        <%- include("./debug.ejs"); %>
+        <%- include("./account.ejs"); %>
+        <%- include("./more.ejs"); %>
     </div>
 
     <a href="/user/logout" id="logout">Logout</a>
@@ -32,13 +36,32 @@
 
 <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");
+    });
+
+    $fade.on("click", function () {
+        if (!menuClosing) closeMenu();
     });
 
     $(".menu button#close").on("click", function () {
-        $menu.toggleClass("invisible");
+        closeMenu();
     });
 
     $(".menu .tabs button").on("click", function (e) {

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

@@ -1,6 +1,6 @@
-<div id="contact-form" class="invisible content">
+<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

@@ -1 +1,47 @@
-<div class="content invisible" id="player"></div>
+<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>

package/views/debug.ejs

@@ -1,15 +0,0 @@
-<div class="content invisible" id="debug">
-    <h3>user</h3>
-    <% if (user) { %>
-        <p><%= user._id %></p>
-    <% } else { %>
-        <p>Please login to view user.</p>
-    <% } %>
-
-    <h3>inv</h3>
-    <% if (user) { %>
-        <p><%= inventory.items.length %> items</p>
-    <% } else { %>
-        <p>Please login to view inventory.</p>
-    <% } %>
-</div>