fix peer creation/update on mikrotik, add loading spinner to frontend for long running actions

frontend/src/components/InterfaceEditModal.vue

@@ -50,6 +50,9 @@ const currentTags = ref({
   PeerDefDnsSearch: ""
 })
 const formData = ref(freshInterface())
+const isSaving = ref(false)
+const isDeleting = ref(false)
+const isApplyingDefaults = ref(false)
 
 const isBackendValid = computed(() => {
   if (!props.visible || !selectedInterface.value) {
@@ -258,6 +261,8 @@ function handleChangePeerDefDnsSearch(tags) {
 }
 
 async function save() {
+  if (isSaving.value) return
+  isSaving.value = true
   try {
     if (props.interfaceId!=='#NEW#') {
       await interfaces.UpdateInterface(selectedInterface.value.Identifier, formData.value)
@@ -272,6 +277,8 @@ async function save() {
       text: e.toString(),
       type: 'error',
     })
+  } finally {
+    isSaving.value = false
   }
 }
 
@@ -280,6 +287,8 @@ async function applyPeerDefaults() {
     return; // do nothing for new interfaces
   }
 
+  if (isApplyingDefaults.value) return
+  isApplyingDefaults.value = true
   try {
     await interfaces.ApplyPeerDefaults(selectedInterface.value.Identifier, formData.value)
 
@@ -297,10 +306,14 @@ async function applyPeerDefaults() {
       text: e.toString(),
       type: 'error',
     })
+  } finally {
+    isApplyingDefaults.value = false
   }
 }
 
 async function del() {
+  if (isDeleting.value) return
+  isDeleting.value = true
   try {
     await interfaces.DeleteInterface(selectedInterface.value.Identifier)
     close()
@@ -311,6 +324,8 @@ async function del() {
       text: e.toString(),
       type: 'error',
     })
+  } finally {
+    isDeleting.value = false
   }
 }
 
