verben-authentication-ui 1.0.2 → 1.0.3

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,91 @@
+/* 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

@@ -0,0 +1,137 @@
+<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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,306 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -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: '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,
+  },
+};