web/admin: show callback URL when creating/updating source

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-05-06 14:40:02 +02:00
parent c151faeff6
commit 979a5f800e
1 changed files with 19 additions and 1 deletions

View File

@ -9,6 +9,7 @@ import "../../../elements/forms/HorizontalFormElement";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { AppURLManager } from "../../../api/legacy";
@customElement("ak-source-oauth-form") @customElement("ak-source-oauth-form")
export class OAuthSourceForm extends Form<OAuthSource> { export class OAuthSourceForm extends Form<OAuthSource> {
@ -97,6 +98,14 @@ export class OAuthSourceForm extends Form<OAuthSource> {
</ak-form-group>`; </ak-form-group>`;
} }
getRedirectURI(slug?: string): string {
if (!slug) {
return "";
}
const path = AppURLManager.sourceOAuth(slug, "callback");
return `${window.location.protocol}//${window.location.host}${path}`;
}
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal <ak-form-element-horizontal
@ -109,7 +118,16 @@ export class OAuthSourceForm extends Form<OAuthSource> {
label=${t`Slug`} label=${t`Slug`}
?required=${true} ?required=${true}
name="slug"> name="slug">
<input type="text" value="${ifDefined(this.source?.slug)}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.source?.slug)}" class="pf-c-form-control" required @input=${(ev: Event) => {
const current = (ev.target as HTMLInputElement).value;
const label = this.shadowRoot?.querySelector<HTMLSpanElement>("#callback-url");
if (!label) return;
label.innerText = this.getRedirectURI(current);
}}>
<p class="pf-c-form__helper-text">
${t`Use this redirect URL:`}
<span id="callback-url">${this.getRedirectURI(this.source?.slug)}</span>
</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="enabled"> <ak-form-element-horizontal name="enabled">
<div class="pf-c-check"> <div class="pf-c-check">