multipleof4/4ev.link
1
0
Fork 0
mirror of https://github.com/multipleof4/4ev.link.git synced 2026-01-13 15:57:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Add reCAPTCHA v2 checkbox to the form

Browse Source
This commit is contained in:
multipleof4
2025-09-26 21:16:10 -07:00
parent d2b55ef10e
commit 690ab20593
1 changed files with 44 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
index.html
View File

@@ -10,6 +10,7 @@
<meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)">
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script> <script src="https://unpkg.com/lucide@latest"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head> </head>
<body class="bg-gray-50 dark:bg-neutral-950 text-gray-800 dark:text-gray-300 antialiased"> <body class="bg-gray-50 dark:bg-neutral-950 text-gray-800 dark:text-gray-300 antialiased">
<div class="flex flex-col min-h-screen"> <div class="flex flex-col min-h-screen">
@@ -31,7 +32,8 @@
A simple, fast, and reliable URL shortener for everyone. A simple, fast, and reliable URL shortener for everyone.
</p> </p>
<form id="shorten-form" class="mt-8 max-w-xl mx-auto flex flex-col sm:flex-row gap-3"> <form id="shorten-form" class="mt-8 max-w-xl mx-auto flex flex-col gap-4">
<div class="flex flex-col sm:flex-row gap-3">
<label class="relative flex-1"> <label class="relative flex-1">
<i data-lucide="link" class="absolute top-1/2 left-4 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-neutral-500"></i> <i data-lucide="link" class="absolute top-1/2 left-4 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-neutral-500"></i>
<input id="url-input" type="text" placeholder="your-long-link.com" autocapitalize="off" spellcheck="false" class="w-full pl-11 pr-4 py-3 bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:outline-none transition"> <input id="url-input" type="text" placeholder="your-long-link.com" autocapitalize="off" spellcheck="false" class="w-full pl-11 pr-4 py-3 bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:outline-none transition">
@@ -39,6 +41,8 @@
<button id="submit-button" type="submit" class="px-6 py-3 font-semibold bg-black dark:bg-white text-white dark:text-black rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-wait"> <button id="submit-button" type="submit" class="px-6 py-3 font-semibold bg-black dark:bg-white text-white dark:text-black rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-wait">
Shorten Shorten
</button> </button>
</div>
<div class="g-recaptcha self-center" data-sitekey="6LeXhdYrAAAAALW6DdgxNeHU0kwBncdicLnVYvXT"></div>
</form> </form>
<div id="result-container" hidden class="mt-4 max-w-xl mx-auto flex gap-2"> <div id="result-container" hidden class="mt-4 max-w-xl mx-auto flex gap-2">
@@ -61,85 +65,48 @@
</div> </div>
<script> <script>
const $ = q => document.querySelector(q); const $=q=>document.querySelector(q),form=$('#shorten-form'),urlInput=$('#url-input'),submitButton=$('#submit-button'),messageArea=$('#message-area'),resultContainer=$('#result-container'),resultOutput=$('#result-output'),copyButton=$('#copy-button'),openLinkButton=$('#open-link-button'),normalizeUrl=s=>{try{return new URL(s).href}catch(_){try{return new URL('https://'+s).href}catch(_){}}};
const form = $('#shorten-form'); form.onsubmit=async e=>{
const urlInput = $('#url-input');
const submitButton = $('#submit-button');
const messageArea = $('#message-area');
const resultContainer = $('#result-container');
const resultOutput = $('#result-output');
const copyButton = $('#copy-button');
const openLinkButton = $('#open-link-button');
const normalizeUrl = (str) => {
try { return new URL(str).href; }
catch (_) {
try { return new URL('https://' + str).href; }
catch (_) {}
}
};
form.onsubmit = async (e) => {
e.preventDefault(); e.preventDefault();
messageArea.textContent = ''; messageArea.textContent='';
const u=normalizeUrl(urlInput.value.trim());
const url = normalizeUrl(urlInput.value.trim()); if(!u)return messageArea.textContent='Please enter a valid URL.';
if (!url) { const k=grecaptcha.getResponse();
messageArea.textContent = 'Please enter a valid URL.'; if(!k)return messageArea.textContent='Please complete the CAPTCHA.';
return; submitButton.disabled=true;submitButton.textContent='…';
try{
const r=await fetch('/api/create',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:u,token:k})});
if(!r.ok)throw new Error(await r.text()||r.statusText);
const d=await r.json();
resultContainer.hidden=false;
resultOutput.value=d.shortUrl;
openLinkButton.href=d.shortUrl
}catch(err){
resultContainer.hidden=true;
messageArea.textContent=err.message||'Something went wrong.'
}finally{
grecaptcha.reset();
submitButton.disabled=false;
submitButton.textContent='Shorten'
} }
submitButton.disabled = true;
submitButton.textContent = '…';
try {
const response = await fetch('/api/create', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url }),
});
if (!response.ok) {
throw new Error(await response.text() || response.statusText);
}
const data = await response.json();
resultContainer.hidden = false;
resultOutput.value = data.shortUrl;
openLinkButton.href = data.shortUrl;
} catch (err) {
resultContainer.hidden = true;
messageArea.textContent = err.message || 'Something went wrong.';
}
submitButton.disabled = false;
submitButton.textContent = 'Shorten';
}; };
copyButton.onclick = async () => { copyButton.onclick=async()=>{
resultOutput.select(); resultOutput.select();
try { try{
await navigator.clipboard.writeText(resultOutput.value); await navigator.clipboard.writeText(resultOutput.value);
copyButton.innerHTML = '<i data-lucide="check" class="w-5 h-5 text-green-500"></i>'; copyButton.innerHTML='<i data-lucide="check" class="w-5 h-5 text-green-500"></i>';
lucide.createIcons(); lucide.createIcons();
setTimeout(() => { setTimeout(()=>{
copyButton.innerHTML = '<i data-lucide="copy" class="w-5 h-5"></i>'; copyButton.innerHTML='<i data-lucide="copy" class="w-5 h-5"></i>';
lucide.createIcons(); lucide.createIcons()
}, 1000); },1e3)
} catch (err) { }catch(err){}
// Handle clipboard write error
}
};
resultOutput.onclick = () => resultOutput.select();
urlInput.oninput = () => {
resultContainer.hidden = true;
messageArea.textContent = '';
}; };
resultOutput.onclick=()=>resultOutput.select();
urlInput.oninput=()=>{resultContainer.hidden=true;messageArea.textContent=''};
lucide.createIcons(); lucide.createIcons();
</script> </script>
</body> </body>