add revoke confirmation

enjin · Dec 5, 2023 · 65bbec2 · 65bbec2
1 parent b98d251
commit 65bbec2
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 deletions.
diff --git a/resources/js/components/ConfirmModal.vue b/resources/js/components/ConfirmModal.vue
@@ -1,17 +1,15 @@
 <template>
     <Modal :is-open="isOpen" :close="closeModal">
-        <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900"> Disclaimer </DialogTitle>
+        <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900"> {{ title }} </DialogTitle>
         <div class="mt-2">
             <p class="text-sm text-gray-500">
-                Retries transactions that have failed or otherwise not been included on-chain after some time. Use with
-                caution and ensure the transactions really aren't yet on-chain (or likely to be) to make sure they are
-                not accidentally included twice.
+                {{ description }}
             </p>
         </div>
 
-        <div class="flex space-x-4 mt-4">
+        <div class="flex space-x-4 mt-6">
             <Btn @click="closeModal">Cancel</Btn>
-            <Btn primary @click="confirm">Retry transaction</Btn>
+            <Btn primary @click="confirm">Confirm</Btn>
         </div>
     </Modal>
 </template>
@@ -21,7 +19,7 @@ import { DialogTitle } from '@headlessui/vue';
 import Btn from '~/components/Btn.vue';
 import Modal from '~/components/Modal.vue';
 
-defineProps<{ isOpen: boolean }>();
+defineProps<{ isOpen: boolean; title: string; description: string }>();
 
 const emit = defineEmits(['closed', 'confirm']);
 

diff --git a/resources/js/components/pages/Settings.vue b/resources/js/components/pages/Settings.vue
@@ -68,7 +68,9 @@
                                         />
                                     </span>
                                 </div>
-                                <Btn :id="`revoke-api-button__${token.name}`" error @click="revokeToken(token.name)">Revoke</Btn>
+                                <Btn :id="`revoke-api-button__${token.name}`" error @click="confirmRevoke(token.name)">
+                                    Revoke
+                                </Btn>
                             </div>
                         </div>
                     </div>
@@ -90,6 +92,13 @@
                 </div>
             </template>
         </div>
+        <ConfirmModal
+            :is-open="confirmModal"
+            title="Revoke API Token"
+            description="Do you want to revoke this API token?"
+            @closed="confirmModal = false"
+            @confirm="revokeToken"
+        />
     </div>
 </template>
 
@@ -105,6 +114,7 @@ import FormInput from '../FormInput.vue';
 import { shortString, snackbarErrors } from '~/util';
 import CopyTextIcon from '../CopyTextIcon.vue';
 import LoadingCircle from '../LoadingCircle.vue';
+import ConfirmModal from '../ConfirmModal.vue';
 
 const router = useRouter();
 const appStore = useAppStore();
@@ -114,6 +124,8 @@ const tokenName = ref();
 const enableTokenCreate = ref(false);
 const loading = ref(appStore.user || !appStore.hasMultiTenantPackage ? false : true);
 const creating = ref(false);
+const confirmModal = ref(false);
+const confirmModalName = ref();
 
 const tokens = computed(() => appStore.user?.apiTokens);
 
@@ -138,17 +150,27 @@ const createApiToken = async () => {
     }
 };
 
-const revokeToken = async (name: string) => {
-    if (!name) return;
+const revokeToken = async () => {
+    if (!confirmModalName.value) return;
+
     try {
-        await appStore.revokeToken(name);
-        snackbar.info({ title: 'Token revoked', text: `Your token ${name} has been revoked.` });
+        await appStore.revokeToken(confirmModalName.value);
+        snackbar.info({ title: 'Token revoked', text: `Your token ${confirmModalName.value} has been revoked.` });
+        confirmModalName.value = null;
     } catch (e: any) {
         if (snackbarErrors(e)) return;
         snackbar.error({ title: 'Token revocation failed' });
+    } finally {
+        confirmModal.value = false;
+        confirmModalName.value = null;
     }
 };
 
+const confirmRevoke = (name: string) => {
+    confirmModal.value = true;
+    confirmModalName.value = name;
+};
+
 const logout = async () => {
     await appStore.logout();
     router.push({ name: 'platform.auth.login' });

diff --git a/resources/js/components/slideovers/common/RetryTransactionSlideover.vue b/resources/js/components/slideovers/common/RetryTransactionSlideover.vue
@@ -28,7 +28,13 @@
             <Btn :loading="isLoading" primary is-submit>Retry</Btn>
         </div>
     </Form>
-    <ConfirmModal :is-open="modal" @closed="modal = false" @confirm="retryTransaction" />
+    <ConfirmModal
+        :is-open="modal"
+        title="Disclaimer"
+        description="Retries transactions that have failed or otherwise not been included on-chain after some time. Use with caution and ensure the transactions really aren't yet on-chain (or likely to be) to make sure they are not accidentally included twice."
+        @closed="modal = false"
+        @confirm="retryTransaction"
+    />
 </template>
 
 <script setup lang="ts">