verben-authentication-ui 0.3.3 → 0.3.5

package/src/lib/components/user-management/user-management.component.ts

@@ -1,380 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import { columns } from './user-management.columns';
-import { mockData } from './helper';
-import { baseStyle } from './base-table-style';
-import { UserAccessRequest } from '../../models/user-access-request';
-import {
-  CardData,
-  DataFilterType,
-  IDataFilter,
-  DropdownLoadEvent,
-  DropdownChangeEvent,
-  CardDataViewComponent,
-  DataViewComponent,
-} from 'verben-ng-ui';
-import { UserAccessRequestStatus } from '../../models/user-access-request-status';
-import { ObjectState } from '../../models/object-state';
-
-interface TestParentObject {
-  Id: string;
-  Name: string;
-}
-
-@Component({
-  selector: 'lib-user-management',
-  templateUrl: './user-management.component.html',
-  styleUrl: './user-management.component.css',
-})
-export class UserManagementComponent {
-  @ViewChild('vdcv') cardDataView!: CardDataViewComponent;
-  @ViewChild('vdv') dataView!: DataViewComponent;
-
-  columns = columns;
-  data = mockData;
-  styles = baseStyle;
-
-  selectedParent?: string;
-  basicOption?: string;
-  selectedOption: string[] = [];
-  selectedOptionTwo: string[] = [];
-  selectedOptionThree?: string;
-  missingObject: any;
-
-  private generateNewUserAccessRequest(): UserAccessRequest {
-    const newId = this.data.length + 1; // Incremental ID based on current data length
-
-    return {
-      FirstName: `First ${newId}`,
-      LastName: `Last ${newId}`,
-      OtherName: `Other ${newId}`,
-      Id: `${newId}`,
-      id: newId,
-      MailAddress: ` `,
-      PhoneNumber: ``,
-      RequestStatus: UserAccessRequestStatus.Pending,
-      Address: ` `,
-      Password: ' ',
-      ExpireOn: new Date(),
-      IsSeeded: false,
-      OTPExpireOn: new Date(),
-      Tenants: [`Tenant${newId}`],
-      Role: ['User'],
-      CreatedAt: new Date(),
-      UpdatedAt: new Date(),
-      DataState: ObjectState.New,
-      Tenant: `Tenant${newId}`
-    };
-  }
-
-  // Function to add a new user to mockData
-  addNewUserToMockData(): UserAccessRequest {
-    const newUser = this.generateNewUserAccessRequest();
-    this.data.push(newUser); // Adds the new user to the data array
-
-    // Optionally, update cardData with the new user entry for card display
-
-    const fullName = `${newUser.FirstName} ${newUser.LastName}`;
-    const newCardData: CardData = {
-      selected: false,
-      title: fullName,
-      data: {
-        Name: fullName,
-        MailAddress: newUser.MailAddress,
-        PhoneNumber: newUser.PhoneNumber,
-        RoleID: newUser.Role,
-        Status: newUser.Status,
-      } as Partial<UserAccessRequest>,
-      body: [
-        { title: 'Name', value: fullName },
-        { title: 'E-Mail Address', value: newUser.MailAddress },
-        { title: 'Phone Number', value: newUser.PhoneNumber ?? '' },
-      ],
-      children: [],
-    };
-
-    this.cardData.push(newCardData); // Update cardData array with the new user
-    return newUser;
-  }
-
-  // Grid view properties
-  isGridView: boolean = true;
-  currentData!: CardData;
-  selectedColumnCount: number = 0;
-  selectedFilterTableCount: number = 0;
-  isOPen: boolean = true;
-  selectedSortCount: number = 0;
-  showColumn: boolean = false;
-  showSort: boolean = false;
-  selectedAll: 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: 'MailAddress', type: DataFilterType.String, checked: false },
-    { name: 'PhoneNumber', type: DataFilterType.String, checked: false },
-    { name: 'CreatedAt', type: DataFilterType.Date, checked: false },
-  ];
-
-  sortOptions: IDataFilter[] = [
-    { name: 'Name', type: DataFilterType.String, checked: false },
-    { name: 'MailAddress', type: DataFilterType.String, checked: false },
-    { name: 'PhoneNumber', type: DataFilterType.String, checked: false },
-    { name: 'CreatedAt', type: DataFilterType.Date, checked: false },
-  ];
-
-  testParents: TestParentObject[] = [
-    { Id: '1', Name: 'Manager' },
-    { Id: '2', Name: 'Administrator' },
-    { Id: '3', Name: 'Jelom' },
-  ];
-
-  cardData: CardData[] = mockData.map(
-    ({ FirstName, LastName, MailAddress, PhoneNumber, RoleID, Status }) => ({
-      selected: false,
-      title: `${FirstName} ${LastName}`,
-      data: {
-        FirstName,
-        LastName,
-        MailAddress,
-        PhoneNumber,
-        RoleID,
-        Status,
-      } as Partial<UserAccessRequest>,
-      body: [
-        { title: 'Name', value: `${FirstName} ${LastName}` },
-        { title: 'E-Mail Address', value: MailAddress },
-        { title: 'Phone Number', value: PhoneNumber ?? '' },
-      ],
-      children: [],
-    })
-  );
-
-  ngOnInit(): void {
-    this.selectedParent = '1';
-    this.selectedOption = ['Opt 1'];
-    this.selectedOptionTwo = ['1'];
-    this.selectedOptionThree = '1';
-  }
-
-  getParentLabel(context: any): string {
-    console.log({ MissingObj: this.missingObject });
-    return this.missingObject.Name;
-  }
-
-  async loadMoreParents(event: DropdownLoadEvent): Promise<TestParentObject[]> {
-    console.log({ ParentLoadEvent: JSON.parse(JSON.stringify(event)) });
-    return await new Promise((resolve) =>
-      setTimeout(
-        () =>
-          resolve([
-            { Id: '1', Name: 'Jimly' },
-            { Id: '2', Name: 'Jecil' },
-            { Id: '3', Name: 'Jelom' },
-            { Id: '4', Name: 'Jemima' },
-            { Id: '5', Name: 'Akintunde' },
-          ]),
-        3000
-      )
-    );
-  }
-
-  onDropdownChange(event: DropdownChangeEvent): void {
-    // console.log({
-    //   'Test Parent Value': this.selectedParent,
-    //   ...
-    // });
-  }
-
-  onSelectionChange(selectedRows: UserAccessRequest[]) {
-    console.log('Selection changed:', selectedRows);
-    // Handle the selection change
-  }
-
-  handleExport(exportedData: Partial<any>[]) {
-    console.log('Exported data:', exportedData);
-    this.downloadCSV(exportedData);
-  }
-
-  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);
-    }
-  }
-
-  // applyFilters() {
-  //   this.filteredData = this.data.filter((item) => {
-  //     return this.filterArray.every((filter) => {
-  //       if (filter.checked) {
-  //         switch (filter.type) {
-  //           case DataFilterType.String:
-  //             return item[filter.name].toLowerCase().includes(filter.name.toLowerCase());
-  //           case DataFilterType.Date:
-  //             return new Date(item[filter.name]) >= new Date(filter.name);
-  //           default:
-  //             return true;
-  //         }
-  //       }
-  //       return true;
-  //     });
-  //   });
-  // }
-  getCardDataByMailAddress(mailAddress: string): CardData | undefined {
-    console.log('cardData array:', this.cardData);
-    console.log(mailAddress);
-
-    return this.cardData.find(({ data }) => data?.MailAddress === mailAddress);
-  }
-
-  openDetailView(mailAddress: string) {
-    const cardItem = this.getCardDataByMailAddress(mailAddress);
-    console.log(cardItem);
-
-    if (cardItem && this.cardDataView) {
-      this.dataView.toggleView();
-      // First reset all selections
-      this.cardData.forEach((item) => {
-        item.selected = false;
-        if (item.children) {
-          item.children.forEach((child) => (child.selected = false));
-        }
-      });
-
-      // Set the selected item
-      cardItem.selected = true;
-      this.currentData = this.cardDataView.onItemClick(cardItem);
-
-      // Force change detection if needed
-      // this.changeDetectorRef.detectChanges();
-    }
-  }
-  newItem() {
-    const newData = this.addNewUserToMockData();
-    const newCardData: CardData = {
-      selected: true,
-      title: `${newData.FirstName} ${newData.LastName}`,
-      data: {
-        ...newData,
-      } as Partial<UserAccessRequest>,
-      body: [
-        { title: 'Name', value: `${newData.FirstName} ${newData.LastName}` },
-        { title: 'E-Mail Address', value: newData.MailAddress },
-        { title: 'Phone Number', value: newData.PhoneNumber ?? '' },
-      ],
-      children: [],
-    };
-
-    if (this.dataView.isTableView) {
-      this.dataView.toggleView();
-    }
-    // First reset all selections
-    this.cardData.forEach((item) => {
-      item.selected = false;
-      if (item.children) {
-        item.children.forEach((child) => (child.selected = false));
-      }
-    });
-    // this.cardData = [newCardData].concat(this.cardData);
-    // this.cardDataView.onItemClick(newCardData)
-
-    this.cardData = [newCardData, ...this.cardData];
-
-    this.currentData = this.cardDataView.onItemClick(newCardData);
-  }
-
-
-  // toggleChildView(action: string) {
-  //   if (action === 'create') {
-  //     const newCard: CardData = {
-  //       selected: false,
-  //       title: 'New Card', // Default title, change as needed
-  //       data: { Name: '', MailAddress: '', PhoneNumber: '' },
-  //       body: [
-  //         { title: 'Name', value: '' },
-  //         { title: 'E-Mail Address', value: '' },
-  //         { title: 'Phone Number', value: '' }
-  //       ],
-  //       children: []
-  //     };
-
-  //     this.cardData.push(newCard);
-  //   }
-  // }
-
-
-  clearData() {
-    this.currentData = {} as CardData;
-  }
-
-  loadMore() {
-    this.cardData = this.cardData.concat(this.cardData);
-  }
-
-  onColumnChange(event: boolean) {
-    this.showColumn = event;
-  }
-
-  onSortChange(event: boolean) {
-    this.showSort = event;
-    console.log(event);
-  }
-
-  onColumnsUpdated(updatedColumns: IDataFilter[]) {
-    this.onColumnChange(false);
-    this.selectedColumnCount = updatedColumns.length;
-  }
-
-  onSortUpdated(updatedSorts: IDataFilter[]) {
-    this.onSortChange(false);
-    this.selectedSortCount = updatedSorts.length;
-    console.log(updatedSorts);
-  }
-
-  onViewChange(isGridView: boolean): void {
-    console.log('View changed to:', isGridView ? 'Grid View' : 'List View');
-  }
-
-  onStateChange(event: { key: string; value: boolean }): void {
-    console.log(`State changed for ${event.key}:`, event.value);
-    if (event.key === 'create') {
-      console.log('peace is a boy');
-
-      this.newItem();
-
-      // const newUser = this.newItem()
-
-      // if ( newUser && this.cardDataView) {
-      //   this.dataView.toggleView();
-      //   // First reset all selections
-      //   this.cardData.forEach((item) => {
-      //     item.selected = false;
-      //     if (item.children) {
-      //       item.children.forEach((child) => (child.selected = false));
-      //     }
-      //   });
-
-      //   this.currentData = this.cardDataView.onItemClick(newUser);
-
-      //   // Force change detection if needed
-      //   // this.changeDetectorRef.detectChanges();
-      // }
-    }
-  }
-}

