Show full SIP client config in web admin's device-created popup

The "device created" modal only ever showed extension/password/name,
so setting up a client (e.g. Sipnetic) meant hunting down the server
domain, port, and transport separately — and the password is only
ever shown this once, so re-checking it later isn't an option.

Now shows everything a SIP client needs in one place: display name,
server, port, transport, username, password, plus TURN/STUN details
when enabled. The backend reports the actual transport/port used
(the container always forces TLS/FQDN mode regardless of what's
selected in the form, so the frontend no longer has to guess).

Added "Copy All" and "Copy Password" buttons, with a document.
execCommand fallback for contexts where the Clipboard API isn't
available (e.g. plain-HTTP self-signed-cert access).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015X1jRGHwrvovz2qkhKfDZi
This commit is contained in:
Claude
2026-07-20 18:00:28 +00:00
parent 487b6446d7
commit 24827a326f
+101 -17
View File
@@ -4779,7 +4779,13 @@ qualify_frequency=30
subprocess.run(['chown', 'asterisk:asterisk', PJSIP_CONF], capture_output=True)
subprocess.run(['/usr/local/bin/easy-asterisk', '--rebuild-dialplan'], capture_output=True)
return True, {'extension': extension, 'password': password, 'name': name}
return True, {
'extension': extension,
'password': password,
'name': name,
'transport': 'tls' if conn_type == 'fqdn' else 'udp',
'port': 5061 if conn_type == 'fqdn' else 5060,
}
def get_server_info():
"""Get server configuration info including TURN/STUN details"""
@@ -5099,7 +5105,9 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
<p>Save these credentials - the password cannot be retrieved later</p>
</div>
<div class="credentials" id="credentials-display"></div>
<div style="margin-top: 20px; text-align: right;">
<div style="margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end;">
<button class="btn" onclick="copyDevicePassword()" style="background: #e2e8f0;">Copy Password</button>
<button class="btn" onclick="copyAllCredentials()" style="background: #e2e8f0;">Copy All</button>
<button class="btn btn-primary" onclick="closeCredentialsModal()">Done</button>
</div>
</div>
@@ -5702,24 +5710,49 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
if (result.success) {
closeModal();
let credHtml = `
<p><strong>Extension:</strong> ${result.data.extension}</p>
<p><strong>Password:</strong> ${result.data.password}</p>
<p><strong>Name:</strong> ${result.data.name}</p>
`;
// Fetch server info to show TURN details
const d = result.data;
const transportLabel = d.transport === 'tls' ? 'TLS' : 'UDP';
// Fetch server info for the domain and TURN details
let srv = {};
try {
const srvRes = await fetch(API_BASE + '/server');
const srv = await srvRes.json();
if (srv.turn_enabled && srv.turn_server) {
credHtml += `<hr style="margin:12px 0;border-color:#e2e8f0">
<p style="font-size:13px;color:#64748b;margin-bottom:6px">STUN/TURN (configure in app Network settings)</p>
<p><strong>STUN/TURN server:</strong> ${srv.turn_server}</p>
<p><strong>TURN username:</strong> ${srv.turn_username}</p>
<p><strong>TURN password:</strong> ${srv.turn_password}</p>
`;
}
srv = await srvRes.json();
} catch(e) {}
const server = srv.domain || srv.server_ip || '';
// Everything a SIP client (e.g. Sipnetic) needs, kept in one
// object so both the display and the copy buttons read from
// the same source instead of re-parsing rendered HTML.
lastDeviceCreds = {
name: d.name,
server: server,
port: d.port,
transport: transportLabel,
username: d.extension,
password: d.password,
turnEnabled: !!(srv.turn_enabled && srv.turn_server),
turnServer: srv.turn_server || '',
turnUsername: srv.turn_username || '',
turnPassword: srv.turn_password || ''
};
let credHtml = `
<p><strong>Display Name:</strong> ${lastDeviceCreds.name}</p>
<p><strong>Server:</strong> ${lastDeviceCreds.server}</p>
<p><strong>Port:</strong> ${lastDeviceCreds.port}</p>
<p><strong>Transport:</strong> ${lastDeviceCreds.transport}</p>
<p><strong>Username:</strong> ${lastDeviceCreds.username}</p>
<p><strong>Password:</strong> ${lastDeviceCreds.password}</p>
`;
if (lastDeviceCreds.turnEnabled) {
credHtml += `<hr style="margin:12px 0;border-color:#e2e8f0">
<p style="font-size:13px;color:#64748b;margin-bottom:6px">STUN/TURN (configure in app Network settings)</p>
<p><strong>STUN/TURN server:</strong> ${lastDeviceCreds.turnServer}</p>
<p><strong>TURN username:</strong> ${lastDeviceCreds.turnUsername}</p>
<p><strong>TURN password:</strong> ${lastDeviceCreds.turnPassword}</p>
`;
}
document.getElementById('credentials-display').innerHTML = credHtml;
document.getElementById('credentials-modal').classList.add('active');
} else {
@@ -5730,6 +5763,57 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
}
}
// Holds the most recently created device's credentials so the
// Copy All / Copy Password buttons don't need to re-parse the DOM.
let lastDeviceCreds = null;
function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
}
// Fallback for non-HTTPS/non-secure contexts where the Clipboard
// API is unavailable (e.g. plain-HTTP self-signed-cert access).
const ta = document.createElement('textarea');
ta.value = text;
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.focus();
ta.select();
try {
document.execCommand('copy');
} finally {
document.body.removeChild(ta);
}
return Promise.resolve();
}
function copyAllCredentials() {
if (!lastDeviceCreds) return;
const c = lastDeviceCreds;
let text = `Display Name: ${c.name}\n` +
`Server: ${c.server}\n` +
`Port: ${c.port}\n` +
`Transport: ${c.transport}\n` +
`Username: ${c.username}\n` +
`Password: ${c.password}\n`;
if (c.turnEnabled) {
text += `STUN/TURN server: ${c.turnServer}\n` +
`TURN username: ${c.turnUsername}\n` +
`TURN password: ${c.turnPassword}\n`;
}
copyToClipboard(text)
.then(() => showAlert('All settings copied to clipboard', 'success'))
.catch(() => showAlert('Copy failed — select and copy manually', 'error'));
}
function copyDevicePassword() {
if (!lastDeviceCreds) return;
copyToClipboard(lastDeviceCreds.password)
.then(() => showAlert('Password copied to clipboard', 'success'))
.catch(() => showAlert('Copy failed — select and copy manually', 'error'));
}
async function deleteDevice(ext, name) {
if (!confirm(`Delete device ${ext} (${name})?`)) return;