Index.html multi user-authentication

src/config.js

@@ -4,7 +4,6 @@ const { release } = require('./package.json');
 
 module.exports.RELEASE = release;
 module.exports.PORT = process.env.PORT || 51821;
-module.exports.PASSWORD = process.env.PASSWORD;
 module.exports.WG_PATH = process.env.WG_PATH || '/etc/wireguard/';
 module.exports.WG_DEVICE = process.env.WG_DEVICE || 'eth0';
 module.exports.WG_HOST = process.env.WG_HOST;

src/lib/Server.js

@@ -39,15 +39,11 @@ module.exports = class Server {
         return RELEASE;
       })))
 
-      // Authentication
+      // Get session data
       .get('/api/session', Util.promisify(async req => {
-        const requiresPassword = !!process.env.PASSWORD;
+        const authenticated = !!(req.session && req.session.authenticated);
-        const authenticated = requiresPassword
-          ? !!(req.session && req.session.authenticated)
-          : true;
 
         return {
-          requiresPassword,
           authenticated,
         };
       }))
@@ -79,9 +75,6 @@ module.exports = class Server {
 
       // WireGuard
       .use((req, res, next) => {
-        if (!PASSWORD) {
-          return next();
-        }
      
         if (req.session && req.session.authenticated) {
           return next();

src/www/index.html

@@ -24,7 +24,7 @@
     <div v-cloak class="container mx-auto max-w-3xl">
 
       <div v-if="authenticated === true">
-        <span v-if="requiresPassword"
+        <span
           class="text-sm text-gray-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right" @click="logout">
           Logout
           <svg class="h-3 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -475,6 +475,9 @@
             </svg>
           </div>
 
+          <input type="text" name="username" placeholder="Username" v-model="username"
+          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="password" placeholder="Password" v-model="password"
             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" />
 
@@ -488,10 +491,10 @@
               </path>
             </svg>
           </button>
-          <input v-if="!authenticating && password" type="submit"
+          <input v-if="!authenticating && username && password" type="submit"
             class="bg-red-800 w-full rounded shadow py-2 text-sm text-white hover:bg-red-700 transition cursor-pointer"
             value="Sign In">
-          <input v-if="!authenticating && !password" type="submit"
+          <input v-if="!authenticating && (!username || !password)" type="submit"
             class="bg-gray-200 w-full rounded shadow py-2 text-sm text-white cursor-not-allowed" value="Sign In">
         </form>
       </div>

src/www/js/api.js

@@ -43,11 +43,11 @@ class API {
     });
   }
 
-  async createSession({ password }) {
+  async createSession({ username, password }) {
     return this.call({
       method: 'post',
       path: '/session',
-      body: { password },
+      body: { username, password },
     });
   }
 

src/www/js/app.js

@@ -28,8 +28,8 @@ new Vue({
   data: {
     authenticated: null,
     authenticating: false,
+    username: null,
     password: null,
-    requiresPassword: null,
 
     clients: null,
     clientsPersist: {},
@@ -173,17 +173,18 @@ new Vue({
     login(e) {
       e.preventDefault();
 
+      if (!this.username) return;
       if (!this.password) return;
       if (this.authenticating) return;
 
       this.authenticating = true;
       this.api.createSession({
+        username: this.username,
         password: this.password,
       })
         .then(async () => {
           const session = await this.api.getSession();
           this.authenticated = session.authenticated;
-          this.requiresPassword = session.requiresPassword;
           return this.refresh();
         })
         .catch(err => {
@@ -191,6 +192,7 @@ new Vue({
         })
         .finally(() => {
           this.authenticating = false;
+          this.username = null;
           this.password = null;
         });
     },
@@ -251,7 +253,6 @@ new Vue({
     this.api.getSession()
       .then(session => {
         this.authenticated = session.authenticated;
-        this.requiresPassword = session.requiresPassword;
         this.refresh({
           updateCharts: true,
         }).catch(err => {