Added simple change password html inside authenticated page and changed the way users are stored in the users.json file

src/lib/Server.js

@@ -48,15 +48,15 @@ module.exports = class Server {
         };
       }))
       .post('/api/session', Util.promisify(async req => {
-        // Post authentication
+        // Authentication
         const {
           username,
           password,
         } = req.body;
         
         // Check if the credentials are correct
-        const tmp = await fs.readFile(path.join(USERS_PATH, 'users.json'));
-        const { users } = JSON.parse(tmp);
+        const usersJson = await fs.readFile(path.join(USERS_PATH, 'users.json'), 'utf8');
+        const users = JSON.parse(usersJson);
         const user = users.find(findUser => findUser.username === username);
 
         if (typeof user !== 'object') {
@@ -68,12 +68,12 @@ module.exports = class Server {
         }
 
         req.session.authenticated = true;
+        req.session.username = user.username;
         req.session.save();
 
         debug(`New Session: ${req.session.id}`);
       }))
 
-      // WireGuard
       .use((req, res, next) => {
      
         if (req.session && req.session.authenticated) {
@@ -91,6 +91,32 @@ module.exports = class Server {
 
         debug(`Deleted Session: ${sessionId}`);
       }))
+      .post('/api/updatePassword', Util.promisify(async req => {
+        const {
+          newPassword,
+          checkPassword,
+        } = req.body;
+        const username = req.session.username;
+
+        const usersJson = await fs.readFile(path.join(USERS_PATH, 'users.json'), 'utf8');
+        const users = JSON.parse(usersJson);
+        const user = users.find(findUser => findUser.username === username);
+
+        if (typeof user !== 'object') {
+          throw new ServerError('This session.username does not exists', 401);
+        }
+
+        if (newPassword !== checkPassword) {
+          throw new ServerError("Passwords don't match", 401);
+        }
+
+        user.password = newPassword;
+        await fs.writeFile(path.join(USERS_PATH, 'users.json'), JSON.stringify(users, false, 2), {
+          mode: 0o660,
+        });
+        
+      }))
+      // WireGuard
       .get('/api/wireguard/client', Util.promisify(async req => {
         return WireGuard.getClients();
       }))

src/users.json

@@ -1,17 +1,14 @@
-{
-    "users": [
-      {
-        "username": "alice",
-        "password": "password123"
-      },
-      {
-        "username": "bob",
-        "password": "notpassword777"
-      },
-      {
-        "username": "roberto",
-        "password": "yespassword999"
-      }
-    ]
+[
+  {
+    "username": "alice",
+    "password": "password123"
+  },
+  {
+    "username": "bob",
+    "password": "notpassword777"
+  },
+  {
+    "username": "roberto",
+    "password": "yespassword999"
   }
-  
+]

src/www/index.html

@@ -54,6 +54,32 @@
           </div>
         </div>
 
+        <!-- Password Update form -->
+        <form @submit="updatePassword" class="shadow rounded-md bg-white mx-auto w-64 p-5 overflow-hidden mt-10">
+         
+          <input type="password" name="newPassword" placeholder="New Password" v-model="newPassword"
+          class="px-3 py-2 text-sm text-gray-500 mb-5 border-2 border-gray-100 rounded-lg w-full focus:border-red-800 outline-none" />
+
+          <input type="password" name="checkPassword" placeholder="Confirm New Password" v-model="checkPassword"
+            class="px-3 py-2 text-sm text-gray-500 mb-5 border-2 border-gray-100 rounded-lg w-full focus:border-red-800 outline-none" />
+
+          <button v-if="changingPassword"
+            class="bg-red-800 w-full rounded shadow py-2 text-sm text-white cursor-not-allowed">
+            <svg class="w-5 animate-spin mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+              fill="currentColor">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+              </path>
+            </svg>
+          </button>
+          <input v-if="!changingPassword && newPassword && checkPassword" type="submit"
+            class="bg-red-800 w-full rounded shadow py-2 text-sm text-white hover:bg-red-700 transition cursor-pointer"
+            value="Change Password">
+          <input v-if="!changingPassword && (!newPassword || !checkPassword)" type="submit"
+            class="bg-gray-200 w-full rounded shadow py-2 text-sm text-white cursor-not-allowed" value="Change Password">
+        </form>
+
         <div class="shadow-md rounded-lg bg-white overflow-hidden">
           <div class="flex flex-row flex-auto items-center p-3 px-5 border border-b-2 border-gray-100">
             <div class="flex-grow">

src/www/js/api.js

@@ -58,6 +58,14 @@ class API {
     });
   }
 
+  async changePassword({ newPassword, checkPassword }) {
+    return this.call({
+      method: 'post',
+      path: '/updatePassword',
+      body: { newPassword, checkPassword },
+    });
+  }
+
   async getClients() {
     return this.call({
       method: 'get',

src/www/js/app.js

@@ -28,8 +28,11 @@ new Vue({
   data: {
     authenticated: null,
     authenticating: false,
-    username: null,
     password: null,
+    username: null,
+    newPassword: null,
+    checkPassword: null,
+    changingPassword: null,
 
     clients: null,
     clientsPersist: {},
@@ -208,6 +211,26 @@ new Vue({
           alert(err.message || err.toString());
         });
     },
+    updatePassword(e) {
+      e.preventDefault();
+
+      this.changingPassword = true;
+      this.api.changePassword({
+        newPassword: this.newPassword,
+        checkPassword: this.checkPassword,
+      })
+      .then(() => {
+        alert("Password Changed!");
+      })
+      .catch(err => {
+        alert(err.message || err.toString());
+      })
+      .finally(() => {
+        this.newPassword = null;
+        this.checkPassword = null;
+        this.changingPassword = null;
+      });
+    },
     createClient() {
       const name = this.clientCreateName;
       if (!name) return;