Skip to content

Commit b1f90d0

Browse files
peterpeterparkerpeterpeterparker
authored
refactor: extract auth config form component (#1215)
* refactor: extract auth config form component * chore: lint
1 parent 60c5e1c commit b1f90d0

File tree

2 files changed

+146
-111
lines changed

2 files changed

+146
-111
lines changed

‎src/frontend/src/lib/components/auth/AuthConfigForm.svelte‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<script lang="ts">
2+
import { fromNullable, fromNullishNullable, isNullish, nonNullish } from '@dfinity/utils';
3+
import { fade } from 'svelte/transition';
4+
import type { Satellite } from '$declarations/mission_control/mission_control.did';
5+
import type { AuthenticationConfig, Rule } from '$declarations/satellite/satellite.did';
6+
import Input from '$lib/components/ui/Input.svelte';
7+
import Value from '$lib/components/ui/Value.svelte';
8+
import Warning from '$lib/components/ui/Warning.svelte';
9+
import { sortedSatelliteCustomDomains } from '$lib/derived/satellite-custom-domains.derived';
10+
import { isBusy } from '$lib/stores/busy.store';
11+
import { i18n } from '$lib/stores/i18n.store';
12+
import { satelliteUrl as satelliteUrlUtils } from '$lib/utils/satellite.utils';
13+
14+
interface Props {
15+
config: AuthenticationConfig | undefined;
16+
selectedDerivationOrigin: URL | undefined;
17+
satellite: Satellite;
18+
rule: Rule | undefined;
19+
maxTokens: number | undefined;
20+
onsubmit: ($event: SubmitEvent) => Promise<void>;
21+
}
22+
23+
let {
24+
onsubmit,
25+
selectedDerivationOrigin = $bindable(undefined),
26+
config,
27+
satellite,
28+
rule,
29+
maxTokens = $bindable(undefined)
30+
}: Props = $props();
31+
32+
let satelliteUrl: URL | null = $derived(
33+
URL.parse(satelliteUrlUtils(satellite.satellite_id.toText()))
34+
);
35+
36+
let customDomains: URL[] = $derived(
37+
$sortedSatelliteCustomDomains
38+
.map(([customDomain, _]) => URL.parse(`https://${customDomain}`))
39+
.filter(nonNullish)
40+
);
41+
42+
let currentDerivationOrigin: string | undefined = $state(
43+
fromNullable(fromNullishNullable(config?.internet_identity)?.derivation_origin ?? [])
44+
);
45+
46+
let derivationOrigin: string | undefined = $state(
47+
fromNullable(fromNullishNullable(config?.internet_identity)?.derivation_origin ?? [])
48+
);
49+
50+
$effect(() => {
51+
selectedDerivationOrigin = nonNullish(derivationOrigin)
52+
? [...(nonNullish(satelliteUrl) ? [satelliteUrl] : []), ...customDomains].find(
53+
({ host }) => host === derivationOrigin
54+
)
55+
: undefined;
56+
});
57+
58+
let warnDerivationOrigin = $derived(
59+
(nonNullish(currentDerivationOrigin) && derivationOrigin !== currentDerivationOrigin) ||
60+
(isNullish(currentDerivationOrigin) && nonNullish(derivationOrigin) && nonNullish(config))
61+
);
62+
63+
let maxTokensInput: number | undefined = $state(
64+
nonNullish(fromNullishNullable(rule?.rate_config)?.max_tokens)
65+
? Number(fromNullishNullable(rule?.rate_config)?.max_tokens ?? 0)
66+
: undefined
67+
);
68+
69+
$effect(() => {
70+
maxTokens = maxTokensInput;
71+
});
72+
</script>
73+
74+
<h2>{$i18n.core.config}</h2>
75+
76+
<p>{$i18n.authentication.edit_configuration}</p>
77+
78+
<form class="content" {onsubmit}>
79+
<div class="container">
80+
<div>
81+
<div>
82+
<Value>
83+
{#snippet label()}
84+
{$i18n.authentication.main_domain}
85+
{/snippet}
86+
87+
<select id="logVisibility" name="logVisibility" bind:value={derivationOrigin}>
88+
<option value={undefined}>{$i18n.authentication.not_configured}</option>
89+
90+
{#if nonNullish(satelliteUrl)}
91+
<option value={satelliteUrl.host}>{satelliteUrl.host}</option>
92+
{/if}
93+
94+
{#each customDomains as customDomain}
95+
<option value={customDomain.host}>{customDomain.host}</option>
96+
{/each}
97+
</select>
98+
</Value>
99+
</div>
100+
</div>
101+
102+
{#if nonNullish(rule)}
103+
<div>
104+
<Value>
105+
{#snippet label()}
106+
{$i18n.collections.rate_limit}
107+
{/snippet}
108+
109+
<Input
110+
inputType="number"
111+
placeholder={$i18n.collections.rate_limit_placeholder}
112+
name="maxTokens"
113+
required={false}
114+
bind:value={maxTokensInput}
115+
onblur={() =>
116+
(maxTokensInput = nonNullish(maxTokensInput)
117+
? Math.trunc(maxTokensInput)
118+
: undefined)}
119+
/>
120+
</Value>
121+
</div>
122+
{/if}
123+
124+
{#if warnDerivationOrigin}
125+
<div class="warn" in:fade>
126+
<Warning>{$i18n.authentication.main_domain_warn}</Warning>
127+
</div>
128+
{/if}
129+
</div>
130+
131+
<button type="submit" disabled={$isBusy}>
132+
{$i18n.core.submit}
133+
</button>
134+
</form>

‎src/frontend/src/lib/components/modals/AuthConfigModal.svelte‎

Lines changed: 12 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
<script lang="ts">
2-
import { fromNullable, nonNullish, isNullish, fromNullishNullable } from '@dfinity/utils';
3-
import { fade } from 'svelte/transition';
42
import type { Satellite } from '$declarations/mission_control/mission_control.did';
53
import type { AuthenticationConfig, Rule } from '$declarations/satellite/satellite.did';
6-
import Input from '$lib/components/ui/Input.svelte';
4+
import AuthConfigForm from '$lib/components/auth/AuthConfigForm.svelte';
75
import Modal from '$lib/components/ui/Modal.svelte';
86
import SpinnerModal from '$lib/components/ui/SpinnerModal.svelte';
9-
import Value from '$lib/components/ui/Value.svelte';
10-
import Warning from '$lib/components/ui/Warning.svelte';
11-
import { sortedSatelliteCustomDomains } from '$lib/derived/satellite-custom-domains.derived';
127
import { updateAuthConfig } from '$lib/services/auth.config.services';
138
import { authStore } from '$lib/stores/auth.store';
14-
import { isBusy, wizardBusy } from '$lib/stores/busy.store';
9+
import { wizardBusy } from '$lib/stores/busy.store';
1510
import { i18n } from '$lib/stores/i18n.store';
1611
import type { JunoModalDetail, JunoModalEditAuthConfigDetail } from '$lib/types/modal';
1712
import { emit } from '$lib/utils/events.utils';
18-
import { satelliteUrl as satelliteUrlUtils } from '$lib/utils/satellite.utils';
1913
2014
interface Props {
2115
detail: JunoModalDetail;
@@ -26,51 +20,15 @@
2620
2721
let satellite: Satellite = $state((detail as JunoModalEditAuthConfigDetail).satellite);
2822
29-
let satelliteUrl: URL | null = $derived(
30-
URL.parse(satelliteUrlUtils(satellite.satellite_id.toText()))
31-
);
32-
33-
let customDomains: URL[] = $derived(
34-
$sortedSatelliteCustomDomains
35-
.map(([customDomain, _]) => URL.parse(`https://${customDomain}`))
36-
.filter(nonNullish)
37-
);
38-
3923
let rule: Rule | undefined = $state((detail as JunoModalEditAuthConfigDetail).rule);
4024
4125
let config: AuthenticationConfig | undefined = $state(
4226
(detail as JunoModalEditAuthConfigDetail).config
4327
);
4428
45-
let currentDerivationOrigin: string | undefined = $state(
46-
fromNullable(
47-
fromNullishNullable((detail as JunoModalEditAuthConfigDetail).config?.internet_identity)
48-
?.derivation_origin ?? []
49-
)
50-
);
29+
let maxTokens = $state<number | undefined>(undefined);
5130
52-
let derivationOrigin: string | undefined = $state(
53-
fromNullable(
54-
fromNullishNullable((detail as JunoModalEditAuthConfigDetail).config?.internet_identity)
55-
?.derivation_origin ?? []
56-
)
57-
);
58-
59-
let warnDerivationOrigin = $derived(
60-
(nonNullish(currentDerivationOrigin) && derivationOrigin !== currentDerivationOrigin) ||
61-
(isNullish(currentDerivationOrigin) && nonNullish(derivationOrigin) && nonNullish(config))
62-
);
63-
64-
let maxTokens: number | undefined = $state(
65-
nonNullish(
66-
fromNullishNullable((detail as JunoModalEditAuthConfigDetail).rule?.rate_config)?.max_tokens
67-
)
68-
? Number(
69-
fromNullishNullable((detail as JunoModalEditAuthConfigDetail).rule?.rate_config)
70-
?.max_tokens ?? 0
71-
)
72-
: undefined
73-
);
31+
let selectedDerivationOrigin = $state<URL | undefined>(undefined);
7432
7533
let step: 'init' | 'in_progress' | 'ready' | 'error' = $state('init');
7634
@@ -80,12 +38,6 @@
8038
wizardBusy.start();
8139
step = 'in_progress';
8240
83-
const selectedDerivationOrigin = nonNullish(derivationOrigin)
84-
? [...(nonNullish(satelliteUrl) ? [satelliteUrl] : []), ...customDomains].find(
85-
({ host }) => host === derivationOrigin
86-
)
87-
: undefined;
88-
8941
const { success } = await updateAuthConfig({
9042
satellite,
9143
identity: $authStore.identity,
@@ -119,65 +71,14 @@
11971
<p>{$i18n.core.updating_configuration}</p>
12072
</SpinnerModal>
12173
{:else}
122-
<h2>{$i18n.core.config}</h2>
123-
124-
<p>{$i18n.authentication.edit_configuration}</p>
125-
126-
<form class="content" onsubmit={handleSubmit}>
127-
<div class="container">
128-
<div>
129-
<div>
130-
<Value>
131-
{#snippet label()}
132-
{$i18n.authentication.main_domain}
133-
{/snippet}
134-
135-
<select id="logVisibility" name="logVisibility" bind:value={derivationOrigin}>
136-
<option value={undefined}>{$i18n.authentication.not_configured}</option>
137-
138-
{#if nonNullish(satelliteUrl)}
139-
<option value={satelliteUrl.host}>{satelliteUrl.host}</option>
140-
{/if}
141-
142-
{#each customDomains as customDomain}
143-
<option value={customDomain.host}>{customDomain.host}</option>
144-
{/each}
145-
</select>
146-
</Value>
147-
</div>
148-
</div>
149-
150-
{#if nonNullish(rule)}
151-
<div>
152-
<Value>
153-
{#snippet label()}
154-
{$i18n.collections.rate_limit}
155-
{/snippet}
156-
157-
<Input
158-
inputType="number"
159-
placeholder={$i18n.collections.rate_limit_placeholder}
160-
name="maxTokens"
161-
required={false}
162-
bind:value={maxTokens}
163-
onblur={() =>
164-
(maxTokens = nonNullish(maxTokens) ? Math.trunc(maxTokens) : undefined)}
165-
/>
166-
</Value>
167-
</div>
168-
{/if}
169-
170-
{#if warnDerivationOrigin}
171-
<div class="warn" in:fade>
172-
<Warning>{$i18n.authentication.main_domain_warn}</Warning>
173-
</div>
174-
{/if}
175-
</div>
176-
177-
<button type="submit" disabled={$isBusy}>
178-
{$i18n.core.submit}
179-
</button>
180-
</form>
74+
<AuthConfigForm
75+
{satellite}
76+
{config}
77+
{rule}
78+
onsubmit={handleSubmit}
79+
bind:maxTokens
80+
bind:selectedDerivationOrigin
81+
/>
18182
{/if}
18283
</Modal>
18384

0 commit comments

Comments
 (0)