Adding and deleting users

client/components/app/Appbar.vue

@@ -11,7 +11,7 @@
         <controls-global-search />
         <div class="flex-grow" />
 
-        <nuxt-link to="/config" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center">
+        <nuxt-link v-if="isRootUser" to="/config" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center">
           <span class="material-icons">settings</span>
         </nuxt-link>
 
@@ -56,6 +56,9 @@ export default {
     user() {
       return this.$store.state.user.user
     },
+    isRootUser() {
+      return this.$store.getters['user/getIsRoot']
+    },
     username() {
       return this.user ? this.user.username : 'err'
     },

client/components/modals/AccountModal.vue

@@ -0,0 +1,131 @@
+<template>
+  <modals-modal v-model="show" :width="800" :height="500" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <form @submit.prevent="submitForm">
+      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
+        <div class="w-full p-8">
+          <div class="flex py-2">
+            <ui-text-input-with-label v-model="newUser.username" label="Username" class="mx-2" />
+            <ui-text-input-with-label v-model="newUser.password" label="Password" type="password" class="mx-2" />
+          </div>
+          <div class="flex py-2">
+            <div class="px-2">
+              <ui-input-dropdown v-model="newUser.type" label="Account Type" :editable="false" :items="accountTypes" />
+            </div>
+            <div class="flex-grow" />
+            <div class="flex items-center pt-4 px-2">
+              <p class="px-3 font-semibold">Is Active</p>
+              <ui-toggle-switch v-model="newUser.isActive" />
+            </div>
+          </div>
+          <div class="flex pt-4">
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">Submit</ui-btn>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    account: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newUser: {},
+      isNew: true,
+      accountTypes: ['guest', 'user', 'admin']
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    title() {
+      return this.isNew ? 'Add New Account' : `Update "${(this.account || {}).username}" Account`
+    }
+  },
+  methods: {
+    submitForm() {
+      if (!this.newUser.username) {
+        this.$toast.error('Enter a username')
+        return
+      }
+      if (!this.newUser.password) {
+        this.$toast.error('Must have a password, only root user can have an empty password')
+        return
+      }
+
+      var account = { ...this.newUser }
+      this.processing = true
+      if (this.isNew) {
+        this.$axios
+          .$post('/api/user', account)
+          .then((data) => {
+            this.processing = false
+            if (data.error) {
+              this.$toast.error(`Failed to create account: ${data.error}`)
+            } else {
+              console.log('New Account:', data.user)
+              this.$toast.success('New account created')
+              this.show = false
+            }
+          })
+          .catch((error) => {
+            console.error('Failed to create account', error)
+            this.processing = false
+            this.$toast.success('New account created')
+          })
+      }
+    },
+    toggleActive() {
+      this.newUser.isActive = !this.newUser.isActive
+    },
+    init() {
+      this.isNew = !this.account
+      if (this.account) {
+        this.newUser = {
+          username: this.account.username,
+          password: this.account.password,
+          type: this.account.type,
+          isActive: this.account.isActive
+        }
+      } else {
+        this.newUser = {
+          username: null,
+          password: null,
+          type: 'user',
+          isActive: true
+        }
+      }
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-50 flex items-center justify-center z-30 opacity-0">
+  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-30 opacity-0">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
     <div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">

client/components/ui/InputDropdown.vue

@@ -4,7 +4,7 @@
     <div ref="wrapper" class="relative">
       <form @submit.prevent="submitForm">
         <div ref="inputWrapper" class="flex-wrap relative w-full shadow-sm flex items-center bg-primary border border-gray-600 rounded px-2 py-2">
-          <input ref="input" v-model="textInput" class="h-full w-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
+          <input ref="input" v-model="textInput" :readonly="!editable" class="h-full w-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
         </div>
       </form>
 
@@ -37,6 +37,10 @@ export default {
     items: {
       type: Array,
       default: () => []
+    },
+    editable: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

client/components/ui/ToggleSwitch.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="border rounded-full border-black-100 flex items-center cursor-pointer w-12 justify-end" :class="toggleColor" @click="clickToggle">
+      <span class="rounded-full border w-6 h-6 border-black-50 bg-white shadow transform transition-transform duration-100" :class="!toggleValue ? '-translate-x-6' : ''"> </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean
+  },
+  computed: {
+    toggleValue: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    toggleColor() {
+      return this.toggleValue ? 'bg-success' : 'bg-primary'
+    }
+  },
+  methods: {
+    clickToggle() {
+      console.log('click toggle', this.toggleValue)
+      this.toggleValue = !this.toggleValue
+    }
+  }
+}
+</script>