verben-authentication-ui 1.0.2 → 1.0.3

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/verben-authentication-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": ["tslib"]
+}

package/package.json

@@ -1,27 +1,22 @@
 {
   "name": "verben-authentication-ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
+  "scripts": {
+    "build-watch": "ng build --watch"
+  },
   "peerDependencies": {
     "@angular/cdk": "^18.2.0",
     "@angular/common": "^14.0.0 || ^18.0.0",
     "@angular/core": "^14.0.0 || ^18.0.0",
-    "verben-ng-ui": "^0.9.6"
+   "verben-ng-ui": "^0.9.6"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "module": "fesm2022/verben-authentication-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/verben-authentication-ui.mjs",
-      "esm": "./esm2022/verben-authentication-ui.mjs",
-      "default": "./fesm2022/verben-authentication-ui.mjs"
-    }
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "storage-encryption": "^1.0.16",
+    "verben-ng-ui": "^0.9.6"
   }
-}
+}

package/src/lib/base/base-data.component.ts

@@ -0,0 +1,86 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnDestroy,
+} from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseModel } from '../models/base';
+import { ColumnDefinition } from 'verben-ng-ui';
+import { BaseDataFacade } from './base-data.facade';
+
+@Component({ template: '' })
+export abstract class BaseDataComponent<T extends BaseModel>
+  implements OnInit, OnDestroy
+{
+  @Input() columns!: ColumnDefinition<T>[];
+  @Output() selectionChange = new EventEmitter<T[]>();
+  @Output() exportData = new EventEmitter<Record<string, any>[]>();
+
+  protected destroy$ = new Subject<void>();
+  isLoading = false;
+  items: T[] = [];
+  selectedItems: T[] = [];
+  isGridView = true;
+
+  constructor(protected facade: BaseDataFacade<T>) {}
+
+  ngOnInit(): void {
+    this.setupSubscriptions();
+    this.loadInitialData();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  protected setupSubscriptions(): void {
+    this.facade
+      .isUpdating$()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((loading) => (this.isLoading = loading));
+
+    this.facade
+      .getItems$()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((items) => (this.items = items));
+  }
+
+  protected async loadInitialData(): Promise<void> {
+    try {
+      await this.facade.loadItems();
+    } catch (error) {
+      // Handle error appropriately
+      console.error('Failed to load initial data:', error);
+    }
+  }
+
+  onSearch(event: { key: string; value: string }): void {
+    this.facade.search(event.value);
+  }
+
+  async onLoadMore(): Promise<void> {
+    try {
+      await this.facade.loadMore();
+    } catch (error) {
+      console.error('Failed to load more:', error);
+    }
+  }
+
+  onViewChange(isGridView: boolean): void {
+    this.isGridView = isGridView;
+  }
+
+  onSelectionChange(selected: T[]): void {
+    this.selectedItems = selected;
+    this.selectionChange.emit(selected);
+  }
+
+  onExport(data: Record<string, any>[]): void {
+    this.exportData.emit(data);
+  }
+}

package/src/lib/base/base-data.facade.ts

@@ -0,0 +1,157 @@
+import { Injectable } from '@angular/core';
+import {
+  Observable,
+  Subject,
+  debounceTime,
+  distinctUntilChanged,
+  takeUntil,
+} from 'rxjs';
+import { IQueryParams } from './models';
+import { BaseDataState } from './base-data.state';
+import { BaseDataService } from './base-data.service';
+import { BaseModel } from '../models/base';
+
+@Injectable()
+export abstract class BaseDataFacade<T extends BaseModel> {
+  private searchSubject = new Subject<string>();
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    protected state: BaseDataState<T>,
+    protected service: BaseDataService<T>
+  ) {
+    this.setupSearchHandler();
+  }
+
+  private setupSearchHandler(): void {
+    this.searchSubject
+      .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
+      .subscribe((searchTerm) => {
+        this.handleSearch(searchTerm);
+      });
+  }
+
+  destroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  // State Observables
+  isUpdating$(): Observable<boolean> {
+    return this.state.isUpdating$();
+  }
+
+  getItems$(): Observable<T[]> {
+    return this.state.getItems$();
+  }
+
+  getSearchTerm$(): Observable<string> {
+    return this.state.getSearchTerm$();
+  }
+
+  getQueryParams$(): Observable<IQueryParams<T>> {
+    return this.state.getQueryParams$();
+  }
+
+  // Actions
+  search(term: string): void {
+    this.searchSubject.next(term);
+  }
+
+  protected async handleSearch(searchTerm: string): Promise<void> {
+    this.state.setSearchTerm(searchTerm);
+    this.state.resetPagination();
+    await this.loadItems();
+  }
+
+  async loadItems(): Promise<void> {
+    try {
+      this.state.setUpdating(true);
+      const params = this.state.getQueryParamsValue();
+      const searchTerm = this.state.getSearchTermValue();
+
+      const response = searchTerm
+        ? await this.service
+            .getItemsBySearchTerm(
+              searchTerm,
+              params.skip,
+              params.limit,
+              params.sortParam!,
+              params.sortOrder
+            )
+            .toPromise()
+        : await this.service
+            .getItems(
+              params.skip,
+              params.limit,
+              params.sortParam!,
+              params.sortOrder
+            )
+            .toPromise();
+
+      if (response?.Result) {
+        this.state.setItems(response?.Result);
+      }
+    } catch (error) {
+      console.error('Failed to load items:', error);
+      throw error;
+    } finally {
+      this.state.setUpdating(false);
+    }
+  }
+
+  async loadMore(): Promise<void> {
+    try {
+      this.state.setUpdating(true);
+      const currentParams = this.state.getQueryParamsValue();
+      const newSkip = currentParams.skip + currentParams.limit;
+      this.state.updateQueryParams({ skip: newSkip });
+
+      const response = await this.service
+        .getItems(
+          newSkip,
+          currentParams.limit,
+          currentParams.sortParam!,
+          currentParams.sortOrder
+        )
+        .toPromise();
+
+      if (response?.Result) {
+        this.state.appendItems(response.Result);
+      }
+    } catch (error) {
+      console.error('Failed to load more items:', error);
+      throw error;
+    } finally {
+      this.state.setUpdating(false);
+    }
+  }
+
+  async saveItem(item: T): Promise<void> {
+    try {
+      this.state.setUpdating(true);
+      const response = await this.service.saveItems([item]).toPromise();
+      if (response?.[0]) {
+        this.state.updateItem(response[0]);
+      }
+    } catch (error) {
+      console.error('Failed to save item:', error);
+      throw error;
+    } finally {
+      this.state.setUpdating(false);
+    }
+  }
+
+  async deleteItem(itemId: string): Promise<void> {
+    try {
+      this.state.setUpdating(true);
+      await this.service.deleteItems([itemId]).toPromise();
+      this.state.removeItem(itemId);
+    } catch (error) {
+      console.error('Failed to delete item:', error);
+      throw error;
+    } finally {
+      this.state.setUpdating(false);
+    }
+  }
+}

