verben-authentication-ui 0.3.3 → 0.3.5

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

@@ -1,167 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import {
-  AbstractControl,
-  FormBuilder,
-  FormGroup,
-  ValidationErrors,
-  Validators,
-} from '@angular/forms';
-import { HttpWebRequestService } from '../../services/http-web-request.service';
-import {UserRequestPayload } from '../../models/UserRequest';
-import { ObjectState } from '../../models/object-state';
-import { UtilService } from '../../services/util.service';
-import { ResponseKeyValue } from '../../models/ResponseKeyValue';
-import { ErrorResponse } from '../../models/ErrorResponse';
-import { Status } from '../../models/status';
-import { RequestStatus } from '../../models/request-status';
-import { EnvironmentService } from '../../services/environment.service';
-@Component({
-  selector: 'lib-user-request',
-  templateUrl: './user-request.component.html',
-  styleUrls: ['./user-request.component.css'],
-})
-export class UserRequestComponent {
-  @Input() width: string = '500px';
-  @Input() headingTitle: string = 'Request an account';
-  @Input() headingClass: string =
-    'font-medium text-[2rem] leading-[48px] text-[#333]';
-  @Input() customClass: 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() pd: string = '32px 48px';
-apiKey:string=''
-  // Button Inputs
-  @Input() text: string = 'Send Request';
-  @Input() color: string = 'black';
-  @Input() btnBorder: string = '1px solid #FFE681';
-  @Input() btnBorderRadius: string = '40px';
-  @Input() btnBgColor: string = '#FFE681';
-  @Input() btnWidth: string = '100%';
-  @Input() btnPd: string = '10px 20px';
-  @Input() termsLink: string = '';
-  @Input() privacyLink: string = '';
-  @Input() routerLink: string = '';
-  @Output() formSubmit = new EventEmitter<UserRequestPayload[]>();
-  @Output() googleClick = new EventEmitter();
-  @Output() onSubmitSuccess = new EventEmitter<any>();
-  @Output() appleClick = new EventEmitter();
-  @Output() onSubmitResponseEnd: EventEmitter<any> = new EventEmitter();
-  userRequestForm: FormGroup;
-
-  constructor(
-    private fb: FormBuilder,
-    private server: HttpWebRequestService,
-    private utilService: UtilService,
-    private envSvc: EnvironmentService,
-  ) {
-    this.apiKey =  this.envSvc.environment.APIKey
-    this.userRequestForm = this.fb.group(
-      {
-        FirstName: [null, [Validators.required]],
-        LastName: [null, [Validators.required]],
-        Email: [null, [Validators.required, Validators.email]],
-        Password: [null, [Validators.required, Validators.minLength(8)]],
-        ConfirmPassword: [null, [Validators.required]],
-      },
-      { validators: this.passwordMatchValidator }
-    );
-  }
-  passwordMatchValidator(control: AbstractControl): ValidationErrors | null {
-    const password = control.get('Password')?.value;
-    const confirmPassword = control.get('ConfirmPassword')?.value;
-
-    return password === confirmPassword ? null : { passwordMismatch: true };
-  }
-
-  get passwordMismatchError(): boolean {
-    return this.userRequestForm.hasError('passwordMismatch');
-  }
-  get styles() {
-    return {
-      'background-color': this.bgColor,
-      'box-shadow': this.boxShadow,
-      border: this.border,
-      'border-radius': this.borderRadius,
-      color: this.textColor,
-      'max-width': this.width,
-      height: this.height,
-      padding: this.pd,
-    };
-  }
-  checkForm(): boolean {
-    return this.userRequestForm.valid;
-  }
-  handleGoogleAuth() {
-    this.googleClick.emit();
-  }
-  handleAppleAuth() {
-    this.appleClick.emit();
-  }
-  async submitForm() {
-    if (!this.checkForm()) {
-      return;
-    }
-  
-    const payload: UserRequestPayload[] = [
-      {
-        Code: '',
-        FirstName: this.userRequestForm.controls['FirstName'].value,
-        LastName: this.userRequestForm.controls['LastName'].value,
-        MailAddress: this.userRequestForm.controls['Email'].value,
-        Password: this.userRequestForm.controls['Password'].value,
-        PhoneNumber: '',
-        OtherName: '',
-        Role: [],
-        Tags: [],
-        Status: Status.Active,
-        RequestStatus: RequestStatus.Pending,
-        UpdatedAt: new Date(),
-        CreatedAt: new Date(),
-        Id: '',
-        DataState: ObjectState.New,
-        TenantId: '',
-        ServiceName: '',
-        ActionBy: '',
-        Comment: '',
-      },
-    ];
-  
-    // Emit payload if needed
-    this.formSubmit.emit(payload);
-  
-    // Show loading indicator
-    this.utilService.sendBI(true);
-  
-    try {
-      // Make the API call
-      const res = await this.server.post(`User/SaveUserAccessRequests`, payload);
-  
-      // Hide loading indicator
-      this.utilService.sendBI(false);
-  
-      if (res instanceof ErrorResponse) {
-        // Emit error response
-        this.onSubmitResponseEnd.emit(res);
-        console.log(res);
-      } else {
-        // Emit success response
-        const result = res as ResponseKeyValue;
-        this.onSubmitResponseEnd.emit(result);
-  
-        // Emit success event
-        this.onSubmitSuccess.emit(result);
-
-      }
-    } catch (error) {
-      // Handle unexpected errors
-      this.utilService.sendBI(false);
-      console.error('Unexpected error:', error);
-      this.onSubmitResponseEnd.emit(error);
-    }
-  }
-  
-}

