Skip to content

Commit 24e6d96

Browse files
Adamcy-lvtsAdamcy-lvts
committed
Add dedicated Delete Account page for data deletion requests
- Create DeleteAccount.vue with premium dark-themed styling - Add /delete-account route for Google Play compliance - Include data deletion instructions, contact email, and retention period info
1 parent 5619885 commit 24e6d96

2 files changed

Lines changed: 268 additions & 0 deletions

File tree

‎resources/js/pages/DeleteAccount.vue‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
<script setup lang="ts">
2+
import { Head, Link } from '@inertiajs/vue3';
3+
import AppLogoIcon from '@/components/AppLogoIcon.vue';
4+
</script>
5+
6+
<template>
7+
8+
<Head title="Delete Account - SpentTracker">
9+
<link rel="preconnect" href="https://fonts.bunny.net" />
10+
<link href="https://fonts.bunny.net/css?family=outfit:300,400,500,600,700,800,900" rel="stylesheet" />
11+
</Head>
12+
13+
<div class="delete-account-page min-h-screen bg-[#030712] text-[#94a3b8]">
14+
<!-- Compact Navbar -->
15+
<header class="fixed top-0 z-50 w-full border-b border-white/5 bg-[#030712]/90 backdrop-blur-md py-3 sm:py-4">
16+
<div class="mx-auto flex max-w-5xl items-center justify-between px-4 sm:px-6">
17+
<Link :href="route('home')" class="group flex items-center gap-2">
18+
<div
19+
class="flex size-7 items-center justify-center rounded-lg bg-white/5 border border-white/10 group-hover:rotate-6 transition-transform">
20+
<AppLogoIcon class="size-4 fill-current text-teal-400" />
21+
</div>
22+
<span class="text-[11px] font-black uppercase tracking-[0.2em] text-white">SpenTracker</span>
23+
</Link>
24+
25+
<div class="flex items-center gap-4">
26+
<Link :href="route('register')"
27+
class="rounded-full bg-white px-4 py-1.5 text-[9px] font-black uppercase tracking-widest text-black transition hover:bg-teal-400">
28+
Join
29+
</Link>
30+
</div>
31+
</div>
32+
</header>
33+
34+
<main class="mx-auto max-w-4xl px-4 pt-24 pb-20 sm:pt-32 sm:px-6">
35+
<!-- Header -->
36+
<div class="mb-16">
37+
<p class="mb-2 text-[9px] font-black uppercase tracking-[0.3em] text-white/20">Account Management</p>
38+
<h1 class="text-3xl font-black tracking-tighter text-white sm:text-5xl">Delete Your SpentTracker Account
39+
and Data</h1>
40+
<p class="mt-4 text-sm font-medium leading-relaxed max-w-2xl">
41+
Users of SpentTracker have the right to request deletion of their personal data.
42+
</p>
43+
</div>
44+
45+
<!-- Content -->
46+
<div class="space-y-12 text-xs sm:text-[13px] leading-relaxed">
47+
48+
<!-- How to Request Section -->
49+
<section class="space-y-4">
50+
<h2 class="text-lg font-black text-white uppercase tracking-wider flex items-center gap-3">
51+
<span
52+
class="flex size-8 items-center justify-center rounded-lg bg-teal-500/10 border border-teal-500/20">
53+
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-teal-400" fill="none"
54+
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
55+
<path stroke-linecap="round" stroke-linejoin="round"
56+
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
57+
</svg>
58+
</span>
59+
How to Request Data Deletion
60+
</h2>
61+
62+
<div class="ml-11">
63+
<p class="mb-4">You may request deletion of your SpentTracker account and associated data by
64+
sending an email to:</p>
65+
66+
<a href="mailto:support@spenttracker.live"
67+
class="inline-flex items-center gap-3 rounded-2xl bg-gradient-to-r from-teal-500/10 to-cyan-500/10 border border-teal-500/20 px-6 py-4 transition-all hover:border-teal-500/40 hover:from-teal-500/20 hover:to-cyan-500/20">
68+
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-teal-400" fill="none"
69+
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
70+
<path stroke-linecap="round" stroke-linejoin="round"
71+
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
72+
</svg>
73+
<span class="text-sm font-bold text-white">support@spenttracker.live</span>
74+
</a>
75+
76+
<p class="mt-4 text-white/60">
77+
<span class="text-teal-400 font-semibold">Tip:</span> Please include the email address
78+
associated with your SpentTracker account in your deletion request.
79+
</p>
80+
</div>
81+
</section>
82+
83+
<!-- What Data Will Be Deleted -->
84+
<section class="space-y-4">
85+
<h2 class="text-lg font-black text-white uppercase tracking-wider flex items-center gap-3">
86+
<span
87+
class="flex size-8 items-center justify-center rounded-lg bg-rose-500/10 border border-rose-500/20">
88+
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-rose-400" fill="none"
89+
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
90+
<path stroke-linecap="round" stroke-linejoin="round"
91+
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
92+
</svg>
93+
</span>
94+
What Data Will Be Deleted
95+
</h2>
96+
97+
<div class="ml-11">
98+
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
99+
<!-- Account Information -->
100+
<div
101+
class="rounded-2xl bg-white/[0.02] border border-white/5 p-5 transition-all hover:border-white/10 hover:bg-white/[0.04]">
102+
<div
103+
class="mb-3 flex size-10 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 border border-violet-500/20">
104+
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-violet-400" fill="none"
105+
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
106+
<path stroke-linecap="round" stroke-linejoin="round"
107+
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
108+
</svg>
109+
</div>
110+
<h3 class="font-bold text-white mb-1">Account Information</h3>
111+
<p class="text-[11px] opacity-70">Name, email, phone number</p>
112+
</div>
113+
114+
<!-- Financial Records -->
115+
<div
116+
class="rounded-2xl bg-white/[0.02] border border-white/5 p-5 transition-all hover:border-white/10 hover:bg-white/[0.04]">
117+
<div
118+
class="mb-3 flex size-10 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500/20 to-green-500/20 border border-emerald-500/20">
119+
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-emerald-400" fill="none"
120+
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
121+
<path stroke-linecap="round" stroke-linejoin="round"
122+
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
123+
</svg>
124+
</div>
125+
<h3 class="font-bold text-white mb-1">Financial Records</h3>
126+
<p class="text-[11px] opacity-70">Expense and financial records</p>
127+
</div>
128+
129+
<!-- Location Data -->
130+
<div
131+
class="rounded-2xl bg-white/[0.02] border border-white/5 p-5 transition-all hover:border-white/10 hover:bg-white/[0.04]">
132+
<div
133+
class="mb-3 flex size-10 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 border border-amber-500/20">
134+
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-amber-400" fill="none"
135+
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
136+
<path stroke-linecap="round" stroke-linejoin="round"
137+
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
138+
<path stroke-linecap="round" stroke-linejoin="round"
139+
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
140+
</svg>
141+
</div>
142+
<h3 class="font-bold text-white mb-1">Location Data</h3>
143+
<p class="text-[11px] opacity-70">Location data (if any)</p>
144+
</div>
145+
</div>
146+
</div>
147+
</section>
148+
149+
<!-- Retention Period -->
150+
<section class="space-y-4">
151+
<h2 class="text-lg font-black text-white uppercase tracking-wider flex items-center gap-3">
152+
<span
153+
class="flex size-8 items-center justify-center rounded-lg bg-blue-500/10 border border-blue-500/20">
154+
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-blue-400" fill="none"
155+
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
156+
<path stroke-linecap="round" stroke-linejoin="round"
157+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
158+
</svg>
159+
</span>
160+
Retention Period
161+
</h2>
162+
163+
<div class="ml-11">
164+
<div
165+
class="rounded-2xl bg-gradient-to-br from-blue-500/5 to-indigo-500/5 border border-blue-500/10 p-6">
166+
<div class="flex items-start gap-4">
167+
<div
168+
class="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-blue-500/10 border border-blue-500/20">
169+
<span class="text-xl font-black text-blue-400">30</span>
170+
</div>
171+
<div>
172+
<p class="font-semibold text-white mb-1">Days to Permanent Deletion</p>
173+
<p class="opacity-70">All requested data will be permanently deleted from our
174+
servers within 30 days, unless a longer retention period is required by law.
175+
</p>
176+
</div>
177+
</div>
178+
</div>
179+
180+
<div
181+
class="mt-4 flex items-center gap-3 rounded-xl bg-rose-500/5 border border-rose-500/10 px-4 py-3">
182+
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-rose-400 shrink-0" fill="none"
183+
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
184+
<path stroke-linecap="round" stroke-linejoin="round"
185+
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
186+
</svg>
187+
<p class="text-sm">
188+
<span class="font-bold text-rose-400">Important:</span>
189+
<span class="text-white/70">After deletion, the data cannot be recovered.</span>
190+
</p>
191+
</div>
192+
</div>
193+
</section>
194+
195+
<!-- Support Contact Card -->
196+
<section class="pt-8 border-t border-white/5">
197+
<div class="rounded-3xl bg-white p-8 text-black sm:p-12">
198+
<h2 class="text-2xl font-black tracking-tighter mb-2">Need Help?</h2>
199+
<p class="text-sm font-medium opacity-60 mb-6">Questions about data deletion? We're here to
200+
help.</p>
201+
<div class="flex flex-wrap gap-4">
202+
<a href="mailto:support@spenttracker.live"
203+
class="bg-black text-white px-6 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition hover:bg-teal-600">support@spenttracker.live</a>
204+
<a href="https://spentracker.live" target="_blank"
205+
class="border border-black/10 px-6 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest text-black/40 transition hover:border-black/20 hover:text-black/60">spentracker.live</a>
206+
</div>
207+
</div>
208+
</section>
209+
210+
<!-- Additional Links -->
211+
<section class="flex flex-wrap gap-4">
212+
<Link :href="route('privacy-policy')"
213+
class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-5 py-2.5 text-[10px] font-bold uppercase tracking-widest text-white/60 transition hover:border-white/20 hover:text-white/80">
214+
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24"
215+
stroke="currentColor" stroke-width="2">
216+
<path stroke-linecap="round" stroke-linejoin="round"
217+
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
218+
</svg>
219+
Privacy Policy
220+
</Link>
221+
<Link :href="route('home')"
222+
class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-5 py-2.5 text-[10px] font-bold uppercase tracking-widest text-white/60 transition hover:border-white/20 hover:text-white/80">
223+
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24"
224+
stroke="currentColor" stroke-width="2">
225+
<path stroke-linecap="round" stroke-linejoin="round"
226+
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
227+
</svg>
228+
Back to Home
229+
</Link>
230+
</section>
231+
</div>
232+
</main>
233+
234+
<footer class="border-t border-white/5 py-12 text-center">
235+
<p class="text-[9px] font-bold uppercase tracking-[0.4em] text-white/10">© 2025 DEV CENTRIC STUDIOS.</p>
236+
</footer>
237+
</div>
238+
</template>
239+
240+
<style scoped>
241+
.delete-account-page {
242+
font-family: 'Outfit', sans-serif;
243+
-webkit-font-smoothing: antialiased;
244+
scroll-behavior: smooth;
245+
}
246+
247+
/* Custom Scrollbar */
248+
::-webkit-scrollbar {
249+
width: 3px;
250+
}
251+
252+
::-webkit-scrollbar-track {
253+
background: #030712;
254+
}
255+
256+
::-webkit-scrollbar-thumb {
257+
background: rgba(255, 255, 255, 0.05);
258+
}
259+
260+
::selection {
261+
background: #2dd4bf;
262+
color: #000;
263+
}
264+
</style>

‎routes/web.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414

1515
Route::redirect('privacy', 'privacy-policy');
1616

17+
Route::get('delete-account', function () {
18+
return Inertia::render('DeleteAccount');
19+
})->name('delete-account');
20+
1721
Route::get('dashboard', function () {
1822
$userId = auth()->id();
1923
$now = now();

0 commit comments

Comments
 (0)