TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-12 00:07:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): show otp secret (#4030)

Browse Source
This commit is contained in:
Max Peintner
2022-07-22 15:44:16 +02:00
committed by GitHub
parent 9fc8a43642
commit 955e4d483e
4 changed files with 96 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html
View File

@@ -5,8 +5,15 @@
<div mat-dialog-content>
<div class="flex" *ngIf="data.clientId">
<span class="overflow-auto"><span class="desc">ClientId:</span> {{ data.clientId }}</span>
<button color="primary" [disabled]="copied === data.clientId" matTooltip="copy to clipboard" cnslCopyToClipboard
[valueToCopy]="data.clientId" (copiedValue)="this.copied = $event" mat-icon-button>
<button
color="primary"
[disabled]="copied === data.clientId"
matTooltip="copy to clipboard"
cnslCopyToClipboard
[valueToCopy]="data.clientId"
(copiedValue)="this.copied = $event"
mat-icon-button
>
<i *ngIf="copied !== data.clientId" class="las la-clipboard"></i>
<i *ngIf="copied === data.clientId" class="las la-clipboard-check"></i>
</button>
@@ -14,8 +21,15 @@
<div *ngIf="data.clientSecret; else showNoSecretInfo" class="flex">
<span class="overflow-auto"><span class="desc cnsl-secondary-text">ClientSecret:</span> {{ data.clientSecret }}</span>
<button color="primary" [disabled]="copied === data.clientSecret" matTooltip="copy to clipboard" cnslCopyToClipboard
[valueToCopy]="data.clientSecret" (copiedValue)="this.copied = $event" mat-icon-button>
<button
color="primary"
[disabled]="copied === data.clientSecret"
matTooltip="copy to clipboard"
cnslCopyToClipboard
[valueToCopy]="data.clientSecret"
(copiedValue)="this.copied = $event"
mat-icon-button
>
<i *ngIf="copied !== data.clientSecret" class="las la-clipboard"></i>
<i *ngIf="copied === data.clientSecret" class="las la-clipboard-check"></i>
</button>
@@ -26,8 +40,14 @@
</ng-template>
</div>
<div mat-dialog-actions class="action">
<button cdkFocusInitial color="primary" mat-raised-button class="ok-button" (click)="closeDialog()"
[attr.data-e2e]="'close-dialog'">
<button
cdkFocusInitial
color="primary"
mat-raised-button
class="ok-button"
(click)="closeDialog()"
[attr.data-e2e]="'close-dialog'"
>
{{ 'ACTIONS.CLOSE' | translate }}
</button>
</div>

26
console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.html
View File

@@ -30,6 +30,22 @@
<div class="qrcode-wrapper">
<qr-code *ngIf="otpurl" class="qrcode" [value]="otpurl" [size]="150" [errorCorrectionLevel]="'M'"></qr-code>
<div class="otp-flex" *ngIf="otpsecret">
<span class="overflow-auto">{{ otpsecret }}</span>
<button
color="primary"
[disabled]="copied === otpsecret"
matTooltip="copy to clipboard"
cnslCopyToClipboard
[valueToCopy]="otpsecret"
(copiedValue)="this.copied = $event"
mat-icon-button
>
<i *ngIf="copied !== otpsecret" class="las la-clipboard"></i>
<i *ngIf="copied === otpsecret" class="las la-clipboard-check"></i>
</button>
</div>
</div>
<cnsl-form-field class="formfield" label="Access Code" required="true">
@@ -56,8 +72,14 @@
{{ 'ACTIONS.CLOSE' | translate }}
</button>
<button *ngIf="selectedType !== undefined" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
(click)="submitAuth()">
<button
*ngIf="selectedType !== undefined"
cdkFocusInitial
color="primary"
mat-raised-button
class="ok-button"
(click)="submitAuth()"
>
{{ 'ACTIONS.CREATE' | translate }}
</button>
</div>

23
console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.scss
View File

@@ -33,6 +33,29 @@
display: flex;
flex-direction: column;
align-items: center;
.qrcode-wrapper {
display: flex;
flex-direction: column;
align-items: center;
.otp-flex {
display: flex;
align-items: center;
border: 1px solid #ffffff20;
border-radius: 0.5rem;
padding-left: 0.5rem;
justify-content: space-between;
.overflow-auto {
overflow: auto;
.desc {
font-size: 14px;
}
}
}
}
}
.u2f {

5
console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.ts
View File

@@ -20,6 +20,8 @@ export enum AuthFactorType {
})
export class AuthFactorDialogComponent {
public otpurl: string = '';
public otpsecret: string = '';
public otpcode: string = '';
public u2fname: string = '';
@@ -29,6 +31,8 @@ export class AuthFactorDialogComponent {
AuthFactorType: any = AuthFactorType;
selectedType!: AuthFactorType;
public copied: string = '';
constructor(
private authService: GrpcAuthService,
private toast: ToastService,
@@ -48,6 +52,7 @@ export class AuthFactorDialogComponent {
this.authService.addMyMultiFactorOTP().then(
(otpresp) => {
this.otpurl = otpresp.url;
this.otpsecret = otpresp.secret;
},
(error) => {
this.toast.showError(error);