Proper error handling for when clipboard is unavailable

This commit is contained in:
SinTan1729 2022-11-12 17:57:14 -06:00
parent 2c8076e2e1
commit b803f5805d
2 changed files with 20 additions and 9 deletions

View File

@ -86,7 +86,7 @@
<br> <br>
<thead> <thead>
<tr> <tr>
<td>Short URL (click to copy)</td> <td id="short-url-header">Short URL (click to copy)</td>
<td>Long URL</td> <td>Long URL</td>
<td>Hits</td> <td>Hits</td>
<td name="deleteBtn">&times;</td> <td name="deleteBtn">&times;</td>

View File

@ -33,13 +33,17 @@ const displayData = async (data) => {
} }
else { else {
const table = document.querySelector("#url-table"); const table = document.querySelector("#url-table");
if (!window.isSecureContext) {
const shortUrlHeader = document.getElementById("short-url-header");
shortUrlHeader.innerHTML = "Short URL (click to open)";
}
table_box.style.visibility = "visible"; table_box.style.visibility = "visible";
table.innerHTML = ''; // Clear table.innerHTML = ''; // Clear
data.forEach(tr => table.appendChild(TR(tr, site))); data.forEach(tr => table.appendChild(TR(tr, site)));
} }
}; };
const addAlertBox = async (text, col) => { const showAlert = async (text, col) => {
document.getElementById("alertBox")?.remove(); document.getElementById("alertBox")?.remove();
const controls = document.querySelector(".pure-controls"); const controls = document.querySelector(".pure-controls");
const alertBox = document.createElement("p"); const alertBox = document.createElement("p");
@ -51,8 +55,14 @@ const addAlertBox = async (text, col) => {
const TR = (row, site) => { const TR = (row, site) => {
const tr = document.createElement("tr"); const tr = document.createElement("tr");
const longTD = TD(A(row.long)); const longTD = TD(A_LONG(row.long));
const shortTD = TD(A_INT(row.short, site)); var shortTD = null;
if (window.isSecureContext) {
shortTD = TD(A_SHORT(row.short, site));
}
else {
shortTD = TD(A_SHORT_INSECURE(row.short, site));
}
const hitsTD = TD(row.hits); const hitsTD = TD(row.hits);
const btn = deleteButton(row.short); const btn = deleteButton(row.short);
@ -68,10 +78,10 @@ const copyShortUrl = async (link) => {
const site = await getSiteUrl(); const site = await getSiteUrl();
try { try {
navigator.clipboard.writeText(`${site}/${link}`); navigator.clipboard.writeText(`${site}/${link}`);
addAlertBox(`Short URL ${link} was copied to clipboard!`, "green"); showAlert(`Short URL ${link} was copied to clipboard!`, "green");
} catch (e) { } catch (e) {
console.log(e); console.log(e);
addAlertBox("Could not copy short URL to clipboard, please do it manually.", "red"); showAlert("Could not copy short URL to clipboard, please do it manually.", "red");
} }
}; };
@ -85,8 +95,9 @@ const addProtocol = (input) => {
return input return input
} }
const A = (s) => `<a href='${s}'>${s}</a>`; const A_LONG = (s) => `<a href='${s}'>${s}</a>`;
const A_INT = (s, t) => `<a href="javascript:copyShortUrl('${s}');">${t}/${s}</a>`; const A_SHORT = (s, t) => `<a href="javascript:copyShortUrl('${s}');">${t}/${s}</a>`;
const A_SHORT_INSECURE = (s, t) => `<a href="/${s}">${t}/${s}</a>`;
const deleteButton = (shortUrl) => { const deleteButton = (shortUrl) => {
const td = document.createElement("td"); const td = document.createElement("td");
@ -129,7 +140,7 @@ const submitForm = () => {
}) })
.then(res => { .then(res => {
if (!res.ok) { if (!res.ok) {
addAlertBox("Short URL is not valid or it's already in use!", "red"); showAlert("Short URL is not valid or it's already in use!", "red");
return "error"; return "error";
} }
else { else {