package/src/lib/components/user-request/user-request.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { VerbenaButtonModule, VerbenaInputModule } from 'verben-ng-ui';
-import { CommonModule } from '@angular/common';
-import { UserRequestComponent } from './user-request.component';
-
-@NgModule({
-  declarations: [UserRequestComponent],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    VerbenaInputModule,
-    VerbenaButtonModule,
-    CommonModule,
-  ],
-  exports: [UserRequestComponent],
-})
-export class UserRequestModule {}

package/src/lib/components/user-request-approval/access-request.columns.ts

@@ -1,26 +0,0 @@
-import { ColumnDefinition } from 'verben-ng-ui';
-import { UserAccessRequest } from '../../models/user-access-request';
-
-export const columns: ColumnDefinition<UserAccessRequest>[] = [
-  {
-    id: 'createdAt',
-    header: 'Created',
-    accessorKey: 'CreatedAt',
-  },
-  {
-    id: 'user',
-    header: 'Name',
-    accessorFn: (row) => `${row.FirstName} ${row.LastName}`,
-  },
-  {
-    id: 'mail',
-    header: 'E-Mail',
-    accessorKey: 'MailAddress',
-  },
-  {
-    id: 'phone',
-    header: 'Phone Number',
-    accessorKey: 'PhoneNumber',
-  },
-  { id: 'actions', header: 'Actions', accessorKey: 'MailAddress' },
-];

package/src/lib/components/user-request-approval/base-table-style.ts

@@ -1,52 +0,0 @@
-export const baseStyle: any = {
-  width: '100%',
-  fontFamily: '"Fraunces", serif',
-  fontSize: '125%',
-  whiteSpace: 'nowrap',
-  margin: '0',
-  border: '1px solid #D4A007',
-  borderRadius: '16px',
-  borderCollapse: 'separate',
-  borderSpacing: '0',
-  tableLayout: 'fixed',
-  overflow: 'hidden',
-  rows: {
-    even: {
-      backgroundColor: '#FDFDFD',
-    },
-    odd: {
-      backgroundColor: '#F1F4FB',
-    },
-    height: '68px',
-  },
-  cells: {
-    padding: '0.5rem 1rem',
-  },
-  header: {
-    // stickyTop: true,
-    // zIndex: 2,
-    backgroundColor: '#EFF2FB',
-    fontWeight: 'bold',
-    textAlign: 'left',
-    padding: '12px 16px',
-    height: '40px',
-  },
-  footer: {
-    // stickyBottom: true,
-    // zIndex: 2,
-    padding: '3px',
-  },
-  //   body: {
-  //     background: '#fff',
-  //     padding: '4px 5px',
-  //     textAlign: 'center',
-  //   },
-  // firstColumn: {
-  //   stickyLeft: true,
-  //   zIndex: 1,
-  // },
-  lastColumn: {
-    // stickyRight: true,
-    // zIndex: 1,
-  },
-};

package/src/lib/components/user-request-approval/facades/user-access-request.facade.ts

