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

web: add button to copy TOTP URL 

closes #591
This commit is contained in:
Jens Langhammer 2021-02-25 21:22:57 +01:00
parent fbf2fe2404
commit 74b407ebc7
2 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/elements/stages/authenticator_totp/AuthenticatorTOTPStage.ts
View File

@ -5,6 +5,7 @@ import { COMMON_STYLES } from "../../../common/styles";
import { BaseStage } from "../base";
import "webcomponent-qr-code";
import "../form";
import { showMessage } from "../../messages/MessageContainer";
export interface AuthenticatorTOTPChallenge extends WithUserInfoChallenge {
config_url: string;
@ -45,6 +46,19 @@ export class AuthenticatorTOTPStage extends BaseStage {
<ak-form-element>
<!-- @ts-ignore -->
<qr-code data="${this.challenge.config_url}"></qr-code>
<button class="pf-c-button pf-m-secondary pf-m-progress pf-m-in-progress" @click=${(e: Event) => {
e.preventDefault();
if (!this.challenge?.config_url) return;
navigator.clipboard.writeText(this.challenge?.config_url).then(() => {
showMessage({
level_tag: "success",
message: gettext("Successfully copied TOTP Config.")
});
});
}}>
<span class="pf-c-button__progress"><i class="fas fa-copy"></i></span>
${gettext("Copy")}
</button>
</ak-form-element>
<ak-form-element
label="${gettext("Code")}"

13
web/src/elements/stages/form.ts
View File

@ -1,4 +1,4 @@
import { customElement, LitElement, CSSResult, property } from "lit-element";
import { customElement, LitElement, CSSResult, property, css } from "lit-element";
import { TemplateResult, html } from "lit-html";
import { Error } from "../../api/Flows";
import { COMMON_STYLES } from "../../common/styles";
@ -7,7 +7,16 @@ import { COMMON_STYLES } from "../../common/styles";
export class FormElement extends LitElement {
static get styles(): CSSResult[] {
return COMMON_STYLES;
return COMMON_STYLES.concat(
css`
slot {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
`
);
}
@property()