signet-frontend/src/components/ModifyWithConfirmation.vue

<template>
  <div class="box is-flex is-flex-direction-row is-justify-content-space-between">
    <div class="my-auto">
      <input type="checkbox" v-model="allow" :aria-label="props.inputs.checkbox.label">
      {{ props.inputs.checkbox.label }}
    </div>
    <div>
      <button :class="`button ${props.inputs.button.style}`"
              :disabled="disable"
              @click="modification">
        {{ props.inputs.button.label }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  PropType,
  ref,
  watch,
} from 'vue';

type Modification = () => Promise<void>;

export interface ModificationInputs {
  checkbox: {
    label: string,
  },
  button: {
    label: string,
    style: string,
  },
}

// eslint-disable-next-line no-undef
const emits = defineEmits(['confirmed']);

// eslint-disable-next-line no-undef
const props = defineProps({
  inputs: Object as PropType<ModificationInputs>,
  condition: Object as PropType<boolean | undefined>,
  modification: Object as PropType<Modification>,
});

const allow = ref(false);

const disable = computed(() => !allow.value || props.condition);

const modTimeout = ref(undefined as number | undefined);
watch(allow, () => {
  emits('confirmed', allow.value);
  if (modTimeout.value) window.clearTimeout(modTimeout.value);
  modTimeout.value = window.setTimeout(() => {
    allow.value = false;
    modTimeout.value = undefined;
  }, 10000);
});
</script>

<style scoped lang="stylus">
</style>