verben-authentication-ui 1.0.1 → 1.0.3

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

@@ -0,0 +1,155 @@
+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';
+import { MechanismType } from '../../models/auth-mechanism';
+
+@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: '',
+    Password: '',
+    LoginType: 'InApp',
+    Tenant: 'PDLTC6',
+    Secrete: '$White360$',
+    RedirectUri: '/auth/otp',
+  };
+
+  @Input() User:any={}
+
+  @Input() OtpData: OtpData = {
+    User: this.User,
+    Token: '',
+    ValidateUrl: '',
+    Secret: '',
+    OTP: '',
+    Info: '',
+    Provider:MechanismType.InApp
+  };
+
+  @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() clearStore = new EventEmitter<any>();
+  @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,
+      Provider:this.OtpData.Provider
+    };
+   this.clearStore.emit()
+    if (this.otpForm.valid) {
+      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,
+      Tenant: this.resendOtpData?.Tenant,
+      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();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'verben-two-factor-auth-setup',
+  templateUrl: './two-factor-auth-setup.component.html',
+  styleUrl: './two-factor-auth-setup.component.css'
+})
+
+export class TwoFactorAuthSetupComponent {
+  @Input() customClass: string = ''
+  @Input() headlingClass: string = ''
+  @Input() headlingText: string = 'Set Up Two Factor Authentication'
+  @Input() paragraphClass: string = ''
+  @Input() buttonClass: 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 = '';
+
+  @Output() smsClick = new EventEmitter();
+  @Output() mailClick = new EventEmitter();
+  @Output() skipClick = new EventEmitter();
+
+ 
+  continueWithSMS(){ 
+   this.smsClick.emit()
+  }
+  continueWithMail(){ 
+   this.mailClick.emit()
+  }
+  handleSkip(){ 
+   this.skipClick.emit()
+  }
+
+
+  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-setup/two-factor-auth-setup.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TwoFactorAuthSetupComponent } from './two-factor-auth-setup.component';
+import { SvgModule, VerbenaButtonModule } from 'verben-ng-ui';
+
+@NgModule({
+  declarations: [TwoFactorAuthSetupComponent],
+  imports: [CommonModule,VerbenaButtonModule,SvgModule],
+  exports: [TwoFactorAuthSetupComponent]
+})
+export class TwoFactorAuthSetupModule {}

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

@@ -0,0 +1,52 @@
+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: '30px',
+  },
+  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-management/facades/user-management.facades.ts

