diff --git a/wxt/components/popup/AliasCreate.vue b/wxt/components/popup/AliasCreate.vue index 9b6d3db6..ae88c609 100644 --- a/wxt/components/popup/AliasCreate.vue +++ b/wxt/components/popup/AliasCreate.vue @@ -13,6 +13,18 @@
+
+ + +

Custom alias must be between 6 and 12 characters

+
@@ -156,13 +172,18 @@ const formats = ref([{ }]) const error = ref('') const errorRecipients = ref('') +const errorLocalPart = ref(false) const loading = ref(false) const postAlias = async () => { if (loading.value) return - alias.value.domain = (document.getElementById('alias_domain') as HTMLInputElement).value alias.value.recipients = selectRecipients.value.join(',') + if (!validate(alias.value.recipients)) return + + const select = document.getElementById('alias_domain') as HTMLSelectElement + const selectedOption = select.options[select.selectedIndex] + const domain = selectedOption.getAttribute('domain') alias.value.enabled = true const formatElement = document.getElementById('alias_format') as HTMLInputElement; @@ -170,11 +191,12 @@ const postAlias = async () => { alias.value.format = formatElement.value; } - if (!validate(alias.value.recipients)) return + let req = { ...alias.value } + req.domain = domain || '' try { loading.value = true - const res = await api.createAlias(props.apiToken, alias.value) + const res = await api.createAlias(props.apiToken, req) console.log('Created alias:', res) copyAlias(res.alias.name) error.value = '' @@ -191,6 +213,7 @@ const postAlias = async () => { const close = () => { resetAlias() error.value = '' + errorLocalPart.value = false document.removeEventListener('keydown', handleKeydown) @@ -214,12 +237,24 @@ const addEvents = () => { modal.element.on('open', () => { document.addEventListener('keydown', handleKeydown) focusFirstInput() + updateFormats() }) const multiselect = select.getInstance('#create-alias-recipient' as any, true) as any multiselect.element.on('change', (val: any) => { errorRecipients.value = val.length === 0 ? 'Select one or more recipients' : '' }) + + const domainSelect = document.getElementById('alias_domain') as HTMLSelectElement + if (domainSelect) { + domainSelect.addEventListener('change', updateFormats) + domainSelect.addEventListener('change', updateFormat) + } + + const formatElement = document.getElementById('alias_format') as HTMLInputElement + if (formatElement) { + formatElement.addEventListener('change', updateFormat) + } } const handleKeydown = (event: KeyboardEvent) => { @@ -240,7 +275,18 @@ const validate = (rcps: string) => { return false } - return true + if (alias.value.format === 'custom') { + if (!alias.value.local_part) { + errorLocalPart.value = true + return false + } + + errorLocalPart.value = alias.value.local_part.length < 6 || alias.value.local_part.length > 12 + } else { + errorLocalPart.value = false + } + + return !errorLocalPart.value } const resetAlias = () => { @@ -255,6 +301,45 @@ const copyAlias = (alias: string) => { navigator.clipboard.writeText(alias) } +const updateFormats = () => { + const select = document.getElementById('alias_domain') as HTMLSelectElement + const selectedOption = select.options[select.selectedIndex] + const domain = selectedOption.getAttribute('domain') + const isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(domain || '') + + if (isUUID) { + formats.value = [{ + name: 'Words', + value: 'words' + }, { + name: 'Random', + value: 'random' + }, { + name: 'UUID', + value: 'uuid' + }, { + name: 'Custom', + value: 'custom' + }] + } else { + formats.value = [{ + name: 'Words', + value: 'words' + }, { + name: 'Random', + value: 'random' + }, { + name: 'UUID', + value: 'uuid' + }] + } +} + +const updateFormat = () => { + const formatElement = document.getElementById('alias_format') as HTMLInputElement + alias.value.format = formatElement.value +} + onMounted(async () => { overlay.autoInit() select.autoInit() diff --git a/wxt/components/popup/Settings.vue b/wxt/components/popup/Settings.vue index 69b49c1a..efd876dd 100644 --- a/wxt/components/popup/Settings.vue +++ b/wxt/components/popup/Settings.vue @@ -65,6 +65,7 @@ const processResponse = (res: any) => { const defaults = { domain: res.domain, domains: res.domains, + custom_domains: res.custom_domains, recipient: res.recipient, recipients: res.recipients, alias_format: res.alias_format, diff --git a/wxt/entrypoints/content.ts b/wxt/entrypoints/content.ts index eeed3a79..b4c4a3de 100644 --- a/wxt/entrypoints/content.ts +++ b/wxt/entrypoints/content.ts @@ -241,8 +241,16 @@ async function postAlias(): Promise { return } + let domain = defaults.domain + if (defaults.custom_domains.length > 0) { + const customDomain = defaults.custom_domains.find(d => d.name === domain) + if (customDomain) { + domain = customDomain.id + } + } + const alias = { - domain: defaults.domain, + domain: domain, recipients: defaults.recipient, format: defaults.alias_format, enabled: true, diff --git a/wxt/lib/types.ts b/wxt/lib/types.ts index 3a286706..e1b4570e 100644 --- a/wxt/lib/types.ts +++ b/wxt/lib/types.ts @@ -8,11 +8,22 @@ export interface Alias { format: string from_name: string catch_all: boolean + local_part: string +} + +export interface CustomDomain { + id: string + name: string + enabled: boolean + owner_verified_at: string | null + mx_verified_at: string | null + send_verified_at: string | null } export interface Defaults { domain: string domains: string[] + custom_domains: CustomDomain[] alias_format: string recipient: string recipients: string[]