a tool for shared writing and social publishing
add confirm to domain delete
Jared Pereira
(Mar 14, 2026, 8:37 PM EDT)
f2db84ee
6d32a29d
+62
-19
+62
-19
components/Domains/DomainSettingsView.tsx
+62
-19
components/Domains/DomainSettingsView.tsx
···
9
9
useIdentityData,
10
10
mutateIdentityData,
11
11
} from "components/IdentityProvider";
12
+
import { ButtonPrimary } from "components/Buttons";
12
13
import { getDomainAssignment } from "./domainAssignment";
13
14
14
15
export function DomainSettingsView(props: {
···
197
198
198
199
<hr className="border-border-light" />
199
200
200
-
<div className="flex gap-3 justify-between items-center">
201
-
{props.onDeleteDomain && (
202
-
<button
203
-
className="text-accent-contrast font-bold text-sm"
204
-
type="button"
205
-
onMouseDown={async () => {
206
-
mutateIdentityData(mutateIdentity, (draft) => {
207
-
draft.custom_domains = draft.custom_domains.filter(
208
-
(d) => d.domain !== props.domain,
209
-
);
210
-
});
211
-
props.onDeleteDomain?.();
212
-
await deleteDomain({ domain: props.domain });
213
-
}}
214
-
>
215
-
Delete Domain
216
-
</button>
217
-
)}
218
-
</div>
201
+
<DeleteDomainButton
202
+
domain={props.domain}
203
+
onDeleteDomain={props.onDeleteDomain}
204
+
mutateIdentity={mutateIdentity}
205
+
/>
206
+
</div>
207
+
</div>
208
+
);
209
+
}
210
+
211
+
function DeleteDomainButton(props: {
212
+
domain: string;
213
+
onDeleteDomain?: () => void;
214
+
mutateIdentity: ReturnType<typeof useIdentityData>["mutate"];
215
+
}) {
216
+
let [confirming, setConfirming] = useState(false);
217
+
218
+
if (!props.onDeleteDomain) return null;
219
+
220
+
if (!confirming) {
221
+
return (
222
+
<div className="flex gap-3 justify-between items-center">
223
+
<button
224
+
className="text-accent-contrast font-bold text-sm"
225
+
type="button"
226
+
onMouseDown={() => setConfirming(true)}
227
+
>
228
+
Delete Domain
229
+
</button>
230
+
</div>
231
+
);
232
+
}
233
+
234
+
return (
235
+
<div className="flex flex-col gap-1 text-xs">
236
+
<p className="text-secondary">
237
+
Are you sure you want to delete <strong>{props.domain}</strong>? This
238
+
will remove all assignments and cannot be undone.
239
+
</p>
240
+
<div className="flex gap-2 justify-end">
241
+
<button
242
+
className="text-accent-contrast"
243
+
onMouseDown={() => setConfirming(false)}
244
+
type="button"
245
+
>
246
+
Cancel
247
+
</button>
248
+
<ButtonPrimary
249
+
compact
250
+
onMouseDown={async () => {
251
+
mutateIdentityData(props.mutateIdentity, (draft) => {
252
+
draft.custom_domains = draft.custom_domains.filter(
253
+
(d) => d.domain !== props.domain,
254
+
);
255
+
});
256
+
props.onDeleteDomain?.();
257
+
await deleteDomain({ domain: props.domain });
258
+
}}
259
+
>
260
+
Delete
261
+
</ButtonPrimary>
219
262
</div>
220
263
</div>
221
264
);