web/admin: show oauth2 docs on oauth2 provider view page
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
parent
fac3d8b8c9
commit
0b6dd49f36
|
|
@ -3,8 +3,10 @@ import "@goauthentik/admin/providers/oauth2/OAuth2ProviderForm";
|
||||||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||||
import { EVENT_REFRESH } from "@goauthentik/common/constants";
|
import { EVENT_REFRESH } from "@goauthentik/common/constants";
|
||||||
import { convertToTitle } from "@goauthentik/common/utils";
|
import { convertToTitle } from "@goauthentik/common/utils";
|
||||||
|
import MDProviderOAuth2 from "@goauthentik/docs/providers/oauth2/index.md";
|
||||||
import { AKElement } from "@goauthentik/elements/Base";
|
import { AKElement } from "@goauthentik/elements/Base";
|
||||||
import "@goauthentik/elements/CodeMirror";
|
import "@goauthentik/elements/CodeMirror";
|
||||||
|
import "@goauthentik/elements/Markdown";
|
||||||
import "@goauthentik/elements/Tabs";
|
import "@goauthentik/elements/Tabs";
|
||||||
import "@goauthentik/elements/buttons/ModalButton";
|
import "@goauthentik/elements/buttons/ModalButton";
|
||||||
import "@goauthentik/elements/buttons/SpinnerButton";
|
import "@goauthentik/elements/buttons/SpinnerButton";
|
||||||
|
|
@ -80,202 +82,186 @@ export class OAuth2ProviderViewPage extends AKElement {
|
||||||
if (!this.provider) {
|
if (!this.provider) {
|
||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
return html` ${
|
return html` ${this.provider?.assignedApplicationName
|
||||||
this.provider?.assignedApplicationName
|
|
||||||
? html``
|
? html``
|
||||||
: html`<div slot="header" class="pf-c-banner pf-m-warning">
|
: html`<div slot="header" class="pf-c-banner pf-m-warning">
|
||||||
${t`Warning: Provider is not used by an Application.`}
|
${t`Warning: Provider is not used by an Application.`}
|
||||||
</div>`
|
</div>`}
|
||||||
}
|
|
||||||
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
|
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
|
||||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
<div
|
||||||
<div class="pf-c-card">
|
class="pf-c-card pf-l-grid__item pf-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
|
||||||
<div class="pf-c-card__body">
|
>
|
||||||
<dl class="pf-c-description-list pf-m-2-col-on-lg">
|
<div class="pf-c-card__body">
|
||||||
<div class="pf-c-description-list__group">
|
<dl class="pf-c-description-list">
|
||||||
<dt class="pf-c-description-list__term">
|
<div class="pf-c-description-list__group">
|
||||||
<span class="pf-c-description-list__text"
|
<dt class="pf-c-description-list__term">
|
||||||
>${t`Name`}</span
|
<span class="pf-c-description-list__text">${t`Name`}</span>
|
||||||
>
|
</dt>
|
||||||
</dt>
|
<dd class="pf-c-description-list__description">
|
||||||
<dd class="pf-c-description-list__description">
|
<div class="pf-c-description-list__text">
|
||||||
<div class="pf-c-description-list__text">
|
${this.provider.name}
|
||||||
${this.provider.name}
|
</div>
|
||||||
</div>
|
</dd>
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div class="pf-c-description-list__group">
|
|
||||||
<dt class="pf-c-description-list__term">
|
|
||||||
<span class="pf-c-description-list__text"
|
|
||||||
>${t`Assigned to application`}</span
|
|
||||||
>
|
|
||||||
</dt>
|
|
||||||
<dd class="pf-c-description-list__description">
|
|
||||||
<div class="pf-c-description-list__text">
|
|
||||||
<ak-provider-related-application
|
|
||||||
.provider=${this.provider}
|
|
||||||
></ak-provider-related-application>
|
|
||||||
</div>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div class="pf-c-description-list__group">
|
|
||||||
<dt class="pf-c-description-list__term">
|
|
||||||
<span class="pf-c-description-list__text"
|
|
||||||
>${t`Client type`}</span
|
|
||||||
>
|
|
||||||
</dt>
|
|
||||||
<dd class="pf-c-description-list__description">
|
|
||||||
<div class="pf-c-description-list__text">
|
|
||||||
${convertToTitle(
|
|
||||||
this.provider.clientType || "",
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div class="pf-c-description-list__group">
|
|
||||||
<dt class="pf-c-description-list__term">
|
|
||||||
<span class="pf-c-description-list__text"
|
|
||||||
>${t`Client ID`}</span
|
|
||||||
>
|
|
||||||
</dt>
|
|
||||||
<dd class="pf-c-description-list__description">
|
|
||||||
<div class="pf-c-description-list__text">
|
|
||||||
${this.provider.clientId}
|
|
||||||
</div>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div class="pf-c-description-list__group">
|
|
||||||
<dt class="pf-c-description-list__term">
|
|
||||||
<span class="pf-c-description-list__text"
|
|
||||||
>${t`Redirect URIs`}</span
|
|
||||||
>
|
|
||||||
</dt>
|
|
||||||
<dd class="pf-c-description-list__description">
|
|
||||||
<div class="pf-c-description-list__text">
|
|
||||||
${this.provider.redirectUris}
|
|
||||||
</div>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
<div class="pf-c-card__footer">
|
|
||||||
<ak-forms-modal>
|
|
||||||
<span slot="submit"> ${t`Update`} </span>
|
|
||||||
<span slot="header"> ${t`Update OAuth2 Provider`} </span>
|
|
||||||
<ak-provider-oauth2-form
|
|
||||||
slot="form"
|
|
||||||
.instancePk=${this.provider.pk || 0}
|
|
||||||
>
|
|
||||||
</ak-provider-oauth2-form>
|
|
||||||
<button slot="trigger" class="pf-c-button pf-m-primary">
|
|
||||||
${t`Edit`}
|
|
||||||
</button>
|
|
||||||
</ak-forms-modal>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="pf-c-description-list__group">
|
||||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
<dt class="pf-c-description-list__term">
|
||||||
<div class="pf-c-card">
|
<span class="pf-c-description-list__text"
|
||||||
<div class="pf-c-card__body">
|
>${t`Assigned to application`}</span
|
||||||
<form class="pf-c-form">
|
>
|
||||||
<div class="pf-c-form__group">
|
</dt>
|
||||||
<label class="pf-c-form__label">
|
<dd class="pf-c-description-list__description">
|
||||||
<span class="pf-c-form__label-text"
|
<div class="pf-c-description-list__text">
|
||||||
>${t`OpenID Configuration URL`}</span
|
<ak-provider-related-application .provider=${this.provider}>
|
||||||
>
|
</ak-provider-related-application>
|
||||||
</label>
|
</div>
|
||||||
<input
|
</dd>
|
||||||
class="pf-c-form-control"
|
|
||||||
readonly
|
|
||||||
type="text"
|
|
||||||
value="${this.providerUrls?.providerInfo || t`-`}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="pf-c-form__group">
|
|
||||||
<label class="pf-c-form__label">
|
|
||||||
<span class="pf-c-form__label-text"
|
|
||||||
>${t`OpenID Configuration Issuer`}</span
|
|
||||||
>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="pf-c-form-control"
|
|
||||||
readonly
|
|
||||||
type="text"
|
|
||||||
value="${this.providerUrls?.issuer || t`-`}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="pf-c-form__group">
|
|
||||||
<label class="pf-c-form__label">
|
|
||||||
<span class="pf-c-form__label-text"
|
|
||||||
>${t`Authorize URL`}</span
|
|
||||||
>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="pf-c-form-control"
|
|
||||||
readonly
|
|
||||||
type="text"
|
|
||||||
value="${this.providerUrls?.authorize || t`-`}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="pf-c-form__group">
|
|
||||||
<label class="pf-c-form__label">
|
|
||||||
<span class="pf-c-form__label-text"
|
|
||||||
>${t`Token URL`}</span
|
|
||||||
>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="pf-c-form-control"
|
|
||||||
readonly
|
|
||||||
type="text"
|
|
||||||
value="${this.providerUrls?.token || t`-`}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="pf-c-form__group">
|
|
||||||
<label class="pf-c-form__label">
|
|
||||||
<span class="pf-c-form__label-text"
|
|
||||||
>${t`Userinfo URL`}</span
|
|
||||||
>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="pf-c-form-control"
|
|
||||||
readonly
|
|
||||||
type="text"
|
|
||||||
value="${this.providerUrls?.userInfo || t`-`}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="pf-c-form__group">
|
|
||||||
<label class="pf-c-form__label">
|
|
||||||
<span class="pf-c-form__label-text"
|
|
||||||
>${t`Logout URL`}</span
|
|
||||||
>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="pf-c-form-control"
|
|
||||||
readonly
|
|
||||||
type="text"
|
|
||||||
value="${this.providerUrls?.logout || t`-`}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="pf-c-form__group">
|
|
||||||
<label class="pf-c-form__label">
|
|
||||||
<span class="pf-c-form__label-text"
|
|
||||||
>${t`JWKS URL`}</span
|
|
||||||
>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="pf-c-form-control"
|
|
||||||
readonly
|
|
||||||
type="text"
|
|
||||||
value="${this.providerUrls?.jwks || t`-`}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="pf-c-description-list__group">
|
||||||
|
<dt class="pf-c-description-list__term">
|
||||||
|
<span class="pf-c-description-list__text"
|
||||||
|
>${t`Client type`}</span
|
||||||
|
>
|
||||||
|
</dt>
|
||||||
|
<dd class="pf-c-description-list__description">
|
||||||
|
<div class="pf-c-description-list__text">
|
||||||
|
${convertToTitle(this.provider.clientType || "")}
|
||||||
|
</div>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="pf-c-description-list__group">
|
||||||
|
<dt class="pf-c-description-list__term">
|
||||||
|
<span class="pf-c-description-list__text">${t`Client ID`}</span>
|
||||||
|
</dt>
|
||||||
|
<dd class="pf-c-description-list__description">
|
||||||
|
<div class="pf-c-description-list__text">
|
||||||
|
${this.provider.clientId}
|
||||||
|
</div>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="pf-c-description-list__group">
|
||||||
|
<dt class="pf-c-description-list__term">
|
||||||
|
<span class="pf-c-description-list__text"
|
||||||
|
>${t`Redirect URIs`}</span
|
||||||
|
>
|
||||||
|
</dt>
|
||||||
|
<dd class="pf-c-description-list__description">
|
||||||
|
<div class="pf-c-description-list__text">
|
||||||
|
${this.provider.redirectUris}
|
||||||
|
</div>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="pf-c-card__footer">
|
||||||
</ak-tabs>`;
|
<ak-forms-modal>
|
||||||
|
<span slot="submit"> ${t`Update`} </span>
|
||||||
|
<span slot="header"> ${t`Update OAuth2 Provider`} </span>
|
||||||
|
<ak-provider-oauth2-form
|
||||||
|
slot="form"
|
||||||
|
.instancePk=${this.provider.pk || 0}
|
||||||
|
>
|
||||||
|
</ak-provider-oauth2-form>
|
||||||
|
<button slot="trigger" class="pf-c-button pf-m-primary">
|
||||||
|
${t`Edit`}
|
||||||
|
</button>
|
||||||
|
</ak-forms-modal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pf-c-card pf-l-grid__item pf-m-7-col">
|
||||||
|
<div class="pf-c-card__body">
|
||||||
|
<form class="pf-c-form">
|
||||||
|
<div class="pf-c-form__group">
|
||||||
|
<label class="pf-c-form__label">
|
||||||
|
<span class="pf-c-form__label-text"
|
||||||
|
>${t`OpenID Configuration URL`}</span
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="pf-c-form-control"
|
||||||
|
readonly
|
||||||
|
type="text"
|
||||||
|
value="${this.providerUrls?.providerInfo || t`-`}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="pf-c-form__group">
|
||||||
|
<label class="pf-c-form__label">
|
||||||
|
<span class="pf-c-form__label-text"
|
||||||
|
>${t`OpenID Configuration Issuer`}</span
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="pf-c-form-control"
|
||||||
|
readonly
|
||||||
|
type="text"
|
||||||
|
value="${this.providerUrls?.issuer || t`-`}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="pf-c-form__group">
|
||||||
|
<label class="pf-c-form__label">
|
||||||
|
<span class="pf-c-form__label-text">${t`Authorize URL`}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="pf-c-form-control"
|
||||||
|
readonly
|
||||||
|
type="text"
|
||||||
|
value="${this.providerUrls?.authorize || t`-`}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="pf-c-form__group">
|
||||||
|
<label class="pf-c-form__label">
|
||||||
|
<span class="pf-c-form__label-text">${t`Token URL`}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="pf-c-form-control"
|
||||||
|
readonly
|
||||||
|
type="text"
|
||||||
|
value="${this.providerUrls?.token || t`-`}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="pf-c-form__group">
|
||||||
|
<label class="pf-c-form__label">
|
||||||
|
<span class="pf-c-form__label-text">${t`Userinfo URL`}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="pf-c-form-control"
|
||||||
|
readonly
|
||||||
|
type="text"
|
||||||
|
value="${this.providerUrls?.userInfo || t`-`}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="pf-c-form__group">
|
||||||
|
<label class="pf-c-form__label">
|
||||||
|
<span class="pf-c-form__label-text">${t`Logout URL`}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="pf-c-form-control"
|
||||||
|
readonly
|
||||||
|
type="text"
|
||||||
|
value="${this.providerUrls?.logout || t`-`}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="pf-c-form__group">
|
||||||
|
<label class="pf-c-form__label">
|
||||||
|
<span class="pf-c-form__label-text">${t`JWKS URL`}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="pf-c-form-control"
|
||||||
|
readonly
|
||||||
|
type="text"
|
||||||
|
value="${this.providerUrls?.jwks || t`-`}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
|
||||||
|
>
|
||||||
|
<div class="pf-c-card__body">
|
||||||
|
<ak-markdown .md=${MDProviderOAuth2}></ak-markdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in a new issue