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

web: remove common_styles

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-17 17:11:39 +01:00
parent 2698d9d23a
commit 43bf9e6c21
59 changed files with 500 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/flows/FlowExecutor.ts
View File

@ -5,6 +5,8 @@ import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css";
import PFList from "@patternfly/patternfly/components/List/list.css";
import AKGlobal from "../authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import { unsafeHTML } from "lit-html/directives/unsafe-html";
import "./stages/authenticator_static/AuthenticatorStaticStage";
@ -30,7 +32,6 @@ import { AuthenticatorStaticChallenge } from "./stages/authenticator_static/Auth
import { AuthenticatorValidateStageChallenge } from "./stages/authenticator_validate/AuthenticatorValidateStage";
import { WebAuthnAuthenticatorRegisterChallenge } from "./stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
import { CaptchaChallenge } from "./stages/captcha/CaptchaStage";
import { COMMON_STYLES } from "../common/styles";
import { SpinnerSize } from "../elements/Spinner";
import { StageHost } from "./stages/base";
import { Challenge, ChallengeTypeEnum, FlowsApi } from "authentik-api";
@ -48,7 +49,7 @@ export class FlowExecutor extends LitElement implements StageHost {
loading = false;
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css`
return [PFBase, PFLogin, PFTitle].concat(css`
.ak-loading {
display: flex;
height: 100%;
@ -64,6 +65,10 @@ export class FlowExecutor extends LitElement implements StageHost {
:host {
position: relative;
}
.ak-exception {
font-family: monospace;
overflow-x: scroll;
}
`);
}
@ -110,21 +115,15 @@ export class FlowExecutor extends LitElement implements StageHost {
errorMessage(error: string): void {
this.challenge = <ShellChallenge>{
type: ChallengeTypeEnum.Shell,
body: `<style>
.ak-exception {
font-family: monospace;
overflow-x: scroll;
}
</style>
<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
${gettext("Whoops!")}
</h1>
</header>
<div class="pf-c-login__main-body">
<h3>${gettext("Something went wrong! Please try again later.")}</h3>
<pre class="ak-exception">${error}</pre>
</div>`
body: `<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
${gettext("Whoops!")}
</h1>
</header>
<div class="pf-c-login__main-body">
<h3>${gettext("Something went wrong! Please try again later.")}</h3>
<pre class="ak-exception">${error}</pre>
</div>`
};
}

39
web/src/flows/FormStatic.ts Normal file
View File

@ -0,0 +1,39 @@
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
@customElement("ak-form-static")
export class FormStatic extends LitElement {
static get styles(): CSSResult[] {
return [css`
/* Form with user */
.form-control-static {
margin-top: var(--pf-global--spacer--sm);
display: flex;
align-items: center;
justify-content: space-between;
}
.form-control-static slot[name=avatar] {
display: flex;
align-items: center;
}
.form-control-static img {
margin-right: var(--pf-global--spacer--xs);
}
.form-control-static a {
padding-top: var(--pf-global--spacer--xs);
padding-bottom: var(--pf-global--spacer--xs);
line-height: var(--pf-global--spacer--xl);
}
`];
}
render(): TemplateResult {
return html`
<div class="form-control-static">
<slot name="avatar"></slot>
<slot name="link"></slot>
</div>
`;
}
}

34
web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
View File

@ -1,10 +1,15 @@
import { gettext } from "django";
import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows";
import { COMMON_STYLES } from "../../../common/styles";
import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { BaseStage } from "../base";
import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState";
import "../../../elements/EmptyState";
import "../../FormStatic";
export interface AuthenticatorStaticChallenge extends WithUserInfoChallenge {
codes: number[];
@ -17,7 +22,7 @@ export class AuthenticatorStaticStage extends BaseStage {
challenge?: AuthenticatorStaticChallenge;
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css`
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css`
/* Static OTP Tokens */
.ak-otp-tokens {
list-style: circle;
@ -35,7 +40,10 @@ export class AuthenticatorStaticStage extends BaseStage {
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
@ -44,17 +52,15 @@ export class AuthenticatorStaticStage extends BaseStage {
</header>
<div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(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="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
<ak-form-static class="pf-c-form__group">
<div slot="avatar">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user}
</div>
</div>
<div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
</ak-form-static>
<ak-form-element
label="${gettext("Tokens")}"
?required="${true}"

34
web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
View File

@ -1,12 +1,17 @@
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 PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { BaseStage } from "../base";
import "webcomponent-qr-code";
import "../../../elements/forms/FormElement";
import { showMessage } from "../../../elements/messages/MessageContainer";
import "../../../elements/utils/LoadingState";
import "../../../elements/EmptyState";
import "../../FormStatic";
export interface AuthenticatorTOTPChallenge extends WithUserInfoChallenge {
config_url: string;
@ -19,12 +24,15 @@ export class AuthenticatorTOTPStage extends BaseStage {
challenge?: AuthenticatorTOTPChallenge;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
}
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
@ -33,17 +41,15 @@ export class AuthenticatorTOTPStage extends BaseStage {
</header>
<div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(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="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
<ak-form-static class="pf-c-form__group">
<div slot="avatar">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user}
</div>
</div>
<div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
</ak-form-static>
<input type="hidden" name="otp_uri" value=${this.challenge.config_url} />
<ak-form-element>
<!-- @ts-ignore -->

13
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
View File

@ -1,7 +1,11 @@
import { gettext } from "django";
import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { WithUserInfoChallenge } from "../../../api/Flows";
import { COMMON_STYLES } from "../../../common/styles";
import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { BaseStage, StageHost } from "../base";
import "./AuthenticatorValidateStageWebAuthn";
import "./AuthenticatorValidateStageCode";
@ -41,7 +45,7 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
}
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css`
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css`
ul > li:not(:last-child) {
padding-bottom: 1rem;
}
@ -134,7 +138,10 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
// User only has a single device class, so we don't show a picker
if (this.challenge?.device_challenges.length === 1) {

34
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
View File

@ -1,11 +1,16 @@
import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../../common/styles";
import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { BaseStage } from "../base";
import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState";
import "../../../elements/EmptyState";
import { PasswordManagerPrefill } from "../identification/IdentificationStage";
import "../../FormStatic";
@customElement("ak-stage-authenticator-validate-code")
export class AuthenticatorValidateStageWebCode extends BaseStage {
@ -20,26 +25,27 @@ export class AuthenticatorValidateStageWebCode extends BaseStage {
showBackButton = false;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
}
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(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="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
<ak-form-static class="pf-c-form__group">
<div slot="avatar">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user}
</div>
</div>
<div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
</ak-form-static>
<ak-form-element
label="${gettext("Code")}"
?required="${true}"

8
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
View File

@ -1,6 +1,10 @@
import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../../common/styles";
import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { SpinnerSize } from "../../../elements/Spinner";
import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils";
import { BaseStage } from "../base";
@ -25,7 +29,7 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
showBackButton = false;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
}
async authenticate(): Promise<void> {

8
web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
View File

@ -1,7 +1,11 @@
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 PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { SpinnerSize } from "../../../elements/Spinner";
import { BaseStage } from "../base";
import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils";
@ -27,7 +31,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage {
registerMessage = "";
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFLogin, PFFormControl, PFForm, PFTitle, PFButton];
}
async register(): Promise<void> {

21
web/src/flows/stages/autosubmit/AutosubmitStage.ts
View File

@ -1,9 +1,13 @@
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 PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { BaseStage } from "../base";
import "../../../elements/utils/LoadingState";
import "../../../elements/EmptyState";
export interface AutosubmitChallenge extends WithUserInfoChallenge {
url: string;
@ -17,7 +21,7 @@ export class AutosubmitStage extends BaseStage {
challenge?: AutosubmitChallenge;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
}
updated(): void {
@ -26,7 +30,10 @@ export class AutosubmitStage extends BaseStage {
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
@ -38,8 +45,10 @@ export class AutosubmitStage extends BaseStage {
${Object.entries(this.challenge.attrs).map(([ key, value ]) => {
return html`<input type="hidden" name="${key}" value="${value}">`;
})}
<ak-loading-state></ak-loading-state>
<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>
<div class="pf-c-form__group pf-m-action">
<button type="submit" class="pf-c-button pf-m-primary pf-m-block">
${gettext("Continue")}

36
web/src/flows/stages/captcha/CaptchaStage.ts
View File

@ -1,11 +1,16 @@
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 PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { SpinnerSize } from "../../../elements/Spinner";
import { BaseStage } from "../base";
import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState";
import "../../../elements/EmptyState";
import "../../FormStatic";
export interface CaptchaChallenge extends WithUserInfoChallenge {
site_key: string;
@ -18,7 +23,7 @@ export class CaptchaStage extends BaseStage {
challenge?: CaptchaChallenge;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
}
submitFormAlt(token: string): void {
@ -29,7 +34,7 @@ export class CaptchaStage extends BaseStage {
firstUpdated(): void {
const script = document.createElement("script");
script.src = "https://www.google.com/recaptcha/api.js";//?render=${this.challenge?.site_key}`;
script.src = "https://www.google.com/recaptcha/api.js";
script.async = true;
script.defer = true;
const captchaContainer = document.createElement("div");
@ -54,7 +59,10 @@ export class CaptchaStage extends BaseStage {
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
@ -63,17 +71,15 @@ export class CaptchaStage extends BaseStage {
</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>
<ak-form-static class="pf-c-form__group">
<div slot="avatar">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user}
</div>
</div>
<div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
</ak-form-static>
<div class="ak-loading">
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
</div>

34
web/src/flows/stages/consent/ConsentStage.ts
View File

@ -1,9 +1,14 @@
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 PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { BaseStage } from "../base";
import "../../../elements/utils/LoadingState";
import "../../../elements/EmptyState";
import "../../FormStatic";
export interface Permission {
name: string;
@ -24,12 +29,15 @@ export class ConsentStage extends BaseStage {
challenge?: ConsentChallenge;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
}
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
@ -38,17 +46,15 @@ export class ConsentStage extends BaseStage {
</header>
<div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(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="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
<ak-form-static class="pf-c-form__group">
<div slot="avatar">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user}
</div>
</div>
<div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
</ak-form-static>
<div class="pf-c-form__group">
<p id="header-text">

15
web/src/flows/stages/email/EmailStage.ts
View File

@ -1,9 +1,13 @@
import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { Challenge } from "authentik-api";
import { COMMON_STYLES } from "../../../common/styles";
import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { BaseStage } from "../base";
import "../../../elements/utils/LoadingState";
import "../../../elements/EmptyState";
export type EmailChallenge = Challenge;
@ -14,12 +18,15 @@ export class EmailStage extends BaseStage {
challenge?: EmailChallenge;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
}
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">

22
web/src/flows/stages/identification/IdentificationStage.ts
View File

@ -1,9 +1,13 @@
import { gettext } from "django";
import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../../common/styles";
import { BaseStage } from "../base";
import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState";
import "../../../elements/EmptyState";
import { Challenge } from "../../../api/Flows";
export const PasswordManagerPrefill: {
@ -40,10 +44,15 @@ export class IdentificationStage extends BaseStage {
challenge?: IdentificationChallenge;
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(
css`
/* login page's icons */
.pf-c-login__main-footer-links-item-link img {
width: 100px;
fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
width: 100%;
max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
height: 100%;
max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
}
`
);
@ -144,7 +153,10 @@ export class IdentificationStage extends BaseStage {
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">

34
web/src/flows/stages/password/PasswordStage.ts
View File

@ -1,11 +1,16 @@
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 PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { BaseStage } from "../base";
import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState";
import "../../../elements/EmptyState";
import { PasswordManagerPrefill } from "../identification/IdentificationStage";
import "../../FormStatic";
export interface PasswordChallenge extends WithUserInfoChallenge {
recovery_url?: string;
@ -18,12 +23,15 @@ export class PasswordStage extends BaseStage {
challenge?: PasswordChallenge;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFLogin, PFForm, PFFormControl, PFButton, PFTitle];
}
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
@ -32,17 +40,15 @@ export class PasswordStage extends BaseStage {
</header>
<div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => {this.submitForm(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="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
<ak-form-static class="pf-c-form__group">
<div slot="avatar">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user}
</div>
</div>
<div slot="link">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
</ak-form-static>
<input name="username" autocomplete="username" type="hidden" value="${this.challenge.pending_user}">
<ak-form-element

15
web/src/flows/stages/prompt/PromptStage.ts
View File

@ -1,10 +1,14 @@
import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { unsafeHTML } from "lit-html/directives/unsafe-html";
import { COMMON_STYLES } from "../../../common/styles";
import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { BaseStage } from "../base";
import "../../../elements/forms/FormElement";
import "../../../elements/utils/LoadingState";
import "../../../elements/EmptyState";
import { Challenge } from "../../../api/Flows";
export interface Prompt {
@ -27,7 +31,7 @@ export class PromptStage extends BaseStage {
challenge?: PromptChallenge;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
}
renderPromptInner(prompt: Prompt): string {
@ -113,7 +117,10 @@ export class PromptStage extends BaseStage {
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">