verben-authentication-ui 0.3.1 → 0.3.3

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

@@ -0,0 +1,42 @@
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { UserAccessRequest } from '../../models/user-access-request';
+
+export interface ServiceConfig {
+  resourceEndpoint: string;
+}
+
+export const SERVICE_CONFIG = new InjectionToken<ServiceConfig>(
+  'ServiceConfig'
+);
+
+@Injectable()
+export class UserRequestApprovalService {
+  // protected readonly baseUrl: string;
+  protected readonly resourceEndpoint: string;
+
+  constructor(
+    protected httpClient: HttpClient,
+    @Inject(SERVICE_CONFIG) config: ServiceConfig
+  ) {
+    // this.baseUrl = environment.serviceUrl;
+    this.resourceEndpoint = config.resourceEndpoint;
+  }
+
+  getUserRequests() {
+    return this.httpClient.get<UserAccessRequest[]>(`${this.resourceEndpoint}`);
+  }
+
+  getUserRequestById(id: number) {
+    return this.httpClient.get<UserAccessRequest>(
+      `${this.resourceEndpoint}/${id}`
+    );
+  }
+
+  processUserReuqests(ids: string[], approval: boolean = true) {
+    return this.httpClient.post<UserAccessRequest[]>(
+      `${this.resourceEndpoint}`,
+      ids
+    );
+  }
+}

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,165 @@
+<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="Email"
+      [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
+      [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
+      [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>
+    <div class="flex justify-center items-center OR">
+      <span></span>
+      OR
+      <span></span>
+  </div>
+
+    <verbena-button
+      svg="google-logo"
+      [svgHeight]="24"
+      [svgWidth]="24"
+      (click)="handleGoogleAuth()"
+      text="Continue with Google"
+      bgColor="white"
+      textColor="black"
+      border="1px solid #333"
+      borderRadius="40px"
+      pd="10px 20px"
+      width="100%"
+      svgPosition="left"
+      buttonClass="font-normal text-[24px] leading-[29.05px] text-[#333]"
+    ></verbena-button>
+
+    <verbena-button
+      svg="apple-logo"
+      (click)="handleAppleAuth()"
+      [svgHeight]="24"
+      [svgWidth]="24"
+      text="Continue with Apple"
+      bgColor="white"
+      textColor="black"
+      border="1px solid #333"
+      borderRadius="40px"
+      pd="10px 20px"
+      width="100%"
+      svgPosition="left"
+      buttonClass="font-normal text-[24px] leading-[29.05px] text-[#333] mt-2"
+    ></verbena-button>
+  </form>
+</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,167 @@
+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

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

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

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