feat(console): add otp sms and otp email as factor (#6343)

* cli, core * material cdk * schematics * chore(deps-dev): bump eslint from 8.40.0 to 8.44.0 in /console (#6127) Bumps [eslint](https://github.com/eslint/eslint) from 8.40.0 to 8.44.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v8.40.0...v8.44.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * npm * feat: add otp sms button * lock * rm package-lock * prompt to setup sms otp on verify * cli, core * material, cdk * schematics * otp email * show type * show type on mgmt page * disable selection on add * rename totp * fix totp i18n * directly use data, fix styles * sms req * fix type check * fix delete * rm comment --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Livio Spring <[email protected]>
2026-10-29 18:42:15 +00:00 · 2023-08-16 04:37:16 +00:00
parent 26b28ed2af
commit a262595fc2
31 changed files with 3641 additions and 2547 deletions
@@ -0,0 +1,34 @@
+<span class="title" mat-dialog-title>{{ data.titleKey | translate : data.titleParam }}</span>
+<div mat-dialog-content>
+  <div class="icon-wrapper" *ngIf="data.icon">
+    <i class="icon {{ data.icon }}"></i>
+  </div>
+  <p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate : data.descriptionParam }}</p>
+
+  <cnsl-info-section *ngIf="data.infoSectionKey" [type]="InfoSectionType.INFO">{{
+    data.warnSectionKey | translate
+  }}</cnsl-info-section>
+
+  <p *ngIf="data.hintKey" class="desc cnsl-secondary-text">{{ data.hintKey | translate : { value: data.confirmation } }}</p>
+
+  <cnsl-form-field *ngIf="data.confirmation && data.confirmationKey" class="formfield">
+    <cnsl-label>{{ data.confirmationKey | translate : { value: data.confirmation } }}</cnsl-label>
+    <input cnslInput [(ngModel)]="confirm" data-e2e="confirm-dialog-input" />
+  </cnsl-form-field>
+</div>
+<div mat-dialog-actions class="action">
+  <button *ngIf="data.cancelKey" mat-stroked-button (click)="closeDialog()">
+    {{ data.cancelKey | translate }}
+  </button>
+  <span class="fill-space"></span>
+  <button
+    color="primary"
+    [disabled]="data.confirmation && confirm !== data.confirmation"
+    mat-raised-button
+    class="ok-button"
+    (click)="closeDialogWithSuccess()"
+    data-e2e="confirm-dialog-button"
+  >
+    {{ data.confirmKey | translate }}
+  </button>
+</div>
@@ -0,0 +1,36 @@
+.title {
+  font-size: 1.2rem;
+  margin-top: 0;
+}
+
+.icon-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+  margin: 1rem;
+  align-items: center;
+
+  .icon {
+    font-size: 3rem;
+  }
+}
+
+.desc {
+  font-size: 0.9rem;
+}
+
+.action {
+  display: flex;
+
+  button {
+    border-radius: 0.5rem;
+  }
+
+  .ok-button {
+    margin-left: 0.5rem;
+  }
+
+  .fill-space {
+    flex: 1;
+  }
+}
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { InfoDialogComponent } from './info-dialog.component';
+
+describe('InfoDialogComponent', () => {
+  let component: InfoDialogComponent;
+  let fixture: ComponentFixture<InfoDialogComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [InfoDialogComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InfoDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,26 @@
+import { Component, Inject } from '@angular/core';
+import {
+  MatLegacyDialogRef as MatDialogRef,
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+} from '@angular/material/legacy-dialog';
+
+import { InfoSectionType } from '../info-section/info-section.component';
+
+@Component({
+  selector: 'cnsl-info-dialog',
+  templateUrl: './info-dialog.component.html',
+  styleUrls: ['./info-dialog.component.scss'],
+})
+export class InfoDialogComponent {
+  public confirm: string = '';
+  InfoSectionType: any = InfoSectionType;
+  constructor(public dialogRef: MatDialogRef<InfoDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
+
+  public closeDialog(): void {
+    this.dialogRef.close(false);
+  }
+
+  public closeDialogWithSuccess(): void {
+    this.dialogRef.close(true);
+  }
+}
@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { InfoSectionModule } from '../info-section/info-section.module';
+import { InputModule } from '../input/input.module';
+import { InfoDialogComponent } from './info-dialog.component';
+
+@NgModule({
+  declarations: [InfoDialogComponent],
+  imports: [CommonModule, FormsModule, TranslateModule, InfoSectionModule, MatButtonModule, InputModule],
+})
+export class InfoDialogModule {}
@@ -31,7 +31,6 @@

    .info-section-content {
      flex: 1;
-      padding: 0.25rem 0;
    }

    &.info {