stages/password: Migrate to SPA

web/src/elements/stages/base.ts

@@ -3,8 +3,11 @@ import { FlowExecutor } from "../../pages/generic/FlowExecutor";
 
 export class BaseStage extends LitElement {
 
-    // submit()
-
     host?: FlowExecutor;
 
+    submit(e: Event): void {
+        e.preventDefault();
+        const form = new FormData(this.shadowRoot?.querySelector("form") || undefined);
+        this.host?.submit(form);
+    }
 }

web/src/elements/stages/identification/IdentificationStage.ts

@@ -64,12 +64,6 @@ export class IdentificationStage extends BaseStage {
         return COMMON_STYLES;
     }
 
-    submit(e: Event): void {
-        e.preventDefault();
-        const form = new FormData(this.shadowRoot?.querySelector("form") || undefined);
-        this.host?.submit(form);
-    }
-
     renderSource(source: UILoginButton): TemplateResult {
         let icon = html`<i class="pf-icon pf-icon-arrow" title="${source.name}"></i>`;
         if (source.icon_url) {

web/src/elements/stages/password/PasswordStage.ts

@@ -0,0 +1,69 @@
+import { gettext } from "django";
+import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
+import { Challenge } from "../../../api/Flows";
+import { COMMON_STYLES } from "../../../common/styles";
+import { BaseStage } from "../base";
+
+export interface PasswordChallenge extends Challenge {
+
+    pending_user: string;
+    pending_user_avatar: string;
+    recovery_url?: string;
+
+}
+
+@customElement("ak-stage-password")
+export class PasswordStage extends BaseStage {
+
+    @property({attribute: false})
+    challenge?: PasswordChallenge;
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
+    }
+
+    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" @submit=${(e: Event) => {this.submit(e);}}>
+                    <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="/-/cancel/">${gettext("Not you?")}</a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <ak-form-element
+                        label="${gettext("Password")}"
+                        ?required="${true}"
+                        class="pf-c-form__group"
+                        .errors=${(this.challenge?.response_errors || {})["password"]}>
+                        <input type="password" name="password" placeholder="${gettext("Please enter your password")}" autofocus autocomplete="current-password" class="pf-c-form-control" required="">
+                    </ak-form-element>
+
+                    <div class="pf-c-form__group pf-m-action">
+                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                            ${gettext("Continue")}
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <footer class="pf-c-login__main-footer">
+                <ul class="pf-c-login__main-footer-links">
+                </ul>
+            </footer>`;
+    }
+
+}

web/src/pages/generic/FlowExecutor.ts

@@ -3,9 +3,11 @@ import { LitElement, html, customElement, property, TemplateResult } from "lit-e
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
 import { getCookie } from "../../utils";
 import "../../elements/stages/identification/IdentificationStage";
+import "../../elements/stages/password/PasswordStage";
 import { ShellChallenge, Challenge, ChallengeTypes, Flow, RedirectChallenge } from "../../api/Flows";
 import { DefaultClient } from "../../api/Client";
 import { IdentificationChallenge } from "../../elements/stages/identification/IdentificationStage";
+import { PasswordChallenge } from "../../elements/stages/password/PasswordStage";
 
 @customElement("ak-flow-executor")
 export class FlowExecutor extends LitElement {
@@ -104,6 +106,8 @@ export class FlowExecutor extends LitElement {
             switch (this.challenge.component) {
                 case "ak-stage-identification":
                     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>`;
                 default:
                     break;
             }