Browser Extension

README.md

@@ -22,6 +22,10 @@
 
 - [Docker Mailserver](https://github.com/docker-mailserver/docker-mailserver)  
 
+## Browser Extension
+
+- [WXT](https://wxt.dev)  
+
 ## Installation
 
 ### Prerequisites
@@ -160,6 +164,32 @@ docker compose down
 docker compose up -d
 ```
 
+### Browser Extension
+
+#### Move to wxt directory
+```bash
+cd wxt
+```
+
+#### Run (development)
+```bash
+yarn dev
+yarn dev:firefox
+```
+
+#### Build (beta, testing)
+```bash
+yarn build
+yarn build:staging
+yarn build:production
+yarn build:firefox
+```
+
+#### Build (distribution)
+```bash
+yarn zip
+yarn zip:firefox
+```
 
 ## Add New Domain
 

app/src/style/components/form.css

@@ -31,6 +31,10 @@
 
     input[type=checkbox] {
         @apply form-checkbox relative w-11 h-6 p-px bg-tertiary border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-transparent disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-info checked:border-info focus:ring-offset-transparent before:inline-block before:size-5 before:bg-white checked:before:bg-white before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:transition before:ease-in-out before:duration-200;
+
+        &.xs {
+            @apply w-9 h-5 before:size-4;
+        }
     }
 
     input[type=radio] {

app/src/style/components/icon.css

@@ -92,6 +92,10 @@
         &.alert {
             mask-image: url("../../assets/icons/icon-alert.svg");
         }
+
+        &.copy {
+            mask-image: url("../../assets/icons/icon-copy.svg");
+        }
     }
 
     .logo {

wxt/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+.env*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

wxt/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

wxt/README.md

@@ -0,0 +1,2 @@
+# Readme
+

wxt/components/popup/AliasCreate.vue

@@ -0,0 +1,266 @@
+<template>
+    <div>
+        <div id="modal-create-alias" class="hs-overlay hidden">
+            <div>
+                <div>
+                    <header>
+                        <button @click="close" class="close">
+                            <i class="icon arrow-left-line icon-primary"></i>
+                        </button>
+                        <h4 class="uppercase">
+                            New Alias
+                        </h4>
+                    </header>
+                    <article>
+                        <div>
+                            <div class="pb-3">
+                                <label for="alias_description">
+                                    Description (optional)
+                                </label>
+                                <input
+                                    v-model="alias.description"
+                                    id="alias_description"
+                                    type="text"
+                                >
+                            </div>
+                            <div class="pb-3">
+                                <label for="create-alias-recipient">
+                                    Recipient(s)
+                                </label>
+                                <select
+                                    id="create-alias-recipient"
+                                    v-model="selectRecipients"
+                                    :multiple="true"
+                                    data-hs-select='{
+                                    "placeholder": "Select recipient(s)",
+                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
+                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2.5 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer border border-primary text-secondary bg-secondary leading-tight focus:border-accent",
+                                    "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-primary border border-tertiary overflow-hidden overflow-y-auto",
+                                    "optionClasses": "py-2 px-4 w-full text-secondary cursor-pointer hover:bg-secondary bg-primary",
+                                    "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-accent \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
+                                    "extraMarkup": "<div class=\"absolute top-1/2 end-3 -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-secondary \" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
+                                    }' class="hidden">
+                                    <option v-for="(recipient, index) in defaults.recipients"
+                                        v-bind:value=recipient
+                                        :selected="recipient == defaults.recipient || (!defaults.recipient && index === 0)"
+                                        :key="recipient">
+                                        {{ recipient }}
+                                    </option>
+                                </select>
+                                <p v-if="errorRecipients" class="error pt-3">{{ errorRecipients }}</p>
+                            </div>
+                            <div class="hs-accordion-group">
+                                <div class="hs-accordion" id="alias-accordion-one">
+                                    <button class="hs-accordion-toggle plain font-bold flex flex-row gap-2 mb-2 items-center" aria-expanded="false" aria-controls="alias-accordion-collapse-one">
+                                        <svg class="hs-accordion-active:hidden inline-flex size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                            <path d="M5 12h14"></path>
+                                            <path d="M12 5v14"></path>
+                                        </svg>
+                                        <svg class="hs-accordion-active:inline-flex hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                            <path d="M5 12h14"></path>
+                                        </svg>
+                                        Custom settings
+                                    </button>
+                                    <div id="alias-accordion-collapse-one" class="hs-accordion-content hidden overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="alias-accordion-one">
+                                        <div class="pb-3">
+                                            <label for="alias_format">
+                                                Format
+                                            </label>
+                                            <select id="alias_format">
+                                                <option v-for="(format, index) in formats" v-bind:value="format.value"
+                                                    :selected="format.value == defaults.alias_format || index === 0" :key="format.value">
+                                                    {{ format.name }}
+                                                </option>
+                                            </select>
+                                        </div>
+                                        <div class="pb-3">
+                                            <label for="alias_domain">
+                                                Domain
+                                            </label>
+                                            <select id="alias_domain" :disabled="!defaults.domains.length">
+                                                <option v-for="(domain, index) in defaults.domains" v-bind:domain
+                                                    :selected="domain == defaults.domain || index === 0" :key="domain">
+                                                    {{ domain }}
+                                                </option>
+                                            </select>
+                                        </div>
+                                        <div class="pb-3">
+                                            <label for="alias_from_name" class="flex gap-2">
+                                                From name
+                                                <span class="hs-tooltip [--strategy:absolute] flex">
+                                                    <i class="icon info icon-primary hs-tooltip-toggle"></i>
+                                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible text-center" role="tooltip">
+                                                        Leave blank to use<br>
+                                                        alias email address or<br>
+                                                        default From Name defined<br>
+                                                        in Settings (if set)
+                                                    </span>
+                                                </span>
+                                            </label>
+                                            <input
+                                                v-model="alias.from_name"
+                                                id="alias_from_name"
+                                                type="text"
+                                            >
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                    <footer>
+                        <nav>
+                            <button
+                                v-bind:disabled="errorRecipients.length > 0"
+                                @click="postAlias"
+                                class="cta">
+                                Create and copy to clipboard
+                            </button>
+                            <button @click="close" class="cancel">
+                                Cancel
+                            </button>
+                        </nav>
+                        <p v-if="error" class="error px-5">Error: {{ error }}</p>
+                    </footer>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import overlay from '@preline/overlay'
+import select from '@preline/select'
+import { api } from '@/lib/api'
+import events from '@/lib/events'
+import tooltip from '@preline/tooltip'
+import accordion from '@preline/accordion'
+import { Defaults, Alias } from '@/lib/types'
+
+const props = defineProps<{
+    apiToken: string
+    defaults: Defaults
+}>()
+const alias = ref({} as Alias)
+const selectRecipients = ref([] as string[])
+const formats = ref([{
+    name: 'Words',
+    value: 'words'
+}, {
+    name: 'Random',
+    value: 'random'
+}, {
+    name: 'UUID',
+    value: 'uuid'
+}])
+const error = ref('')
+const errorRecipients = ref('')
+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(',')
+    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
+
+    try {
+        loading.value = true
+        const res = await api.createAlias(props.apiToken, alias.value)
+        console.log('Created alias:', res)
+        copyAlias(res.alias.name)
+        error.value = ''
+        events.emit('alias.create', { alias: res.alias})
+        close()
+    } catch (err) {
+        error.value = 'An unexpected error occurred'
+        console.error('Create alias error:', err)
+    } finally {
+        loading.value = false
+    }
+}
+
+const close = () => {
+    resetAlias()
+    error.value = ''
+
+    document.removeEventListener('keydown', handleKeydown)
+
+    const accordionInstance = accordion.getInstance('#alias-accordion-one', true);
+    if (accordionInstance && 'element' in accordionInstance) {
+        accordionInstance.element.hide()
+    }
+
+    const modal = document.querySelector('#modal-create-alias') as any
+    overlay.close(modal)
+
+    const multiselect = select.getInstance('#create-alias-recipient' as any, true) as any
+    multiselect.element.setValue([props.defaults.recipient])
+}
+
+const addEvents = () => {
+    const modal = overlay.getInstance('#modal-create-alias' as any, true) as any
+    modal.element.on('close', () => {
+        close()
+    })
+    modal.element.on('open', () => {
+        document.addEventListener('keydown', handleKeydown)
+        focusFirstInput()
+    })
+
+    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 handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+        event.preventDefault()
+        postAlias()
+    }
+}
+
+const focusFirstInput = () => {
+    const input = document.getElementById('alias_description')
+    input?.focus()
+}
+
+const validate = (rcps: string) => {
+    if (rcps.length === 0) {
+        error.value = 'Select one or more recipients'
+        return false
+    }
+
+    return true
+}
+
+const resetAlias = () => {
+    const multiselect = select.getInstance('#create-alias-recipient' as any, true) as any
+    multiselect.element.setValue([props.defaults.recipient])
+    selectRecipients.value = [props.defaults.recipient]
+    alias.value = {} as Alias
+    alias.value.domain = props.defaults.domain
+}
+
+const copyAlias = (alias: string) => {
+    navigator.clipboard.writeText(alias)
+}
+
+onMounted(async () => {
+    overlay.autoInit()
+    select.autoInit()
+    tooltip.autoInit()
+    accordion.autoInit()
+    addEvents()
+    resetAlias()
+})
+</script>