Add show secret section to two factor

This commit is contained in:
Jack Anderson 2025-01-13 15:14:52 +00:00 committed by j.anderson
parent bab7d9a202
commit 7aef0d0688
4 changed files with 71 additions and 1 deletions

View file

@ -67,7 +67,28 @@
<ng-container *ngIf="isQrCodeGenerated()">
<div *ngIf="qrCodeSvg" class='qr-code-container'>
<div class='qr-code' [innerHTML]="qrCodeSvg | trustHtml">
<div *ngIf="!showSecret()" class='qr-code'>
<div [innerHTML]="qrCodeSvg | trustHtml">
</div>
<div>
<a class="small show-secret-link pl-1" (click)="setShowSecret(true)">
<scrm-label labelKey='LBL_USE_SECRET'>
</scrm-label>
</a>
</div>
</div>
<div *ngIf="showSecret()" class='qr-code'>
<scrm-label class="pb-3" labelKey='LBL_USE_SECRET_DESC'>
</scrm-label>
<span class="small font-weight-bold pb-3 secret">{{ secret }}</span>
<div>
<a class="small show-secret-link" (click)="setShowSecret(false)">
<scrm-label labelKey='LBL_SHOW_QR_CODE'>
</scrm-label>
</a>
</div>
</div>
<div>
<scrm-label labelKey='LBL_QR_CODE_HELP'

View file

@ -47,11 +47,13 @@ export class TwoFactorComponent implements OnInit {
qrCodeUrl: string;
qrCodeSvg: string;
secret: string;
backupCodes: any;
authCode: string;
isAppMethodEnabled: WritableSignal<boolean> = signal(false);
areRecoveryCodesGenerated: WritableSignal<boolean> = signal(false);
isQrCodeGenerated: WritableSignal<boolean> = signal(false);
showSecret: WritableSignal<boolean> = signal(false);
title: string = '';
appMethodHeaderLabel: string = '';
@ -89,6 +91,7 @@ export class TwoFactorComponent implements OnInit {
this.isAppMethodEnabled.set(isEnabled);
this.areRecoveryCodesGenerated.set(isEnabled);
this.showSecret.set(false);
this.initButtons();
}
@ -97,6 +100,7 @@ export class TwoFactorComponent implements OnInit {
next: (response) => {
this.qrCodeUrl = response?.url;
this.qrCodeSvg = response?.svg;
this.secret = response.secret;
this.areRecoveryCodesGenerated.set(true);
this.isQrCodeGenerated.set(true);
},
@ -201,6 +205,11 @@ export class TwoFactorComponent implements OnInit {
}).catch();
}
setShowSecret(value): void {
this.showSecret.set(value);
return;
}
protected initButtons() {
this.enableAppMethodButtonConfig = {
klass: 'btn btn-sm btn-main',

View file

@ -45,6 +45,17 @@
.qr-code {
display: flex;
flex-flow: column;
.show-secret-link {
clear: both;
color: $coral-pink;
}
.show-secret-link:hover {
color: $light-orange;
cursor: pointer;
}
}
.auth-input {
@ -122,6 +133,20 @@
flex-direction: column;
align-items: center;
padding-bottom: .25rem;
.secret {
width: 50%;
}
.show-secret-link {
clear: both;
color: $coral-pink;
}
.show-secret-link:hover {
color: $light-orange;
cursor: pointer;
}
}
.qr-code-label {
@ -188,6 +213,20 @@
flex-direction: column;
align-items: center;
padding-bottom: .25rem;
.secret {
width: 50%;
}
.show-secret-link {
clear: both;
color: $coral-pink;
}
.show-secret-link:hover {
color: $light-orange;
cursor: pointer;
}
}
.qr-code-label {

View file

@ -164,6 +164,7 @@ class SecurityController extends AbstractController
$response = [
'url' => $qrCodeUrl,
'svg' => $this->displayQRCode($qrCodeUrl),
'secret' => $secret,
];
return new Response(json_encode($response), Response::HTTP_OK);