Browser Extension - Support for custom domains

wxt/components/popup/AliasCreate.vue

@@ -13,6 +13,18 @@
                     </header>
                     <article>
                         <div>
+                            <div v-if="alias.format === 'custom'" class="pb-3">
+                                <label for="alias_custom_alias">
+                                    Custom alias (6-12 alphanumeric chars.):
+                                </label>
+                                <input 
+                                    v-model="alias.local_part"
+                                    v-bind:class="{ 'error': errorLocalPart }"
+                                    id="alias_custom_alias"
+                                    type="text"
+                                >
+                                <p v-if="errorLocalPart" class="error">Custom alias must be between 6 and 12 characters</p>
+                            </div>
                             <div class="pb-3">
                                 <label for="alias_description">
                                     Description (optional)
@@ -82,6 +94,10 @@
                                                     :selected="domain == defaults.domain || index === 0" :key="domain">
                                                     {{ domain }}
                                                 </option>
+                                                <option v-for="(domain, _) in defaults.custom_domains" v-bind:domain.attribute:value="domain.id"
+                                                    :selected="domain.name == alias.domain" :key="domain.id">
+                                                    {{ domain.name }}
+                                                </option>
                                             </select>
                                         </div>
                                         <div class="pb-3">
@@ -156,25 +172,31 @@ 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;
     if (formatElement) {
         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()

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,

wxt/entrypoints/content.ts

@@ -241,8 +241,16 @@ async function postAlias(): Promise<string | undefined> {
     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,

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[]