users panel

electron/css/index3.css

@@ -151,4 +151,8 @@ ul.left-nav-menu li.left-nav-selected {
 
 .folder-button-group {
   float: right;
-}
+}
+
+.row-mod {
+  margin-bottom: 10px !important;
+}

electron/index3.html

@@ -62,7 +62,7 @@
 
       <!-- Boot Server Button -->
       <div class="boot-server-button-wrapper">
-        <a id="boot-server-button" class="waves-effect waves-light btn green">Boot Server</a>
+        <a id="boot-server-button" class="waves-effect waves-light btn blue">Boot Server</a>
       </div>
     </div>
 
@@ -77,11 +77,12 @@
     const app = remote.app;
     const dialog = remote.require('electron').dialog;
     const audioDirs = { };
+    const serverUsers = { };
     var vm;
     var foldersView;
 
     window.onload = function () {
-      const folderSelector = Vue.component('folder-accordion', {
+      Vue.component('folder-accordion', {
         data: function() {
           return {
             instances: null,
@@ -89,7 +90,6 @@
             resetFlag: false,
             closeOverride: () => {
               if (this.resetFlag) {
-                console.log('AERGEAR')
                 this.$parent.componentKey = !this.$parent.componentKey;
               }
             }
@@ -183,7 +183,7 @@
                   <label for="add-directory-name">Display Name</label>\
                   <span class="helper-text" >No special characters</span>\
                 </div>\
-                <button class="btn blue waves-effect waves-light select-folder-button" type="submit" name="action">\
+                <button class="btn green waves-effect waves-light select-folder-button" type="submit">\
                   Select Folder\
                 </button>\
               </form>\
@@ -217,11 +217,157 @@
           </div>',
       });
 
+      Vue.component('user-accordion', {
+        data: function() {
+          return {
+            instances: null,
+            users: serverUsers,
+            resetFlag: false,
+            closeOverride: () => {
+              if (this.resetFlag) {
+                this.$parent.componentKey = !this.$parent.componentKey;
+              }
+            }
+          };
+        },
+        template: '\
+          <ul class="collapsible-folders">\
+            <li v-on:click="toggleOptions(index, $event)" v-for="(value, key, index) in users">\
+              <div class="collapsible-header">\
+                <div>{{key}}</div>\
+                <div>{{value}}</div>\
+              </div>\
+              <div class="collapsible-body clearfix">\
+                <div class="folder-button-group">\
+                  <a v-on:click="changeDirectory(value, key, index)" class="waves-effect waves-light btn">Reset Password</a>\
+                  <a v-on:click="deleteFolder(value, key, index)" class="waves-effect waves-light btn red">Remove</a>\
+                </div>\
+              </div>\
+            </li>\
+          </ul>',
+        mounted: function () {
+          this.instances = M.Collapsible.init(document.querySelectorAll('.collapsible-folders'), { onCloseEnd: this.closeOverride });
+        },
+        beforeDestroy: function() {
+          this.instances[0].destroy();
+        },
+        methods: {
+          changeDirectory: function(value, key, index) {
+
+          },
+          deleteFolder: function(value, key, index) {
+            iziToast.question({
+              timeout: 20000,
+              close: false,
+              overlayClose: true,
+              overlay: true,
+              displayMode: 'once',
+              id: 'question',
+              zindex: 99999,
+              title: "Delete <b>'" + value + "'</b>?",
+              position: 'center',
+              buttons: [
+                ['<button><b>Delete</b></button>', (instance, toast) => {
+                  delete serverUsers[key];
+                  this.resetFlag = true;
+                  this.instances[0].close(index);
+                  instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
+                }, true],
+                ['<button>Go Back</button>', (instance, toast) => {
+                  instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
+                }],
+              ]
+            });
+          },
+          toggleOptions: function(index, el) {
+            if(el.target.classList.contains('btn')){
+              return;
+            }
+
+            if(el.currentTarget.classList.contains('active')){
+              this.instances[0].close(index);
+              return;
+            }
+
+            this.instances[0].open(index);
+          }
+        }
+      });
+
       const usersView = Vue.component('users-view', {
+        data() {
+          return {
+            directories: audioDirs,
+            componentKey: false, // Flip this value to force re-render the folder accordion thing
+            newUsername: '', // for the input field
+            selectInstance: null,
+            newPassword: ''
+          };
+        },
         template: '\
           <div>\
-            Users\
+            <div>\
+              <div class="section-header">New User</div>\
+              <form class="" @submit.prevent="addUser">\
+                <div class="row row-mod">\
+                  <div class="input-field directory-name-field col s6">\
+                    <input pattern="[a-zA-Z0-9-]+" v-model="newUsername" id="new-username" required type="text" class="validate">\
+                    <label for="new-username">Username</label>\
+                  </div>\
+                  <div class="input-field directory-name-field col s6">\
+                    <input v-model="newPassword" id="new-password" required type="password" class="validate">\
+                    <label for="new-password">Password</label>\
+                  </div>\
+                </div>\
+                <div class="row row-mod">\
+                  <div class="input-field col s12">\
+                    <select :disabled="Object.keys(directories).length === 0" id="new-user-dirs" multiple>\
+                      <option disabled selected value="" v-if="Object.keys(directories).length === 0">You must add a directory before adding a user</option>\
+                      <option v-for="(key, value) in directories" :value="value">{{ value }}</option>\
+                    </select>\
+                    <label for="new-user-dirs">Select User\'s Directories</label>\
+                  </div>\
+                </div>\
+                <div class="row">\
+                  <div class="col s6">\
+                  </div>\
+                  <button class="btn green waves-effect waves-light col s6" type="submit">\
+                    Add user\
+                  </button>\
+                </div>\
+              </form>\
+            </div>\
+            <div>\
+              <div class="section-header">Users:</div>\
+              <template>\
+                <user-accordion :key="componentKey" />\
+              </template>\
+            </div>\
           </div>',
+          mounted: function () {
+            this.selectInstance = M.FormSelect.init(document.querySelectorAll("#new-user-dirs"));
+          },
+          beforeDestroy: function() {
+            this.selectInstance[0].destroy();
+          },
+          methods: {
+            addUser: function (event) {
+              if (this.selectInstance[0].getSelectedValues().length === 0) {
+                iziToast.warning({
+                  title: 'Cannot add user without a directory',
+                  position: 'topCenter',
+                  timeout: 3500
+                });
+                return;
+              }
+              console.log(this.selectInstance[0].getSelectedValues());
+
+              // serverUsers[this.newUsername] = 'password';
+              // this.componentKey = !this.componentKey;
+              // this.newUsername = '';
+              // this.newPassword = '';
+            },
+          }
       });
 
       const networkView = Vue.component('network-view', {