@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/components/TwoFactorSetup.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { ref } from 'vue';
+import TotpInput from './TotpInput.vue';
+
+const props = defineProps({
+    qrUri: { type: String, default: '' },
+    recoveryCodes: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['confirm', 'cancel']);
+
+const step = ref(1);
+const code = ref('');
+const error = ref('');
+
+function onCodeComplete(val) {
+    code.value = val;
+}
+
+function confirmCode() {
+    if (code.value.length !== 6) {
+        error.value = 'Please enter the full 6-digit code.';
+        return;
+    }
+    error.value = '';
+    emit('confirm', code.value);
+    step.value = 3;
+}
+
+function copyRecoveryCodes() {
+    const text = props.recoveryCodes.join('\n');
+    navigator.clipboard?.writeText(text);
+}
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Step 1: QR Code -->
+        <div v-if="step === 1">
+            <h3 class="mb-4 text-sm font-semibold text-white">Step 1: Scan QR Code</h3>
+            <p class="mb-4 text-sm text-neutral-400">
+                Scan the code below with your authenticator app (Google Authenticator, Authy, etc.), or manually enter
+                the setup key.
+            </p>
+            <div class="rounded-lg border border-white/[0.06] bg-neutral-950 p-4">
+                <p class="mb-2 text-xs font-medium text-neutral-500">Setup URI (enter manually if needed):</p>
+                <code class="block break-all text-xs text-cyan-400">{{ qrUri }}</code>
+            </div>
+            <button
+                type="button"
+                class="mt-4 rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-5 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400"
+                @click="step = 2"
+            >
+                Next: Verify Code
+            </button>
+        </div>
+
+        <!-- Step 2: Verify TOTP -->
+        <div v-if="step === 2">
+            <h3 class="mb-4 text-sm font-semibold text-white">Step 2: Verify Code</h3>
+            <p class="mb-4 text-sm text-neutral-400">
+                Enter the 6-digit code from your authenticator app to confirm setup.
+            </p>
+            <TotpInput v-model="code" @complete="onCodeComplete" />
+            <p v-if="error" class="mt-2 text-sm text-rose-400">{{ error }}</p>
+            <div class="mt-4 flex gap-3">
+                <button
+                    type="button"
+                    class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-5 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400"
+                    @click="confirmCode"
+                >
+                    Confirm & Enable 2FA
+                </button>
+                <button
+                    type="button"
+                    class="rounded-lg border border-white/10 px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200"
+                    @click="emit('cancel')"
+                >
+                    Cancel
+                </button>
+            </div>
+        </div>
+
+        <!-- Step 3: Recovery Codes -->
+        <div v-if="step === 3">
+            <h3 class="mb-4 text-sm font-semibold text-white">Step 3: Save Recovery Codes</h3>
+            <p class="mb-4 text-sm text-neutral-400">
+                Save these recovery codes in a safe place. Each code can only be used once to access your account if you
+                lose your authenticator device.
+            </p>
+            <div class="rounded-lg border border-white/[0.06] bg-neutral-950 p-4">
+                <div class="grid grid-cols-2 gap-2">
+                    <code
+                        v-for="(rc, idx) in recoveryCodes"
+                        :key="idx"
+                        class="rounded bg-neutral-900 px-3 py-1.5 text-center text-sm font-mono text-neutral-200"
+                    >
+                        {{ rc }}
+                    </code>
+                </div>
+            </div>
+            <div class="mt-4 flex gap-3">
+                <button
+                    type="button"
+                    class="rounded-lg border border-white/10 px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200"
+                    @click="copyRecoveryCodes"
+                >
+                    Copy Codes
+                </button>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/VariableTokenInput.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+    placeholder: { type: String, default: '' },
+    multiline: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const showDropdown = ref(false);
+const inputRef = ref(null);
+
+const variables = [
+    { token: '{{ticket.reference}}', label: 'Ticket Reference' },
+    { token: '{{ticket.subject}}', label: 'Ticket Subject' },
+    { token: '{{ticket.status}}', label: 'Ticket Status' },
+    { token: '{{agent.name}}', label: 'Agent Name' },
+    { token: '{{requester.name}}', label: 'Requester Name' },
+    { token: '{{requester.email}}', label: 'Requester Email' },
+    { token: '{{department.name}}', label: 'Department Name' },
+];
+
+function insertVariable(token) {
+    const el = inputRef.value;
+    if (!el) {
+        emit('update:modelValue', (props.modelValue || '') + token);
+        showDropdown.value = false;
+        return;
+    }
+    const start = el.selectionStart || 0;
+    const end = el.selectionEnd || 0;
+    const text = props.modelValue || '';
+    const newText = text.substring(0, start) + token + text.substring(end);
+    emit('update:modelValue', newText);
+    showDropdown.value = false;
+    // Restore cursor position after Vue updates
+    requestAnimationFrame(() => {
+        el.focus();
+        const pos = start + token.length;
+        el.setSelectionRange(pos, pos);
+    });
+}
+
+function onInput(event) {
+    emit('update:modelValue', event.target.value);
+}
+
+const inputClass =
+    'w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]';
+</script>
+
+<template>
+    <div class="relative">
+        <textarea
+            v-if="multiline"
+            ref="inputRef"
+            :value="modelValue"
+            :placeholder="placeholder"
+            rows="3"
+            :class="inputClass + ' resize-y'"
+            @input="onInput"
+        />
+        <input
+            v-else
+            ref="inputRef"
+            :value="modelValue"
+            :placeholder="placeholder"
+            type="text"
+            :class="inputClass"
+            @input="onInput"
+        />
+
+        <!-- Insert Variable button -->
+        <div class="mt-1.5 flex justify-end">
+            <div class="relative">
+                <button
+                    type="button"
+                    class="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium text-[var(--esc-panel-text-muted)] transition-colors hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
+                    @click="showDropdown = !showDropdown"
+                >
+                    <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
+                        />
+                    </svg>
+                    Insert Variable
+                </button>
+                <div
+                    v-if="showDropdown"
+                    class="absolute right-0 bottom-full z-10 mb-1 w-48 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] py-1 shadow-xl"
+                >
+                    <button
+                        v-for="v in variables"
+                        :key="v.token"
+                        type="button"
+                        class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors hover:bg-[var(--esc-panel-hover)]"
+                        @click="insertVariable(v.token)"
+                    >
+                        <span class="rounded bg-cyan-500/10 px-1.5 py-0.5 font-mono text-[10px] text-cyan-400">{{
+                            v.token
+                        }}</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/WorkflowActionConfig.vue

@@ -0,0 +1,287 @@
+<script setup>
+import { computed } from 'vue';
+import VariableTokenInput from './VariableTokenInput.vue';
+
+const props = defineProps({
+    actionType: { type: String, required: true },
+    modelValue: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const headersPlaceholder = '{"Authorization": "Bearer ..."}';
+const config = computed(() => props.modelValue || {});
+
+function update(key, value) {
+    emit('update:modelValue', { ...config.value, [key]: value });
+}
+
+const statusOptions = [
+    'open',
+    'in_progress',
+    'waiting_on_customer',
+    'waiting_on_agent',
+    'escalated',
+    'resolved',
+    'closed',
+];
+const priorityOptions = ['low', 'medium', 'high', 'urgent', 'critical'];
+const assignModes = [
+    { value: 'specific', label: 'Specific agent' },
+    { value: 'least_busy', label: 'Least busy agent' },
+    { value: 'round_robin', label: 'Round robin' },
+];
+const delayUnits = [
+    { value: 'minutes', label: 'Minutes' },
+    { value: 'hours', label: 'Hours' },
+    { value: 'days', label: 'Days' },
+];
+const webhookMethods = ['POST', 'PUT', 'PATCH'];
+
+const inputClass =
+    'w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]';
+const selectClass =
+    'rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none';
+const labelClass = 'block text-xs font-medium text-[var(--esc-panel-text-muted)] mb-1';
+</script>
+
+<template>
+    <div class="space-y-3 pt-2">
+        <!-- Assign Agent -->
+        <template v-if="actionType === 'assign_agent'">
+            <div>
+                <label :class="labelClass">Assignment mode</label>
+                <select
+                    :class="selectClass"
+                    :value="config.mode || 'specific'"
+                    @change="update('mode', $event.target.value)"
+                >
+                    <option v-for="m in assignModes" :key="m.value" :value="m.value">{{ m.label }}</option>
+                </select>
+            </div>
+            <div v-if="(config.mode || 'specific') === 'specific'">
+                <label :class="labelClass">Agent</label>
+                <input
+                    :class="inputClass"
+                    :value="config.agent || ''"
+                    placeholder="Agent ID or email"
+                    @input="update('agent', $event.target.value)"
+                />
+            </div>
+        </template>
+
+        <!-- Change Status -->
+        <template v-else-if="actionType === 'change_status'">
+            <div>
+                <label :class="labelClass">New status</label>
+                <select
+                    :class="selectClass"
+                    :value="config.status || ''"
+                    @change="update('status', $event.target.value)"
+                >
+                    <option value="">Select status...</option>
+                    <option v-for="s in statusOptions" :key="s" :value="s">{{ s }}</option>
+                </select>
+            </div>
+        </template>
+
+        <!-- Change Priority -->
+        <template v-else-if="actionType === 'change_priority'">
+            <div>
+                <label :class="labelClass">New priority</label>
+                <select
+                    :class="selectClass"
+                    :value="config.priority || ''"
+                    @change="update('priority', $event.target.value)"
+                >
+                    <option value="">Select priority...</option>
+                    <option v-for="p in priorityOptions" :key="p" :value="p">{{ p }}</option>
+                </select>
+            </div>
+        </template>
+
+        <!-- Add / Remove Tag -->
+        <template v-else-if="actionType === 'add_tag' || actionType === 'remove_tag'">
+            <div>
+                <label :class="labelClass">Tag name</label>
+                <input
+                    :class="inputClass"
+                    :value="config.tag || ''"
+                    placeholder="Enter tag name"
+                    @input="update('tag', $event.target.value)"
+                />
+            </div>
+        </template>
+
+        <!-- Move Department -->
+        <template v-else-if="actionType === 'move_department'">
+            <div>
+                <label :class="labelClass">Department</label>
+                <input
+                    :class="inputClass"
+                    :value="config.department || ''"
+                    placeholder="Department name or ID"
+                    @input="update('department', $event.target.value)"
+                />
+            </div>
+        </template>
+
+        <!-- Add Internal Note -->
+        <template v-else-if="actionType === 'add_note'">
+            <div>
+                <label :class="labelClass">Note content</label>
+                <VariableTokenInput
+                    :model-value="config.body || ''"
+                    :multiline="true"
+                    placeholder="Write the note..."
+                    @update:model-value="update('body', $event)"
+                />
+            </div>
+        </template>
+
+        <!-- Send Email -->
+        <template v-else-if="actionType === 'send_email'">
+            <div>
+                <label :class="labelClass">To</label>
+                <VariableTokenInput
+                    :model-value="config.to || ''"
+                    placeholder="Recipient email or variable"
+                    @update:model-value="update('to', $event)"
+                />
+            </div>
+            <div>
+                <label :class="labelClass">Subject</label>
+                <VariableTokenInput
+                    :model-value="config.subject || ''"
+                    placeholder="Email subject"
+                    @update:model-value="update('subject', $event)"
+                />
+            </div>
+            <div>
+                <label :class="labelClass">Body</label>
+                <VariableTokenInput
+                    :model-value="config.body || ''"
+                    :multiline="true"
+                    placeholder="Email body..."
+                    @update:model-value="update('body', $event)"
+                />
+            </div>
+        </template>
+
+        <!-- Send Webhook -->
+        <template v-else-if="actionType === 'send_webhook'">
+            <div>
+                <label :class="labelClass">URL</label>
+                <input
+                    :class="inputClass"
+                    :value="config.url || ''"
+                    placeholder="https://..."
+                    @input="update('url', $event.target.value)"
+                />
+            </div>
+            <div>
+                <label :class="labelClass">Method</label>
+                <select
+                    :class="selectClass"
+                    :value="config.method || 'POST'"
+                    @change="update('method', $event.target.value)"
+                >
+                    <option v-for="m in webhookMethods" :key="m" :value="m">{{ m }}</option>
+                </select>
+            </div>
+            <div>
+                <label :class="labelClass">Headers (JSON)</label>
+                <input
+                    :class="inputClass"
+                    :value="config.headers || ''"
+                    :placeholder="headersPlaceholder"
+                    @input="update('headers', $event.target.value)"
+                />
+            </div>
+            <div>
+                <label :class="labelClass">Body template</label>
+                <VariableTokenInput
+                    :model-value="config.body || ''"
+                    :multiline="true"
+                    placeholder="JSON body with variables..."
+                    @update:model-value="update('body', $event)"
+                />
+            </div>
+        </template>
+
+        <!-- Delay -->
+        <template v-else-if="actionType === 'delay'">
+            <div class="flex items-center gap-3">
+                <div class="flex-1">
+                    <label :class="labelClass">Duration</label>
+                    <input
+                        type="number"
+                        min="1"
+                        :class="inputClass"
+                        :value="config.duration || 1"
+                        @input="update('duration', parseInt($event.target.value) || 1)"
+                    />
+                </div>
+                <div class="flex-1">
+                    <label :class="labelClass">Unit</label>
+                    <select
+                        :class="selectClass + ' w-full'"
+                        :value="config.unit || 'hours'"
+                        @change="update('unit', $event.target.value)"
+                    >
+                        <option v-for="u in delayUnits" :key="u.value" :value="u.value">{{ u.label }}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="rounded-lg bg-orange-500/10 px-3 py-2 text-xs text-orange-400">
+                Wait {{ config.duration || 1 }} {{ config.unit || 'hours' }}, then continue...
+            </div>
+        </template>
+
+        <!-- Apply Macro -->
+        <template v-else-if="actionType === 'apply_macro'">
+            <div>
+                <label :class="labelClass">Macro</label>
+                <input
+                    :class="inputClass"
+                    :value="config.macro || ''"
+                    placeholder="Macro name or ID"
+                    @input="update('macro', $event.target.value)"
+                />
+            </div>
+        </template>
+
+        <!-- Snooze -->
+        <template v-else-if="actionType === 'snooze'">
+            <div class="flex items-center gap-3">
+                <div class="flex-1">
+                    <label :class="labelClass">Duration</label>
+                    <input
+                        type="number"
+                        min="1"
+                        :class="inputClass"
+                        :value="config.duration || 1"
+                        @input="update('duration', parseInt($event.target.value) || 1)"
+                    />
+                </div>
+                <div class="flex-1">
+                    <label :class="labelClass">Unit</label>
+                    <select
+                        :class="selectClass + ' w-full'"
+                        :value="config.unit || 'hours'"
+                        @change="update('unit', $event.target.value)"
+                    >
+                        <option v-for="u in delayUnits" :key="u.value" :value="u.value">{{ u.label }}</option>
+                    </select>
+                </div>
+            </div>
+        </template>
+
+        <!-- Close Ticket (no config needed) -->
+        <template v-else-if="actionType === 'close_ticket'">
+            <p class="text-xs text-[var(--esc-panel-text-muted)]">
+                This action closes the ticket immediately. No configuration needed.
+            </p>
+        </template>
+    </div>
+</template>