feat: implement provider

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
2026-03-28 12:43:42 -04:00
parent c322317ddc
commit 4c948d177a
39 changed files with 2267 additions and 113 deletions
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { ServiceIdentity } from '@KTXM/MailManager/types/service'
+import type { ProviderAuthPanelProps, ProviderAuthPanelEmits } from '@KTXM/MailManager/types/integration'
+
+const props = defineProps<ProviderAuthPanelProps>()
+const emit = defineEmits<ProviderAuthPanelEmits>()
+
+const identity = ref(props.prefilledIdentity || props.emailAddress || '')
+const secret = ref(props.prefilledSecret || '')
+
+const rules = {
+  required: (value: unknown) => !!value || 'This field is required'
+}
+
+const isValid = computed(() => !!identity.value && !!secret.value)
+
+const currentIdentity = computed((): ServiceIdentity | null => {
+  if (!isValid.value) {
+    return null
+  }
+
+  return {
+    type: 'BA',
+    identity: identity.value,
+    secret: secret.value,
+  }
+})
+
+watch(
+  currentIdentity,
+  value => {
+    if (value) {
+      emit('update:modelValue', value)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  isValid,
+  value => {
+    emit('valid', value)
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.modelValue,
+  value => {
+    if (value?.type === 'BA') {
+      identity.value = value.identity || ''
+      secret.value = value.secret || ''
+    }
+  }
+)
+
+watch(
+  () => props.emailAddress,
+  value => {
+    if (value && !identity.value) {
+      identity.value = value
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div class="imap-auth-panel">
+    <h3 class="text-h6 mb-4">Authentication</h3>
+    <p class="text-body-2 mb-6">Provide the username and password your IMAP server expects.</p>
+
+    <v-alert type="info" variant="tonal" class="mb-4">
+      <template #prepend>
+        <v-icon>mdi-information</v-icon>
+      </template>
+      <div class="text-caption">
+        Most IMAP servers use your full email address as the username. Use an app password if your mail host requires one.
+      </div>
+    </v-alert>
+
+    <v-text-field
+      v-model="identity"
+      label="Username / Email"
+      hint="Account login used by the IMAP server"
+      persistent-hint
+      variant="outlined"
+      prepend-inner-icon="mdi-account"
+      class="mb-4"
+      autocomplete="username"
+      autocorrect="off"
+      autocapitalize="none"
+      :rules="[rules.required]"
+    />
+
+    <v-text-field
+      v-model="secret"
+      type="password"
+      label="Password"
+      hint="Password or app-specific password"
+      persistent-hint
+      variant="outlined"
+      prepend-inner-icon="mdi-lock"
+      class="mb-4"
+      autocomplete="current-password"
+      :rules="[rules.required]"
+    />
+  </div>
+</template>
+
+<style scoped>
+.imap-auth-panel {
+  max-width: 800px;
+}
+
+.text-h6 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 2rem;
+  letter-spacing: 0.0125em;
+}
+
+.text-body-2 {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.0178571429em;
+  color: rgba(var(--v-theme-on-surface), 0.7);
+}
+</style>