tomas/pocketbase
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

replaced authentik with generic oidc provider

Browse Source
This commit is contained in:
Gani Georgiev
2023-02-23 21:07:00 +02:00
parent e529fe7e2a
commit aa4e405f92
55 changed files with 495 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/admins/PageAdmins.svelte
+1 -1
View File
@@ -180,7 +180,7 @@
{#if isLoading}
<tr>
<td colspan="99" class="p-xs">
<span class="skeleton-loader" />
<span class="skeleton-loader m-0" />
</td>
</tr>
{:else}
ui/src/components/base/Accordion.svelte
+2 -2
View File
@@ -21,9 +21,9 @@
clearTimeout(expandTimeoutId);
expandTimeoutId = setTimeout(() => {
if (accordionElem?.scrollIntoViewIfNeeded) {
accordionElem?.scrollIntoViewIfNeeded();
accordionElem.scrollIntoViewIfNeeded();
} else if (accordionElem?.scrollIntoView) {
accordionElem?.scrollIntoView({
accordionElem.scrollIntoView({
behavior: "smooth",
block: "nearest",
});
ui/src/components/base/RedactedPasswordInput.svelte
+1 -3
View File
@@ -8,9 +8,7 @@
let inputElem;
let locked = false;
$: if (value === mask) {
locked = true;
}
$: locked = value === mask;
async function unlock() {
value = "";
ui/src/components/logs/LogsList.svelte
+1 -1
View File
@@ -189,7 +189,7 @@
{#if isLoading}
<tr>
<td colspan="99" class="p-xs">
<span class="skeleton-loader" />
<span class="skeleton-loader m-0" />
</td>
</tr>
{:else}
ui/src/components/records/RecordsList.svelte
+1 -1
View File
@@ -472,7 +472,7 @@
{#if isLoading}
<tr>
<td colspan="99" class="p-xs">
<span class="skeleton-loader" />
<span class="skeleton-loader m-0" />
</td>
</tr>
{:else}
ui/src/components/settings/AuthProviderAccordion.svelte
+32 -8
View File
@@ -32,6 +32,13 @@
export function collapseSiblings() {
accordion?.collapseSiblings();
}
function clear() {
for (let k in config) {
config[k] = "";
}
config.enabled = false;
}
</script>
<Accordion bind:this={accordion} on:expand on:collapse on:toggle {...$$restProps}>
@@ -41,6 +48,9 @@
<i class={icon} />
{/if}
<span class="txt">{title}</span>
<code title="Provider key">
{key.substring(0, key.length - 4)}
</code>
</div>
<div class="flex-fill" />
@@ -60,24 +70,38 @@
{/if}
</svelte:fragment>
<Field class="form-field form-field-toggle m-b-0" name="{key}.enabled" let:uniqueId>
<input type="checkbox" id={uniqueId} bind:checked={config.enabled} />
<label for={uniqueId}>Enable</label>
</Field>
<div class="flex">
<Field class="form-field form-field-toggle m-b-0" name="{key}.enabled" let:uniqueId>
<input type="checkbox" id={uniqueId} bind:checked={config.enabled} />
<label for={uniqueId}>Enable</label>
</Field>
<button type="button" class="btn btn-sm btn-transparent btn-hint m-l-auto" on:click={clear}>
<span class="txt">Clear all fields</span>
</button>
</div>
<div class="grid">
<div class="col-12 spacing" />
<div class="col-lg-6">
<Field class="form-field required" name="{key}.clientId" let:uniqueId>
<Field class="form-field {config.enabled ? 'required' : ''}" name="{key}.clientId" let:uniqueId>
<label for={uniqueId}>Client ID</label>
<input type="text" id={uniqueId} bind:value={config.clientId} required />
<input type="text" id={uniqueId} bind:value={config.clientId} required={config.enabled} />
</Field>
</div>
<div class="col-lg-6">
<Field class="form-field required" name="{key}.clientSecret" let:uniqueId>
<Field
class="form-field {config.enabled ? 'required' : ''}"
name="{key}.clientSecret"
let:uniqueId
>
<label for={uniqueId}>Client Secret</label>
<RedactedPasswordInput bind:value={config.clientSecret} id={uniqueId} required />
<RedactedPasswordInput
bind:value={config.clientSecret}
id={uniqueId}
required={config.enabled}
/>
</Field>
</div>
ui/src/components/settings/PageAuthProviders.svelte
+24 -9
View File
@@ -16,6 +16,7 @@
let formSettings = {};
let isLoading = false;
let isSaving = false;
let showHidden = false;
$: initialHash = JSON.stringify(originalFormSettings);
@@ -44,6 +45,7 @@
isSaving = true;
try {
console.log(CommonHelper.filterRedactedProps(formSettings).oidcAuth);
const result = await ApiClient.settings.update(CommonHelper.filterRedactedProps(formSettings));
initSettings(result);
setErrors({});
@@ -93,18 +95,31 @@
{:else}
<div class="accordions">
{#each Object.entries(providersList) as [key, provider]}
<AuthProviderAccordion
bind:this={accordions[key]}
single
{key}
title={provider.title}
icon={provider.icon || "ri-fingerprint-line"}
optionsComponent={provider.optionsComponent}
bind:config={formSettings[key]}
/>
{#if showHidden || !provider.hidden || formSettings[key]?.enabled}
<AuthProviderAccordion
bind:this={accordions[key]}
single
{key}
title={provider.title}
icon={provider.icon || "ri-fingerprint-line"}
optionsComponent={provider.optionsComponent}
bind:config={formSettings[key]}
/>
{/if}
{/each}
</div>
{#if !showHidden}
<button
type="button"
class="btn btn-sm btn-transparent btn-hint m-t-10"
on:click={() => (showHidden = true)}
>
<i class="ri-arrow-down-s-line" />
<span class="txt">Show all</span>
</button>
{/if}
<div class="flex m-t-base">
<div class="flex-fill" />
{#if hasChanges}
ui/src/components/settings/providers/AuthentikOptions.svelte
-31
View File
@@ -1,31 +0,0 @@
<script>
import Field from "@/components/base/Field.svelte";
export let key = "";
export let config = {};
</script>
<div class="section-title">Authentik endpoints</div>
<div class="grid">
<div class="col-lg-12">
<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">Eg. https://YOUR_AUTHENTIK_URL/application/o/authorize/</div>
</Field>
</div>
<div class="col-lg-12">
<Field class="form-field required" name="{key}.tokenUrl" let:uniqueId>
<label for={uniqueId}>Token URL</label>
<input type="text" id={uniqueId} bind:value={config.tokenUrl} required />
<div class="help-block">Eg. https://YOUR_AUTHENTIK_URL/application/o/token/</div>
</Field>
</div>
<div class="col-lg-12">
<Field class="form-field required" name="{key}.userApiUrl" let:uniqueId>
<label for={uniqueId}>User API URL</label>
<input type="text" id={uniqueId} bind:value={config.userApiUrl} required />
<div class="help-block">Eg. https://YOUR_AUTHENTIK_URL/application/o/userinfo/</div>
</Field>
</div>
</div>
ui/src/components/settings/providers/MicrosoftOptions.svelte
+4 -4
View File
@@ -8,18 +8,18 @@
<div class="section-title">Azure AD endpoints</div>
<div class="grid">
<div class="col-lg-12">
<Field class="form-field required" name="{key}.authUrl" let:uniqueId>
<Field class="form-field {config.enabled ? 'required' : ''}" name="{key}.authUrl" let:uniqueId>
<label for={uniqueId}>Auth URL</label>
<input type="url" id={uniqueId} required bind:value={config.authUrl} />
<input type="url" id={uniqueId} bind:value={config.authUrl} required={config.enabled} />
<div class="help-block">
Eg. {`https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/authorize`}
</div>
</Field>
</div>
<div class="col-lg-12">
<Field class="form-field required" name="{key}.tokenUrl" let:uniqueId>
<Field class="form-field {config.enabled ? 'required' : ''}" name="{key}.tokenUrl" let:uniqueId>
<label for={uniqueId}>Token URL</label>
<input type="text" id={uniqueId} required bind:value={config.tokenUrl} />
<input type="text" id={uniqueId} bind:value={config.tokenUrl} required={config.enabled} />
<div class="help-block">
Eg. {`https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/token`}
</div>
ui/src/components/settings/providers/OIDCOptions.svelte
+31
View File
@@ -0,0 +1,31 @@
<script>
import Field from "@/components/base/Field.svelte";
export let key = "";
export let config = {};
</script>
<div class="section-title">Endpoints</div>
<div class="grid">
<div class="col-lg-12">
<Field class="form-field {config.enabled ? 'required' : ''}" name="{key}.authUrl" let:uniqueId>
<label for={uniqueId}>Auth URL</label>
<input type="url" id={uniqueId} bind:value={config.authUrl} required={config.enabled} />
<div class="help-block">Eg. https://example.com/authorize/</div>
</Field>
</div>
<div class="col-lg-12">
<Field class="form-field {config.enabled ? 'required' : ''}" name="{key}.tokenUrl" let:uniqueId>
<label for={uniqueId}>Token URL</label>
<input type="text" id={uniqueId} bind:value={config.tokenUrl} required={config.enabled} />
<div class="help-block">Eg. https://example.com/token/</div>
</Field>
</div>
<div class="col-lg-12">
<Field class="form-field {config.enabled ? 'required' : ''}" name="{key}.userApiUrl" let:uniqueId>
<label for={uniqueId}>User API URL</label>
<input type="text" id={uniqueId} bind:value={config.userApiUrl} required={config.enabled} />
<div class="help-block">Eg. https://example.com/userinfo/</div>
</Field>
</div>
</div>
ui/src/providers.js
+17 -5
View File
@@ -1,10 +1,10 @@
import SelfHostedOptions from "@/components/settings/providers/SelfHostedOptions.svelte";
import MicrosoftOptions from "@/components/settings/providers/MicrosoftOptions.svelte";
import AuthentikOptions from "@/components/settings/providers/AuthentikOptions.svelte";
import OIDCOptions from "@/components/settings/providers/OIDCOptions.svelte";
// Object list with all supported OAuth2 providers in the format:
// ```
// { settingsKey: { title, icon, optionsComponent? } }
// { settingsKey: { title, icon, hidden, optionsComponent? } }
// ```
//
// If `optionsComponent` is provided it will receive 2 parameters:
@@ -70,9 +70,21 @@ export default {
title: "LiveChat",
icon: "ri-chat-1-fill",
},
authentikAuth: {
title: "Authentik",
oidcAuth: {
title: "OpenID Connect (Authentik, Keycloak, Okta, ...)",
icon: "ri-lock-fill",
optionsComponent: AuthentikOptions,
optionsComponent: OIDCOptions,
},
oidc2Auth: {
title: "(2) OpenID Connect (Authentik, Keycloak, Okta, ...)",
icon: "ri-lock-fill",
hidden: true,
optionsComponent: OIDCOptions,
},
oidc3Auth: {
title: "(3) OpenID Connect (Authentik, Keycloak, Okta, ...)",
icon: "ri-lock-fill",
hidden: true,
optionsComponent: OIDCOptions,
},
};
ui/src/scss/_base.scss
+1
View File
@@ -385,6 +385,7 @@ a,
.inline-flex {
position: relative;
display: inline-flex;
vertical-align: top;
align-items: center;
flex-wrap: wrap;
min-width: 0;
ui/src/scss/_form.scss
+2 -1
View File
@@ -453,8 +453,9 @@ select {
align-items: center;
user-select: none;
font-weight: 600;
color: var(--txtHintColor);
font-size: var(--smFontSize);
letter-spacing: 0.1px;
color: var(--txtHintColor);
line-height: 1;
padding-top: 12px;
padding-bottom: 3px;
ui/src/scss/_layout.scss
+1
View File
@@ -342,6 +342,7 @@
overflow-x: hidden;
overflow-y: auto; // fallback
overflow-y: overlay;
scroll-behavior: smooth;
.overlay-active & {
overflow-y: hidden; // prevent double scrollbar
}