@@ -562,16 +577,25 @@ async function del() {
           </fieldset>
           <fieldset v-if="props.interfaceId!=='#NEW#'" class="text-end">
             <hr class="mt-4">
-            <button class="btn btn-primary me-1" type="button" @click.prevent="applyPeerDefaults">{{ $t('modals.interface-edit.button-apply-defaults') }}</button>
+            <button class="btn btn-primary me-1" type="button" @click.prevent="applyPeerDefaults" :disabled="isApplyingDefaults">
+              <span v-if="isApplyingDefaults" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+              {{ $t('modals.interface-edit.button-apply-defaults') }}
+            </button>
           </fieldset>
         </div>
       </div>
     </template>
     <template #footer>
       <div class="flex-fill text-start">
-        <button v-if="props.interfaceId!=='#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del">{{ $t('general.delete') }}</button>
+        <button v-if="props.interfaceId!=='#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del" :disabled="isDeleting">
+          <span v-if="isDeleting" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+          {{ $t('general.delete') }}
+        </button>
       </div>
-      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save" :disabled="isSaving">
+        <span v-if="isSaving" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+        {{ $t('general.save') }}
+      </button>
       <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
     </template>
   </Modal>

frontend/src/components/PeerEditModal.vue

@@ -73,6 +73,8 @@ const currentTags = ref({
   DnsSearch: ""
 })
 const formData = ref(freshPeer())
+const isSaving = ref(false)
+const isDeleting = ref(false)
 
 // functions
 
@@ -270,6 +272,8 @@ function handleChangeDnsSearch(tags) {
 }
 
 async function save() {
+  if (isSaving.value) return
+  isSaving.value = true
   try {
     if (props.peerId !== '#NEW#') {
       await peers.UpdatePeer(selectedPeer.value.Identifier, formData.value)
@@ -278,26 +282,30 @@ async function save() {
     }
     close()
   } catch (e) {
-    // console.log(e)
     notify({
       title: "Failed to save peer!",
       text: e.toString(),
       type: 'error',
     })
+  } finally {
+    isSaving.value = false
   }
 }
 
 async function del() {
+  if (isDeleting.value) return
+  isDeleting.value = true
   try {
     await peers.DeletePeer(selectedPeer.value.Identifier)
     close()
   } catch (e) {
-    // console.log(e)
     notify({
       title: "Failed to delete peer!",
       text: e.toString(),
       type: 'error',
     })
+  } finally {
+    isDeleting.value = false
   }
 }
 
@@ -470,10 +478,15 @@ async function del() {
     </template>
     <template #footer>
       <div class="flex-fill text-start">
-        <button v-if="props.peerId !== '#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del">{{
-          $t('general.delete') }}</button>
+        <button v-if="props.peerId !== '#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del" :disabled="isDeleting">
+          <span v-if="isDeleting" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+          {{ $t('general.delete') }}
+        </button>
       </div>
-      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save" :disabled="isSaving">
+        <span v-if="isSaving" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+        {{ $t('general.save') }}
+      </button>
       <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
     </template>
   </Modal>

frontend/src/components/PeerMultiCreateModal.vue

@@ -38,6 +38,7 @@ function freshForm() {
 
 const currentTag = ref("")
 const formData = ref(freshForm())
+const isSaving = ref(false)
 
 const title = computed(() => {
   if (!props.visible) {
@@ -60,12 +61,15 @@ function handleChangeUserIdentifiers(tags) {
 }
 
 async function save() {
+  if (isSaving.value) return
+  isSaving.value = true
   if (formData.value.Identifiers.length === 0) {
     notify({
       title: "Missing Identifiers",
       text: "At least one identifier is required to create a new peer.",
       type: 'error',
     })
+    isSaving.value = false
     return
   }
 
@@ -79,6 +83,8 @@ async function save() {
       text: e.toString(),
       type: 'error',
     })
+  } finally {
+    isSaving.value = false
   }
 }
 
@@ -108,7 +114,10 @@ async function save() {
       </fieldset>
     </template>
     <template #footer>
-      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save" :disabled="isSaving">
+        <span v-if="isSaving" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+        {{ $t('general.save') }}
+      </button>
       <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
     </template>
   </Modal>

frontend/src/components/UserEditModal.vue

@@ -34,6 +34,8 @@ const title = computed(() => {
 })
 
 const formData = ref(freshUser())
+const isSaving = ref(false)
+const isDeleting = ref(false)
 
 const passwordWeak = computed(() => {
   return formData.value.Password && formData.value.Password.length > 0 && formData.value.Password.length < settings.Setting('MinPasswordLength')
@@ -89,6 +91,8 @@ function close() {
 }
 
 async function save() {
+  if (isSaving.value) return
+  isSaving.value = true
   try {
     if (props.userId!=='#NEW#') {
       await users.UpdateUser(selectedUser.value.Identifier, formData.value)
@@ -102,10 +106,14 @@ async function save() {
       text: e.toString(),
       type: 'error',
     })
+  } finally {
+    isSaving.value = false
   }
 }
 
 async function del() {
+  if (isDeleting.value) return
+  isDeleting.value = true
   try {
     await users.DeleteUser(selectedUser.value.Identifier)
     close()
@@ -115,6 +123,8 @@ async function del() {
       text: e.toString(),
       type: 'error',
     })
+  } finally {
+    isDeleting.value = false
   }
 }
 
@@ -193,9 +203,15 @@ async function del() {
     </template>
     <template #footer>
       <div class="flex-fill text-start">
-        <button v-if="props.userId!=='#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del">{{ $t('general.delete') }}</button>
+        <button v-if="props.userId!=='#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del" :disabled="isDeleting">
+          <span v-if="isDeleting" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+          {{ $t('general.delete') }}
+        </button>
       </div>
-      <button class="btn btn-primary me-1" type="button" @click.prevent="save" :disabled="!formValid">{{ $t('general.save') }}</button>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save" :disabled="!formValid || isSaving">
+        <span v-if="isSaving" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+        {{ $t('general.save') }}
+      </button>
       <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
     </template>
   </Modal>

frontend/src/components/UserPeerEditModal.vue

@@ -55,6 +55,8 @@ const title = computed(() => {
 })
 
 const formData = ref(freshPeer())
+const isSaving = ref(false)
+const isDeleting = ref(false)
 
 // functions
 
@@ -163,6 +165,8 @@ function close() {
 }
 
 async function save() {
+  if (isSaving.value) return
+  isSaving.value = true
   try {
     if (props.peerId !== '#NEW#') {
       await peers.UpdatePeer(selectedPeer.value.Identifier, formData.value)
@@ -171,26 +175,30 @@ async function save() {
     }
     close()
   } catch (e) {
-    // console.log(e)
     notify({
       title: "Failed to save peer!",
       text: e.toString(),
       type: 'error',
     })
+  } finally {
+    isSaving.value = false
   }
 }
 
 async function del() {
+  if (isDeleting.value) return
+  isDeleting.value = true
   try {
     await peers.DeletePeer(selectedPeer.value.Identifier)
     close()
   } catch (e) {
-    // console.log(e)
     notify({
       title: "Failed to delete peer!",
       text: e.toString(),
       type: 'error',
     })
+  } finally {
+    isDeleting.value = false
   }
 }
 
@@ -283,10 +291,15 @@ async function del() {
     </template>
     <template #footer>
       <div class="flex-fill text-start">
-        <button v-if="props.peerId !== '#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del">{{
-          $t('general.delete') }}</button>
+        <button v-if="props.peerId !== '#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del" :disabled="isDeleting">
+          <span v-if="isDeleting" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+          {{ $t('general.delete') }}
+        </button>
       </div>
-      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save" :disabled="isSaving">
+        <span v-if="isSaving" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+        {{ $t('general.save') }}
+      </button>
       <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
     </template>
   </Modal>