verben-authentication-ui 1.0.3 → 1.0.4

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

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

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,137 +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="MailAddress"
-      [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
-    *ngIf="!hidePassword"
-      [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
-    *ngIf="!hidePassword"
-      [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>
-  </form>
-
-  <div class="mt-2" *ngIf="AuthMechanisms !== null"> 
-    <verben-o-auth 
-      [authMechanisms]="AuthMechanisms"
-    ></verben-o-auth>
-  </div>
-</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();
-  });
-});

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

@@ -1,306 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import {
-  AbstractControl,
-  FormBuilder,
-  FormControl,
-  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';
-import { AuthMechanism, MechanismType } from '../../models/auth-mechanism';
-import { ActivatedRoute } from '@angular/router';
-import { OAuthResponse } from '../../models/oauth-response';
-import { Role } from '../../models/Role';
-import CryptoJS from 'crypto-js';
-@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';
-  isFormEditable: boolean = true;
-  tenant: string;
-  secret: string;
-  hidePassword: boolean = false;
-  isCode: boolean = false;
-  @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() microsoftClick = new EventEmitter();
-  @Output() onSubmitGoogleAuth: EventEmitter<ResponseKeyValue | ErrorResponse> =
-    new EventEmitter();
-  @Output() onSubmitResponseEnd: EventEmitter<any> = new EventEmitter();
-  userRequestForm: FormGroup;
-  tenantDetails: any | null = null;
-  AuthMechanisms: AuthMechanism[] | null = null;
-  showform: boolean = false;
-  code: string = '';
-  type: string = '';
-  constructor(
-    private fb: FormBuilder,
-    private server: HttpWebRequestService,
-    private utilService: UtilService,
-    private envSvc: EnvironmentService,
-    private route: ActivatedRoute
-  ) {
-    this.tenant = this.envSvc.environment.Tenant;
-    this.secret = this.envSvc.environment.Secret;
-    this.userRequestForm = this.fb.group<{
-      [K in keyof UserRequestPayload]: FormControl<UserRequestPayload[K]>;
-    }>(
-      {
-        Code: new FormControl('', { nonNullable: true }),
-        FirstName: new FormControl('', {
-          nonNullable: true,
-          validators: [Validators.required],
-        }),
-        LastName: new FormControl('', {
-          nonNullable: true,
-          validators: [Validators.required],
-        }),
-        MailAddress: new FormControl('', {
-          nonNullable: true,
-          validators: [Validators.required, Validators.email],
-        }),
-        Password: new FormControl('', {
-          nonNullable: true,
-          validators: [Validators.required, Validators.minLength(8)],
-        }),
-        PhoneNumber: new FormControl('', { nonNullable: true }),
-        OtherName: new FormControl('', { nonNullable: true }),
-        Role: new FormControl<Role>(
-          {
-            Name: '',
-            Description: '',
-            Application: '',
-            RoleContexts: [],
-            APIKey: '',
-            Id: '',
-            id: '',
-            ServiceName: '',
-            CreatedAt: new Date(),
-            UpdatedAt: new Date(),
-            DataState: ObjectState.New,
-            TenantId: '',
-            Code: '',
-          },
-          { nonNullable: true }
-        ),
-        Tags: new FormControl<[]>([], { nonNullable: true }),
-        Status: new FormControl<Status>(Status.Active, { nonNullable: true }),
-        RequestStatus: new FormControl<RequestStatus>(RequestStatus.Pending, {
-          nonNullable: true,
-        }),
-        UpdatedAt: new FormControl(new Date(), { nonNullable: true }),
-        CreatedAt: new FormControl(new Date(), { nonNullable: true }),
-        Id: new FormControl('', { nonNullable: true }),
-        DataState: new FormControl<ObjectState>(ObjectState.New, {
-          nonNullable: true,
-        }),
-        TenantId: new FormControl('', { nonNullable: true }),
-        Token: new FormControl('', { nonNullable: true }),
-        SignUpType: new FormControl(MechanismType.InApp, { nonNullable: true }),
-        ServiceName: new FormControl('', { nonNullable: true }),
-        ActionBy: new FormControl('', { nonNullable: true }),
-        Comment: new FormControl('', { nonNullable: true }),
-      },
-      { 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,
-    };
-  }
-  async ngOnInit() {
-    await this.getTenantConfig();
-    this.route.queryParams.subscribe((params) => {
-      this.code = params['code'];
-      this.type = params['type'];
-      if (this.code) {
-        this.verifyUserDetails();
-      }
-    });
-  }
-
-  async getTenantConfig() {
-    this.userRequestForm.addControl(
-      'ConfirmPassword',
-      new FormControl('', Validators.required)
-    );
-    const isLocalhost = window?.location?.hostname === 'localhost';
-    const payload = isLocalhost
-    ? {
-        Key: "UrlKey",
-        Value:'https://bovas.white360.net'
-      }
-    : undefined;
-    const res = await this.server.post(
-      `Tenant/GetTenantConfigByUrlKey`,
-      payload
-    );
-    this.tenantDetails = res;
-    this.AuthMechanisms = this.tenantDetails?.AuthMechanisms;
-    if (
-      !this.tenantDetails?.AuthMechanism &&
-      this.tenantDetails?.AuthMechanism !== MechanismType.InApp
-    ) {
-      this.showform = false;
-    } else if (this.tenantDetails?.AuthMechanism === MechanismType.InApp) {
-      this.showform = true;
-    } else if (this.AuthMechanisms !== null) {
-      this.showform = this.AuthMechanisms.some((item) =>
-        item.AuthMechanism.includes(MechanismType.InApp)
-      );
-    }
-  }
-  checkForm(): boolean {
-    return this.userRequestForm.valid;
-  }
-  handleGoogleAuth() {
-    if (this.AuthMechanisms !== null) {
-      const data = this.AuthMechanisms.filter(
-        (item) => item.AuthMechanism === MechanismType.Google
-      );
-      this.googleClick.emit();
-    }
-  }
-  handleAppleAuth() {
-    this.appleClick.emit();
-  }
-  handleMicrosoft() {
-    if (this.AuthMechanisms !== null) {
-      const data = this.AuthMechanisms.filter(
-        (item) => item.AuthMechanism === MechanismType.MicrosoftAD
-      );
-      this.microsoftClick.emit();
-    }
-  }
-
-  async submitForm() {
-    if (!this.checkForm()) {
-      return;
-    }
-
-    const formValue = this.userRequestForm.getRawValue();
-    const hashedPassword = CryptoJS.MD5(this.userRequestForm.controls['Password'].value).toString();
-    const { ConfirmPassword, TenantId,  ...rest } = formValue;
-    const payload = {
-      ...rest,
-      TenantId: this.tenantDetails.TenantId,
-      Password:hashedPassword
-    };
-    
-
-    const payloadToSubmit: UserRequestPayload[] = [payload];
-
-    this.formSubmit.emit(payloadToSubmit);
-    this.utilService.sendBI(true);
-
-    try {
-      const res = await this.server.post(
-        `User/SaveUserAccessRequests`,
-        payloadToSubmit
-      );
-
-      this.utilService.sendBI(false);
-
-      if (res instanceof ErrorResponse) {
-        this.onSubmitResponseEnd.emit(res);
-      } else {
-        const result = res as ResponseKeyValue;
-        this.onSubmitResponseEnd.emit(result);
-        this.onSubmitSuccess.emit(result);
-      }
-    } catch (error) {
-      this.utilService.sendBI(false);
-      console.error('Unexpected error:', error);
-      this.onSubmitResponseEnd.emit(error);
-    }
-  }
-  async verifyUserDetails() {
-    if (this.AuthMechanisms !== null && this.tenant) {
-      const data: any = this.AuthMechanisms.find((item) =>
-        item.AuthMechanism.includes(this.type)
-      );
-      const payload = {
-        AuthCode: this.code,
-        Tenant: this.tenant,
-        AuthMechanism: data.AuthMechanism,
-      };
-
-      this.utilService.sendBI(true);
-      const res: OAuthResponse = await this.server.post(
-        `Authentication/GetUserDetails`,
-        payload
-      );
-      this.utilService.sendBI(false);
-      if (res instanceof ErrorResponse) {
-        this.onSubmitGoogleAuth.emit(res);
-      } else {
-        this.userRequestForm.controls['FirstName'].setValue(res.FirstName);
-        this.userRequestForm.controls['LastName'].setValue(res.LastName);
-        this.userRequestForm.controls['MailAddress'].setValue(res.Email);
-        this.userRequestForm.controls['Token'].setValue(res.AccessToken);
-        this.userRequestForm.controls['SignUpType'].setValue(this.type);
-        this.userRequestForm.controls['Password'].clearValidators();
-        this.userRequestForm.controls['Password'].updateValueAndValidity();
-        this.userRequestForm.controls['ConfirmPassword'].clearValidators();
-        this.userRequestForm.controls[
-          'ConfirmPassword'
-        ].updateValueAndValidity();
-        this.hidePassword = true;
-      }
-    }
-  }
-}

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

@@ -1,20 +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';
-import { OAuthModule } from '../o-auth/o-auth.module';
-
-@NgModule({
-  declarations: [UserRequestComponent],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    VerbenaInputModule,
-    VerbenaButtonModule,
-    CommonModule,
-    OAuthModule
-  ],
-  exports: [UserRequestComponent],
-})
-export class UserRequestModule {}

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

@@ -1,31 +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: 'role',
-    header: 'ROLE',
-    accessorFn: (row) => row.Role?.Name,
-  },
-  {
-    id: 'status',
-    header: 'STATUS',
-    accessorKey: 'RequestStatus',
-  },
-  { 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,
-  },
-};