merge v0.23.0-rc changes
This commit is contained in:
Gani Georgiev
24
ui/src/components/collections/providers/AppleOptions.svelte
Normal file
24
ui/src/components/collections/providers/AppleOptions.svelte
Normal file
@@ -0,0 +1,24 @@
|
||||
<script>
|
||||
import AppleSecretPopup from "@/components/collections/providers/AppleSecretPopup.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let config = {};
|
||||
|
||||
let generatorPopup;
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-secondary btn-provider-{key}"
|
||||
on:click={() => generatorPopup?.show({ clientId: config.clientId })}
|
||||
>
|
||||
<i class="ri-key-line" />
|
||||
<span class="txt">Generate secret</span>
|
||||
</button>
|
||||
|
||||
<AppleSecretPopup
|
||||
bind:this={generatorPopup}
|
||||
on:submit={(e) => {
|
||||
config.clientSecret = e.detail?.secret || "";
|
||||
}}
|
||||
/>
|
||||
152
ui/src/components/collections/providers/AppleSecretPopup.svelte
Normal file
152
ui/src/components/collections/providers/AppleSecretPopup.svelte
Normal file
@@ -0,0 +1,152 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import ApiClient from "@/utils/ApiClient";
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import { addSuccessToast } from "@/stores/toasts";
|
||||
import { setErrors } from "@/stores/errors";
|
||||
import tooltip from "@/actions/tooltip";
|
||||
import OverlayPanel from "@/components/base/OverlayPanel.svelte";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const formId = "apple_secret_" + CommonHelper.randomString(5);
|
||||
|
||||
const maxDuration = 15777000; // 6 months
|
||||
|
||||
let panel;
|
||||
let clientId;
|
||||
let teamId;
|
||||
let keyId;
|
||||
let privateKey;
|
||||
let duration;
|
||||
let isSubmitting = false;
|
||||
|
||||
$: canSubmit = true;
|
||||
|
||||
export function show(config = {}) {
|
||||
clientId = config.clientId || "";
|
||||
teamId = config.teamId || "";
|
||||
keyId = config.keyId || "";
|
||||
privateKey = config.privateKey || "";
|
||||
duration = config.duration || maxDuration;
|
||||
|
||||
setErrors({}); // reset any previous errors
|
||||
|
||||
panel?.show();
|
||||
}
|
||||
|
||||
export function hide() {
|
||||
return panel?.hide();
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
isSubmitting = true;
|
||||
|
||||
try {
|
||||
const result = await ApiClient.settings.generateAppleClientSecret(
|
||||
clientId,
|
||||
teamId,
|
||||
keyId,
|
||||
privateKey.trim(),
|
||||
duration
|
||||
);
|
||||
|
||||
isSubmitting = false;
|
||||
|
||||
addSuccessToast("Successfully generated client secret.");
|
||||
|
||||
dispatch("submit", result);
|
||||
|
||||
panel?.hide();
|
||||
} catch (err) {
|
||||
ApiClient.error(err);
|
||||
}
|
||||
|
||||
isSubmitting = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<OverlayPanel
|
||||
bind:this={panel}
|
||||
overlayClose={!isSubmitting}
|
||||
escClose={!isSubmitting}
|
||||
beforeHide={() => !isSubmitting}
|
||||
popup
|
||||
on:show
|
||||
on:hide
|
||||
>
|
||||
<svelte:fragment slot="header">
|
||||
<h4 class="center txt-break">Generate Apple client secret</h4>
|
||||
</svelte:fragment>
|
||||
|
||||
<form id={formId} autocomplete="off" on:submit|preventDefault={() => submit()}>
|
||||
<div class="grid">
|
||||
<div class="col-lg-6">
|
||||
<Field class="form-field required" name="clientId" let:uniqueId>
|
||||
<label for={uniqueId}>Client ID</label>
|
||||
<input type="text" id={uniqueId} bind:value={clientId} required />
|
||||
</Field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<Field class="form-field required" name="teamId" let:uniqueId>
|
||||
<label for={uniqueId}>Team ID</label>
|
||||
<input type="text" id={uniqueId} bind:value={teamId} required />
|
||||
</Field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<Field class="form-field required" name="keyId" let:uniqueId>
|
||||
<label for={uniqueId}>Key ID</label>
|
||||
<input type="text" id={uniqueId} bind:value={keyId} required />
|
||||
</Field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<Field class="form-field required" name="duration" let:uniqueId>
|
||||
<label for={uniqueId}>
|
||||
<span class="txt">Duration (in seconds)</span>
|
||||
<i
|
||||
class="ri-information-line link-hint"
|
||||
use:tooltip={{
|
||||
text: `Max ${maxDuration} seconds (~${
|
||||
(maxDuration / (60 * 60 * 24 * 30)) << 0
|
||||
} months).`,
|
||||
position: "top",
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<input type="text" id={uniqueId} max={maxDuration} bind:value={duration} required />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field class="form-field required" name="privateKey" let:uniqueId>
|
||||
<label for={uniqueId}>Private key</label>
|
||||
<textarea
|
||||
id={uniqueId}
|
||||
required
|
||||
rows="8"
|
||||
placeholder={"-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----"}
|
||||
bind:value={privateKey}
|
||||
/>
|
||||
<div class="help-block">
|
||||
The key is not stored on the server and it is used only for generating the signed JWT.
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<button type="button" class="btn btn-transparent" on:click={hide} disabled={isSubmitting}
|
||||
>Close</button
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
form={formId}
|
||||
class="btn btn-expanded"
|
||||
class:btn-loading={isSubmitting}
|
||||
disabled={!canSubmit || isSubmitting}
|
||||
>
|
||||
<i class="ri-key-line" />
|
||||
<span class="txt">Generate and set secret</span>
|
||||
</button>
|
||||
</svelte:fragment>
|
||||
</OverlayPanel>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let config = {};
|
||||
</script>
|
||||
|
||||
<div class="section-title">Azure AD endpoints</div>
|
||||
<Field class="form-field required" name="{key}.authURL" let:uniqueId>
|
||||
<label for={uniqueId}>Auth URL</label>
|
||||
<input type="url" id={uniqueId} bind:value={config.authURL} required />
|
||||
<div class="help-block">
|
||||
Ex. {`https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/authorize`}
|
||||
</div>
|
||||
</Field>
|
||||
<Field class="form-field required" name="{key}.tokenURL" let:uniqueId>
|
||||
<label for={uniqueId}>Token URL</label>
|
||||
<input type="url" id={uniqueId} bind:value={config.tokenURL} required />
|
||||
<div class="help-block">
|
||||
Ex. {`https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/token`}
|
||||
</div>
|
||||
</Field>
|
||||
52
ui/src/components/collections/providers/OIDCOptions.svelte
Normal file
52
ui/src/components/collections/providers/OIDCOptions.svelte
Normal file
@@ -0,0 +1,52 @@
|
||||
<script>
|
||||
import tooltip from "@/actions/tooltip";
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
|
||||
export let key = "";
|
||||
export let config = {};
|
||||
|
||||
if (CommonHelper.isEmpty(config.pkce)) {
|
||||
config.pkce = true;
|
||||
}
|
||||
|
||||
if (!config.displayName) {
|
||||
config.displayName = "OIDC";
|
||||
}
|
||||
</script>
|
||||
|
||||
<Field class="form-field required" name="{key}.displayName" let:uniqueId>
|
||||
<label for={uniqueId}>Display name</label>
|
||||
<input type="text" id={uniqueId} bind:value={config.displayName} required />
|
||||
</Field>
|
||||
|
||||
<div class="section-title">Endpoints</div>
|
||||
|
||||
<Field class="form-field required" name="{key}.authURL" let:uniqueId>
|
||||
<label for={uniqueId}>Auth URL</label>
|
||||
<input type="url" id={uniqueId} bind:value={config.authURL} required />
|
||||
</Field>
|
||||
|
||||
<Field class="form-field required" name="{key}.tokenURL" let:uniqueId>
|
||||
<label for={uniqueId}>Token URL</label>
|
||||
<input type="url" id={uniqueId} bind:value={config.tokenURL} required />
|
||||
</Field>
|
||||
|
||||
<Field class="form-field required" name="{key}.userInfoURL" let:uniqueId>
|
||||
<label for={uniqueId}>User info URL</label>
|
||||
<input type="url" id={uniqueId} bind:value={config.userInfoURL} required />
|
||||
</Field>
|
||||
|
||||
<Field class="form-field" name="{key}.pkce" let:uniqueId>
|
||||
<input type="checkbox" id={uniqueId} bind:checked={config.pkce} />
|
||||
<label for={uniqueId}>
|
||||
<span class="txt">Support PKCE</span>
|
||||
<i
|
||||
class="ri-information-line link-hint"
|
||||
use:tooltip={{
|
||||
text: "Usually it should be safe to be always enabled as most providers will just ignore the extra query parameters if they don't support PKCE.",
|
||||
position: "right",
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</Field>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script>
|
||||
import Field from "@/components/base/Field.svelte";
|
||||
|
||||
export let key = "";
|
||||
export let config = {};
|
||||
export let required = false;
|
||||
export let title = "Provider endpoints";
|
||||
|
||||
$: isRequired = required && config?.enabled;
|
||||
</script>
|
||||
|
||||
<div class="section-title">{title}</div>
|
||||
<Field class="form-field {isRequired ? 'required' : ''}" name="{key}.authURL" let:uniqueId>
|
||||
<label for={uniqueId}>Auth URL</label>
|
||||
<input type="url" id={uniqueId} bind:value={config.authURL} required={isRequired} />
|
||||
</Field>
|
||||
<Field class="form-field {isRequired ? 'required' : ''}" name="{key}.tokenURL" let:uniqueId>
|
||||
<label for={uniqueId}>Token URL</label>
|
||||
<input type="url" id={uniqueId} bind:value={config.tokenURL} required={isRequired} />
|
||||
</Field>
|
||||
<Field class="form-field {isRequired ? 'required' : ''}" name="{key}.userInfoURL" let:uniqueId>
|
||||
<label for={uniqueId}>User info URL</label>
|
||||
<input type="url" id={uniqueId} bind:value={config.userInfoURL} required={isRequired} />
|
||||
</Field>
|
||||
Reference in New Issue
Block a user