bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: localize settings workspace and wizard

Browse Source
This commit is contained in:
a.tolmachev
2026-04-03 00:03:40 +03:00
parent 581d50c33c
commit 140548bb20
16 changed files with 763 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/html/settings.html
+37 -37
View File
@@ -34,12 +34,12 @@
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown-label">Your workspaces</div>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
<button class="ws-dropdown-create" onclick="window.location.href='/workspace-setup?mode=create'">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M8 3v10M3 8h10"/></svg>
Create workspace
<span data-i18n="nav.create_workspace">Create workspace</span>
</button>
</div>
</div>
@@ -58,7 +58,7 @@
<svg width="12" height="12"><use href="icons/general/grid.svg#icon"/></svg>
<span>⌘K</span>
</div>
<button class="nav-icon-btn" title="Notifications">
<button class="nav-icon-btn" data-i18n-title="nav.notifications" title="Notifications">
<svg width="15" height="15"><use href="icons/general/bell.svg#icon"/></svg>
</button>
<div class="nav-divider"></div>
@@ -95,8 +95,8 @@
<div class="page-header" style="margin-bottom: 24px;">
<div class="page-header-text">
<h1 class="page-title">Account settings</h1>
<p class="page-subtitle">Manage the live profile, password and workspace settings available in this build. Planned capabilities stay visible, but they do not pretend to be wired yet.</p>
<h1 class="page-title" data-i18n="settings.page.title">Account settings</h1>
<p class="page-subtitle" data-i18n="settings.page.subtitle">Manage the live profile, password and workspace settings available in this build. Planned capabilities stay visible, but they do not pretend to be wired yet.</p>
</div>
</div>
@@ -108,7 +108,7 @@
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 5.5h12M4 2.5h8a1.5 1.5 0 011.5 1.5v8A1.5 1.5 0 0112 13.5H4A1.5 1.5 0 012.5 12V4A1.5 1.5 0 014 2.5z"/>
</svg>
<span>Workspace</span>
<span data-i18n="settings.nav.workspace">Workspace</span>
</button>
<button class="settings-nav-item active" data-section="profile">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
@@ -147,15 +147,15 @@
<div class="field-group">
<label class="field-label" data-i18n="settings.ws.name">Workspace name</label>
<input class="field-input" id="settings-ws-slug" type="text" value="acme-workspace" autocomplete="off">
<div class="field-hint">Used in API endpoints and across the console. Only lowercase letters, numbers and hyphens.</div>
<div class="field-hint" data-i18n="settings.ws.slug_hint">Used in API endpoints and across the console. Only lowercase letters, numbers and hyphens.</div>
</div>
<div class="field-group">
<label class="field-label" data-i18n="settings.ws.display">Display name</label>
<input class="field-input" id="settings-ws-display-name" type="text" value="Acme Corp" autocomplete="off">
</div>
<div class="field-group">
<label class="field-label">Description <span style="font-size:11px;color:var(--text-muted);">(optional)</span></label>
<textarea class="field-textarea" id="settings-ws-description" rows="2" placeholder="What does this workspace do?">Primary production workspace for CRM and e-commerce API operations.</textarea>
<label class="field-label"><span data-i18n="settings.ws.description_optional">Description (optional)</span></label>
<textarea class="field-textarea" id="settings-ws-description" rows="2" data-i18n-ph="settings.ws.description_placeholder" placeholder="What does this workspace do?">Primary production workspace for CRM and e-commerce API operations.</textarea>
</div>
<div class="field-row">
<div class="field-group">
@@ -172,7 +172,7 @@
<div class="field-group">
<label class="field-label" data-i18n="settings.ws.protocol">Default protocol</label>
<select class="field-select" id="settings-ws-protocol">
<option value="rest" selected>REST / HTTP</option>
<option value="rest" selected>REST / HTTP</option>
<option value="graphql">GraphQL</option>
<option value="grpc">gRPC</option>
</select>
@@ -215,31 +215,31 @@
<div class="avatar-upload-actions">
<div class="avatar-name" id="profile-display-name">Operator</div>
<div class="avatar-sub" id="profile-email">operator@acme-workspace</div>
<div class="field-hint">Your avatar is generated from your display name and email.</div>
<div class="field-hint" data-i18n="settings.profile.avatar_hint">Your avatar is generated from your display name and email.</div>
</div>
</div>
<div class="field-hint" style="margin-bottom:16px;">Your name and email are stored on the backend and used across the console and session identity.</div>
<div class="field-hint" style="margin-bottom:16px;" data-i18n="settings.profile.backend_hint">Your name and email are stored on the backend and used across the console and session identity.</div>
<div class="field-row">
<div class="field-group">
<label class="field-label">First name</label>
<label class="field-label" data-i18n="settings.profile.first_name">First name</label>
<input class="field-input" id="field-firstname" type="text" value="Operator" autocomplete="given-name">
</div>
<div class="field-group">
<label class="field-label">Last name</label>
<input class="field-input" id="field-lastname" type="text" value="" autocomplete="family-name" placeholder="Optional">
<label class="field-label" data-i18n="settings.profile.last_name">Last name</label>
<input class="field-input" id="field-lastname" type="text" value="" autocomplete="family-name" data-i18n-ph="settings.profile.last_name_placeholder" placeholder="Optional">
</div>
</div>
<div class="field-group">
<label class="field-label">Email address</label>
<label class="field-label" data-i18n="settings.profile.email_label">Email address</label>
<input class="field-input" id="field-email" type="email" value="operator@acme.com" autocomplete="email">
<div class="field-hint">Changing email updates the login identity for the current account.</div>
<div class="field-hint" data-i18n="settings.profile.email_hint">Changing email updates the login identity for the current account.</div>
</div>
<div class="field-hint" id="settings-profile-status" style="margin-bottom:12px;"></div>
<div style="display:flex;justify-content:flex-end;">
<button class="btn-primary" id="settings-profile-save-btn" type="button">Save profile</button>
<button class="btn-primary" id="settings-profile-save-btn" type="button" data-i18n="settings.profile.save">Save profile</button>
</div>
</div>
</div>
@@ -249,38 +249,38 @@
<div id="section-security" class="section-anchor">
<div class="section-card" style="margin-bottom: 20px;">
<div class="section-card-header">
<div class="section-card-title">Security</div>
<div class="section-card-title" data-i18n="settings.security.title">Security</div>
</div>
<div class="section-card-body" style="padding-bottom:8px;">
<div class="field-group">
<label class="field-label">Current password</label>
<label class="field-label" data-i18n="settings.security.current_password">Current password</label>
<input class="field-input" id="security-current-password" type="password" placeholder="••••••••" autocomplete="current-password">
</div>
<div class="field-row">
<div class="field-group">
<label class="field-label">New password</label>
<input class="field-input" id="security-new-password" type="password" placeholder="min. 12 characters" autocomplete="new-password">
<label class="field-label" data-i18n="settings.security.new_password">New password</label>
<input class="field-input" id="security-new-password" type="password" data-i18n-ph="settings.security.new_password_placeholder" placeholder="min. 12 characters" autocomplete="new-password">
</div>
<div class="field-group">
<label class="field-label">Confirm new password</label>
<label class="field-label" data-i18n="settings.security.confirm_password">Confirm new password</label>
<input class="field-input" id="security-confirm-password" type="password" placeholder="••••••••" autocomplete="new-password">
</div>
</div>
<div class="field-hint" id="settings-password-status" style="margin-bottom:12px;"></div>
<div style="display:flex;justify-content:flex-end;padding-bottom:8px;">
<button class="btn-primary" id="settings-password-save-btn" type="button">Change password</button>
<button class="btn-primary" id="settings-password-save-btn" type="button" data-i18n="settings.security.change_password">Change password</button>
</div>
</div>
<div style="padding: 4px 20px 16px;">
<div class="settings-section-divider" style="margin-top:0;"></div>
<div style="font-size:13.5px;font-weight:600;color:var(--text-primary);margin-bottom:12px;">Planned security capabilities</div>
<div style="font-size:13.5px;font-weight:600;color:var(--text-primary);margin-bottom:12px;" data-i18n="settings.security.capabilities_title">Planned security capabilities</div>
<div class="callout warning" style="margin-bottom:0;">
<svg class="callout-icon" width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--amber)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<polygon points="8,1.5 15.5,14.5 0.5,14.5" fill="none"/><path d="M8 6v4M8 11.5v.5"/>
</svg>
<div>
<strong>Not available in this build.</strong> Two-factor authentication, passkeys and multi-session inventory are planned, but the current live flow is password-based login with one HttpOnly browser session.
<strong data-i18n="settings.security.not_available">Not available in this build.</strong> <span data-i18n="settings.security.capabilities_body">Two-factor authentication, passkeys and multi-session inventory are planned, but the current live flow is password-based login with one HttpOnly browser session.</span>
</div>
</div>
</div>
@@ -288,13 +288,13 @@
<div class="section-card" style="margin-bottom: 20px;">
<div class="section-card-header">
<div class="section-card-title">Current session</div>
<div class="section-card-title" data-i18n="settings.session.title">Current session</div>
</div>
<div style="padding: 8px 20px 16px;">
<div class="member-row">
<div class="member-info">
<div class="member-name">Browser session — <span style="color:var(--green);font-size:12px;">current</span></div>
<div class="member-email" id="settings-session-summary">Loading current session details…</div>
<div class="member-name">Browser session — <span style="color:var(--green);font-size:12px;" data-i18n="settings.session.current">current</span></div>
<div class="member-email" id="settings-session-summary" data-i18n="settings.session.loading">Loading current session details…</div>
</div>
</div>
</div>
@@ -305,7 +305,7 @@
<div id="section-notifications" class="section-anchor">
<div class="section-card" style="margin-bottom: 20px;">
<div class="section-card-header">
<div class="section-card-title">Notification preferences</div>
<div class="section-card-title" data-i18n="settings.notifications.title">Notification preferences</div>
</div>
<div style="padding: 8px 20px 16px;">
<div class="callout info" style="margin-bottom:14px;">
@@ -314,21 +314,21 @@
<path d="M8 11V8M8 5.5V5"/>
</svg>
<div>
<strong>Notifications are not wired yet.</strong> Alert routing and per-user preferences are planned, but this build does not persist or deliver notification settings.
<strong data-i18n="settings.notifications.not_ready_title">Notifications are not wired yet.</strong> <span data-i18n="settings.notifications.not_ready_body">Alert routing and per-user preferences are planned, but this build does not persist or deliver notification settings.</span>
</div>
</div>
<div class="planned-list">
<div class="planned-item">
<div class="planned-item-title">Operation error spike</div>
<div class="planned-item-desc">Alert when error rate exceeds a rolling threshold for a published tool.</div>
<div class="planned-item-title" data-i18n="settings.notifications.spike_title">Operation error spike</div>
<div class="planned-item-desc" data-i18n="settings.notifications.spike_body">Alert when error rate exceeds a rolling threshold for a published tool.</div>
</div>
<div class="planned-item">
<div class="planned-item-title">Upstream latency degradation</div>
<div class="planned-item-desc">Notify operators when p99 latency rises sharply above the baseline.</div>
<div class="planned-item-title" data-i18n="settings.notifications.latency_title">Upstream latency degradation</div>
<div class="planned-item-desc" data-i18n="settings.notifications.latency_body">Notify operators when p99 latency rises sharply above the baseline.</div>
</div>
<div class="planned-item">
<div class="planned-item-title">Quota and usage digests</div>
<div class="planned-item-desc">Deliver periodic summaries for quota consumption, errors and workspace activity.</div>
<div class="planned-item-title" data-i18n="settings.notifications.digest_title">Quota and usage digests</div>
<div class="planned-item-desc" data-i18n="settings.notifications.digest_body">Deliver periodic summaries for quota consumption, errors and workspace activity.</div>
</div>
</div>
</div>