habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stages/captcha: migrated to SPA

Browse Source
This commit is contained in:
Jens Langhammer
2021-02-25 19:58:38 +01:00
parent 890e0e9054
commit 9e6a7bf16b
9 changed files with 176 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/package-lock.json generated
View File

@ -301,6 +301,11 @@
"@types/node": "*"
}
},
"@types/grecaptcha": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/grecaptcha/-/grecaptcha-3.0.1.tgz",
"integrity": "sha512-eMA/2quQoxwSe8oOBB1H6KNXNqginzt9BHAt2vVVUoQswZNct2QwSAmEMsN/VHj/XSNxM3p+Py15B7omEaAC9w=="
},
"@types/html-minifier": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/@types/html-minifier/-/html-minifier-3.5.3.tgz",

1
web/package.json
View File

@ -16,6 +16,7 @@
"@sentry/tracing": "^6.2.0",
"@types/chart.js": "^2.9.30",
"@types/codemirror": "0.0.108",
"@types/grecaptcha": "^3.0.1",
"base64-js": "^1.5.1",
"chart.js": "^2.9.4",
"codemirror": "^5.59.3",

87
web/src/elements/stages/captcha/CaptchaStage.ts Normal file
View File

@ -0,0 +1,87 @@
import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows";
import { COMMON_STYLES } from "../../../common/styles";
import { SpinnerSize } from "../../Spinner";
import { BaseStage } from "../base";
import "../form";
export interface CaptchaChallenge extends WithUserInfoChallenge {
site_key: string;
}
@customElement("ak-stage-captcha")
export class CaptchaStage extends BaseStage {
@property({ attribute: false })
challenge?: CaptchaChallenge;
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
submitFormAlt(token: string): void {
const form = new FormData();
form.set("token", token);
this.host?.submit(form);
}
firstUpdated(): void {
const script = document.createElement("script");
script.src = "https://www.google.com/recaptcha/api.js";//?render=${this.challenge?.site_key}`;
script.async = true;
script.defer = true;
const captchaContainer = document.createElement("div");
document.body.appendChild(captchaContainer);
script.onload = () => {
console.debug("authentik/stages/captcha: script loaded");
grecaptcha.ready(() => {
if (!this.challenge?.site_key) return;
console.debug("authentik/stages/captcha: ready");
const captchaId = grecaptcha.render(captchaContainer, {
sitekey: this.challenge.site_key,
callback: (token) => {
this.submitFormAlt(token);
},
size: "invisible",
});
grecaptcha.execute(captchaId);
});
};
document.head.appendChild(script);
}
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
}
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
${this.challenge.title}
</h1>
</header>
<div class="pf-c-login__main-body">
<form class="pf-c-form">
<div class="pf-c-form__group">
<div class="form-control-static">
<div class="left">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user}
</div>
<div class="right">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
</div>
</div>
<div class="ak-loading">
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
</div>
</form>
</div>
<footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links">
</ul>
</footer>`;
}
}

11
web/src/pages/LibraryPage.ts
View File

@ -14,10 +14,6 @@ export class LibraryApplication extends LitElement {
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(
css`
:host,
main {
height: 100%;
}
a {
height: 100%;
}
@ -59,7 +55,12 @@ export class LibraryPage extends LitElement {
apps?: AKResponse<Application>;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return COMMON_STYLES.concat(css`
:host,
main {
height: 100%;
}
`);
}
firstUpdated(): void {

18
web/src/pages/generic/FlowExecutor.ts
View File

@ -2,16 +2,17 @@ import { gettext } from "django";
import { LitElement, html, customElement, property, TemplateResult, CSSResult, css } from "lit-element";
import { unsafeHTML } from "lit-html/directives/unsafe-html";
import { getCookie } from "../../utils";
import "../../elements/stages/identification/IdentificationStage";
import "../../elements/stages/password/PasswordStage";
import "../../elements/stages/authenticator_static/AuthenticatorStaticStage";
import "../../elements/stages/authenticator_totp/AuthenticatorTOTPStage";
import "../../elements/stages/authenticator_validate/AuthenticatorValidateStage";
import "../../elements/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
import "../../elements/stages/autosubmit/AutosubmitStage";
import "../../elements/stages/captcha/CaptchaStage";
import "../../elements/stages/consent/ConsentStage";
import "../../elements/stages/email/EmailStage";
import "../../elements/stages/autosubmit/AutosubmitStage";
import "../../elements/stages/identification/IdentificationStage";
import "../../elements/stages/password/PasswordStage";
import "../../elements/stages/prompt/PromptStage";
import "../../elements/stages/authenticator_totp/AuthenticatorTOTPStage";
import "../../elements/stages/authenticator_static/AuthenticatorStaticStage";
import "../../elements/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
import "../../elements/stages/authenticator_validate/AuthenticatorValidateStage";
import { ShellChallenge, Challenge, ChallengeTypes, Flow, RedirectChallenge } from "../../api/Flows";
import { DefaultClient } from "../../api/Client";
import { IdentificationChallenge } from "../../elements/stages/identification/IdentificationStage";
@ -24,6 +25,7 @@ import { AuthenticatorTOTPChallenge } from "../../elements/stages/authenticator_
import { AuthenticatorStaticChallenge } from "../../elements/stages/authenticator_static/AuthenticatorStaticStage";
import { AuthenticatorValidateStageChallenge } from "../../elements/stages/authenticator_validate/AuthenticatorValidateStage";
import { WebAuthnAuthenticatorRegisterChallenge } from "../../elements/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
import { CaptchaChallenge } from "../../elements/stages/captcha/CaptchaStage";
import { COMMON_STYLES } from "../../common/styles";
import { SpinnerSize } from "../../elements/Spinner";
import { StageHost } from "../../elements/stages/base";
@ -149,6 +151,8 @@ export class FlowExecutor extends LitElement implements StageHost {
return html`<ak-stage-identification .host=${this} .challenge=${this.challenge as IdentificationChallenge}></ak-stage-identification>`;
case "ak-stage-password":
return html`<ak-stage-password .host=${this} .challenge=${this.challenge as PasswordChallenge}></ak-stage-password>`;
case "ak-stage-captcha":
return html`<ak-stage-captcha .host=${this} .challenge=${this.challenge as CaptchaChallenge}></ak-stage-captcha>`;
case "ak-stage-consent":
return html`<ak-stage-consent .host=${this} .challenge=${this.challenge as ConsentChallenge}></ak-stage-consent>`;
case "ak-stage-email":