@@ -1,152 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
-  Observable,
-  catchError,
-  from,
-  lastValueFrom,
-  tap,
-  throwError,
-} from 'rxjs';
-import { UserAccessRequestState } from '../states/user-access-request.state';
-import { UserAccessRequest } from '../../../models/user-access-request';
-import { QueryParams } from '../../../models/query-params';
-import { UserAccessRequestService } from '../services/user-access-request.service';
-import { UserAccessRequestStatus } from '../../../models/user-access-request-status';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class UserAccessRequestFacade {
-  constructor(
-    private userAccessRequestService: UserAccessRequestService,
-    private userAccessRequestState: UserAccessRequestState
-  ) {}
-
-  isUpdating$(): Observable<boolean> {
-    return this.userAccessRequestState.isUpdating$();
-  }
-
-  getRequests$(): Observable<UserAccessRequest[]> {
-    return this.userAccessRequestState.getRequests$();
-  }
-
-  getQueryParams$(): Observable<QueryParams<UserAccessRequest>> {
-    return this.userAccessRequestState.getQueryParams$();
-  }
-
-  async loadRequests(): Promise<void> {
-    try {
-      this.userAccessRequestState.setUpdating(true);
-      const params = this.userAccessRequestState.getQueryParamsValue();
-
-      const requests =
-        await this.userAccessRequestService.getUserAccessRequests(
-          params.skip,
-          params.limit,
-          params.sortParam || 'createdDate',
-          params.sortOrder
-        );
-
-      this.userAccessRequestState.setRequests(requests.Result);
-    } catch (error) {
-      console.error('Failed to load requests:', error);
-      throw error;
-    } finally {
-      this.userAccessRequestState.setUpdating(false);
-    }
-  }
-
-  async loadRequestsWithParam(param: string): Promise<void> {
-    try {
-      this.userAccessRequestState.setUpdating(true);
-      const params = this.userAccessRequestState.getQueryParamsValue();
-
-      const requests =
-        await this.userAccessRequestService.getUserAccessRequestWithParam(
-          param,
-          params.skip,
-          params.limit,
-          params.sortParam || 'createdDate',
-          params.sortOrder
-        );
-
-      this.userAccessRequestState.setRequests(requests.Result);
-    } catch (error) {
-      console.error('Failed to load requests with param:', error);
-      throw error;
-    } finally {
-      this.userAccessRequestState.setUpdating(false);
-    }
-  }
-
-  updateQueryParams(params: Partial<QueryParams<UserAccessRequest>>): void {
-    this.userAccessRequestState.updateQueryParams(params);
-    this.loadRequests();
-  }
-
-  async addRequest(request: Partial<UserAccessRequest>): Promise<void> {
-    try {
-      this.userAccessRequestState.setUpdating(true);
-      const newRequest = { ...request } as UserAccessRequest;
-      this.userAccessRequestState.addRequest(newRequest);
-
-      await this.userAccessRequestService.saveUserAccessRequests([newRequest]);
-      await this.loadRequests(); // Reload to get server-side changes
-    } catch (error) {
-      console.error('Failed to add request:', error);
-      this.userAccessRequestState.removeRequest(request.Id!);
-      throw error;
-    } finally {
-      this.userAccessRequestState.setUpdating(false);
-    }
-  }
-
-  async updateRequest(request: UserAccessRequest): Promise<void> {
-    try {
-      this.userAccessRequestState.setUpdating(true);
-      await this.userAccessRequestService.saveUserAccessRequests([request]);
-      this.userAccessRequestState.updateRequest(request);
-    } catch (error) {
-      console.error('Failed to update request:', error);
-      throw error;
-    } finally {
-      this.userAccessRequestState.setUpdating(false);
-    }
-  }
-
-  async deleteRequest(requestId: string): Promise<void> {
-    try {
-      this.userAccessRequestState.setUpdating(true);
-      await lastValueFrom(
-        this.userAccessRequestService.deleteUserAccessRequests([requestId])
-      );
-      this.userAccessRequestState.removeRequest(requestId);
-    } catch (error) {
-      console.error('Failed to delete request:', error);
-      throw error;
-    } finally {
-      this.userAccessRequestState.setUpdating(false);
-    }
-  }
-
-  async approveRequest(request: UserAccessRequest): Promise<void> {
-    try {
-      this.userAccessRequestState.setUpdating(true);
-      const response =
-        await this.userAccessRequestService.processUserAccessRequests(
-          [request],
-          true
-        );
-      // console.log(response);
-      const data = (response as UserAccessRequest[])?.[0];
-      if (data) {
-        this.userAccessRequestState.updateRequest(data);
-      }
-    } catch (error) {
-      console.error('Failed to update request:', error);
-      throw error;
-    } finally {
-      this.userAccessRequestState.setUpdating(false);
-    }
-  }
-}

package/src/lib/components/user-request-approval/helper.ts