package/src/lib/components/user-management/user-management.service.ts

@@ -1,42 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { UserAccessRequest } from '../../models/user-access-request';
-
-export interface ServiceConfig {
-  resourceEndpoint: string;
-}
-
-export const SERVICE_CONFIG = new InjectionToken<ServiceConfig>(
-  'ServiceConfig'
-);
-
-@Injectable()
-export class UserRequestApprovalService {
-  // protected readonly baseUrl: string;
-  protected readonly resourceEndpoint: string;
-
-  constructor(
-    protected httpClient: HttpClient,
-    @Inject(SERVICE_CONFIG) config: ServiceConfig
-  ) {
-    // this.baseUrl = environment.serviceUrl;
-    this.resourceEndpoint = config.resourceEndpoint;
-  }
-
-  getUserRequests() {
-    return this.httpClient.get<UserAccessRequest[]>(`${this.resourceEndpoint}`);
-  }
-
-  getUserRequestById(id: number) {
-    return this.httpClient.get<UserAccessRequest>(
-      `${this.resourceEndpoint}/${id}`
-    );
-  }
-
-  processUserReuqests(ids: string[], approval: boolean = true) {
-    return this.httpClient.post<UserAccessRequest[]>(
-      `${this.resourceEndpoint}`,
-      ids
-    );
-  }
-}

