iTakinn/WGDashboard-WHMCS
1
0
Fork 0
mirror of https://github.com/IdalecioSch/WGDashboard-WHMCS.git synced 2026-07-28 00:30:07 -03:00
Code Issues Packages Projects Releases 1 Wiki Activity

removed generate qrcodes that i struggled settin up

Browse Source
This commit is contained in:
iTakinn
2025-10-12 18:58:08 -03:00
parent 662b1e58ee
commit d5a38398f7
2 changed files with 332 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WGDashboard/clientarea.tpl
+58 -142
View File
@@ -1,8 +1,8 @@
{if $error} {if $error}
<div class="alert alert-danger"> <div class="alert alert-danger">
<strong>Error:</strong> {$error} <strong>Error:</strong> {$error}
</div> </div>
{else} {else}
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
{if $formatted_config} {if $formatted_config}
@@ -64,10 +64,10 @@
</div> </div>
</div> </div>
</div> </div>
{/if} {/if}
{* Instructions Modal *} {* Instructions Modal *}
<div class="modal fade" id="instructionsModal" tabindex="-1" role="dialog"> <div class="modal fade" id="instructionsModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@@ -104,88 +104,16 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js" onload="initQRCode()" onerror="loadQRCodeFallback()"></script> <script src="https://api.qrserver.com/v1/create-qr-code/?size=250x250&format=svg&data=test" style="display:none;"></script>
<script> <script>
var qrCodeLibraryLoaded = false; var configForQR = null;
var configForQR = null;
function initQRCode() { function generateQRCode(configText) {
qrCodeLibraryLoaded = true;
console.log('QRCode library loaded successfully');
if (configForQR) {
generateQRCode(configForQR);
}
}
function loadQRCodeFallback() {
console.log('Primary QRCode library failed, trying fallback...');
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js';
script.onload = function() {
console.log('Fallback QRCode library loaded');
qrCodeLibraryLoaded = true;
if (configForQR) {
generateQRCodeFallback(configForQR);
}
};
script.onerror = function() {
console.error('Both QRCode libraries failed to load');
var qrCodeElement = document.getElementById('qrcode'); var qrCodeElement = document.getElementById('qrcode');
if (qrCodeElement) {
qrCodeElement.innerHTML = '<p class="text-danger">Unable to load QR Code library</p>';
}
};
document.head.appendChild(script);
}
function generateQRCode(configText) {
var qrCodeElement = document.getElementById('qrcode');
console.log('Generating QR Code with qrcode.js...');
console.log('Config text length:', configText.length);
if (qrCodeElement && configText && configText.trim() !== '') { if (qrCodeElement && configText && configText.trim() !== '') {
if (typeof QRCode === 'undefined') {
console.error('QRCode library not available, trying fallback');
generateQRCodeFallback(configText);
return;
}
try {
QRCode.toCanvas(qrCodeElement, configText, {
width: 250,
margin: 3,
color: {
dark: '#000000',
light: '#FFFFFF'
}
}, function(error) {
if (error) {
console.error('QR Code generation failed:', error);
qrCodeElement.innerHTML = '<p class="text-danger">QR Code generation failed: ' + error.message + '</p>';
} else {
console.log('QR Code generated successfully');
}
});
} catch (e) {
console.error('Exception during QR code generation:', e);
qrCodeElement.innerHTML = '<p class="text-danger">QR Code generation error: ' + e.message + '</p>';
}
} else {
console.error('QR Code generation failed: element or config missing');
if (qrCodeElement) {
qrCodeElement.innerHTML = '<p class="text-warning">Configuration not available for QR code</p>';
}
}
}
function generateQRCodeFallback(configText) {
var qrCodeElement = document.getElementById('qrcode');
console.log('Trying fallback QR code generation...');
if (qrCodeElement && configText) {
try { try {
var qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + encodeURIComponent(configText); var qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + encodeURIComponent(configText);
var img = document.createElement('img'); var img = document.createElement('img');
@@ -193,42 +121,30 @@ function generateQRCodeFallback(configText) {
img.alt = 'WireGuard QR Code'; img.alt = 'WireGuard QR Code';
img.style.border = '3px solid #ddd'; img.style.border = '3px solid #ddd';
img.style.borderRadius = '4px'; img.style.borderRadius = '4px';
img.onload = function() {
console.log('Fallback QR code loaded successfully');
};
img.onerror = function() { img.onerror = function() {
qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>'; qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>';
}; };
qrCodeElement.innerHTML = ''; qrCodeElement.innerHTML = '';
qrCodeElement.appendChild(img); qrCodeElement.appendChild(img);
} catch (e) { } catch (e) {
console.error('Fallback QR code generation failed:', e); console.error('QR code generation failed:', e);
qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>'; qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>';
} }
}
}
{if $formatted_config}
document.addEventListener('DOMContentLoaded', function() {
configForQR = {$formatted_config|json_encode};
if (qrCodeLibraryLoaded) {
generateQRCode(configForQR);
} else { } else {
console.log('Waiting for QRCode library to load...'); if (qrCodeElement) {
setTimeout(function() { qrCodeElement.innerHTML = '<p class="text-warning">Configuration not available for QR code</p>';
if (!qrCodeLibraryLoaded && configForQR) { }
console.log('Timeout reached, using fallback QR generation');
generateQRCodeFallback(configForQR);
} }
}, 3000);
} }
});
{else}
console.log('No configuration available for QR code');
{/if}
function downloadFormattedConfig() { {if $formatted_config}
document.addEventListener('DOMContentLoaded', function() {
configForQR = {$formatted_config|json_encode};
generateQRCode(configForQR);
});
{/if}
function downloadFormattedConfig() {
{if $formatted_config} {if $formatted_config}
var config = {$formatted_config|json_encode}; var config = {$formatted_config|json_encode};
var element = document.createElement('a'); var element = document.createElement('a');
@@ -239,9 +155,9 @@ function downloadFormattedConfig() {
element.click(); element.click();
document.body.removeChild(element); document.body.removeChild(element);
{/if} {/if}
} }
function copyFormattedConfig() { function copyFormattedConfig() {
{if $formatted_config} {if $formatted_config}
var config = {$formatted_config|json_encode}; var config = {$formatted_config|json_encode};
if (navigator.clipboard && window.isSecureContext) { if (navigator.clipboard && window.isSecureContext) {
@@ -254,9 +170,9 @@ function copyFormattedConfig() {
fallbackCopyTextToClipboard(config); fallbackCopyTextToClipboard(config);
} }
{/if} {/if}
} }
function fallbackCopyTextToClipboard(text) { function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea"); var textArea = document.createElement("textarea");
textArea.value = text; textArea.value = text;
textArea.style.top = "0"; textArea.style.top = "0";
@@ -276,10 +192,10 @@ function fallbackCopyTextToClipboard(text) {
alert('Failed to copy configuration. Please copy manually.'); alert('Failed to copy configuration. Please copy manually.');
} }
document.body.removeChild(textArea); document.body.removeChild(textArea);
} }
// Legacy functions for backward compatibility // Legacy functions for backward compatibility
function downloadConfig() { function downloadConfig() {
var textarea = document.querySelector('textarea'); var textarea = document.querySelector('textarea');
if (textarea) { if (textarea) {
var config = textarea.value; var config = textarea.value;
@@ -291,9 +207,9 @@ function downloadConfig() {
element.click(); element.click();
document.body.removeChild(element); document.body.removeChild(element);
} }
} }
function copyConfig() { function copyConfig() {
var textarea = document.querySelector('textarea'); var textarea = document.querySelector('textarea');
if (textarea) { if (textarea) {
textarea.select(); textarea.select();
@@ -304,62 +220,62 @@ function copyConfig() {
alert('Failed to copy configuration. Please select and copy manually.'); alert('Failed to copy configuration. Please select and copy manually.');
} }
} }
} }
function showInstructions() { function showInstructions() {
$('#instructionsModal').modal('show'); $('#instructionsModal').modal('show');
} }
</script> </script>
<style> <style>
.panel-heading .fa { .panel-heading .fa {
margin-right: 5px; margin-right: 5px;
} }
.center-block { .center-block {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
code { code {
word-break: break-all; word-break: break-all;
} }
.table-condensed td { .table-condensed td {
padding: 5px; padding: 5px;
} }
.modal-body h5 { .modal-body h5 {
color: #337ab7; color: #337ab7;
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.modal-body h5:first-child { .modal-body h5:first-child {
margin-top: 0; margin-top: 0;
} }
/***** Modal close button alignment *****/ /***** Modal close button alignment *****/
.modal-header { .modal-header {
position: relative; position: relative;
} }
.modal-header .close { .modal-header .close {
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
font-size: 28px; font-size: 28px;
line-height: 1; line-height: 1;
} }
.wireguard-config { .wireguard-config {
max-height: 350px; max-height: 350px;
overflow-y: auto; overflow-y: auto;
} }
#qrcode canvas { #qrcode canvas {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
} }
</style> </style>
WGDashboard/clientarea_ptBR.tpl
+37 -125
View File
@@ -106,133 +106,45 @@
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js" onload="initQRCode()" onerror="loadQRCodeFallback()"></script> <script src="https://api.qrserver.com/v1/create-qr-code/?size=250x250&format=svg&data=test" style="display:none;"></script>
<script> <script>
var qrCodeLibraryLoaded = false; var configForQR = null;
var configForQR = null;
function initQRCode() { function generateQRCode(configText) {
qrCodeLibraryLoaded = true;
console.log('QRCode library loaded successfully');
if (configForQR) {
generateQRCode(configForQR);
}
}
function loadQRCodeFallback() {
console.log('Primary QRCode library failed, trying fallback...');
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js';
script.onload = function() {
console.log('Fallback QRCode library loaded');
qrCodeLibraryLoaded = true;
if (configForQR) {
generateQRCodeFallback(configForQR);
}
};
script.onerror = function() {
console.error('Both QRCode libraries failed to load');
var qrCodeElement = document.getElementById('qrcode'); var qrCodeElement = document.getElementById('qrcode');
if (qrCodeElement) {
qrCodeElement.innerHTML = '<p class="text-danger">Unable to load QR Code library</p>';
}
};
document.head.appendChild(script);
}
function generateQRCode(configText) {
var qrCodeElement = document.getElementById('qrcode');
console.log('Generating QR Code with qrcode.js...');
console.log('Config text length:', configText.length);
if (qrCodeElement && configText && configText.trim() !== '') { if (qrCodeElement && configText && configText.trim() !== '') {
// Check if QRCode library is loaded
if (typeof QRCode === 'undefined') {
console.error('Biblioteca QRCode não disponível, tentando fallback');
generateQRCodeFallback(configText);
return;
}
try { try {
QRCode.toCanvas(qrCodeElement, configText, {
width: 250,
margin: 3,
color: {
dark: '#000000',
light: '#FFFFFF'
}
}, function(error) {
if (error) {
console.error('Falha na geração do QR Code:', error);
qrCodeElement.innerHTML = '<p class="text-danger">Falha na geração do QR Code: ' + error.message + '</p>';
} else {
console.log('QR Code gerado com sucesso');
}
});
} catch (e) {
console.error('Exceção durante a geração do QR code:', e);
qrCodeElement.innerHTML = '<p class="text-danger">Erro na geração do QR Code: ' + e.message + '</p>';
}
} else {
console.error('Falha na geração do QR Code: elemento ou configuração ausente');
if (qrCodeElement) {
qrCodeElement.innerHTML = '<p class="text-warning">Configuração não disponível para QR code</p>';
}
}
}
function generateQRCodeFallback(configText) {
var qrCodeElement = document.getElementById('qrcode');
console.log('Trying fallback QR code generation...');
if (qrCodeElement && configText) {
try {
// Create QR code using online service as fallback
var qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + encodeURIComponent(configText); var qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + encodeURIComponent(configText);
var img = document.createElement('img'); var img = document.createElement('img');
img.src = qrUrl; img.src = qrUrl;
img.alt = 'WireGuard QR Code'; img.alt = 'WireGuard QR Code';
img.style.border = '3px solid #ddd'; img.style.border = '3px solid #ddd';
img.style.borderRadius = '4px'; img.style.borderRadius = '4px';
img.onload = function() {
console.log('Fallback QR code loaded successfully');
};
img.onerror = function() { img.onerror = function() {
qrCodeElement.innerHTML = '<p class="text-danger">Falha ao gerar código QR</p>'; qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>';
}; };
qrCodeElement.innerHTML = ''; qrCodeElement.innerHTML = '';
qrCodeElement.appendChild(img); qrCodeElement.appendChild(img);
} catch (e) { } catch (e) {
console.error('Falha na geração do QR code de fallback:', e); console.error('QR code generation failed:', e);
qrCodeElement.innerHTML = '<p class="text-danger">Falha na geração do código QR</p>'; qrCodeElement.innerHTML = '<p class="text-danger">Failed to generate QR code</p>';
} }
}
}
// Generate QR Code if formatted config is available
{if $formatted_config}
document.addEventListener('DOMContentLoaded', function() {
configForQR = {$formatted_config|json_encode};
if (qrCodeLibraryLoaded) {
generateQRCode(configForQR);
} else { } else {
console.log('Waiting for QRCode library to load...'); if (qrCodeElement) {
// Timeout fallback qrCodeElement.innerHTML = '<p class="text-warning">Configuration not available for QR code</p>';
setTimeout(function() { }
if (!qrCodeLibraryLoaded && configForQR) {
console.log('Timeout reached, using fallback QR generation');
generateQRCodeFallback(configForQR);
} }
}, 3000);
} }
});
{else}
console.log('No formatted config available for QR code');
{/if}
function downloadFormattedConfig() { {if $formatted_config}
document.addEventListener('DOMContentLoaded', function() {
configForQR = {$formatted_config|json_encode};
generateQRCode(configForQR);
});
{/if}
function downloadFormattedConfig() {
{if $formatted_config} {if $formatted_config}
var config = {$formatted_config|json_encode}; var config = {$formatted_config|json_encode};
var element = document.createElement('a'); var element = document.createElement('a');
@@ -243,14 +155,14 @@ function downloadFormattedConfig() {
element.click(); element.click();
document.body.removeChild(element); document.body.removeChild(element);
{/if} {/if}
} }
function copyFormattedConfig() { function copyFormattedConfig() {
{if $formatted_config} {if $formatted_config}
var config = {$formatted_config|json_encode}; var config = {$formatted_config|json_encode};
if (navigator.clipboard && window.isSecureContext) { if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(config).then(function() { navigator.clipboard.writeText(config).then(function() {
alert('Configuração copiada para a área de transferência!'); alert('Configuration copied to clipboard!');
}).catch(function(err) { }).catch(function(err) {
fallbackCopyTextToClipboard(config); fallbackCopyTextToClipboard(config);
}); });
@@ -258,9 +170,9 @@ function copyFormattedConfig() {
fallbackCopyTextToClipboard(config); fallbackCopyTextToClipboard(config);
} }
{/if} {/if}
} }
function fallbackCopyTextToClipboard(text) { function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea"); var textArea = document.createElement("textarea");
textArea.value = text; textArea.value = text;
textArea.style.top = "0"; textArea.style.top = "0";
@@ -272,18 +184,18 @@ function fallbackCopyTextToClipboard(text) {
try { try {
var successful = document.execCommand('copy'); var successful = document.execCommand('copy');
if (successful) { if (successful) {
alert('Configuração copiada para a área de transferência!'); alert('Configuration copied to clipboard!');
} else { } else {
alert('Falha ao copiar configuração. Por favor, copie manualmente.'); alert('Failed to copy configuration. Please copy manually.');
} }
} catch (err) { } catch (err) {
alert('Falha ao copiar configuração. Por favor, copie manualmente.'); alert('Failed to copy configuration. Please copy manually.');
} }
document.body.removeChild(textArea); document.body.removeChild(textArea);
} }
// Legacy functions for backward compatibility // Legacy functions for backward compatibility
function downloadConfig() { function downloadConfig() {
var textarea = document.querySelector('textarea'); var textarea = document.querySelector('textarea');
if (textarea) { if (textarea) {
var config = textarea.value; var config = textarea.value;
@@ -295,25 +207,25 @@ function downloadConfig() {
element.click(); element.click();
document.body.removeChild(element); document.body.removeChild(element);
} }
} }
function copyConfig() { function copyConfig() {
var textarea = document.querySelector('textarea'); var textarea = document.querySelector('textarea');
if (textarea) { if (textarea) {
textarea.select(); textarea.select();
try { try {
document.execCommand('copy'); document.execCommand('copy');
alert('Configuração copiada para a área de transferência!'); alert('Configuration copied to clipboard!');
} catch (err) { } catch (err) {
alert('Falha ao copiar configuração. Por favor, selecione e copie manualmente.'); alert('Failed to copy configuration. Please select and copy manually.');
}
} }
} }
}
function showInstructions() { function showInstructions() {
$('#instructionsModal').modal('show'); $('#instructionsModal').modal('show');
} }
</script> </script>
<style> <style>
.panel-heading .fa { .panel-heading .fa {