verben-authentication-ui 0.3.2 → 0.3.3

package/src/lib/components/sso/sso.component.ts

@@ -0,0 +1,261 @@
+import { Component, ViewChild } from '@angular/core';
+import { columns } from './sso.columns';
+import { mockData } from './helper';
+import { baseStyle } from './base-table-style';
+import {
+  CardData,
+  CardDataViewComponent,
+  ColumnDefinition,
+  DataFilterType,
+  DataViewComponent,
+  IDataFilter,
+} from 'verben-ng-ui';
+import { SingleSignOn } from '../../models/single-sign-on';
+
+
+
+@Component({
+  selector: 'lib-sso',
+  templateUrl: './sso.component.html',
+  styleUrl: './sso.component.css',
+})
+export class SsoComponent {
+  @ViewChild('vdcv') cardDataView!: CardDataViewComponent;
+  @ViewChild('vdv') dataView!: DataViewComponent;
+
+  columns = columns;
+  data = mockData;
+  filteredColumns: ColumnDefinition<SingleSignOn>[] =columns
+  styles = baseStyle;
+  currentData: CardData | null = null;
+  isGridView = true;
+  selected: CardData | null = null;
+
+  cardData: CardData[] = mockData.map(({ Name, Description, Link,Logo }) => ({
+    selected: false,
+    title: Name,
+    data: { Name, Description,Link,Logo } as Partial<SingleSignOn>,
+    body: [
+      { title: 'Description', value:Description??''  },
+    ],
+    children: [],
+  }));
+
+  openDetailView(name: string) {
+    const cardItem = this.getCardDataByMailAddress(name);
+    if (cardItem && this.cardDataView) {
+      this.dataView.toggleView();
+      this.cardData.forEach((item) => {
+        item.selected = false;
+        if (item.children) {
+          item.children.forEach((child) => (child.selected = false));
+        }
+      });
+
+      cardItem.selected = true;
+      this.currentData = this.cardDataView.onItemClick(cardItem);
+    }
+  }
+
+  getCardDataByMailAddress(name: string): CardData | undefined {
+    return this.cardData.find(({ data }) => data.Name === name);
+  }
+
+  onViewChange(isGridView: boolean): void {
+  isGridView=isGridView
+    
+    if (this.currentData) {
+      this.cardDataView?.clearData();
+      this.currentData = null;
+    }
+
+    if (this.selected) {
+      this.cardDataView.onItemClick(this.selected);
+    }
+  }
+
+  openFormView(index: number) {
+    const item = this.cardData[index];
+    console.log('ITEM = ', item);
+  }
+
+  handleExport(exportedData: Partial<any>[]) {
+    console.log('Exported data:', exportedData);
+    this.downloadCSV(exportedData);
+  }
+
+  /**
+   *
+   * @param data Simple csv export for testing
+   */
+  private downloadCSV(data: Partial<any>[]) {
+    const headers = Object.keys(data[0]);
+    const csvContent = [
+      headers.join(','),
+      ...data.map((row) => headers.map((header) => row[header]).join(',')),
+    ].join('\n');
+
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    if (link.download !== undefined) {
+      const url = URL.createObjectURL(blob);
+      link.setAttribute('href', url);
+      link.setAttribute('download', 'export.csv');
+      link.style.visibility = 'hidden';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
+
+  onSelectionChange(selectedRows:SingleSignOn[]) {
+    console.log('Selection changed:', selectedRows);
+    // Handle the selection change
+  }
+
+  /**
+   * Copied over from card view doc until I understand usage
+   */
+  selectedColumnCount: number = 0;
+  selectedFilterTableCount: number = 0;
+  isOPen: boolean = true;
+  selectedSortCount: number = 0;
+  showColumn: boolean = false;
+  showSort: boolean = false;
+  showExport: boolean = false;
+  selectedAll: boolean = false;
+  showFilter: boolean = false;
+  visibleColumns: IDataFilter[] = columns.map((col) => ({
+    checked: false,
+    name: typeof col.header === 'string' ? col.header : col.id,
+    type: DataFilterType.Bool,
+  }));
+  filterArray: IDataFilter[] = [
+    {
+      name: 'Name',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'Description',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'Logo',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'Link',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'CreatedAt',
+      type: DataFilterType.Date,
+      checked: false,
+    },
+  ];
+  sortOptions: IDataFilter[] = [
+    {
+      name: 'Name',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'Description',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'Link',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'Logo',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'CreatedAt',
+      type: DataFilterType.Date,
+      checked: false,
+    },
+  ];
+  clearData() {
+    this.currentData = {} as CardData;
+  }
+  loadMore() {
+    this.cardData = this.cardData.concat(this.cardData);
+  }
+  onColumnChange(event: boolean) {
+    this.showColumn = event;
+  }
+  onSortChange(event: boolean) {
+    this.showSort = false
+    console.log(event);
+  }
+
+  
+  onColumnsUpdated(updatedColumns: IDataFilter[]) {
+    this.showColumn = false;
+    this.selectedColumnCount = updatedColumns.length;
+  
+    if (updatedColumns) {
+      // Filter columns to include only visible ones
+      this.filteredColumns = this.columns.filter((col) =>
+        this.visibleColumns.find(
+          (filter) => filter.name === col.header && filter.checked
+        )
+      );
+  
+      // Reorder columns based on the order in visibleColumns
+      const visibleColumnOrder = this.visibleColumns
+        .filter((filter) => filter.checked)
+        .map((filter) => filter.name);
+  
+      this.columns.sort((a, b) => {
+        const indexA = visibleColumnOrder.indexOf(a.header as string);
+        const indexB = visibleColumnOrder.indexOf(b.header as string);
+        return indexA - indexB;
+      });
+    }
+  }
+  
+  onFilterApplied(appliedFilter: IDataFilter[]) {
+     this.showFilter=false
+    if (Array.isArray(appliedFilter)) {
+      this.selectedFilterTableCount = appliedFilter.length;
+    } else {
+      console.log('appliedFilter is not an array');
+    }
+  }
+  
+  onSortUpdated(updatedSorts: IDataFilter[]) {
+    this.onSortChange(false);
+    this.selectedSortCount = updatedSorts.length;
+    console.log(updatedSorts);
+    
+  }
+
+  onStateChange(event: { key: string; value: boolean }): void {
+    switch (event.key) {
+      case 'column':
+        this.showColumn=event.value
+        break;
+        case 'sort':
+          this.showSort=event.value
+          break;
+          case 'export':
+            this.showExport=event.value
+            break;
+            case 'filter':
+              this.showFilter=event.value
+              break;
+      default:
+        break;
+    }
+  }
+}

package/src/lib/components/sso/sso.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import {
+  DataViewModule,
+  TableFilterModule,
+  SortTableModule,
+  DataExportModule,
+  VisibleColumnModule,
+  VerbenaButtonModule,
+  CardDataViewModule,
+  SvgModule,
+  VerbenaInputModule,
+  DataTableModule,
+  VerbenaTextareaModule,
+} from 'verben-ng-ui';
+import { SsoComponent } from './sso.component';
+import { SsoFormComponent } from './sso-form/sso-form.component';
+@NgModule({
+  declarations: [SsoComponent,SsoFormComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    DataViewModule,
+    TableFilterModule,
+    SortTableModule,
+    DataExportModule,
+    VisibleColumnModule,
+    VerbenaButtonModule,
+    CardDataViewModule,
+    VerbenaInputModule,
+    SvgModule,
+    VerbenaTextareaModule,
+    DataTableModule,
+  ],
+  exports: [SsoComponent],
+})
+export class SsoModule {}

package/src/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.css

@@ -0,0 +1,8 @@
+.otpWrapper{
+    margin-bottom: 20px;
+    margin-top: 15px;
+}
+.resendWrapper{ 
+    margin-top: 10px;
+    margin-bottom: 0px !important;
+}

package/src/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.html

@@ -0,0 +1,30 @@
+<section
+[ngStyle]="styles"
+class="{{ customClass }}"
+>
+  <h3 class="{{headlingClass}}">{{headlingText}}</h3>
+  <div class="otpWrapper"> 
+    <p class="{{paragraphClass}}">Enter the {{length}} digit code sent to you</p>
+    <verben-otp-input 
+    [length]="length" 
+    (otpChange)="onOtpChange($event)"
+    [otpClass]="otpClass"
+    ></verben-otp-input>
+  </div>
+  <lib-button  
+  [buttonClass]="btnClass"
+  [color]="btnColor"
+  [border]="btnBorder"
+  [borderRadius]="btnBorderRadius"
+  [bgColor]="btnBgColor"
+  [pd]="btnPd"
+  [text]="btnText"  
+  (buttonClick)="submitData()"
+  [disabled]="!otpForm.valid"
+  ></lib-button>
+  <p class="resendWrapper">
+    Didn’t get a code?
+    <a class="{{resendClass}}" (click)="resendOtp()">Resend</a>
+  </p>
+   
+</section>

package/src/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TwoFactorAuthOtpComponent } from './two-factor-auth-otp.component';
+
+describe('TwoFactorAuthOtpComponent', () => {
+  let component: TwoFactorAuthOtpComponent;
+  let fixture: ComponentFixture<TwoFactorAuthOtpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TwoFactorAuthOtpComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TwoFactorAuthOtpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.ts

@@ -0,0 +1,183 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { HttpWebRequestService } from '../../services/http-web-request.service';
+import { UtilService } from '../../services/util.service';
+import { ErrorResponse } from '../../models/ErrorResponse';
+import { ResponseKeyValue } from '../../models/ResponseKeyValue';
+import { OtpData } from '../../models/otpValue';
+import { User } from '../../models/user';
+import { ObjectState } from '../../models/object-state';
+import { MainUser } from '../../models/mainUser';
+import { ResendOtpData } from '../../models/resend-otp-data';
+
+@Component({
+  selector: 'verben-auth-otp',
+  templateUrl: './two-factor-auth-otp.component.html',
+  styleUrl: './two-factor-auth-otp.component.css'
+})
+
+export class TwoFactorAuthOtpComponent {
+  @Input() customClass: string = ''
+  @Input() headlingClass: string = ''
+  @Input() headlingText: string = 'Two Factor Authentication'
+  @Input() paragraphClass: string = ''
+  @Input() resendClass: string = ''
+  @Input() width: string = '';
+  @Input() maxWidth: string = '';
+  @Input() margin: string = '';
+  @Input() pd: string = '';
+  @Input() bgColor: string = '#fff';
+  @Input() boxShadow: string = '4px 4px 4px rgba(0, 0, 0, 0.25)';
+  @Input() border: string = '1px solid #66666680';
+  @Input() borderRadius: string = '24px';
+  @Input() textColor: string = '#333';
+  @Input() height: string = 'auto';
+  @Input() length: number = 6;
+  @Input() otpClass: string = '';
+  @Input() resendOtpData: ResendOtpData = {
+    MailAddress: "verbena@gmail.com",
+    Password: "Default",
+    LoginType: "InApp",
+    APIKey: "PDLTC6",
+    Secrete: "$White360$",
+    RedirectUri: "/auth/otp"
+  };
+  
+  @Input() User:MainUser = {
+    Code: '024',
+    TenantId: '53b1c579bdf3de74f76bdac9',
+    Id: '53b1c579bdf3de74f76bdac9',
+    ServiceName: 'chinedu',
+    MailAddress: 'nwaekwuchinedu@gmail.com',
+    PhoneNumber: '070',
+    FirstName: 'nwaekwu',
+    LastName: 'chinedu',
+    OtherName: 'chinedu',
+    Role: [],
+    Tags: [
+      {
+      Name: "tester",
+      IsOptional: true
+    }],
+    Password: 'Default',
+    Status: 'Active',
+    CreatedAt: new Date(),
+    UpdatedAt: new Date(),
+    DataState: ObjectState.New
+  }
+
+  @Input() OtpData:OtpData = {
+    User: this.User,
+    Token: '',
+    ValidateUrl: '',
+    Secret: '',
+    OTP: '',
+    Info: ''
+  }
+
+  @Input() btnClass: string = ''
+  @Input() btnBgColor: string = '#FFE681'
+  @Input() btnColor: string = ''
+  @Input() btnBorder: string = ''
+  @Input() btnBorderRadius: string = '24px'
+  @Input() btnPd: string = '';
+  @Input() btnText: string = 'Submit';
+
+
+  otpValue: string = '';
+  otpForm!: FormGroup;
+
+  @Output() buttonClick = new EventEmitter<string>();
+  @Output() otpChange = new EventEmitter<string>();
+  @Output() onSubmitEnd: EventEmitter<ResponseKeyValue | ErrorResponse> = new EventEmitter();
+  @Output() resend: EventEmitter<ResponseKeyValue | ErrorResponse> = new EventEmitter();
+
+  constructor(
+    private fb: FormBuilder,
+    private server: HttpWebRequestService,
+    private utilService: UtilService
+  ) {}
+
+  ngOnInit() {
+    this.otpForm = this.fb.group({
+      otpValue: ['', [Validators.required, Validators.minLength(6)]]
+    });
+  }
+
+  onOtpChange(value: string) {
+    this.otpValue = value;
+    this.otpForm.get('otpValue')?.setValue(value);
+    this.otpChange.emit(this.otpValue);
+  }
+
+  async submitData() {
+    const data:OtpData = {
+      User: {
+        ...this.User
+      },
+      Token: this.OtpData.Token,
+      ValidateUrl: this.OtpData.ValidateUrl,
+      Secret: this.OtpData.Secret,
+      OTP: this.OtpData.OTP,
+      Info: this.OtpData.Info,
+    };
+    
+
+    if (this.otpForm.valid) {
+      // this.buttonClick.emit(this.otpForm.get('otpValue')?.value);
+      this.utilService.sendBI(true);
+      const res = await this.server.post(
+        `Authentication/Validate`,data
+      );
+      this.utilService.sendBI(false);
+      if (res instanceof ErrorResponse) {
+        this.onSubmitEnd.emit(res);
+      } else {
+        var result = res as ResponseKeyValue;
+        this.onSubmitEnd.emit(result);
+      }
+    }
+  }
+
+  
+  async resendOtp() {
+    const data:ResendOtpData = {
+      MailAddress:this.resendOtpData?.MailAddress,
+      Password:this.resendOtpData?.Password,
+      LoginType:this.resendOtpData?.LoginType,
+      APIKey:this.resendOtpData?.APIKey,
+      Secrete:this.resendOtpData?.Secrete,
+      RedirectUri:this.resendOtpData?.RedirectUri
+    };
+
+    this.utilService.sendBI(true);
+      const res = await this.server.post(
+        `Authentication/ResendOTP`,data
+      );
+      this.utilService.sendBI(false);
+      if (res instanceof ErrorResponse) {
+        this.resend.emit(res);
+      } else {
+        var result = res as ResponseKeyValue;
+        this.resend.emit(result);
+      }
+  }
+
+
+  get styles() {
+    return {
+      'background-color': this.bgColor,
+      'box-shadow': this.boxShadow,
+      'border': this.border,
+      'border-radius': this.borderRadius,
+      'color': this.textColor,
+      'width': this.width,
+      'max-width':this.maxWidth,
+      'margin':this.margin,
+      'height': this.height,
+      'padding':this.pd
+    };
+  }
+
+}
+

package/src/lib/components/two-factor-auth-otp/two-factor-auth-otp.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TwoFactorAuthOtpComponent } from './two-factor-auth-otp.component';
+import { ButtonModule } from '../button/button.module';
+import { OtpInputModule } from '../otp-input/otp-input.module';
+import { RouterLink } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [TwoFactorAuthOtpComponent],
+  imports: [CommonModule,ButtonModule,OtpInputModule,RouterLink,ReactiveFormsModule],
+  exports: [TwoFactorAuthOtpComponent]
+})
+export class TwoFactorAuthOtpModule {}

