mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-10 17:45:42 +00:00
UNITRONIX
101 lines
4.8 KiB
HTML
101 lines
4.8 KiB
HTML
<%- include('layouts/main', {
|
|
title: _('nav.keys'),
|
|
pageStyles: ['pages'],
|
|
pageScripts: ['keys'],
|
|
currentPage: 'keys',
|
|
breadcrumb: [{ label: _('nav.keys') }],
|
|
body: `
|
|
<div class="page-header">
|
|
<h1 class="page-title">${_('keys.title')}</h1>
|
|
<p class="page-subtitle">${_('keys.subtitle')}</p>
|
|
</div>
|
|
|
|
<div class="keys-grid">
|
|
<!-- Public Key Card -->
|
|
<div class="key-card">
|
|
<div class="key-card-header">
|
|
<span class="material-icons">vpn_key</span>
|
|
<span class="key-card-title">${_('keys.public_key')}</span>
|
|
</div>
|
|
<div class="key-card-body">
|
|
<div class="public-key-display">
|
|
<code class="public-key-text is-masked" id="public-key-text">
|
|
<span class="skeleton skeleton-text" style="width: 100%;"></span>
|
|
</code>
|
|
<button type="button" class="public-key-reveal" id="reveal-key-btn" title="${_('actions.show_value')}" aria-label="${_('actions.show_value')} ${_('keys.public_key')}" aria-pressed="false">
|
|
<span class="material-icons">visibility</span>
|
|
</button>
|
|
<button type="button" class="public-key-copy" id="copy-key-btn" title="${_('actions.copy')}" aria-label="${_('actions.copy')} ${_('keys.public_key')}">
|
|
<span class="material-icons">content_copy</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="key-actions">
|
|
<button class="btn btn-secondary" id="download-key-btn">
|
|
<span class="material-icons">download</span>
|
|
${_('keys.download')}
|
|
</button>
|
|
<button class="btn btn-secondary" id="show-qr-btn">
|
|
<span class="material-icons">qr_code</span>
|
|
${_('keys.show_qr')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Code Card -->
|
|
<div class="key-card">
|
|
<div class="key-card-header">
|
|
<span class="material-icons">qr_code_2</span>
|
|
<span class="key-card-title">${_('keys.qr_code')}</span>
|
|
</div>
|
|
<div class="key-card-body">
|
|
<div class="qr-code-container">
|
|
<div class="qr-code-wrapper" id="qr-wrapper">
|
|
<div class="skeleton" style="width: 200px; height: 200px;"></div>
|
|
</div>
|
|
<p class="qr-code-hint">${_('keys.qr_hint')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Server Info Card -->
|
|
<div class="key-card">
|
|
<div class="key-card-header">
|
|
<span class="material-icons">dns</span>
|
|
<span class="key-card-title">${_('keys.server_info')}</span>
|
|
</div>
|
|
<div class="key-card-body">
|
|
<div class="server-info-grid">
|
|
<div class="server-info-item">
|
|
<span class="server-info-label">
|
|
<span class="material-icons">router</span>
|
|
${_('server.id_server')}
|
|
</span>
|
|
<span class="server-info-value" id="server-ip">
|
|
<span class="skeleton skeleton-text"></span>
|
|
</span>
|
|
</div>
|
|
<div class="server-info-item">
|
|
<span class="server-info-label">
|
|
<span class="material-icons">swap_horiz</span>
|
|
${_('server.relay_server')}
|
|
</span>
|
|
<span class="server-info-value" id="relay-ip">
|
|
<span class="skeleton skeleton-text"></span>
|
|
</span>
|
|
</div>
|
|
<div class="server-info-item">
|
|
<span class="server-info-label">
|
|
<span class="material-icons">key</span>
|
|
${_('server.api_key')}
|
|
</span>
|
|
<span class="server-info-value api-key-masked" id="api-key">••••••••</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}) %>
|