252 lines
13 KiB
HTML
252 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Crank — New Operation</title>
|
|
<link rel="stylesheet" href="../../css/fonts.css">
|
|
<link rel="stylesheet" href="../../css/variables.css">
|
|
<link rel="stylesheet" href="../../css/layout.css">
|
|
<link rel="stylesheet" href="../../css/wizard.css">
|
|
<link rel="stylesheet" href="../../css/pages.css">
|
|
<script src="%CRANK_BUNDLE_PROTECTED_CORE%"></script>
|
|
</head>
|
|
<body class="wizard-page">
|
|
|
|
<!-- ═══════════════════ NAVBAR ═══════════════════ -->
|
|
<nav class="navbar">
|
|
<a href="/" class="nav-logo">
|
|
<div class="nav-logo-mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="white"><path fill-rule="evenodd" d="M 10.000,1.800 L 12.287,3.962 L 15.408,3.557 L 15.987,6.650 L 18.750,8.157 L 17.400,11.000 L 18.750,13.843 L 15.987,15.350 L 15.408,18.443 L 12.287,18.038 L 10.000,20.200 L 7.713,18.038 L 4.592,18.443 L 4.013,15.350 L 1.250,13.843 L 2.600,11.000 L 1.250,8.157 L 4.013,6.650 L 4.592,3.557 L 7.713,3.962 Z M 12.800,11.000 A 2.8 2.8 0 1 0 7.200,11.000 A 2.8 2.8 0 1 0 12.800,11.000 Z"/><path fill-rule="evenodd" d="M 11.791,15.604 Q 16.083,17.179 21.375,21.154 A 2.00 2.00 0 1 1 23.625,17.846 Q 19.782,15.610 14.940,10.973 Z M 24.300,19.500 A 1.8 1.8 0 1 0 20.700,19.500 A 1.8 1.8 0 1 0 24.300,19.500 Z"/><path d="M 10.0,9.7 L 11.3,11.0 L 10.0,12.3 L 8.7,11.0 Z" fill="rgba(0,0,0,0.3)"/></svg></div>
|
|
<span class="nav-logo-text">Crank</span>
|
|
</a>
|
|
|
|
<!-- Single workspace indicator -->
|
|
<div class="ws-switcher" id="ws-switcher">
|
|
<div class="ws-switcher-trigger">
|
|
<div class="ws-dot" id="ws-dot">A</div>
|
|
<span class="ws-current-name" id="ws-current-name" data-testid="shell-workspace-name">acme-workspace</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-links">
|
|
<a href="/" class="nav-link active" data-i18n="nav.operations">Operations</a>
|
|
<a href="/agents" class="nav-link" data-i18n="nav.agents">Agents</a>
|
|
<a href="/api-keys" class="nav-link" data-i18n="nav.apikeys">API Keys</a>
|
|
<a href="/secrets" class="nav-link" data-i18n="nav.secrets">Secrets</a>
|
|
<a href="/logs" class="nav-link" data-i18n="nav.logs">Logs</a>
|
|
<a href="/usage" class="nav-link" data-i18n="nav.usage">Usage</a>
|
|
</div>
|
|
|
|
<div class="nav-right">
|
|
<button class="nav-hamburger" data-i18n-title="nav.menu" data-i18n-aria-label="nav.menu" aria-label="Menu"><span></span><span></span><span></span></button>
|
|
|
|
<div class="nav-divider"></div>
|
|
|
|
<div class="user-menu">
|
|
<div class="nav-avatar" data-testid="shell-avatar" data-i18n-title="nav.account" title="Account">AT</div>
|
|
<div class="user-dropdown">
|
|
<div class="user-dropdown-header">
|
|
<div class="user-dropdown-name" data-testid="shell-user-name">Crank</div>
|
|
<div class="user-dropdown-role" data-testid="shell-user-role">—</div>
|
|
</div>
|
|
<button class="user-dropdown-item" data-action="settings-link">
|
|
<svg width="13" height="13"><use href="../../icons/general/settings.svg#icon"/></svg>
|
|
<span data-i18n="nav.settings">Settings</span>
|
|
</button>
|
|
<div class="dropdown-divider"></div>
|
|
<button class="user-dropdown-item danger" data-action="logout">
|
|
<svg width="13" height="13"><use href="../../icons/general/logout.svg#icon"/></svg>
|
|
<span data-i18n="nav.logout">Log out</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="mobile-nav" hidden>
|
|
<a href="/" class="mobile-nav-link active" data-i18n="nav.operations">Operations</a>
|
|
<a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
|
|
<a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
|
|
<a href="/secrets" class="mobile-nav-link" data-i18n="nav.secrets">Secrets</a>
|
|
<a href="/logs" class="mobile-nav-link" data-i18n="nav.logs">Logs</a>
|
|
<a href="/usage" class="mobile-nav-link" data-i18n="nav.usage">Usage</a>
|
|
</div>
|
|
|
|
<!-- ═══════════════════ WIZARD SHELL ═══════════════════ -->
|
|
<div class="wizard-shell">
|
|
|
|
<!-- ══ TOP PROGRESS STRIP ══ -->
|
|
<div class="progress-strip">
|
|
<button class="back-to-catalog-btn" id="back-to-catalog" data-i18n-title="wizard.back_catalog" title="Back to catalog">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"/></svg>
|
|
<span data-i18n="wizard.back_catalog">Operations</span>
|
|
</button>
|
|
<div class="progress-divider"></div>
|
|
<span class="progress-label" data-i18n="wizard.progress.create">Create operation</span>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar-fill"></div>
|
|
</div>
|
|
<span class="progress-pct">20%</span>
|
|
<button class="progress-close" data-i18n-title="wizard.exit" title="Exit wizard" aria-label="Exit wizard">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
|
|
<line x1="1" y1="1" x2="11" y2="11"/><line x1="11" y1="1" x2="1" y2="11"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ══ WIZARD BODY ══ -->
|
|
<div class="wizard-body">
|
|
|
|
<!-- ── Step sidebar ── -->
|
|
<div class="step-sidebar">
|
|
<div class="step-sidebar-card">
|
|
|
|
<div class="step-sidebar-header">
|
|
<div class="step-sidebar-logo-mark">M</div>
|
|
<div class="step-sidebar-brand" data-wizard-brand="create">
|
|
Create <span>operation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-sidebar-body">
|
|
<div class="step-sidebar-section-label" data-i18n="wizard.progress.section">Progress</div>
|
|
|
|
<div class="steps-list">
|
|
|
|
<div class="step-item active">
|
|
<div class="step-indicator">1</div>
|
|
<div class="step-content">
|
|
<div class="step-number" data-step="1">Step 1</div>
|
|
<div class="step-name" data-i18n="wizard.step_name.protocol">Protocol</div>
|
|
<div class="step-status-text" data-i18n="wizard.status.in_progress">In progress</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item pending">
|
|
<div class="step-indicator">2</div>
|
|
<div class="step-content">
|
|
<div class="step-number" data-step="2">Step 2</div>
|
|
<div class="step-name" data-i18n="wizard.step_name.upstream">Upstream target</div>
|
|
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item pending" id="sidebar-step-3">
|
|
<div class="step-indicator">3</div>
|
|
<div class="step-content">
|
|
<div class="step-number" data-step="3">Step 3</div>
|
|
<div class="step-name" id="sidebar-step-3-name">Настройки запроса</div>
|
|
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item pending">
|
|
<div class="step-indicator">4</div>
|
|
<div class="step-content">
|
|
<div class="step-number" data-step="4">Step 4</div>
|
|
<div class="step-name" data-i18n="wizard.step_name.tool">Настройки инструмента</div>
|
|
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item pending">
|
|
<div class="step-indicator">5</div>
|
|
<div class="step-content">
|
|
<div class="step-number" data-step="5">Step 5</div>
|
|
<div class="step-name" data-i18n="wizard.step_name.mapping">Связи полей</div>
|
|
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /steps-list -->
|
|
|
|
<div class="sidebar-help" style="margin-top: 20px;">
|
|
<div class="sidebar-help-title">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="8" cy="8" r="7"/>
|
|
<path d="M8 12v-4M8 5v-.5"/>
|
|
</svg>
|
|
<span data-i18n="wizard.help.title">Need help?</span>
|
|
</div>
|
|
<div class="sidebar-help-text">
|
|
<span data-i18n="wizard.help.body">Unsure which protocol to choose? Read the</span>
|
|
<a href="#" class="sidebar-help-link" data-i18n="wizard.help.link">protocol comparison guide →</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- /step-sidebar-body -->
|
|
</div><!-- /step-sidebar-card -->
|
|
</div><!-- /step-sidebar -->
|
|
|
|
<!-- ── Main step panel ── -->
|
|
<div class="wizard-main"><div id="step-panel-container"><!-- steps loaded dynamically --></div></div>
|
|
</div><!-- /wizard-body -->
|
|
|
|
<!-- ══ BOTTOM ACTION BAR ══ -->
|
|
<div class="action-bar" role="toolbar" aria-label="Wizard navigation">
|
|
<div class="action-bar-inner">
|
|
|
|
<button class="btn btn-back" type="button" disabled>
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"/>
|
|
</svg>
|
|
<span data-i18n="wizard.button.back">Back</span>
|
|
</button>
|
|
|
|
<button class="btn-save-draft" type="button" data-i18n="wizard.button.save_draft">Save draft</button>
|
|
|
|
<div class="action-bar-spacer"></div>
|
|
|
|
<span class="step-counter" data-step-counter>Step <strong>1</strong> of 5</span>
|
|
|
|
<button id="btn-continue" class="btn btn-continue" type="button">
|
|
<span data-i18n="wizard.button.continue">Continue</span>
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /wizard-shell -->
|
|
|
|
<div class="modal-overlay" id="quick-secret-modal" data-testid="wizard-quick-secret-modal">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<span class="modal-title" data-i18n="wizard.step2.quick_secret_title">Quick create secret</span>
|
|
<button class="modal-close" id="quick-secret-close-btn" type="button">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
|
|
<line x1="1" y1="1" x2="11" y2="11"/><line x1="11" y1="1" x2="1" y2="11"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body" style="display:grid; gap:14px;">
|
|
<div class="field-group">
|
|
<label class="field-label" data-i18n="wizard.step2.quick_secret_name">Secret name</label>
|
|
<input class="field-input" id="quick-secret-name" data-testid="wizard-quick-secret-name" type="text" autocomplete="off">
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label" data-i18n="wizard.step2.quick_secret_kind">Secret kind</label>
|
|
<select class="field-select" id="quick-secret-kind" data-testid="wizard-quick-secret-kind">
|
|
<option value="token" data-i18n="secrets.kind.token">Token</option>
|
|
<option value="header" data-i18n="secrets.kind.header">Header value</option>
|
|
<option value="generic" data-i18n="secrets.kind.generic">Generic JSON</option>
|
|
</select>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label" data-i18n="wizard.step2.quick_secret_value">Secret value</label>
|
|
<input class="field-input" id="quick-secret-value" data-testid="wizard-quick-secret-value" type="text" autocomplete="off">
|
|
<div class="field-hint" data-i18n="wizard.step2.quick_secret_hint">The value is encrypted immediately and will not be shown again.</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" id="quick-secret-cancel-btn" type="button" data-i18n="btn.cancel">Cancel</button>
|
|
<button class="btn-primary" id="quick-secret-submit-btn" data-testid="wizard-quick-secret-submit" type="button" data-i18n="wizard.step2.quick_secret_submit">Create secret</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="%CRANK_BUNDLE_WIZARD%"></script>
|
|
|
|
</body>
|
|
</html>
|