package/src/lib/components/two-factor-auth-setup/two-factor-auth-setup.component.css

@@ -0,0 +1,17 @@
+.setUpBtnWrapper{ 
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 40px;
+}
+.iconWrapper{ 
+    display: flex;
+    cursor: pointer;
+    align-items:center;
+    justify-content:end;
+    gap: 12px;
+    margin-bottom:50px;
+}
+.custom-button{
+    font-weight: 500;
+}

package/src/lib/components/two-factor-auth-setup/two-factor-auth-setup.component.html

@@ -0,0 +1,45 @@
+<section
+[ngStyle]="styles"
+class="{{ customClass }}"
+>
+  <h3 class="{{headlingClass}}">{{headlingText}}</h3>
+  <div class="setUpBtnWrapper">
+    <verbena-button
+    svg="2fa-mail"
+    [svgHeight]="16"
+    [svgWidth]="20"
+    text="Continue with Mail"
+    bgColor="white"
+    textColor="#333333"
+    border="1px solid #333"
+    borderRadius="40px"
+    pd="10px 20px"
+    width="100%"
+    svgPosition="left"
+    buttonClass="font-normal text-[24px] leading-[29.05px] text-[#333] mb-2"
+    (click)="continueWithMail()"
+    ></verbena-button>
+    <verbena-button
+    svg="2fa-sms"
+    [svgHeight]="24"
+    [svgWidth]="24"
+    text="Continue with SMS"
+    bgColor="white"
+    textColor="#333333"
+    border="1px solid #333"
+    borderRadius="40px"
+    pd="10px 20px"
+    width="100%"
+    svgPosition="left"
+    (click)="continueWithSMS()"
+    ></verbena-button>
+    <!-- <div class="iconWrapper" (click)="handleSkip()"> 
+        <p class="{{paragraphClass}}">Skip for now</p>
+        <verben-svg 
+        icon="skip-forward"
+        [height]="24"
+        [width]="24"
+        />
+    </div> -->
+</div>
+</section>

package/src/lib/components/two-factor-auth-setup/two-factor-auth-setup.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TwoFactorAuthSetupComponent } from './two-factor-auth-setup.component';
+
+describe('TwoFactorAuthSetupComponent', () => {
+  let component: TwoFactorAuthSetupComponent;
+  let fixture: ComponentFixture<TwoFactorAuthSetupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TwoFactorAuthSetupComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TwoFactorAuthSetupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});