Enterprise UI redesign — Phases 14–22 (Docusign-branded migration console) #1

Merged
paulh merged 24 commits from ui-redesign into master 2026-04-21 15:30:44 -05:00
8 changed files with 22 additions and 22 deletions
Showing only changes of commit 6f684f330f - Show all commits

View File

@ -129,8 +129,8 @@
<button id="chip-adobe" class="conn-pill disconnected" aria-label="Adobe Sign connection"> <button id="chip-adobe" class="conn-pill disconnected" aria-label="Adobe Sign connection">
<span class="conn-dot"></span>Adobe Sign <span class="conn-dot"></span>Adobe Sign
</button> </button>
<button id="chip-docusign" class="conn-pill disconnected" aria-label="DocuSign connection"> <button id="chip-docusign" class="conn-pill disconnected" aria-label="Docusign connection">
<span class="conn-dot"></span>DocuSign <span class="conn-dot"></span>Docusign
</button> </button>
<!-- User avatar --> <!-- User avatar -->
<div class="avatar" title="Logged in" aria-label="User">M</div> <div class="avatar" title="Logged in" aria-label="User">M</div>

View File

@ -1,4 +1,4 @@
// Auth: connect/disconnect Adobe Sign and DocuSign, auth status chips // Auth: connect/disconnect Adobe Sign and Docusign, auth status chips
import { api } from './api.js'; import { api } from './api.js';
import { state, setState } from './state.js'; import { state, setState } from './state.js';
@ -13,7 +13,7 @@ export async function refreshAuth() {
adobe: !!data.adobe, adobe: !!data.adobe,
docusign: !!data.docusign, docusign: !!data.docusign,
adobeLabel: data.adobe_label || 'Adobe Sign', adobeLabel: data.adobe_label || 'Adobe Sign',
docusignLabel: data.docusign_label || 'DocuSign', docusignLabel: data.docusign_label || 'Docusign',
}); });
} catch (e) { } catch (e) {
console.warn('Auth status failed:', e.message); console.warn('Auth status failed:', e.message);
@ -25,7 +25,7 @@ export async function refreshAuth() {
export function renderAuthChips() { export function renderAuthChips() {
renderChip('chip-adobe', state.auth.adobe, 'Adobe Sign', onClickAdobe); renderChip('chip-adobe', state.auth.adobe, 'Adobe Sign', onClickAdobe);
renderChip('chip-docusign', state.auth.docusign, 'DocuSign', onClickDocusign); renderChip('chip-docusign', state.auth.docusign, 'Docusign', onClickDocusign);
} }
function renderChip(id, connected, label, onClick) { function renderChip(id, connected, label, onClick) {
@ -102,11 +102,11 @@ async function connectDocusign() {
refreshTemplates(); refreshTemplates();
} else { } else {
renderAuthChips(); renderAuthChips();
showToast('DocuSign error: ' + (data.error || 'unknown'), 'error'); showToast('Docusign error: ' + (data.error || 'unknown'), 'error');
} }
} catch (e) { } catch (e) {
renderAuthChips(); renderAuthChips();
showToast('DocuSign connection failed: ' + e.message, 'error'); showToast('Docusign connection failed: ' + e.message, 'error');
} }
} }

View File

