mirror of
https://github.com/4ev-link/4ev.link.git
synced 2026-01-13 16:18:05 +00:00
224 lines
22 KiB
HTML
224 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - 4ev.link</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔗</text></svg>">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="//unpkg.com/alpinejs" defer></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
|
|
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-800 font-sans">
|
|
<script>if (!localStorage.getItem('username')) window.location.href = '/';</script>
|
|
|
|
<div x-data="dashboard()" x-init="fetchLinks()" @link-created.window="fetchLinks()" @keydown.escape.window="sidebarOpen = false" class="min-h-screen flex flex-col">
|
|
<header class="bg-white/80 backdrop-blur-sm border-b border-slate-200 sticky top-0 z-10">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<a href="/dash/" class="text-2xl font-bold flex items-center gap-2">
|
|
<i data-lucide="link" class="w-6 h-6 text-slate-800"></i> 4ev.link
|
|
</a>
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-slate-600">Welcome, <strong x-text="user"></strong></span>
|
|
<button @click="sidebarOpen = !sidebarOpen" class="text-slate-500 hover:text-slate-900 transition-colors">
|
|
<i data-lucide="panel-right" class="w-5 h-5"></i>
|
|
</button>
|
|
<button @click="localStorage.clear(); window.location.href='/'" class="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="flex-grow flex relative">
|
|
<main class="flex-grow">
|
|
<div class="max-w-5xl mx-auto p-4 sm:p-6 lg:px-8">
|
|
<div class="max-w-2xl mx-auto">
|
|
<div class="bg-white p-8 rounded-xl shadow-sm border border-slate-200">
|
|
<template x-if="!editingSlug">
|
|
<div x-data="linkForm()" x-init="renderCaptcha()">
|
|
<h1 class="text-2xl font-bold mb-1">Create a new link</h1>
|
|
<p class="text-slate-500 mb-6">Shorten a long URL into a memorable link.</p>
|
|
|
|
<template x-if="result.url">
|
|
<div class="bg-green-100 border border-green-300 text-green-800 p-3.5 rounded-md mb-6" role="alert">
|
|
<p class="font-semibold">Success! Your link is ready:</p>
|
|
<div class="flex items-center gap-2 mt-2">
|
|
<a :href="result.url" x-text="result.url" target="_blank" class="font-mono text-slate-700 hover:underline"></a>
|
|
<button @click="navigator.clipboard.writeText(result.url); copied = true; setTimeout(() => copied = false, 2000)" class="text-slate-500 hover:text-slate-900">
|
|
<i data-lucide="copy" class="w-4 h-4" x-show="!copied"></i>
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600" x-show="copied" style="display: none;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<form @submit.prevent="createLink" class="space-y-4">
|
|
<div>
|
|
<label for="longUrl" class="block text-sm font-medium text-slate-700 mb-1">Destination URL</label>
|
|
<input x-model="destination_url" type="text" id="longUrl" placeholder="example.com/very-long-url-to-shorten" required class="w-full p-3 bg-slate-50 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-slate-400 transition">
|
|
</div>
|
|
<div>
|
|
<label for="customSlug" class="block text-sm font-medium text-slate-700 mb-1">Custom slug (optional)</label>
|
|
<div class="flex items-center">
|
|
<span class="p-3 bg-slate-100 border border-r-0 border-slate-300 rounded-l-md text-slate-500">4ev.link/</span>
|
|
<input x-model="slug" type="text" id="customSlug" placeholder="my-custom-link" class="w-full p-3 bg-slate-50 border border-slate-300 rounded-r-md focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-slate-400 transition">
|
|
</div>
|
|
</div>
|
|
<div class="recaptcha-container my-4 flex justify-center"></div>
|
|
<p x-text="error" x-show="error" class="text-rose-500 text-sm h-5 -mt-2 text-center"></p>
|
|
<button type="submit" :disabled="loading" class="w-full py-3 font-semibold rounded-lg text-white bg-slate-800 hover:bg-slate-900 transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<span x-show="!loading">Create Short Link</span>
|
|
<i x-show="loading" data-lucide="loader-2" class="animate-spin w-6 h-6"></i>
|
|
</button>
|
|
<p class="text-xs text-slate-500 text-center pt-2">Links are permanent and do not expire.</p>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="editingSlug">
|
|
<div x-data="editForm()" x-init="init()">
|
|
<button @click="editingSlug = null" class="text-slate-500 hover:text-slate-900 mb-4 flex items-center gap-1">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> Back
|
|
</button>
|
|
<h1 class="text-2xl font-bold mb-1">Edit link</h1>
|
|
<p class="text-slate-500 mb-6 font-mono" x-text="'4ev.link/' + editingSlug"></p>
|
|
|
|
<form @submit.prevent="updateLink" class="space-y-4">
|
|
<div>
|
|
<label for="editUrl" class="block text-sm font-medium text-slate-700 mb-1">Destination URL</label>
|
|
<input x-model="destination_url" type="text" id="editUrl" placeholder="example.com/new-destination" required class="w-full p-3 bg-slate-50 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-slate-400 transition">
|
|
</div>
|
|
<div class="flex items-center justify-between py-2">
|
|
<span class="text-sm font-medium text-slate-700">Enable Analytics</span>
|
|
<button type="button" @click="analyticsEnabled = !analyticsEnabled; fetchAnalytics()" :class="analyticsEnabled ? 'bg-slate-800' : '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" role="switch" :aria-checked="analyticsEnabled">
|
|
<span :class="analyticsEnabled ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
|
|
</button>
|
|
</div>
|
|
<div class="turnstile-container my-4 flex justify-center"></div>
|
|
<p x-text="error" x-show="error" class="text-rose-500 text-sm h-5 -mt-2 text-center"></p>
|
|
<div class="flex gap-3">
|
|
<button type="submit" :disabled="loading" class="flex-1 py-3 font-semibold rounded-lg text-white bg-slate-800 hover:bg-slate-900 transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<span x-show="!loading">Update</span>
|
|
<i x-show="loading" data-lucide="loader-2" class="animate-spin w-6 h-6"></i>
|
|
</button>
|
|
<button type="button" @click="deleteLink" :disabled="loading" 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">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<template x-if="analyticsEnabled && analytics.length > 0">
|
|
<div class="mt-8 pt-6 border-t border-slate-200">
|
|
<h3 class="text-lg font-semibold mb-4">Analytics</h3>
|
|
<div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
|
<div class="space-y-3">
|
|
<template x-for="item in analytics" :key="item.referrer">
|
|
<div class="flex items-center justify-between py-2 border-b border-slate-200 last:border-0">
|
|
<span class="text-sm font-medium text-slate-700" x-text="item.referrer"></span>
|
|
<span class="text-sm font-semibold text-slate-900" x-text="item.count + ' clicks'"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="analyticsEnabled && analytics.length === 0 && !loadingAnalytics">
|
|
<div class="mt-8 pt-6 border-t border-slate-200">
|
|
<h3 class="text-lg font-semibold mb-4">Analytics</h3>
|
|
<p class="text-slate-500 text-center py-4">No analytics data yet. Share your link to start collecting data!</p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-2xl mx-auto mt-12" x-show="!editingSlug">
|
|
<h2 class="text-2xl font-bold mb-4">Your Links</h2>
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 min-h-[10rem] flex flex-col justify-center">
|
|
<template x-if="loadingLinks">
|
|
<div class="flex justify-center items-center p-8">
|
|
<i data-lucide="loader-2" class="animate-spin w-8 h-8 text-slate-400"></i>
|
|
</div>
|
|
</template>
|
|
<template x-if="!loadingLinks && errorLinks">
|
|
<p class="text-rose-500 text-center" x-text="errorLinks"></p>
|
|
</template>
|
|
<template x-if="!loadingLinks && !errorLinks">
|
|
<div>
|
|
<template x-if="links.length === 0">
|
|
<p class="text-slate-500 text-center py-4">You haven't created any links yet.</p>
|
|
</template>
|
|
<template x-if="links.length > 0">
|
|
<ul class="space-y-3">
|
|
<template x-for="slug in links" :key="slug">
|
|
<li x-data="{ copied: false }" class="flex items-center justify-between p-3 bg-slate-50 rounded-md border border-slate-200 hover:bg-slate-100 transition-colors">
|
|
<a :href="`/${slug}`" target="_blank" x-text="`${window.location.host}/${slug}`" class="font-mono text-slate-700 hover:underline"></a>
|
|
<button @click="navigator.clipboard.writeText(`https://${window.location.host}/${slug}`); copied = true; setTimeout(() => copied = false, 2000)" class="text-slate-500 hover:text-slate-900 transition-colors">
|
|
<i data-lucide="copy" class="w-4 h-4" x-show="!copied"></i>
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600" x-show="copied" style="display: none;"></i>
|
|
</button>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<aside x-show="sidebarOpen" @click.away="sidebarOpen = false" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform translate-x-full" class="fixed right-0 top-16 bottom-0 w-80 bg-white border-l border-slate-200 shadow-lg z-20 overflow-y-auto" style="display: none;">
|
|
<div class="p-4">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="font-bold text-lg">Your Links</h3>
|
|
<button @click="sidebarOpen = false" class="text-slate-500 hover:text-slate-900">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<template x-if="loadingLinks">
|
|
<div class="flex justify-center p-8">
|
|
<i data-lucide="loader-2" class="animate-spin w-6 h-6 text-slate-400"></i>
|
|
</div>
|
|
</template>
|
|
<template x-if="!loadingLinks && errorLinks">
|
|
<p class="text-rose-500 text-sm text-center" x-text="errorLinks"></p>
|
|
</template>
|
|
<template x-if="!loadingLinks && !errorLinks && links.length === 0">
|
|
<p class="text-slate-500 text-sm text-center py-8">No links yet</p>
|
|
</template>
|
|
<template x-if="!loadingLinks && !errorLinks && links.length > 0">
|
|
<ul class="space-y-2">
|
|
<template x-for="slug in links" :key="slug">
|
|
<li>
|
|
<button @click="editingSlug = slug; sidebarOpen = false" class="w-full text-left p-3 bg-slate-50 hover:bg-slate-100 rounded-md border border-slate-200 transition-colors font-mono text-sm" x-text="slug"></button>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</template>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
<footer class="text-center py-4 text-sm text-slate-500 border-t border-slate-200 bg-slate-50">
|
|
<a href="https://blog.4ev.link" target="_blank" class="hover:text-slate-800 transition-colors">Blog</a> •
|
|
<a href="/acceptable-use" class="hover:text-slate-800 transition-colors">Acceptable Use</a> •
|
|
<a href="/abuse" class="hover:text-slate-800 transition-colors">Abuse</a>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
function dashboard(){return{user:localStorage.getItem("username"),sidebarOpen:!1,editingSlug:null,links:[],loadingLinks:!0,errorLinks:"",async fetchLinks(){this.loadingLinks=!0,this.errorLinks="";try{const e=localStorage.getItem("username"),t=localStorage.getItem("pass_hash");if(!e||!t)throw new Error("Authentication error.");const s=await fetch("/api/links/list",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:e,pass_hash:t})});if(!s.ok)throw new Error(await s.text()||"Failed to fetch links.");this.links=(await s.json()).reverse()}catch(e){this.errorLinks=e.message}finally{this.loadingLinks=!1,this.$nextTick(()=>lucide.createIcons())}}}}
|
|
function linkForm(){return{destination_url:"",slug:"",loading:!1,error:"",result:{},copied:!1,widgetId:null,renderCaptcha(){if(!window.grecaptcha?.render)return setTimeout(()=>this.renderCaptcha(),100);this.$nextTick(()=>{const e=this.$el.querySelector(".recaptcha-container");e&&(e.innerHTML="",this.widgetId=grecaptcha.render(e,{sitekey:"6LeXhdYrAAAAALW6DdgxNeHU0kwBncdicLnVYvXT"}))})},async createLink(){this.loading=!0,this.error="",this.result={};const o=grecaptcha.getResponse(this.widgetId);if(!o)return this.error="Please complete the CAPTCHA.",this.loading=!1,void 0;try{const e=localStorage.getItem("username"),s=localStorage.getItem("pass_hash");if(!e||!s)throw new Error("Authentication error.");const t=await fetch("/api/links/create",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({destination_url:this.destination_url,slug:this.slug||null,username:e,pass_hash:s,"g-recaptcha-response":o})});if(!t.ok)throw new Error(await t.text()||"Failed to create link.");const i=await t.json(),r=window.location.host;this.result={...i,url:`https://${r}/${i.slug}`},this.destination_url="",this.slug="",this.$dispatch("link-created"),this.$nextTick(()=>lucide.createIcons())}catch(e){this.error=e.message}finally{this.loading=!1,grecaptcha.reset(this.widgetId)}}}}
|
|
function editForm(){return{destination_url:"",analyticsEnabled:!1,analytics:[],loadingAnalytics:!1,loading:!1,error:"",widgetId:null,init(){this.$watch("editingSlug",t=>{t&&this.loadDataForSlug(t)}),this.editingSlug&&this.loadDataForSlug(this.editingSlug)},async loadDataForSlug(t){this.destination_url="",this.analyticsEnabled=!1,this.analytics=[],this.error="",this.renderTurnstile();try{const s=await fetch(`/api/links/get?slug=${t}`);if(!s.ok)throw new Error(await s.text()||"Failed to load link");const i=await s.json();if(this.destination_url=i.destination_url.startsWith("http")?i.destination_url:`https://${i.destination_url}`,this.analyticsEnabled=i.analytics_enabled||!1,this.analyticsEnabled){this.loadingAnalytics=!0;try{const s=await fetch(`/api/analytics/get?slug=${t}`);if(!s.ok)throw new Error(await s.text()||"Failed to load analytics");this.analytics=await s.json()}finally{this.loadingAnalytics=!1}}}catch(s){this.error=s.message}finally{this.$nextTick(()=>lucide.createIcons())}},renderTurnstile(){if(!window.turnstile?.render)return setTimeout(()=>this.renderTurnstile(),100);this.$nextTick(()=>{const t=this.$el.querySelector(".turnstile-container");t&&(t.innerHTML="",this.widgetId=turnstile.render(t,{sitekey:"0x4AAAAAAB54R0OUQDyuiUS5"}))})},async updateLink(){this.loading=!0,this.error="";const o=turnstile.getResponse(this.widgetId);if(!o)return this.error="Please complete the CAPTCHA.",this.loading=!1,void 0;try{const t=localStorage.getItem("username"),s=localStorage.getItem("pass_hash");if(!t||!s)throw new Error("Authentication error.");const i=await fetch("/api/links/update",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({slug:this.editingSlug,destination_url:this.destination_url,analytics_enabled:this.analyticsEnabled,username:t,pass_hash:s,"cf-turnstile-response":o})});if(!i.ok)throw new Error(await i.text()||"Failed to update link.");this.editingSlug=null,this.$dispatch("link-created")}catch(t){this.error=t.message}finally{this.loading=!1,turnstile.reset(this.widgetId)}},async deleteLink(){if(!confirm("Are you sure you want to delete this link?"))return;this.loading=!0,this.error="";const o=turnstile.getResponse(this.widgetId);if(!o)return this.error="Please complete the CAPTCHA.",this.loading=!1,void 0;try{const t=localStorage.getItem("username"),s=localStorage.getItem("pass_hash");if(!t||!s)throw new Error("Authentication error.");const i=await fetch("/api/links/delete",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({slug:this.editingSlug,username:t,pass_hash:s,"cf-turnstile-response":o})});if(!i.ok)throw new Error(await i.text()||"Failed to delete link.");this.editingSlug=null,this.$dispatch("link-created")}catch(t){this.error=t.message}finally{this.loading=!1,turnstile.reset(this.widgetId)}}}}
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|