Fixed QR Code Display for Domain-Based URIs

This commit is contained in:
Night Owl
2025-03-19 21:41:15 +03:30
committed by GitHub
parent 9a07b7b74c
commit 552b0ab7ca

View File

@ -678,32 +678,48 @@
// QR Code Modal // QR Code Modal
$("#qrcodeModal").on("show.bs.modal", function (event) { $("#qrcodeModal").on("show.bs.modal", function (event) {
const button = $(event.relatedTarget); const button = $(event.relatedTarget);
const username = button.data("username"); const configContainer = $(`#userConfigs-${button.data("username")}`);
const configContainer = $(`#userConfigs-${username}`); const qrcodesContainer = $("#qrcodesContainer");
const qrcodesContainer = $("#qrcodesContainer"); qrcodesContainer.empty();
qrcodesContainer.empty();
configContainer.find(".config-container").each(function () { configContainer.find(".config-container").each(function () {
const configLink = $(this).data("link"); const configLink = $(this).data("link");
const configType = $(this).find(".config-type").text().replace(":", ""); const configType = $(this).find(".config-type").text().replace(":", "");
let displayType = configType;
const hashMatch = configLink.match(/#(.+)$/);
if (hashMatch && hashMatch[1]) {
const hashValue = hashMatch[1];
if (hashValue.includes("IPv4") || hashValue.includes("IPv6")) {
displayType = hashValue;
}
} else if (configLink.includes("ipv4") || configLink.includes("IPv4")) {
displayType = "IPv4";
} else if (configLink.includes("ipv6") || configLink.includes("IPv6")) {
displayType = "IPv6";
}
const qrCodeId = `qrcode-${displayType}-${Math.random().toString(36).substring(2, 10)}`;
// Create a card for each QR code
const card = $(` const card = $(`
<div class="card d-inline-block mx-2 my-2" style="width: 180px;"> <div class="card d-inline-block my-2">
<div class="card-body"> <div class="card-body">
<div id="qrcode-${configType}" class="mx-auto cursor-pointer"></div> <div id="${qrCodeId}" class="mx-auto cursor-pointer"></div>
<div class="config-type-text mt-2 text-center">${configType}</div> <br>
<div class="config-type-text mt-2 text-center">${displayType}</div>
</div> </div>
</div> </div>
`); `);
qrcodesContainer.append(card); qrcodesContainer.append(card);
const qrCodeStyling = new QRCodeStyling({ const qrCodeStyling = new QRCodeStyling({
width: 150, width: 180,
height: 150, height: 180,
data: configLink, data: configLink,
margin: 5,
dotsOptions: { dotsOptions: {
color: "#212121", color: "#212121",
type: "square" type: "square"
@ -720,15 +736,14 @@
} }
}); });
qrCodeStyling.append(document.getElementById(`qrcode-${configType}`)); qrCodeStyling.append(document.getElementById(qrCodeId));
// Add click to copy functionality to the card
card.on("click", function () { card.on("click", function () {
navigator.clipboard.writeText(configLink) navigator.clipboard.writeText(configLink)
.then(() => { .then(() => {
Swal.fire({ Swal.fire({
icon: "success", icon: "success",
title: configType + " link copied!", title: displayType + " link copied!",
showConfirmButton: false, showConfirmButton: false,
timer: 1500, timer: 1500,
}); });
@ -745,12 +760,10 @@
}); });
}); });
// Prevent modal from closing when clicking inside
$("#qrcodeModal .modal-content").on("click", function (e) { $("#qrcodeModal .modal-content").on("click", function (e) {
e.stopPropagation(); e.stopPropagation();
}); });
// Clear the QR code when the modal is hidden
$("#qrcodeModal").on("hidden.bs.modal", function () { $("#qrcodeModal").on("hidden.bs.modal", function () {
$("#qrcodesContainer").empty(); $("#qrcodesContainer").empty();
}); });
@ -759,7 +772,6 @@
$("#qrcodeModal").modal("hide"); $("#qrcodeModal").modal("hide");
}); });
// Search Functionality
function filterUsers() { function filterUsers() {
const searchText = $("#searchInput").val().toLowerCase(); const searchText = $("#searchInput").val().toLowerCase();