ability to transfer vehicle and disable users

ui/src/components/shareVehicle.vue

@@ -50,19 +50,61 @@ export default {
         axios.delete(url).then((data) => {})
       }
     },
+    transferVehicle(model) {
+      if (!model.isShared) {
+        return
+      }
+      this.$buefy.dialog.confirm({
+        title: 'Transfer Vehicle',
+        message: 'Are you sure you want to do this? You will lose ownership and all editing rights if you confirm.',
+        cancelText: 'Cancel',
+        confirmText: 'Go Ahead',
+        onConfirm: () => {
+          var url = `/api/vehicles/${this.vehicle.id}/users/${model.id}/transfer`
+          axios
+            .post(url, {})
+            .then((data) => {
+              this.$buefy.toast.open({
+                message: 'Vehicle Transferred Successfully',
+                type: 'is-success',
+                duration: 3000,
+              })
+              setTimeout(() => {
+              this.$router.go()
+              }, 3000);
+            })
+            .catch((ex) => {
+              this.$buefy.toast.open({
+                duration: 5000,
+                message: ex.message,
+                position: 'is-bottom',
+                type: 'is-danger',
+              })
+            })
+        },
+      })
+    },
   },
 }
 </script>
 
 <template>
-  <div class="box">
+  <div class="box" style="max-width:600px">
     <h1 class="subtitle">Share {{ vehicle.nickname }}</h1>
     <section>
-      <b-field v-for="model in models" :key="model.id">
-        <b-switch v-model="model.isShared" :disabled="model.isOwner" @input="changeShareStatus(model)">
-          {{ model.name }}
-        </b-switch>
-      </b-field>
+      <div class="columns is-mobile" v-for="model in models" :key="model.id">
+        <div class="column is-one-third">
+          <b-field>
+            <b-switch v-model="model.isShared" :disabled="model.isOwner" @input="changeShareStatus(model)">
+              {{ model.name }}
+            </b-switch>
+          </b-field> </div
+        ><div class="column is-three-quarters">
+          <b-field>
+            <b-button v-if="model.isShared && !model.isOwner" type="is-primary is-small" @click="transferVehicle(model)">Make Owner</b-button>
+          </b-field></div
+        ></div
+      >
     </section>
   </div>
 </template>

ui/src/main.js

@@ -20,6 +20,7 @@ import {
   faEyeSlash,
   faTrash,
   faShare,
+  faUserFriends,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
@@ -48,7 +49,8 @@ library.add(
   faEye,
   faEyeSlash,
   faTrash,
-  faShare
+  faShare,
+  faUserFriends,
 )
 Vue.use(Buefy, {
   defaultIconComponent: 'vue-fontawesome',

ui/src/router/views/login.vue

@@ -16,6 +16,7 @@ export default {
       password: '',
       authError: null,
       tryingToLogIn: false,
+      errorMessage:''
     }
   },
   computed: {
@@ -37,6 +38,7 @@ export default {
     // and password they provided.
     tryToLogIn() {
       this.tryingToLogIn = true
+      this.errorMessage='';
       // Reset the authError if it existed.
       this.authError = null
       return this.logIn({
@@ -51,6 +53,9 @@ export default {
           // Redirect to the originally requested page, or to the home page
         })
         .catch((error) => {
+         if(error.response.data?.errors?.login){
+           this.errorMessage=error.response.data.errors.login
+         }
           this.tryingToLogIn = false
           this.authError = error
         })
@@ -85,7 +90,7 @@ export default {
         </span>
       </b-button>
       <p v-if="authError">
-        There was an error logging in to your account.
+        There was an error logging in to your account. {{errorMessage}}
       </p>
     </form>
   </Layout>

ui/src/router/views/settings.vue

@@ -172,7 +172,7 @@ export default {
         <table class="table is-hoverable">
           <tr>
             <td>Current Version</td>
-            <td>2021.06.08</td>
+            <td>2021.06.24</td>
           </tr>
           <tr>
             <td>Website</td>

ui/src/router/views/users.vue

@@ -53,6 +53,36 @@ export default {
     formatDate(date) {
       return parseAndFormatDate(date)
     },
+    changeDisabledStatus(userId,status){
+        this.$buefy.dialog.confirm({
+        title: status?'Disable User':"Enable User",
+        message: 'Are you sure you want to do this?',
+        cancelText: 'Cancel',
+        confirmText: 'Go Ahead',
+        onConfirm: () => {
+
+          var url = `/api/users/${userId}/${status?"disable":"enable"}`
+          axios
+            .post(url, {})
+            .then((data) => {
+              this.$buefy.toast.open({
+                message: status?"User disabled successfully":'User enabled successfully',
+                type: 'is-success',
+                duration: 3000,
+              })
+             this.getUsers();
+            })
+            .catch((ex) => {
+              this.$buefy.toast.open({
+                duration: 5000,
+                message: ex.message,
+                position: 'is-bottom',
+                type: 'is-danger',
+              })
+            })
+        },
+      })
+    },
     resetUserForm() {
       this.registerModel = {
         name: '',
@@ -157,7 +187,7 @@ export default {
           </div>
         </form>
       </div>
-      <b-table :data="users" hoverable mobile-cards detail-key="id" paginated per-page="10">
+      <b-table :data="users" hoverable mobile-cards detail-key="id" paginated per-page="10" :row-class="(row, index) => row.isDisabled && 'is-disabled'">
         <b-table-column v-slot="props" field="name" label="Name">
           {{ `${props.row.name}` }} <template v-if="props.row.id === user.id">(You)</template>
         </b-table-column>
@@ -170,6 +200,10 @@ export default {
         <b-table-column v-slot="props" field="createdAt" label="Created" sortable date>
           {{ formatDate(props.row.createdAt) }}
         </b-table-column>
+         <b-table-column v-slot="props">
+           <b-button type="is-success" v-if="props.row.isDisabled && props.row.roleDetail.long === 'USER'" @click="changeDisabledStatus(props.row.id, false)">Enable</b-button>
+            <b-button type="is-danger" v-if="!props.row.isDisabled && props.row.roleDetail.long === 'USER'" @click="changeDisabledStatus(props.row.id, true)">Disable</b-button>
+         </b-table-column>
       </b-table>
     </div>
   </Layout>

ui/src/router/views/vehicle.vue

@@ -289,7 +289,7 @@ export default {
           <b-icon pack="fas" icon="edit" type="is-info"> </b-icon
         ></b-button>
         <b-button v-if="vehicle.isOwner" title="Share vehicle" @click="showShareVehicleModal">
-          <b-icon pack="fas" icon="share" type="is-info"> </b-icon
+          <b-icon pack="fas" icon="user-friends" type="is-info"> </b-icon
         ></b-button>
         <b-button v-if="vehicle.isOwner" title="Delete Vehicle" @click="deleteVehicle">
           <b-icon pack="fas" icon="trash" type="is-danger"> </b-icon