@@ -1,39 +0,0 @@
-import { ObjectState } from '../../models/object-state';
-import { UserAccessRequest } from '../../models/user-access-request';
-import { UserAccessRequestStatus } from '../../models/user-access-request-status';
-
-export const roles: { id: string; name: string }[] = [
-  { id: 'admin', name: 'Admin' },
-  { id: 'manager', name: 'Manager' },
-  { id: 'staff', name: 'Staff' },
-];
-
-export const mockData: UserAccessRequest[] = new Array(10)
-  .fill(1)
-  .map((id, i) => ({
-    FirstName: `First ${id + i}`,
-    LastName: `Last ${id + i}`,
-    OtherName: `Other ${id + i}`,
-    Id: id + i,
-    id: (id + i).toString(),
-    MailAddress: `user${id + i}@mail.com`,
-    PhoneNumber: `+23480000000${id + i}`,
-    RequestStatus: randomEnum(UserAccessRequestStatus),
-    RoleID: roles[Math.floor(Math.random() * roles.length)].id,
-    Password: '1234567',
-    ExpireOn: new Date(),
-    IsSeeded: false,
-    OTPExpireOn: new Date(),
-    Tenants: [],
-
-    CreatedAt: new Date(),
-    UpdatedAt: new Date(),
-    DataState: ObjectState.New,
-    Tenant: `Tenant${id + i}`,
-  }));
-
-function randomEnum<T extends object>(anEnum: T): T[keyof T] {
-  const enumValues = Object.values(anEnum) as unknown as T[keyof T][];
-  const randomIndex = Math.floor(Math.random() * enumValues.length);
-  return enumValues[randomIndex];
-}

