stored username and password in the local storage... bad idea, I know, but well....

webui/src/App.vue

@@ -5,17 +5,38 @@
 
     <!-- top navigation bar -->
     <top-navigation-bar :window="window"
-                        v-on:side="window.menu = !window.menu"
+                        @side="window.menu = !window.menu"
                         @close="closeProject"></top-navigation-bar>
 
     <!-- login -->
     <div class="login" v-if="!$root.socket.authenticated">
-      <div class="login_form">
+      <div class="login-form">
         <h1>Login</h1>
-        <p><input v-model="userName" type="username" placeholder="Username" required></p>
-        <p><input v-model="passwordLogin" type="password" placeholder="Password" required></p>
-        <p><button type="button" v-on:click="login()" :disabled="loginButtonDisabled">Login</button></p>
-        <p><span style="color:red">{{$root.socket.latestErrorTxt}}</span></p>
+        <div>
+          <input v-model="userName"
+                 type="username"
+                 placeholder="Username"
+                 required>
+        </div>
+        <div>
+          <input v-model="passwordLogin"
+                 type="password"
+                 placeholder="Password"
+                 required>
+        </div>
+        <div>
+          <button type="button"
+                  @click="login()"
+                  :class="{disabled: loginButtonDisabled}"
+                  :disabled="loginButtonDisabled">
+            Login
+          </button>
+        </div>
+        <div>
+          <span class="login-errors">
+            {{ $root.socket.latestErrorTxt }}
+          </span>
+        </div>
       </div>
     </div>
 
@@ -23,15 +44,15 @@
     <div class="bottom" v-else>
       <!-- side navigation bar -->
       <side-navigation-bar :window="window"
-                           v-on:close="window.menu = false"/>
+                           @close="window.menu = false"/>
 
       <!-- actual content -->
       <div class="content">
         <project-open-window v-if="currentPage === 'projects'"
-                             v-on:open="openProject"/>
+                             @open="openProject"/>
 
         <project-settings-window v-if="currentPage === 'settings'"
-                                 v-on:close="closeProject"/>
+                                 @close="closeProject"/>
 
         <project-data-add-window v-if="currentPage === 'add_data'"/>
 
@@ -102,11 +123,7 @@ export default {
   methods: {
     login() {
       this.loginButtonDisabled = true;
-      this.$root.socket.username = this.userName;
-      this.$root.socket.password = this.passwordLogin;
-      this.$root.socket.authenticate();
-      this.userName = "";
-      this.passwordLogin = "";
+      this.$root.authenticate(this.userName, this.passwordLogin);
       this.loginButtonDisabled = false;
     },
     resize: function () {
@@ -162,8 +179,27 @@ export default {
   position: relative;
 }
 
-.login_form{
-  text-align: center;;
+.login-form {
+  text-align: center;
+}
+
+.login-form input {
+  text-align: right;
+  margin: 0.2rem;
+  padding: 0.4rem;
+  border: 1px solid gray;
+  border-radius: 0.5rem;
+}
+
+.login-form button {
+  margin: 0.2rem;
+  padding: 0.4rem 2rem;
+  border: 1px solid gray;
+  border-radius: 0.5rem;
+}
+
+.login-form .login-errors {
+  color: red
 }
 
 .content {

webui/src/components/window/top-navigation-bar.vue

@@ -19,7 +19,7 @@
 
     <div v-if="$root.socket.authenticated">
       <div class="logout"
-           @click="$emit('close', true);$root.socket.logout()">
+           @click="logout">
          Logout ({{$root.socket.username}})
       </div>
     </div>
@@ -48,7 +48,7 @@ export default {
   props: ['window'],
   created: function () {
     // get jobs
-    this.getJobs();
+    // this.getJobs(); < will be done on 'connect'
 
     // subscribe to changes
     this.$root.socket.on('connect', this.getJobs);
@@ -97,6 +97,11 @@ export default {
     }
   },
   methods: {
+    logout: function () {
+      this.$root.logout();
+      this.$emit('close', true);
+    },
+
     showJobs: function () {
       if (this.show)
         this.show = false;

webui/src/main.js

@@ -21,32 +21,75 @@ Vue.use(vueDebounce);
 new Vue({
     render: h => h(App),
     created: function () {
-        this.socket.on('edit-project', project => {
-            if (this.project && this.project.identifier === project.identifier) {
-                this.project = project;
-            }
-        });
-        this.socket.on('remove-project', project => {
-            if (this.project && this.project.identifier === project.identifier) {
-                this.project = null;
-            }
+      this.socket.on('edit-project', project => {
+          if (this.project && this.project.identifier === project.identifier) {
+              this.project = project;
+          }
+      });
+      this.socket.on('remove-project', project => {
+          if (this.project && this.project.identifier === project.identifier) {
+              this.project = null;
+          }
+      });
+
+      this.socket.on('connect', () => this.connected = true);
+      setInterval(() => this.connected = sio.connected, 1000);
+    },
+
+    mounted: function(){
+      if(localStorage.credentials){
+        this.credentials = JSON.parse(localStorage.credentials);
+
+
+        if(this.credentials.username != null)
+          this.login();
+
+      }
+      else
+        this.credentials = {username: null, password: null}
+    },
+
+    methods: {
+      authenticate: function(username, password){
+        let creds = {username, password}
+        this.credentials = creds;
+
+        this.login( (resp) => {
+          if (resp.status === 200);
+            localStorage.credentials = JSON.stringify(creds);
         });
 
-        this.socket.on('connect', () => this.connected = true);
-        setInterval(() => this.connected = sio.connected, 1000);
+      },
+      login: function(callback){
+
+        this.socket.username = this.credentials.username;
+        this.socket.password = this.credentials.password;
+
+        return this.socket.authenticate(callback);
+      },
+      logout: function(){
+        localStorage.removeItem("credentials");
+        this.credentials = {username: null, password: null}
+        this.socket.logout();
+      },
     },
     data: function () {
         return {
             project: null,
             connected: false,
+            credentials: null,
             socket: {
                 username: null,
                 password: null,
+
                 authenticated: false,
                 latestErrorTxt: "",
+
                 headers: function () {
                     const authHeaders = new Headers();
-                    authHeaders.set('Authorization', 'Basic ' + window.btoa(this.username + ":" + this.password));
+                    authHeaders.set('Authorization',
+                      'Basic ' + window.btoa(this.username + ":" + this.password));
+                    console.log(authHeaders.get("Authorization"));
                     return authHeaders;
                 },
                 url: function (name) {
@@ -95,27 +138,33 @@ new Vue({
                         body: form
                     });
                 },
-                authenticate: function () {
+
+                authenticate: function (callback) {
+
                   if (this.username == "" && this.password == "") {
                     this.latestErrorTxt = "Please enter a valid username and password!";
                     return false;
                   }
 
+                  console.log("Sock:auth", this.username, this.password)
                   this.get('/authenticate')
                     .then((response) => {
                       this.authenticated = (response.status === 200);
-                      if (!this.authenticated) {
+                      if (!this.authenticated)
                         this.latestErrorTxt = "Invalid username or password!";
-                      }
+                      else if (callback)
+                        callback(response)
                     });
                     return this.authenticated;
                 },
+
                 logout: function () {
                   this.authenticated = false;
                   this.username = null;
                   this.password = null;
                   this.latestErrorTxt = "";
                 },
+
                 media: function (file, maxWidth, maxHeight) {
                     if (maxHeight)
                         return `${self}/data/${file.identifier}/${maxWidth}x${maxHeight}?uuid=${file.uuid}`