verben-authentication-ui 1.0.1 → 1.0.3

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

@@ -0,0 +1,208 @@
+<div class="space-y-8">
+  <verben-data-view
+    #vdv
+    [viewState]="{
+        isSearch: true,
+        isColumn: true,
+        isFilter: true,
+        isSort: true,
+        isExport: true,
+        isSelect: true,
+        isToggle:true
+      }"
+    [buttonClass]="'my-custom-button-class'"
+    [iconClass]="'my-icon-class'"
+    [activeIconClass]="'my-active-icon-class'"
+    [selectedSortCount]="selectedSortCount"
+    [selectedColumnCount]="selectedColumnCount"
+    [selectedFilterTableCount]="selectedFilterTableCount"
+    [showColumnChild]="showColumn"
+    [showSortChild]="showSort"
+    [showFilterChild]="showFilter"
+    [isTableView]="false"
+    [selectedFilterTableCount]="0"
+    [cardIcon]="'list-view'"
+    [tableIcon]="'table-view'"
+    (viewChange)="onViewChange($event)"
+    (stateChange)="onStateChange($event)"
+  >
+    <div table-content>
+      <lib-data-table
+        [data]="data"
+        [columns]="filteredColumns"
+        [styleConfig]="styles"
+        (selectionChange)="onSelectionChange($event)"
+      >
+        <ng-container libColumn="createdAt">
+          <ng-template #cell let-value>
+            {{ value | date }}
+          </ng-template>
+        </ng-container>
+        <ng-container libColumn="logo">
+          <ng-template #cell let-value>
+            <img class="logo-width" [src]="value"/>
+          </ng-template>
+        </ng-container>
+        <ng-container libColumn="actions">
+          <ng-template #cell let-value let-deleteRow let-rowIndex>
+            <div class="flex space-x-8" style="display: flex; gap: 24px">
+              <verben-svg
+                (click)="openDetailView(value)"
+                icon="edit"
+                [width]="15"
+                [height]="15"
+                stroke="#3479E9"
+                fill="white"
+                class="cursor-pointer"
+              ></verben-svg>
+              <verben-svg
+                icon="delete"
+                [width]="15"
+                [height]="15"
+                stroke="#E20000"
+                (click)="deleteRow()"
+                class="cursor-pointer"
+              ></verben-svg>
+            </div>
+          </ng-template>
+          <ng-template #header>
+            <strong>Actions</strong>
+          </ng-template>
+        </ng-container>
+      </lib-data-table>
+    </div>
+    <div card-content>
+      <verben-card-data-view
+        borderRadius="12px"
+        (loadMoreClick)="loadMore()"
+        #vdcv
+        dataId="Link"
+        border="5px"
+        [cardDataList]="cardData"
+        rbgColor="#f5f6f9"
+      >
+        <verben-left-card-data-view class="">
+          <verben-left-card-data
+            #vlcd
+            [parent]="vdcv"
+            dataId="Link"
+            class="bg-secondary-100 rounded-xl border-primary border-[1px]"
+            [cardDataList]="cardData"
+          >
+            <ng-template #card let-item>
+              <div (click)="currentData = vdcv.onItemClick(item)" class="flex">
+                <verben-svg
+                  [width]="15"
+                  [height]="15"
+                  (click)="vlcd.showChildren(item)"
+                  [ngClass]="vlcd.showToggle(item) ? 'visible' : 'invisible'"
+                  class="items-center flex pr-1 cursor-pointer"
+                  [icon]="item.isChildrenExpanded ? 'minus' : 'plus'"
+                />
+                <div
+                  (click)="currentData = vdcv.onItemClick(item)"
+                  class="flex cursor-pointer w-full bg-secondary rounded-xl"
+                >
+                  <div
+                    class="w-3 rounded-xl rounded-tr-none rounded-br-none"
+                    [ngClass]="
+                      item.selected ? 'bg-primary' : 'bg-secondary-200'
+                    "
+                  ></div>
+                  <div class="flex flex-col py-2 px-4 w-full">
+                    <div class="flex">
+                      <span class="font-bold text-sm">{{ item.data.Name }}</span>
+                    </div>
+                    @for (ciItem of item.body; track ciItem.value) {
+                    <div class="flex items-center justify-between gap-2">
+                      <div>
+                        <span class="text-muted font-light text-xs"
+                          >{{ ciItem.title }}:</span
+                        >
+                        <span class="text-black text-xs font-semibold">{{ item.data.Description }}</span>
+                      </div>
+                      <img class="logo-width" [alt]="ciItem.title" [src]="item.data.Logo"/>
+                    </div>
+                    }
+                  </div>
+                </div>
+              </div>
+            </ng-template>
+          </verben-left-card-data>
+        </verben-left-card-data-view>
+
+        <verben-right-card-data-view>
+          <ng-template #parent>
+            <lib-sso-form
+              [currentData]="currentData"
+              (switchView)="vdv.toggleView()"
+            ></lib-sso-form>
+          </ng-template>
+        </verben-right-card-data-view>
+
+        <verben-card-data-view-footer class="float-right">
+          <div class="flex gap-2 mt-1">
+            <span class="paginator-text"
+              >{{ cardData.length }} records loaded</span
+            >
+            <button (click)="loadMore()" class="load-more">Load more</button>
+          </div>
+        </verben-card-data-view-footer>
+      </verben-card-data-view>
+    </div>
+    <div column-content>
+      <verben-visible-column
+        (columnsUpdated)="onColumnsUpdated($event)"
+        [border]="'1px solid rgba(212, 160, 7, 1)'"
+        borderRadius="10px"
+        boxShadow="2px 2px 2px 0px silver"
+        bgColor="white"
+        width="400px"
+        textColor="black"
+        pd="1rem"
+        primaryColor="#FFE681"
+        secondaryColor="#3479E9"
+        [columns]="visibleColumns"
+        [displayedColumns]="5"
+      ></verben-visible-column>
+    </div>
+    <div filter-content>
+      <verben-table-filter
+      (filtersApplied)="onFilterApplied($event)"
+        [border]="'1px solid rgba(212, 160, 7, 1)'"
+        borderRadius="10px"
+        boxShadow="2px 2px 2px 0px silver"
+        bgColor="white"
+        width="420px"
+        textColor="black"
+        pd="1rem"
+        primaryColor="#FFE681"
+        secondaryColor="#3479E9"
+        tertiaryColor="#404040"
+        [filterOptions]="filterArray"
+        [maxFilterLength]="3"
+      ></verben-table-filter>
+    </div>
+    <div sort-content>
+      <verben-sort-table
+        (selectedOptions)="onSortUpdated($event)"
+        [border]="'1px solid rgba(212, 160, 7, 1)'"
+        borderRadius="10px"
+        boxShadow="2px 2px 2px 0px silver"
+        bgColor="white"
+        width="400px"
+        textColor="black"
+        pd="1rem"
+        primaryColor="#FFE681"
+        secondaryColor="#3479E9"
+        tertiaryColor="#404040"
+        [enableDragAndDrop]="true"
+        [sortOptions]="sortOptions"
+      ></verben-sort-table>
+    </div>
+    <div export-content>
+      <lib-data-export [data]="data" (exportDataEvent)="handleExport($event)">
+      </lib-data-export>
+    </div>
+  </verben-data-view>
+</div>

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

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

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();
+  });
+});