@ -77,7 +77,7 @@ function _render() {
${_th('adobe_template_name', 'Template')} ${_th('adobe_template_name', 'Template')}
${_th('action', 'Action')} ${_th('action', 'Action')}
${_th('status', 'Status')} ${_th('status', 'Status')}
<th>DocuSign ID</th> <th>Docusign ID</th>
<th>Checksum</th> <th>Checksum</th>
</tr> </tr>
</thead> </thead>

View File

@ -49,7 +49,7 @@ export function showOptionsModal(ids) {
<button class="toggle" id="opt-dry-run" role="switch" aria-checked="false"></button> <button class="toggle" id="opt-dry-run" role="switch" aria-checked="false"></button>
<div class="option-body"> <div class="option-body">
<div class="option-label">Dry Run</div> <div class="option-label">Dry Run</div>
<div class="option-desc">Validate and preview without creating DocuSign templates</div> <div class="option-desc">Validate and preview without creating Docusign templates</div>
</div> </div>
</div> </div>
@ -59,7 +59,7 @@ export function showOptionsModal(ids) {
class="toggle ${settings.defaultOverwrite ? 'on' : ''}"></button> class="toggle ${settings.defaultOverwrite ? 'on' : ''}"></button>
<div class="option-body"> <div class="option-body">
<div class="option-label">Overwrite Existing</div> <div class="option-label">Overwrite Existing</div>
<div class="option-desc">Update DocuSign templates that already exist (default: skip)</div> <div class="option-desc">Update Docusign templates that already exist (default: skip)</div>
</div> </div>
</div> </div>
@ -67,7 +67,7 @@ export function showOptionsModal(ids) {
<button class="toggle on" id="opt-include-docs" role="switch" aria-checked="true"></button> <button class="toggle on" id="opt-include-docs" role="switch" aria-checked="true"></button>
<div class="option-body"> <div class="option-body">
<div class="option-label">Include Documents</div> <div class="option-label">Include Documents</div>
<div class="option-desc">Embed PDFs in the DocuSign template payload</div> <div class="option-desc">Embed PDFs in the Docusign template payload</div>
</div> </div>
</div> </div>

View File

@ -89,7 +89,7 @@ export function renderSettings() {
<div class="setting-row"> <div class="setting-row">
<div class="setting-body"> <div class="setting-body">
<div class="setting-label">Include Documents by Default</div> <div class="setting-label">Include Documents by Default</div>
<div class="setting-desc">Embed PDFs in the DocuSign template payload</div> <div class="setting-desc">Embed PDFs in the Docusign template payload</div>
</div> </div>
<div class="setting-control"> <div class="setting-control">
<button class="toggle ${s.defaultIncludeDocs !== false ? 'on' : ''}" id="set-include-docs" <button class="toggle ${s.defaultIncludeDocs !== false ? 'on' : ''}" id="set-include-docs"
@ -161,14 +161,14 @@ async function _loadConnInfo() {
</span> </span>
</div> </div>
<div class="conn-info-row"> <div class="conn-info-row">
<span class="conn-info-label">DocuSign</span> <span class="conn-info-label">Docusign</span>
<span class="conn-info-value">${data.docusign ? 'Connected' : 'Not connected'}</span> <span class="conn-info-value">${data.docusign ? 'Connected' : 'Not connected'}</span>
<span class="conn-info-status"> <span class="conn-info-status">
<span class="badge ${data.docusign ? 'badge-green' : 'badge-gray'}">${data.docusign ? '● Connected' : '○ Disconnected'}</span> <span class="badge ${data.docusign ? 'badge-green' : 'badge-gray'}">${data.docusign ? '● Connected' : '○ Disconnected'}</span>
</span> </span>
</div> </div>
<div class="conn-info-row"> <div class="conn-info-row">
<span class="conn-info-label">DocuSign Account ID</span> <span class="conn-info-label">Docusign Account ID</span>
<span class="conn-info-value mono">${escHtml(data.docusign_account_id || '—')}</span> <span class="conn-info-value mono">${escHtml(data.docusign_account_id || '—')}</span>
<span class="conn-info-status"></span> <span class="conn-info-status"></span>
</div> </div>

View File

@ -8,7 +8,7 @@ export const state = {
adobe: false, adobe: false,
docusign: false, docusign: false,
adobeLabel: 'Adobe Sign', adobeLabel: 'Adobe Sign',
docusignLabel: 'DocuSign', docusignLabel: 'Docusign',
}, },
templates: [], // [{ adobe_id, name, status, blockers, warnings, ... }] templates: [], // [{ adobe_id, name, status, blockers, warnings, ... }]
selectedIds: new Set(), selectedIds: new Set(),

View File

@ -80,7 +80,7 @@ function _render() {
${!state.auth.adobe || !state.auth.docusign ? ` ${!state.auth.adobe || !state.auth.docusign ? `
<div class="callout info"> <div class="callout info">
<span class="callout-icon"></span> <span class="callout-icon"></span>
Connect both Adobe Sign and DocuSign in the top bar to load templates. Connect both Adobe Sign and Docusign in the top bar to load templates.
</div> </div>
` : ''} ` : ''}
@ -182,7 +182,7 @@ function _templateRow(t) {
<td>${formatRelative(t.adobe_modified)}</td> <td>${formatRelative(t.adobe_modified)}</td>
<td> <td>
${t.docusign_id ${t.docusign_id
? `<span class="badge badge-blue" title="${escHtml(t.docusign_id)}">In DocuSign</span>` ? `<span class="badge badge-blue" title="${escHtml(t.docusign_id)}">In Docusign</span>`
: `<span class="badge badge-gray">Not Migrated</span>`} : `<span class="badge badge-gray">Not Migrated</span>`}
</td> </td>
<td> <td>
@ -401,7 +401,7 @@ function _renderDetailTab(t, tabKey) {
</div> </div>
${t.docusign_id ? ` ${t.docusign_id ? `
<div class="conn-info-row"> <div class="conn-info-row">
<span class="conn-info-label">DocuSign Template ID</span> <span class="conn-info-label">Docusign Template ID</span>
<span class="conn-info-value mono">${escHtml(t.docusign_id)}</span> <span class="conn-info-value mono">${escHtml(t.docusign_id)}</span>
</div>` : ''} </div>` : ''}
</div> </div>
@ -448,7 +448,7 @@ function _renderDetailTab(t, tabKey) {
<div class="card"> <div class="card">
<div class="table-wrap"> <div class="table-wrap">
<table> <table>
<thead><tr><th>Time</th><th>Action</th><th>Status</th><th>DocuSign ID</th></tr></thead> <thead><tr><th>Time</th><th>Action</th><th>Status</th><th>Docusign ID</th></tr></thead>
<tbody> <tbody>
${[...records].reverse().map(r => ` ${[...records].reverse().map(r => `
<tr> <tr>

View File

@ -24,7 +24,7 @@ export async function renderVerification(preloadedIds = null) {
if (!state.auth.docusign) { if (!state.auth.docusign) {
outlet.innerHTML = ` outlet.innerHTML = `
<div class="page-header"><div><div class="page-title">Verification</div></div></div> <div class="page-header"><div><div class="page-title">Verification</div></div></div>
<div class="callout info"><span class="callout-icon"></span>Connect DocuSign to send verification envelopes.</div>`; <div class="callout info"><span class="callout-icon"></span>Connect Docusign to send verification envelopes.</div>`;
return; return;
} }
@ -54,7 +54,7 @@ function _renderVerifyView(candidates) {
<div class="callout info" style="margin-bottom:20px"> <div class="callout info" style="margin-bottom:20px">
<span class="callout-icon"></span> <span class="callout-icon"></span>
Verification sends a real DocuSign envelope using each template. Test envelopes should be voided after use. Verification sends a real Docusign envelope using each template. Test envelopes should be voided after use.
Configure default recipient in <a href="#/settings" style="color:var(--cobalt)">Settings</a>. Configure default recipient in <a href="#/settings" style="color:var(--cobalt)">Settings</a>.
</div> </div>
@ -68,7 +68,7 @@ function _renderVerifyView(candidates) {
<thead> <thead>
<tr> <tr>
<th>Template</th> <th>Template</th>
<th>DocuSign ID</th> <th>Docusign ID</th>
<th>Verification Status</th> <th>Verification Status</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>