Fix: Use watcher to correctly re-initialize state

This commit is contained in:
2025-10-11 09:28:18 -07:00
parent 92edd1e2ec
commit d86c814e43

View File

@@ -81,7 +81,7 @@
</template>
<template x-if="editingSlug">
<div :key="editingSlug" x-data="editForm()" x-init="init()">
<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>
@@ -216,7 +216,7 @@
<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,async init(){await this.loadCurrentUrl(),this.renderTurnstile(),this.analyticsEnabled&&await this.fetchAnalytics()},renderTurnstile(){if(!window.turnstile?.render)return setTimeout(()=>this.renderTurnstile(),100);this.$nextTick(()=>{const e=this.$el.querySelector(".turnstile-container");e&&(e.innerHTML="",this.widgetId=turnstile.render(e,{sitekey:"0x4AAAAAAB54R0OUQDyuiUS5"}))})},async loadCurrentUrl(){try{const e=await fetch(`/api/links/get?slug=${this.editingSlug}`);if(!e.ok)throw new Error("Failed to load link");const s=await e.json();this.destination_url=s.destination_url.startsWith("http")?s.destination_url:`https://${s.destination_url}`,this.analyticsEnabled=s.analytics_enabled||!1}catch(e){this.error=e.message}},async fetchAnalytics(){if(!this.analyticsEnabled)return this.analytics=[],void 0;this.loadingAnalytics=!0;try{const e=await fetch(`/api/analytics/get?slug=${this.editingSlug}`);if(!e.ok)throw new Error("Failed to load analytics");this.analytics=await e.json()}catch(e){console.error(e)}finally{this.loadingAnalytics=!1,this.$nextTick(()=>lucide.createIcons())}},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 e=localStorage.getItem("username"),s=localStorage.getItem("pass_hash");if(!e||!s)throw new Error("Authentication error.");const t=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:e,pass_hash:s,"cf-turnstile-response":o})});if(!t.ok)throw new Error(await t.text()||"Failed to update link.");await this.fetchAnalytics(),this.editingSlug=null,this.$dispatch("link-created")}catch(e){this.error=e.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 e=localStorage.getItem("username"),s=localStorage.getItem("pass_hash");if(!e||!s)throw new Error("Authentication error.");const t=await fetch("/api/links/delete",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({slug:this.editingSlug,username:e,pass_hash:s,"cf-turnstile-response":o})});if(!t.ok)throw new Error(await t.text()||"Failed to delete link.");this.editingSlug=null,this.$dispatch("link-created")}catch(e){this.error=e.message}finally{this.loading=!1,turnstile.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>