extensive changes

src/components/iCloudCodeDialog.vue

@@ -0,0 +1,41 @@
+<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>