<template>
  <q-dialog ref="dlgRef" persistent>
    <q-card>
      <q-card-section class="row items-center">
        <q-avatar icon="password_2" color="primary" text-color="white" />
        <span class="q-ml-sm"> iCloud Account requires Two-factor authentication.</span>
      </q-card-section>
      <q-card-section>
        <q-input
          dense
          v-model="code"
          mask="######"
          autofocus
          @keyup.enter="onOkClick"
          label="Delay (seconds)"
          type="number"
          :rules="[(val) => val.length === 6 || 'Must be 6 digits']"
        />
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="OK" color="primary" @click="onOkClick" />
        <q-btn flat label="Cancel" color="primary" @click="onDialogCancel" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { useDialogPluginComponent } from 'quasar';
import { ref } from 'vue';

const code = ref('');

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef: dlgRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();

function onOkClick() {
  onDialogOK(code.value);
}
</script>