@@ -0,0 +1,133 @@
+import { Injectable } from '@angular/core';
+import { Observable, catchError, from, tap, throwError } from 'rxjs';
+import { UserManagementState } from '../states/user-management.state';
+import { User } from '../../../models/user';
+import { QueryParams } from '../../../models/query-params';
+import { UserManagementService } from '../services/user-management.service';
+import { UtilService } from '../../../services/util.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserManagementFacade {
+  constructor(
+    private userManagementService: UserManagementService,
+    private userManagementState: UserManagementState,
+    private utilService: UtilService
+  ) {
+    this.isUpdating$().subscribe((loading) => {
+      this.utilService.sendBI(loading);
+    });
+  }
+
+  isUpdating$(): Observable<boolean> {
+    return this.userManagementState.isUpdating$();
+  }
+
+  getUsers$(): Observable<User[]> {
+    return this.userManagementState.getUsers$();
+  }
+
+  getQueryParams$(): Observable<QueryParams<User>> {
+    return this.userManagementState.getQueryParams$();
+  }
+
+  async loadUsers(): Promise<void> {
+    try {
+      this.userManagementState.setUpdating(true);
+      const params = this.userManagementState.getQueryParamsValue() as QueryParams<User>;
+
+      const users = await this.userManagementService.getUsers(
+        params.skip,
+        params.limit,
+        params.sortParam || 'createdDate',
+        params.sortOrder
+      );
+
+      if (Array.isArray(users)) {
+        this.userManagementState.setUsers(users); // Safe to use
+      } else {
+        console.error('Error Response:', users);
+        throw new Error(users.ErrorMsg); // Assuming ErrorResponse has a `message` property
+      }
+    } catch (error) {
+      console.error('Failed to load users:', error);
+      throw error;
+    } finally {
+      this.userManagementState.setUpdating(false);
+    }
+  }
+
+  async loadUsersWithParam(param: string): Promise<void> {
+    try {
+      this.userManagementState.setUpdating(true);
+      const params = this.userManagementState.getQueryParamsValue();
+
+      const users = await this.userManagementService.getUsersWithParam(
+        param,
+        params.skip,
+        params.limit,
+        params.sortParam || 'createdDate',
+        params.sortOrder
+      );
+
+      this.userManagementState.setUsers(users);
+    } catch (error) {
+      console.error('Failed to load users with param:', error);
+      throw error;
+    } finally {
+      this.userManagementState.setUpdating(false);
+    }
+  }
+
+  updateQueryParams(params: Partial<QueryParams<User>>): void {
+    this.userManagementState.updateQueryParams(params);
+    this.loadUsers();
+  }
+
+  async addUser(user: Partial<User>): Promise<void> {
+    try {
+      this.userManagementState.setUpdating(true);
+      const newUser = { ...user } as User;
+      this.userManagementState.addUser(newUser);
+
+      await this.userManagementService.saveUsers([newUser]);
+      await this.loadUsers(); // Reload to reflect server-side changes
+    } catch (error) {
+      console.error('Failed to add user:', error);
+      this.userManagementState.removeUser(user.Id!);
+      throw error;
+    } finally {
+      this.userManagementState.setUpdating(false);
+    }
+  }
+
+  async updateUser(user: User): Promise<void> {
+    try {
+      this.userManagementState.setUpdating(true);
+      await this.userManagementService.saveUsers([user]);
+      this.userManagementState.updateUser(user);
+      this.utilService.showSuccess("User updated successfully");
+    } catch (error) {
+      console.error('Failed to update user:', error);
+      throw error;
+    } finally {
+      this.userManagementState.setUpdating(false);
+    }
+  }
+
+  async deleteUser(userId: string): Promise<void> {
+    try {
+      this.userManagementState.setUpdating(true);
+      await from(
+        this.userManagementService.deleteUsers([userId])
+      ).toPromise();
+      this.userManagementState.removeUser(userId);
+    } catch (error) {
+      console.error('Failed to delete user:', error);
+      throw error;
+    } finally {
+      this.userManagementState.setUpdating(false);
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+import { ObjectState } from '../../models/object-state';
+import { UserManagementService } from './services/user-management.service';
+
+import { UserAccessRequestStatus } from '../../models/user-access-request-status';
+import { OAuthType } from '../../models/OAuthType';
+import { User } from '../../models/user';
+
+// export const mockData: User[] = 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}`,
+//     Status: randomEnum(UserAccessRequestStatus),
+//     Address: `AAA Bloc2`,
+//     SignupType: OAuthType.InApp,
+//     Password: '1234567',
+//     ExpireOn: new Date(),
+//     IsSeeded: false,
+//     OTPExpireOn: new Date(),
+//     Tenants: [],
+
+//     CreatedAt: new Date(),
+//     UpdatedAt: new Date(),
+//     DataState: ObjectState.New,
+//     TenantId: `Tenant${id + i}`,
+//     Code: '',
+//     ServiceName: '',
+//   }));
+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-management/index.ts

@@ -0,0 +1,4 @@
+export * from './base-table-style';
+export * from './user-management.columns';
+export * from './services/user-management.service';
+export * from './user-management.component';

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

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

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

@@ -0,0 +1,111 @@
+  import { Injectable } from '@angular/core';
+  import { Observable } from 'rxjs';
+  import { HttpWebRequestService } from '../../../services/http-web-request.service';
+  import { ErrorResponse } from '../../../models/ErrorResponse';
+  import { PagedResult } from '../../../models/PagedResult';
+  import { User } from '../../../models/user';
+
+  @Injectable({
+    providedIn: 'root',
+  })
+  export class UserManagementService {
+    // private readonly BASE_URL = 'https://auth.white360.net/User';
+
+    constructor(private httpService: HttpWebRequestService) {}
+
+    /**
+     * Get users 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 list of users
+     */
+    async getUsers(
+      skip: number,
+      limit: number,
+      sortParam: string,
+      sortOrder: string
+    ): Promise<User[] | ErrorResponse> {
+      // var response : User[] | ErrorResponse;
+      const url = `User/GetUsers/${skip}/${limit}/${sortParam}/${sortOrder}`;
+      const res = await this.httpService.get(url)
+
+      if (res instanceof ErrorResponse) {
+        return res;
+      } else {
+        return (res as PagedResult<User>).Result;
+      }
+
+
+    }
+
+
+
+    /**
+     * Get users with an additional search 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 list of users
+     */
+    async getUsersWithParam(
+      param: string,
+      skip: number,
+      limit: number,
+      sortParam: string,
+      sortOrder: string
+    ): Promise<User[]> {
+      const url = `User/GetUserWithParam/${param}/${skip}/${limit}/${sortParam}/${sortOrder}`;
+      return await this.httpService.get(url) as User[];
+    }
+
+    async getRealUsers(
+      role: string | null,
+      skip: number,
+      limit: number,
+      sortParam: string,
+      sortOrder: string
+    ){
+      let url: string;
+    
+      if (role) {
+        // Role is provided, use the "GetUserWithParam" endpoint
+        url = `User/GetUserWithParam/${role}/${skip}/${limit}/${sortParam}/${sortOrder}`;
+      } else {
+        // Role is null, use the "GetUsers" endpoint
+        url = `User/GetUsers/${skip}/${limit}/${sortParam}/${sortOrder}`;
+      }
+    
+      const res = await this.httpService.get(url);
+    
+      if (res instanceof ErrorResponse) {
+        return res;
+      } else {
+        return (res as PagedResult<User>)
+      }
+    }
+    
+
+    /**
+     * Save multiple users
+     * @param users Array of users to save
+     * @returns Promise containing the save operation result
+     */
+    saveUsers(users: User[]): Promise<any> {
+      const url = `User/SaveUsers`;
+      return this.httpService.post(url, users);
+    }
+
+    /**
+     * Delete multiple users
+     * @param userIds Array of user IDs to delete
+     * @returns Observable containing the delete operation result
+     */
+    deleteUsers(userIds: string[]): Observable<any> {
+      const url = `User/DeleteUsers`;
+      return this.httpService.delete(`${url}?data=${userIds.join(',')}`);
+    }
+  }