package/src/lib/base/base-data.service.ts

@@ -0,0 +1,49 @@
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { BaseModel } from '../models/base';
+import { Paged } from '../models/paged';
+
+export abstract class BaseDataService<T extends BaseModel> {
+  constructor(protected http: HttpClient, protected baseUrl: string) {}
+
+  abstract getEndpoint(): string;
+
+  getItems(
+    skip: number,
+    limit: number,
+    sortParam: keyof T,
+    sortOrder: string
+  ): Observable<Paged<T>> {
+    return this.http.get<Paged<T>>(
+      `${this.baseUrl}/${this.getEndpoint()}/${skip}/${limit}/${String(
+        sortParam
+      )}/${sortOrder}`
+    );
+  }
+
+  getItemsBySearchTerm(
+    searchTerm: string,
+    skip: number,
+    limit: number,
+    sortParam: keyof T,
+    sortOrder: string
+  ): Observable<Paged<T>> {
+    return this.http.get<Paged<T>>(
+      `${
+        this.baseUrl
+      }/${this.getEndpoint()}/search/${searchTerm}/${skip}/${limit}/${String(
+        sortParam
+      )}/${sortOrder}`
+    );
+  }
+
+  saveItems(items: T[]): Observable<T[]> {
+    return this.http.post<T[]>(`${this.baseUrl}/${this.getEndpoint()}`, items);
+  }
+
+  deleteItems(itemIds: string[]): Observable<void> {
+    return this.http.delete<void>(
+      `${this.baseUrl}/${this.getEndpoint()}?ids=${itemIds.join(',')}`
+    );
+  }
+}

