Feat: UI support for seized links

This commit is contained in:
2025-11-21 12:52:18 -08:00
parent 8d703183e8
commit 25cbf4aab9

View File

@@ -194,6 +194,16 @@
x-text="'4ev.link/' + editingSlug" x-text="'4ev.link/' + editingSlug"
></p> ></p>
<template x-if="seized">
<div class="bg-rose-50 border border-rose-200 text-rose-900 p-4 rounded-md mb-6 text-xs sm:text-sm flex items-start gap-3">
<i data-lucide="alert-triangle" class="w-5 h-5 text-rose-600 shrink-0"></i>
<div>
<p class="font-bold">This link has been seized.</p>
<p class="mt-1">It currently redirects to a takedown notice. Updates and deletion are disabled.</p>
</div>
</div>
</template>
<form @submit.prevent="updateLink" class="space-y-4 text-sm"> <form @submit.prevent="updateLink" class="space-y-4 text-sm">
<div> <div>
<label <label
@@ -206,9 +216,10 @@
x-model="destination_url" x-model="destination_url"
type="text" type="text"
id="editUrl" id="editUrl"
:disabled="seized"
placeholder="example.com/new-destination" placeholder="example.com/new-destination"
required required
class="w-full p-3 bg-slate-50 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-400 transition text-xs sm:text-sm" class="w-full p-3 bg-slate-50 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-400 transition text-xs sm:text-sm disabled:opacity-60 disabled:cursor-not-allowed"
> >
</div> </div>
<div class="flex items-center justify-between py-2"> <div class="flex items-center justify-between py-2">
@@ -217,9 +228,10 @@
</span> </span>
<button <button
type="button" type="button"
@click="analyticsEnabled=!analyticsEnabled;fetchAnalytics()" @click="if(!seized){analyticsEnabled=!analyticsEnabled;fetchAnalytics()}"
:disabled="seized"
:class="analyticsEnabled ? 'bg-slate-900' : 'bg-slate-200'" :class="analyticsEnabled ? 'bg-slate-900' : 'bg-slate-200'"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
role="switch" role="switch"
:aria-checked="analyticsEnabled" :aria-checked="analyticsEnabled"
> >
@@ -229,7 +241,11 @@
></span> ></span>
</button> </button>
</div> </div>
<div class="turnstile-container my-4 flex justify-center"></div>
<template x-if="!seized">
<div class="turnstile-container my-4 flex justify-center"></div>
</template>
<p <p
x-text="error" x-text="error"
x-show="error" x-show="error"
@@ -238,7 +254,7 @@
<div class="flex gap-3"> <div class="flex gap-3">
<button <button
type="submit" type="submit"
:disabled="loading" :disabled="loading || seized"
class="flex-1 py-3 font-semibold rounded-lg text-white bg-slate-900 hover:bg-black transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed text-xs sm:text-sm" class="flex-1 py-3 font-semibold rounded-lg text-white bg-slate-900 hover:bg-black transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed text-xs sm:text-sm"
> >
<span x-show="!loading">Update</span> <span x-show="!loading">Update</span>
@@ -251,7 +267,7 @@
<button <button
type="button" type="button"
@click="deleteLink" @click="deleteLink"
:disabled="loading" :disabled="loading || seized"
class="px-6 py-3 font-semibold rounded-lg text-white bg-rose-600 hover:bg-rose-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-xs sm:text-sm" class="px-6 py-3 font-semibold rounded-lg text-white bg-rose-600 hover:bg-rose-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-xs sm:text-sm"
> >
Delete Delete
@@ -531,6 +547,7 @@
return{ return{
destination_url:"", destination_url:"",
analyticsEnabled:!1, analyticsEnabled:!1,
seized:!1,
analytics:[], analytics:[],
loadingAnalytics:!1, loadingAnalytics:!1,
loading:!1, loading:!1,
@@ -545,9 +562,9 @@
async loadDataForSlug(t){ async loadDataForSlug(t){
this.destination_url="", this.destination_url="",
this.analyticsEnabled=!1, this.analyticsEnabled=!1,
this.seized=!1,
this.analytics=[], this.analytics=[],
this.error="", this.error="";
this.renderTurnstile();
try{ try{
const s=await fetch(`/api/links/get?slug=${t}`); const s=await fetch(`/api/links/get?slug=${t}`);
if(!s.ok) if(!s.ok)
@@ -557,7 +574,11 @@
? i.destination_url ? i.destination_url
: `https://${i.destination_url}`; : `https://${i.destination_url}`;
this.analyticsEnabled=i.analytics_enabled||!1; this.analyticsEnabled=i.analytics_enabled||!1;
if(this.analyticsEnabled){ this.seized=i.seized||!1;
if(!this.seized) this.renderTurnstile();
if(this.analyticsEnabled && !this.seized){
this.loadingAnalytics=!0; this.loadingAnalytics=!0;
try{ try{
const a=await fetch(`/api/analytics/get?slug=${t}`); const a=await fetch(`/api/analytics/get?slug=${t}`);
@@ -678,3 +699,4 @@
</script> </script>
</body> </body>
</html> </html>