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 2022-10-19 10:11:12 +02:00
parent fac3d8b8c9
commit 0b6dd49f36
1 changed files with 176 additions and 190 deletions

View File

@ -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,23 +82,20 @@ 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"> <div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg"> <dl class="pf-c-description-list">
<div class="pf-c-description-list__group"> <div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-c-description-list__text">${t`Name`}</span>
>${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">
@ -112,9 +111,8 @@ export class OAuth2ProviderViewPage extends AKElement {
</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">
<ak-provider-related-application <ak-provider-related-application .provider=${this.provider}>
.provider=${this.provider} </ak-provider-related-application>
></ak-provider-related-application>
</div> </div>
</dd> </dd>
</div> </div>
@ -126,17 +124,13 @@ export class OAuth2ProviderViewPage extends AKElement {
</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">
${convertToTitle( ${convertToTitle(this.provider.clientType || "")}
this.provider.clientType || "",
)}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-c-description-list__text">${t`Client ID`}</span>
>${t`Client ID`}</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">
@ -173,9 +167,7 @@ export class OAuth2ProviderViewPage extends AKElement {
</ak-forms-modal> </ak-forms-modal>
</div> </div>
</div> </div>
</div> <div class="pf-c-card pf-l-grid__item pf-m-7-col">
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card">
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<form class="pf-c-form"> <form class="pf-c-form">
<div class="pf-c-form__group"> <div class="pf-c-form__group">
@ -207,9 +199,7 @@ export class OAuth2ProviderViewPage extends AKElement {
<hr /> <hr />
<div class="pf-c-form__group"> <div class="pf-c-form__group">
<label class="pf-c-form__label"> <label class="pf-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-c-form__label-text">${t`Authorize URL`}</span>
>${t`Authorize URL`}</span
>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-c-form-control"
@ -220,9 +210,7 @@ export class OAuth2ProviderViewPage extends AKElement {
</div> </div>
<div class="pf-c-form__group"> <div class="pf-c-form__group">
<label class="pf-c-form__label"> <label class="pf-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-c-form__label-text">${t`Token URL`}</span>
>${t`Token URL`}</span
>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-c-form-control"
@ -233,9 +221,7 @@ export class OAuth2ProviderViewPage extends AKElement {
</div> </div>
<div class="pf-c-form__group"> <div class="pf-c-form__group">
<label class="pf-c-form__label"> <label class="pf-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-c-form__label-text">${t`Userinfo URL`}</span>
>${t`Userinfo URL`}</span
>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-c-form-control"
@ -246,9 +232,7 @@ export class OAuth2ProviderViewPage extends AKElement {
</div> </div>
<div class="pf-c-form__group"> <div class="pf-c-form__group">
<label class="pf-c-form__label"> <label class="pf-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-c-form__label-text">${t`Logout URL`}</span>
>${t`Logout URL`}</span
>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-c-form-control"
@ -259,9 +243,7 @@ export class OAuth2ProviderViewPage extends AKElement {
</div> </div>
<div class="pf-c-form__group"> <div class="pf-c-form__group">
<label class="pf-c-form__label"> <label class="pf-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-c-form__label-text">${t`JWKS URL`}</span>
>${t`JWKS URL`}</span
>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-c-form-control"
@ -273,9 +255,13 @@ export class OAuth2ProviderViewPage extends AKElement {
</form> </form>
</div> </div>
</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> </div>
</section> </div>`;
</ak-tabs>`;
} }
} }