package/src/lib/components/user-request-approval/services/user-access-request.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { UserAccessRequestService } from './user-access-request.service';
-
-describe('UserAccessRequestService', () => {
-  let service: UserAccessRequestService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(UserAccessRequestService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/src/lib/components/user-request-approval/services/user-access-request.service.ts

@@ -1,87 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { Observable, from } from 'rxjs';
-import { HttpWebRequestService } from '../../../services/http-web-request.service';
-import { UserAccessRequest } from '../../../models/user-access-request';
-import { Paged } from '../../../models/paged';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class UserAccessRequestService {
-  private readonly BASE_URL = 'User';
-
-  constructor(private httpService: HttpWebRequestService) {}
-
-  /**
-   * Get user access requests with pagination and sorting
-   * @param skip Number of records to skip
-   * @param limit Number of records to take
-   * @param sortParam Sort parameter
-   * @param sortOrder Sort order ('asc' or 'desc')
-   * @returns Promise containing the user access requests
-   */
-  getUserAccessRequests(
-    skip: number,
-    limit: number,
-    sortParam: string,
-    sortOrder: string
-  ): Promise<Paged<UserAccessRequest>> {
-    const url = `${this.BASE_URL}/GetUserAccessRequests/${skip}/${limit}/${sortParam}/${sortOrder}`;
-    return this.httpService.get(url) as Promise<Paged<UserAccessRequest>>;
-  }
-
-  /**
-   * Get user access requests with additional parameter, pagination and sorting
-   * @param param Search parameter
-   * @param skip Number of records to skip
-   * @param limit Number of records to take
-   * @param sortParam Sort parameter
-   * @param sortOrder Sort order ('asc' or 'desc')
-   * @returns Promise containing the filtered user access requests
-   */
-  getUserAccessRequestWithParam(
-    param: string,
-    skip: number,
-    limit: number,
-    sortParam: string,
-    sortOrder: string
-  ): Promise<Paged<UserAccessRequest>> {
-    const url = `${this.BASE_URL}/GetUserAccessRequestWithParam/${param}/${skip}/${limit}/${sortParam}/${sortOrder}`;
-    return this.httpService.get(url) as Promise<Paged<UserAccessRequest>>;
-  }
-
-  /**
-   * Save multiple user access requests
-   * @param requests Array of user access requests to save
-   * @returns Promise containing the save operation result
-   */
-  saveUserAccessRequests(requests: UserAccessRequest[]): Promise<any> {
-    const url = `${this.BASE_URL}/SaveUserAccessRequests`;
-    return this.httpService.post(url, requests);
-  }
-
-  /**
-   * Approve or reject multiple user access requests
-   * @param requests Array of user access requests to save
-   * @param isApproval True for approval, false for decline
-   * @returns Promise containing the save operation result
-   */
-  processUserAccessRequests(
-    requests: UserAccessRequest[],
-    isApproval: boolean
-  ): Promise<any> {
-    const url = `${this.BASE_URL}/UserAccessRequestAction/${isApproval}`;
-    return this.httpService.post(url, requests);
-  }
-
-  /**
-   * Delete multiple user access requests
-   * @param requestIds Array of request IDs to delete
-   * @returns Observable containing the delete operation result
-   */
-  deleteUserAccessRequests(requestIds: string[]): Observable<any> {
-    const url = `${this.BASE_URL}/DeleteUserAccessRequests`;
-    return this.httpService.delete(`${url}?data=${requestIds.join(',')}`);
-  }
-}

package/src/lib/components/user-request-approval/states/user-access-request.state.ts

@@ -1,65 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { QueryParams } from '../../../models/query-params';
-import { UserAccessRequest } from '../../../models/user-access-request';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class UserAccessRequestState {
-  private updating$ = new BehaviorSubject<boolean>(false);
-  private requests$ = new BehaviorSubject<UserAccessRequest[]>([]);
-  private queryParams$ = new BehaviorSubject<QueryParams<UserAccessRequest>>({
-    skip: 0,
-    limit: 10,
-    sortParam: 'CreatedAt',
-    sortOrder: 'asc',
-  });
-
-  isUpdating$(): Observable<boolean> {
-    return this.updating$.asObservable();
-  }
-
-  setUpdating(isUpdating: boolean): void {
-    this.updating$.next(isUpdating);
-  }
-
-  getRequests$(): Observable<UserAccessRequest[]> {
-    return this.requests$.asObservable();
-  }
-
-  setRequests(requests: UserAccessRequest[]): void {
-    this.requests$.next(requests);
-  }
-
-  getQueryParams$(): Observable<QueryParams<UserAccessRequest>> {
-    return this.queryParams$.asObservable();
-  }
-
-  getQueryParamsValue(): QueryParams<UserAccessRequest> {
-    return this.queryParams$.getValue();
-  }
-
-  updateQueryParams(params: Partial<QueryParams<UserAccessRequest>>): void {
-    this.queryParams$.next({ ...this.queryParams$.getValue(), ...params });
-  }
-
-  addRequest(request: UserAccessRequest): void {
-    const currentValue = this.requests$.getValue();
-    this.requests$.next([...currentValue, request]);
-  }
-
-  updateRequest(updatedRequest: UserAccessRequest): void {
-    const requests = this.requests$.getValue();
-    const index = requests.findIndex((r) => r.Id === updatedRequest.Id);
-    if (index !== -1) {
-      requests[index] = updatedRequest;
-      this.requests$.next([...requests]);
-    }
-  }
-
-  removeRequest(requestId: string): void {
-    const currentValue = this.requests$.getValue();
-    this.requests$.next(currentValue.filter((r) => r.Id !== requestId));
-  }
-}

package/src/lib/components/user-request-approval/user-access-request-status-badge/user-access-request-status-badge.component.html

@@ -1,7 +0,0 @@
-<verbena-badge
-  borderRadius="9px"
-  [bgColor]="badgeConfig().bgColor"
-  [textColor]="badgeConfig().textColor"
-  fontSize="12px"
-  [text]="badgeConfig().label"
-></verbena-badge>

package/src/lib/components/user-request-approval/user-access-request-status-badge/user-access-request-status-badge.component.spec.ts

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

package/src/lib/components/user-request-approval/user-access-request-status-badge/user-access-request-status-badge.component.ts

@@ -1,22 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { UserAccessRequestStatus } from '../../../models/user-access-request-status';
-
-@Component({
-  selector: 'lib-user-access-request-status-badge',
-  templateUrl: './user-access-request-status-badge.component.html',
-  styleUrl: './user-access-request-status-badge.component.css',
-})
-export class UserAccessRequestStatusBadgeComponent {
-  @Input() status: UserAccessRequestStatus = UserAccessRequestStatus.Pending;
-
-  badgeConfig() {
-    switch (this.status) {
-      case UserAccessRequestStatus.Approved:
-        return { bgColor: '#CAE1CC', textColor: '#4ABB54', label: 'Approved' };
-      case UserAccessRequestStatus.Declined:
-        return { bgColor: '#FFDFDF', textColor: '#EB5757', label: 'Rejected' };
-      default:
-        return { bgColor: '#827C7C', textColor: '#C3C3C3', label: 'Pending' };
-    }
-  }
-}

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

@@ -1 +0,0 @@
-@import "../../../theme/tailwind.css";