Skip to content

Commit ed0d14d

Browse files
Scorpio3310Scorpio3310
committed
Per-domain forms and validation refactor
Updated due to Svelte remote functions upgrades
1 parent 930ba70 commit ed0d14d

File tree

5 files changed

+99
-183
lines changed

5 files changed

+99
-183
lines changed

‎src/components/DomainCard.svelte‎

Lines changed: 72 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,15 @@
1818
//// PROPS ////
1919
let { data, uiView } = $props();
2020
21+
//// FORM INSTANCES (isolated per domain) ////
22+
const nsForm = $derived(ns.for(data?.id));
23+
const sslForm = $derived(ssl.for(data?.id));
24+
const checkForm = $derived(check.for(data?.id));
25+
const removeForm = $derived(remove.for(data?.id));
26+
2127
//// STATES ////
2228
let isExpanded = $state(false);
2329
let showDeleteConfirmation = $state(false);
24-
let nsSubmitting = $state(false);
25-
let sslSubmitting = $state(false);
26-
let checkSubmitting = $state(false);
27-
let removeSubmitting = $state(false);
2830
2931
/**
3032
* Toggle expansion state for showing more/less details
@@ -57,7 +59,7 @@
5759
*/
5860
const buttonIcon = $derived("iconoir:nav-arrow-up");
5961
const buttonIconClass = $derived(
60-
`transition-all duration-200 ease-in-out ${isExpanded ? "rotate-180" : ""}`
62+
`transition-all duration-200 ease-in-out ${isExpanded ? "rotate-180" : ""}`,
6163
);
6264
</script>
6365
@@ -132,21 +134,26 @@
132134
/>
133135
134136
<form
135-
{...remove.enhance(async ({ submit }) => {
136-
removeSubmitting = true;
137+
{...removeForm.enhance(async ({ submit }) => {
137138
try {
138139
await submit();
139-
removeSubmitting = false;
140-
toast.show(remove?.result);
140+
141+
const issues = removeForm.fields.allIssues() ?? [];
142+
if (issues.length > 0) {
143+
toast.show({
144+
status: 400,
145+
message: issues.map((i) => i.message).join(", "),
146+
});
147+
} else {
148+
toast.show(removeForm?.result);
149+
}
141150
} catch (error) {
142-
console.log(error);
151+
toast.show({ status: 500, message: "Something went wrong" });
143152
}
144153
})}
145154
>
146155
<input
147-
type="hidden"
148-
name="domainId"
149-
value={data?.id}
156+
{...removeForm.fields.domainId.as("hidden", data?.id)}
150157
readonly
151158
/>
152159
{#if isDemo()}
@@ -169,7 +176,7 @@
169176
color="black"
170177
class="button--red "
171178
ariaLabel="Delete domain"
172-
disabled={removeSubmitting ? true : false}
179+
disabled={!!removeForm.pending}
173180
/>
174181
{/if}
175182
</form>
@@ -297,21 +304,29 @@
297304
<span class="opacity-50">Options:</span>
298305
<div class="buttons">
299306
<form
300-
{...ns.enhance(async ({ submit }) => {
301-
nsSubmitting = true;
307+
{...nsForm.enhance(async ({ submit }) => {
302308
try {
303309
await submit();
304-
nsSubmitting = false;
305-
toast.show(ns?.result);
310+
311+
const issues = nsForm.fields.allIssues() ?? [];
312+
if (issues.length > 0) {
313+
toast.show({
314+
status: 400,
315+
message: issues.map((i) => i.message).join(", "),
316+
});
317+
} else {
318+
toast.show(nsForm?.result);
319+
}
306320
} catch (error) {
307-
console.log(error);
321+
toast.show({
322+
status: 500,
323+
message: "Something went wrong",
324+
});
308325
}
309326
})}
310327
>
311328
<input
312-
name="domainId"
313-
value={data?.id}
314-
type="hidden"
329+
{...nsForm.fields.domainId.as("hidden", data?.id)}
315330
readonly
316331
/>
317332
<Button
@@ -322,29 +337,34 @@
322337
ariaLabel="NS Lookup - Check"
323338
icon={isDemo()
324339
? "iconoir:dns"
325-
: nsSubmitting
340+
: nsForm.pending
326341
? "iconoir:refresh-double"
327342
: "iconoir:dns"}
328-
iconClass={nsSubmitting ? "animate-spin" : ""}
329-
disabled={isDemo() || nsSubmitting}
343+
iconClass={nsForm.pending ? "animate-spin" : ""}
344+
disabled={isDemo() || !!nsForm.pending}
330345
/>
331346
</form>
332347
<form
333-
{...ssl.enhance(async ({ submit }) => {
334-
sslSubmitting = true;
348+
{...sslForm.enhance(async ({ submit }) => {
335349
try {
336350
await submit();
337-
sslSubmitting = false;
338-
toast.show(ssl?.result);
351+
352+
const issues = sslForm.fields.allIssues() ?? [];
353+
if (issues.length > 0) {
354+
toast.show({
355+
status: 400,
356+
message: issues.map((i) => i.message).join(", "),
357+
});
358+
} else {
359+
toast.show(sslForm?.result);
360+
}
339361
} catch (error) {
340-
console.log(error);
362+
toast.show({ status: 500, message: "Something went wrong" });
341363
}
342364
})}
343365
>
344366
<input
345-
type="hidden"
346-
name="domainId"
347-
value={data?.id}
367+
{...sslForm.fields.domainId.as("hidden", data?.id)}
348368
readonly
349369
/>
350370
@@ -356,30 +376,35 @@
356376
ariaLabel="SSL Lookup - Check"
357377
icon={isDemo()
358378
? "iconoir:security-pass"
359-
: sslSubmitting
379+
: sslForm.pending
360380
? "iconoir:refresh-double"
361381
: "iconoir:security-pass"}
362-
iconClass={sslSubmitting ? "animate-spin" : ""}
363-
disabled={isDemo() || sslSubmitting}
382+
iconClass={sslForm.pending ? "animate-spin" : ""}
383+
disabled={isDemo() || !!sslForm.pending}
364384
/>
365385
</form>
366386
367387
<form
368-
{...check.enhance(async ({ submit }) => {
369-
checkSubmitting = true;
388+
{...checkForm.enhance(async ({ submit }) => {
370389
try {
371390
await submit();
372-
checkSubmitting = false;
373-
toast.show(check?.result);
391+
392+
const issues = checkForm.fields.allIssues() ?? [];
393+
if (issues.length > 0) {
394+
toast.show({
395+
status: 400,
396+
message: issues.map((i) => i.message).join(", "),
397+
});
398+
} else {
399+
toast.show(checkForm?.result);
400+
}
374401
} catch (error) {
375-
console.log(error);
402+
toast.show({ status: 500, message: "Something went wrong" });
376403
}
377404
})}
378405
>
379406
<input
380-
type="hidden"
381-
name="domainId"
382-
value={data?.id}
407+
{...checkForm.fields.domainId.as("hidden", data?.id)}
383408
readonly
384409
/>
385410
@@ -391,11 +416,11 @@
391416
ariaLabel="Scan domain for latest status and details"
392417
icon={isDemo()
393418
? "iconoir:search"
394-
: checkSubmitting
419+
: checkForm.pending
395420
? "iconoir:refresh-double"
396421
: "iconoir:search"}
397-
iconClass={checkSubmitting ? "animate-spin" : ""}
398-
disabled={isDemo() || checkSubmitting}
422+
iconClass={checkForm.pending ? "animate-spin" : ""}
423+
disabled={isDemo() || !!checkForm.pending}
399424
/>
400425
</form>
401426
</div>

‎src/components/Header.svelte‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,11 @@
44
import EnvTag from "./EnvTag.svelte";
55
import Icon from "@iconify/svelte";
66
import Tooltip from "./Tooltip.svelte";
7-
import { enhance } from "$app/forms";
87
import { toast } from "$src/lib/stores/toast.svelte.js";
98
import { isDemo } from "$src/lib/utils/helpers";
109
import { batchCheck } from "$src/lib/remote/check-domains.remote";
1110
1211
let { type = "default", isApiConfigured = false } = $props();
13-
let isChecking = $state(false);
1412
1513
const headerConfigs = {
1614
main: {
@@ -114,10 +112,8 @@
114112

115113
<form
116114
{...batchCheck.enhance(async ({ submit }) => {
117-
isChecking = true;
118115
try {
119116
await submit();
120-
isChecking = false;
121117
toast.show(batchCheck?.result);
122118
} catch (error) {
123119
console.log(error);
@@ -151,26 +147,26 @@
151147
{:else}
152148
<Button
153149
type="submit"
154-
text={isChecking ? "Checking..." : "Check Domains"}
150+
text={batchCheck.pending ? "Checking..." : "Check Domains"}
155151
size="lg"
156152
class="!hidden sm:!flex"
157-
icon={isChecking
153+
icon={batchCheck.pending
158154
? "iconoir:refresh-double"
159155
: "iconoir:search"}
160-
iconClass={isChecking ? "animate-spin" : ""}
156+
iconClass={batchCheck.pending ? "animate-spin" : ""}
161157
color="white"
162-
disabled={isChecking}
158+
disabled={!!batchCheck.pending}
163159
/>
164160
<Button
165161
type="submit"
166162
size="lg"
167-
icon={isChecking
163+
icon={batchCheck.pending
168164
? "iconoir:refresh-double"
169165
: "iconoir:search"}
170-
iconClass={isChecking ? "animate-spin" : ""}
166+
iconClass={batchCheck.pending ? "animate-spin" : ""}
171167
color="white"
172168
class="!flex sm:!hidden"
173-
disabled={isChecking}
169+
disabled={!!batchCheck.pending}
174170
/>
175171
{/if}
176172
</form>

‎src/lib/remote/check-domains.remote.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ const verificationEngine = {
305305
* }
306306
*/
307307

308-
export const batchCheck = form(async (data) => {
308+
export const batchCheck = form(async () => {
309309
try {
310310
const accessError = await validateAccess();
311311
if (accessError) return accessError;

0 commit comments

Comments
 (0)