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>