package/src/lib/base/base-data.state.ts

@@ -0,0 +1,94 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+import { BaseModel } from '../models/base';
+import { IQueryParams } from './models';
+import { ColumnDefinition } from 'verben-ng-ui';
+
+export abstract class BaseDataState<T extends BaseModel> {
+  protected updating$ = new BehaviorSubject<boolean>(false);
+  protected items$ = new BehaviorSubject<T[]>([]);
+  protected searchTerm$ = new BehaviorSubject<string>('');
+  protected queryParams$ = new BehaviorSubject<IQueryParams<T>>({
+    skip: 0,
+    limit: 20,
+    sortOrder: 'asc',
+  });
+  protected columns$ = new BehaviorSubject<ColumnDefinition<T>[]>([]);
+
+  isUpdating$(): Observable<boolean> {
+    return this.updating$.asObservable();
+  }
+
+  setUpdating(isUpdating: boolean): void {
+    this.updating$.next(isUpdating);
+  }
+
+  getItems$(): Observable<T[]> {
+    return this.items$.asObservable();
+  }
+
+  setItems(items: T[]): void {
+    this.items$.next(items);
+  }
+
+  appendItems(newItems: T[]): void {
+    const currentItems = this.items$.getValue();
+    this.items$.next([...currentItems, ...newItems]);
+  }
+
+  getSearchTerm$(): Observable<string> {
+    return this.searchTerm$.asObservable();
+  }
+
+  getSearchTermValue(): string {
+    return this.searchTerm$.getValue();
+  }
+
+  setSearchTerm(term: string): void {
+    this.searchTerm$.next(term);
+  }
+
+  getQueryParams$(): Observable<IQueryParams<T>> {
+    return this.queryParams$.asObservable();
+  }
+
+  getQueryParamsValue(): IQueryParams<T> {
+    return this.queryParams$.getValue();
+  }
+
+  updateQueryParams(params: Partial<IQueryParams<T>>): void {
+    this.queryParams$.next({ ...this.queryParams$.getValue(), ...params });
+  }
+
+  resetPagination(): void {
+    const currentParams = this.queryParams$.getValue();
+    this.queryParams$.next({ ...currentParams, skip: 0 });
+  }
+
+  getColumns$(): Observable<ColumnDefinition<T>[]> {
+    return this.columns$.asObservable();
+  }
+
+  setColumns(columns: ColumnDefinition<T>[]): void {
+    this.columns$.next(columns);
+  }
+
+  // CRUD Operations
+  addItem(item: T): void {
+    const currentItems = this.items$.getValue();
+    this.items$.next([...currentItems, item]);
+  }
+
+  updateItem(updatedItem: T): void {
+    const items = this.items$.getValue();
+    const index = items.findIndex((item) => item.Id === updatedItem.Id);
+    if (index !== -1) {
+      items[index] = updatedItem;
+      this.items$.next([...items]);
+    }
+  }
+
+  removeItem(itemId: string): void {
+    const currentItems = this.items$.getValue();
+    this.items$.next(currentItems.filter((item) => item.Id !== itemId));
+  }
+}

package/src/lib/base/models.ts

@@ -0,0 +1,14 @@
+// base-data.model.ts
+export interface IBaseDataModel {
+  id: string;
+  createdAt?: Date;
+  updatedAt?: Date;
+}
+
+// base-query-params.model.ts
+export interface IQueryParams<T> {
+  skip: number;
+  limit: number;
+  sortParam?: keyof T;
+  sortOrder: 'asc' | 'desc';
+}

package/src/lib/components/auth-callback/auth-callback.component.css

@@ -0,0 +1,30 @@
+.wrapper{ 
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.flexWrapper{ 
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+}
+.loader {
+    border: 2px solid white;
+    border-radius: 50%;
+    border-top: 2px solid black;
+    width: 40px;
+    height: 40px;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+  }
+    @-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }

package/src/lib/components/auth-callback/auth-callback.component.html

@@ -0,0 +1,6 @@
+<section class="wrapper"> 
+    <div class="flexWrapper"> 
+        <p class="{{redirectText}}">Redirecting ...</p>
+        <div class="loader"></div>
+    </div>
+</section>

package/src/lib/components/auth-callback/auth-callback.component.spec.ts

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

package/src/lib/components/auth-callback/auth-callback.component.ts

@@ -0,0 +1,56 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'verben-auth-callback',
+  templateUrl: './auth-callback.component.html',
+  styleUrl: './auth-callback.component.css'
+})
+export class AuthCallbackComponent implements OnInit {
+  code: string = '';
+  previousUrl: string = '';
+  type: string = '';
+  @Input() redirectText?:string;
+  
+  constructor(private router: Router,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this.getType()
+    this.handleRedirect();
+  }
+ 
+  getType(){ 
+  const data = localStorage.getItem('type')
+  if(data){ 
+    this.type = JSON.parse(data)
+  }
+  }
+  handleRedirect() {
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get('code');
+    const stateParam = params.get('state');
+  console.log({code:code, state:stateParam}, 'data');
+  
+
+    if (code && stateParam) {
+      try {
+        const state = JSON.parse(decodeURIComponent(stateParam));
+        // const returnTo = state.returnTo || '/';
+        const splitStateArray=state.returnTo.split('?');
+        const returnTo = splitStateArray.length>0?splitStateArray[0]:state.returnTo;
+        const queryParams: any = { code };
+      if (this.type) {
+        queryParams.type = this.type;
+      }
+
+      this.router.navigate([returnTo], { queryParams });
+        // this.router.navigate([returnTo], { queryParams: { code } });
+      } catch (e) {
+       const msg = e
+      }
+    }
+  }
+  
+}

package/src/lib/components/auth-callback/auth-callback.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AuthCallbackComponent } from './auth-callback.component';
+
+@NgModule({
+  declarations: [AuthCallbackComponent],
+  imports: [CommonModule],
+  exports: [AuthCallbackComponent]
+})
+export class AuthCallbackModule {}

package/src/lib/components/button/button.component.css

@@ -0,0 +1,3 @@
+.disable-btn{
+    cursor: not-allowed;
+  }

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

@@ -0,0 +1,13 @@
+<verbena-button
+[text]="text"
+[bgColor]="bgColor"
+[textColor]="color"
+[border]="border"
+[borderRadius]="borderRadius"
+[pd]="pd"
+[width]="width"
+[disable]="disabled"
+[ngStyle]="{'cursor': disabled ? 'not-allowed' : 'pointer' }"
+buttonClass="font-medium text-[22px] leading-[33px] {{buttonClass}}"
+(click)="handleClick()"
+></verbena-button>

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

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

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

@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'lib-button',
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css'
+})
+export class ButtonComponent{
+  @Input() text: string = '';
+  @Input() color: string = 'black';
+  @Input() border: string = '1px solid #FFE681';
+  @Input() borderRadius:string = "40px"
+  @Input() bgColor: string = '#FFE681';
+  @Input() width: string = '100%';
+  @Input() pd: string = '10px 20px';
+  @Input() buttonClass: string = '';
+  @Input() disabled: boolean = false;
+
+  @Output() buttonClick = new EventEmitter<void>();
+
+  handleClick(){ 
+    this.buttonClick.emit();
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VerbenaButtonModule } from 'verben-ng-ui';
+import { ButtonComponent } from './button.component';
+import { FormsModule } from '@angular/forms';
+@NgModule({
+  declarations: [ButtonComponent],
+  imports: [CommonModule,VerbenaButtonModule,FormsModule],
+  exports: [ButtonComponent]
+})
+export class ButtonModule {}

package/{lib/components/forgot-password/ForgotPasswordData.d.ts → src/lib/components/forgot-password/ForgotPasswordData.ts}

@@ -1,3 +1,3 @@
 export interface ForgotPasswordData {
-    Email: string;
+  Email: string;
 }