trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/flows: improve layout for TOTP QR stage 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-07-28 21:16:39 +02:00
parent 0248755cda
commit e49050af19
1 changed files with 41 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import "webcomponent-qr-code";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, html } from "lit"; import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement } from "lit/decorators.js"; import { customElement } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js"; import { ifDefined } from "lit/directives/if-defined.js";
@ -31,7 +31,22 @@ export class AuthenticatorTOTPStage extends BaseStage<
AuthenticatorTOTPChallengeResponseRequest AuthenticatorTOTPChallengeResponseRequest
> { > {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal]; return [
PFBase,
PFLogin,
PFForm,
PFFormControl,
PFTitle,
PFButton,
AKGlobal,
css`
.qr-container {
display: flex;
flex-direction: column;
place-items: center;
}
`,
];
} }
render(): TemplateResult { render(): TemplateResult {
@ -61,27 +76,31 @@ export class AuthenticatorTOTPStage extends BaseStage<
</ak-form-static> </ak-form-static>
<input type="hidden" name="otp_uri" value=${this.challenge.configUrl} /> <input type="hidden" name="otp_uri" value=${this.challenge.configUrl} />
<ak-form-element> <ak-form-element>
<!-- @ts-ignore --> <div class="qr-container">
<qr-code data="${this.challenge.configUrl}"></qr-code> <!-- @ts-ignore -->
<button <qr-code data="${this.challenge.configUrl}"></qr-code>
type="button" <button
class="pf-c-button pf-m-secondary pf-m-progress pf-m-in-progress" type="button"
@click=${(e: Event) => { class="pf-c-button pf-m-secondary pf-m-progress pf-m-in-progress"
e.preventDefault(); @click=${(e: Event) => {
if (!this.challenge?.configUrl) return; e.preventDefault();
navigator.clipboard if (!this.challenge?.configUrl) return;
.writeText(this.challenge?.configUrl) navigator.clipboard
.then(() => { .writeText(this.challenge?.configUrl)
showMessage({ .then(() => {
level: MessageLevel.success, showMessage({
message: t`Successfully copied TOTP Config.`, level: MessageLevel.success,
message: t`Successfully copied TOTP Config.`,
});
}); });
}); }}
}} >
> <span class="pf-c-button__progress"
<span class="pf-c-button__progress"><i class="fas fa-copy"></i></span> ><i class="fas fa-copy"></i
${t`Copy`} ></span>
</button> ${t`Copy`}
</button>
</div>
</ak-form-element> </ak-form-element>
<ak-form-element <ak-form-element
label="${t`Code`}" label="${t`Code`}"