package/src/lib/components/user-request/user-request.component.css

@@ -1,91 +0,0 @@
-/* Container Styles */
-.flex {
-  display: flex;
-}
-.items-center{
-  align-items: center;
-}
-.overflow-hidden {
-  overflow: hidden;
-}
-.justify-center{
-  justify-content: center;
-}
-.h-full {
-  height: 100%;
-}
-
-.text-center{
-  text-align: center;
-}
-.underline {
-  text-decoration: underline;
-}
-.gap-5{
-  gap: 20px;
-}
-/* Space and Gap Utilities */
-.mt-4 {
-  margin-top: 1rem;
-}
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  margin-top: 1rem;
-}
-.gap-1 > :not([hidden]) ~ :not([hidden]) {
-  gap: 0.25rem;
-}
-.pt-3 {
-  padding-top: 0.75rem;
-}
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
-/* Form and Input Styles */
-.border {
-  border-width: 1px;
-}
-
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-.flex-col {
-  flex-direction: column;
-}
-.w-full {
-  width: 100%;
-}
-
-.object-cover {
-  object-fit: cover;
-}
-.w-full {
-  width: 100%;
-}
-
-.cursor-not-allowed{
-  cursor: not-allowed !important;
-}
-.accent {
-  accent-color: #000;
-}
-
-.OR{ 
-
-  color:#666666;
-  gap: 6px;
- } 
- .OR span{
-  width: 150px; 
-  border-top: 2px solid #6666663d;
-  display: block;
- }
-

