1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
"use client"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { useMutation } from "@tanstack/react-query"
import { useUnsubscribeAll } from "@/lib/queries/use-subscription-mutations"
import { useDeleteAllFolders } from "@/lib/queries/use-folder-mutations"
import { useDeleteAllCustomFeeds } from "@/lib/queries/use-custom-feed-mutations"
import { notify } from "@/lib/notify"
export function DangerZoneSettings() {
const router = useRouter()
const unsubscribeAll = useUnsubscribeAll()
const deleteAllFolders = useDeleteAllFolders()
const deleteAllCustomFeeds = useDeleteAllCustomFeeds()
const [showDeleteSubsConfirm, setShowDeleteSubsConfirm] = useState(false)
const [showDeleteFoldersConfirm, setShowDeleteFoldersConfirm] = useState(false)
const [showDeleteCustomFeedsConfirm, setShowDeleteCustomFeedsConfirm] = useState(false)
const [showDeleteAccountConfirm, setShowDeleteAccountConfirm] = useState(false)
const [deleteConfirmText, setDeleteConfirmText] = useState("")
const deleteAccount = useMutation({
mutationFn: async () => {
const response = await fetch("/api/account", { method: "DELETE" })
if (!response.ok) throw new Error("failed to delete account")
},
onSuccess: () => {
router.push("/sign-in")
},
onError: (error: Error) => {
notify("failed to delete account: " + error.message)
},
})
return (
<div className="px-4 py-3">
<p className="mb-6 text-text-dim">
these actions are irreversible. proceed with caution.
</p>
<div className="mb-6">
<h3 className="mb-2 text-text-primary">remove all subscriptions</h3>
<p className="mb-2 text-text-dim">
unsubscribe from every feed. entries will remain but no new ones will be fetched.
</p>
{showDeleteSubsConfirm ? (
<div className="flex items-center gap-2">
<span className="text-status-error">are you sure?</span>
<button
onClick={() => {
unsubscribeAll.mutate()
setShowDeleteSubsConfirm(false)
}}
disabled={unsubscribeAll.isPending}
className="border border-status-error px-3 py-1 text-status-error transition-colors hover:bg-status-error hover:text-background-primary disabled:opacity-50"
>
yes, remove all
</button>
<button
onClick={() => setShowDeleteSubsConfirm(false)}
className="px-2 py-1 text-text-secondary transition-colors hover:text-text-primary"
>
cancel
</button>
</div>
) : (
<button
onClick={() => setShowDeleteSubsConfirm(true)}
className="border border-border px-3 py-1 text-text-secondary transition-colors hover:border-status-error hover:text-status-error"
>
remove all subscriptions
</button>
)}
</div>
<div className="mb-6">
<h3 className="mb-2 text-text-primary">delete all folders</h3>
<p className="mb-2 text-text-dim">
remove all folders. feeds will be ungrouped but not unsubscribed.
</p>
{showDeleteFoldersConfirm ? (
<div className="flex items-center gap-2">
<span className="text-status-error">are you sure?</span>
<button
onClick={() => {
deleteAllFolders.mutate()
setShowDeleteFoldersConfirm(false)
}}
disabled={deleteAllFolders.isPending}
className="border border-status-error px-3 py-1 text-status-error transition-colors hover:bg-status-error hover:text-background-primary disabled:opacity-50"
>
yes, delete all
</button>
<button
onClick={() => setShowDeleteFoldersConfirm(false)}
className="px-2 py-1 text-text-secondary transition-colors hover:text-text-primary"
>
cancel
</button>
</div>
) : (
<button
onClick={() => setShowDeleteFoldersConfirm(true)}
className="border border-border px-3 py-1 text-text-secondary transition-colors hover:border-status-error hover:text-status-error"
>
delete all folders
</button>
)}
</div>
<div className="mb-6">
<h3 className="mb-2 text-text-primary">delete all custom feeds</h3>
<p className="mb-2 text-text-dim">
remove all custom feeds (saved searches).
</p>
{showDeleteCustomFeedsConfirm ? (
<div className="flex items-center gap-2">
<span className="text-status-error">are you sure?</span>
<button
onClick={() => {
deleteAllCustomFeeds.mutate()
setShowDeleteCustomFeedsConfirm(false)
}}
disabled={deleteAllCustomFeeds.isPending}
className="border border-status-error px-3 py-1 text-status-error transition-colors hover:bg-status-error hover:text-background-primary disabled:opacity-50"
>
yes, delete all
</button>
<button
onClick={() => setShowDeleteCustomFeedsConfirm(false)}
className="px-2 py-1 text-text-secondary transition-colors hover:text-text-primary"
>
cancel
</button>
</div>
) : (
<button
onClick={() => setShowDeleteCustomFeedsConfirm(true)}
className="border border-border px-3 py-1 text-text-secondary transition-colors hover:border-status-error hover:text-status-error"
>
delete all custom feeds
</button>
)}
</div>
<div>
<h3 className="mb-2 text-text-primary">delete account</h3>
<p className="mb-2 text-text-dim">
permanently delete your account and all associated data. this cannot be undone.
</p>
{showDeleteAccountConfirm ? (
<div>
{/* eslint-disable-next-line asa-lowercase/lowercase-strings */}
<p className="mb-2 text-status-error">
type DELETE to confirm account deletion.
</p>
<div className="flex items-center gap-2">
<input
type="text"
value={deleteConfirmText}
onChange={(event) => setDeleteConfirmText(event.target.value)}
placeholder="type DELETE" // eslint-disable-line asa-lowercase/lowercase-strings
className="border border-border bg-background-primary px-3 py-2 text-text-primary outline-none placeholder:text-text-dim focus:border-status-error"
autoFocus
/>
<button
onClick={() => deleteAccount.mutate()}
disabled={deleteConfirmText !== "DELETE" || deleteAccount.isPending}
className="border border-status-error px-4 py-2 text-status-error transition-colors hover:bg-status-error hover:text-background-primary disabled:opacity-50"
>
{deleteAccount.isPending ? "deleting ..." : "confirm delete"}
</button>
<button
onClick={() => {
setShowDeleteAccountConfirm(false)
setDeleteConfirmText("")
}}
className="px-2 py-1 text-text-secondary transition-colors hover:text-text-primary"
>
cancel
</button>
</div>
</div>
) : (
<button
onClick={() => setShowDeleteAccountConfirm(true)}
className="border border-border px-3 py-1 text-text-secondary transition-colors hover:border-status-error hover:text-status-error"
>
delete account and all data
</button>
)}
</div>
</div>
)
}
|