package/src/lib/components/user-request/user-request.component.html

@@ -1,165 +0,0 @@
-<section [ngStyle]="styles" class="{{ customClass }}">
-  <h2 class="{{ headingClass }}">
-    {{ headingTitle }}
-  </h2>
-
-  <form
-    [formGroup]="userRequestForm"
-    (ngSubmit)="submitForm()"
-    class="flex flex-col gap-5 mt-3"
-  >
-    <verbena-input
-      [label]="'First Name'"
-      [labelColor]="'#666'"
-      [placeHolder]="''"
-      [required]="true"
-      [type]="'text'"
-      formControlName="FirstName"
-      [showBorder]="true"
-      [bgColor]="'white'"
-      [border]="'1px solid #66666659'"
-      [borderRadius]="'12px'"
-      [showErrorMessage]="true"
-      [errorMessageColor]="'red'"
-      [errorBorderColor]="'red'"
-      [errorPosition]="'bottom'"
-      class="outline-none focus-none"
-    ></verbena-input>
-    <verbena-input
-      [label]="'Last Name'"
-      [labelColor]="'#666'"
-      [placeHolder]="''"
-      [required]="true"
-      [type]="'text'"
-      formControlName="LastName"
-      [showBorder]="true"
-      [bgColor]="'white'"
-      [border]="'1px solid #66666659'"
-      [borderRadius]="'12px'"
-      [showErrorMessage]="true"
-      [errorMessageColor]="'red'"
-      [errorBorderColor]="'red'"
-      [errorPosition]="'bottom'"
-      class="outline-none focus-none"
-    ></verbena-input>
-    <verbena-input
-      [label]="'E-mail Address'"
-      [labelColor]="'#666'"
-      [placeHolder]="''"
-      [required]="true"
-      [type]="'email'"
-      formControlName="Email"
-      [showBorder]="true"
-      [bgColor]="'white'"
-      [border]="'1px solid #66666659'"
-      [borderRadius]="'12px'"
-      [showErrorMessage]="true"
-      [customErrorMessages]="{
-        required: 'Email address is required',
-        email: 'Email address must be valid'
-      }"
-      [errorMessageColor]="'red'"
-      [errorBorderColor]="'red'"
-      [errorPosition]="'bottom'"
-      class="outline-none focus-none"
-    ></verbena-input>
-
-    <verbena-input
-      [label]="'Password'"
-      [labelColor]="'#666'"
-      [placeHolder]="''"
-      [passwordToggle]="true"
-      formControlName="Password"
-      [required]="true"
-      [type]="'password'"
-      [showBorder]="true"
-      [bgColor]="'white'"
-      [border]="'1px solid #66666659'"
-      [borderRadius]="'12px'"
-      [showErrorMessage]="true"
-      [errorMessageColor]="'red'"
-      [errorBorderColor]="'red'"
-      [errorPosition]="'bottom'"
-      class="outline-none focus-none"
-    ></verbena-input>
-
-    <verbena-input
-      [label]="'Confirm Password'"
-      [labelColor]="'#666'"
-      [placeHolder]="''"
-      [required]="true"
-      [type]="'password'"
-      formControlName="ConfirmPassword"
-      [showBorder]="true"
-      [passwordToggle]="true"
-      [bgColor]="'white'"
-      [minLength]="userRequestForm.controls['Password'].value?.length"
-      [border]="'1px solid #66666659'"
-      [borderRadius]="'12px'"
-      [showErrorMessage]="true"
-      [errorMessageColor]="'red'"
-      [customErrorMessages]="{
-        minLength:'Confirm Password must match password',
-        required: 'Confirm Password is required and must match password',
-        password: 'Password does not match',
-      }"
-      [errorBorderColor]="'red'"
-      [errorPosition]="'bottom'"
-      class="outline-none focus-none"
-    ></verbena-input>
-
-    <verbena-button
-    [class]="'mt-6'"
-      [disable]="!this.checkForm()"
-      [text]="text"
-      [bgColor]="btnBgColor"
-      [textColor]="color"
-      [buttonClass]="'cursor-not-allowed'"
-      [border]="btnBorder"
-      [borderRadius]="btnBorderRadius"
-      [pd]="btnPd"
-      [ngClass]="{
-       'cursor-not-allowed':!checkForm()
-      }"
-      [width]="btnWidth"
-      buttonClass="font-medium text-[22px] leading-[33px]"
-    ></verbena-button>
-    <div class="flex justify-center items-center OR">
-      <span></span>
-      OR
-      <span></span>
-  </div>
-
-    <verbena-button
-      svg="google-logo"
-      [svgHeight]="24"
-      [svgWidth]="24"
-      (click)="handleGoogleAuth()"
-      text="Continue with Google"
-      bgColor="white"
-      textColor="black"
-      border="1px solid #333"
-      borderRadius="40px"
-      pd="10px 20px"
-      width="100%"
-      svgPosition="left"
-      buttonClass="font-normal text-[24px] leading-[29.05px] text-[#333]"
-    ></verbena-button>
-
-    <verbena-button
-      svg="apple-logo"
-      (click)="handleAppleAuth()"
-      [svgHeight]="24"
-      [svgWidth]="24"
-      text="Continue with Apple"
-      bgColor="white"
-      textColor="black"
-      border="1px solid #333"
-      borderRadius="40px"
-      pd="10px 20px"
-      width="100%"
-      svgPosition="left"
-      buttonClass="font-normal text-[24px] leading-[29.05px] text-[#333] mt-2"
-    ></verbena-button>
-  </form>
-</section>

package/src/lib/components/user-request/user-request.component.spec.ts

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