verben-authentication-ui 1.0.1 → 1.0.3

package/src/lib/components/o-auth/o-auth.component.ts

@@ -0,0 +1,115 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AuthMechanism, MechanismType } from '../../models/auth-mechanism';
+import { ActivatedRoute, Router } from '@angular/router';
+import { HttpWebRequestService } from '../../services/http-web-request.service';
+import { UtilService } from '../../services/util.service';
+
+declare global {
+  interface Window {
+    google: any;
+  }
+}
+
+@Component({
+  selector: 'verben-o-auth',
+  templateUrl: './o-auth.component.html',
+  styleUrl: './o-auth.component.css',
+})
+export class OAuthComponent implements OnInit {
+  showGoogle: boolean = false;
+  showMicrosoft: boolean = false;
+  showApple: boolean = false;
+  @Input() authMechanisms: AuthMechanism[] | null = null;
+  @Output() emitMechanismFn = new EventEmitter<string>();
+  page: string = '';
+  type: string = '';
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.loadPage();
+    this.loadGoogleScript();
+    if (this.authMechanisms !== null) {
+      this.authMechanisms = this.authMechanisms.filter(
+        (item) => item.AuthMechanism !== MechanismType.InApp
+      );
+    }
+  }
+
+  loadPage() {
+    this.page = this.router.url;
+  }
+
+  loadGoogleScript(): void {
+    if (!document.getElementById('google-jssdk')) {
+      const script = document.createElement('script');
+      script.src = 'https://accounts.google.com/gsi/client';
+      script.id = 'google-jssdk';
+      script.async = true;
+      script.defer = true;
+      script.onload = () => console.log('Google SDK loaded');
+      script.onerror = () => console.log('Error loading Google SDK');
+      document.head.appendChild(script);
+    }
+  }
+
+  oAuthWithGoogle(data: AuthMechanism) {
+    this.type = data.AuthMechanism;
+    localStorage.setItem('type', JSON.stringify(this.type));
+    const redirectUri = encodeURIComponent(data.RedirectUri);
+    const scope = encodeURIComponent('openid email profile');
+    const responseType = 'code';
+    const state = encodeURIComponent(JSON.stringify({ returnTo: this.page }));
+    const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${data.ClientId}&redirect_uri=${redirectUri}&response_type=${responseType}&scope=${scope}&state=${state}`;
+    window.location.href = authUrl;
+  }
+
+  oAuthWithApple() {}
+
+  oAuthWithMicrosoft(data: AuthMechanism) {
+    this.type = data.AuthMechanism;
+    const cleanUrl = window.location.href.split('?')[0];
+    window.history.replaceState({}, document.title, cleanUrl);  // Update the URL without reloading
+    localStorage.setItem('type', JSON.stringify(this.type));
+    const redirectUri = encodeURIComponent(data.RedirectUri);
+    const scope = encodeURIComponent('openid email profile');
+    const responseType = 'code';
+    const state = encodeURIComponent(JSON.stringify({ returnTo: this.page }));
+    // const authUrl = `https://login.microsoftonline.com/${data.TenantId}/oauth2/v2.0/authorize?client_id=${data.ClientId}&response_type=${responseType}&redirect_uri=${redirectUri}&response_mode=query&state=${state}`;
+    const authUrl = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize
+?client_id=${data.ClientId}
+&response_type=${responseType}
+&redirect_uri=${redirectUri}&scope=${scope}
+&response_mode=query&state=${state}`;
+    window.location.href = authUrl;
+  }
+
+  checkForValue(value: string) {
+    switch (value) {
+      case MechanismType.Google:
+        return 'google-logo';
+      case MechanismType.Apple:
+        return 'apple-logo';
+      case MechanismType.MicrosoftAD:
+        return 'microsoft-logo';
+      default:
+        return '';
+    }
+  }
+
+  handleOauthClick(value: AuthMechanism) {
+    switch (value.AuthMechanism) {
+      case MechanismType.Google:
+        return this.oAuthWithGoogle(value);
+        break;
+      case MechanismType.Apple:
+        return this.oAuthWithApple();
+        break;
+      case MechanismType.MicrosoftAD:
+        return this.oAuthWithMicrosoft(value);
+        break;
+      default:
+        return '';
+    }
+  }
+}

package/src/lib/components/o-auth/o-auth.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VerbenaButtonModule, VerbenaInputModule } from 'verben-ng-ui';
+import { OAuthComponent } from './o-auth.component';
+
+@NgModule({
+  declarations: [OAuthComponent],
+  imports: [CommonModule,VerbenaInputModule,VerbenaButtonModule],
+  exports: [OAuthComponent]
+})
+export class OAuthModule {}

package/src/lib/components/otp-input/otp-input.component.css

@@ -0,0 +1,19 @@
+.otp-container {
+    display: flex;
+    gap: 15px;
+  }
+  
+  .otp-input {
+    width: 50px;
+    height: 46px;
+    text-align: center;
+    font-size: 1.5rem;
+    border: 1px solid #66666658;
+    border-radius: 12px;
+  }
+  
+
+  .otp-input:focus {
+    border-color: #FFE681;
+    outline: none;
+}

package/src/lib/components/otp-input/otp-input.component.html

@@ -0,0 +1,15 @@
+<form [formGroup]="otpForm" >
+  <div formArrayName="otpArray" class="otp-container">
+    <input
+      *ngFor="let control of otpArray.controls; let i = index"
+      [id]="'otp-input-' + i"
+      class="otp-input {{otpClass}}"
+      maxlength="1"
+      (input)="handleInput($event, i)"
+      (keydown)="handleKeydown($event, i)"
+      (paste)="handlePaste($event)"
+      [formControlName]="i"
+      type="text"
+    />
+  </div>
+</form>

package/src/lib/components/otp-input/otp-input.component.spec.ts

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

package/src/lib/components/otp-input/otp-input.component.ts

@@ -0,0 +1,88 @@
+import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
+import { FormBuilder, FormArray, FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'verben-otp-input',
+  templateUrl: './otp-input.component.html',
+  styleUrl: './otp-input.component.css'
+})
+export class OtpInputComponent implements OnInit {
+  @Input() length: number = 6;
+  @Input() otpClass: string = '';
+  @Output() otpChange = new EventEmitter<string>();
+
+  otpForm!: FormGroup;
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit() {
+    this.otpForm = this.fb.group({
+      otpArray: this.fb.array(Array(this.length).fill('').map(() => new FormControl('')))
+    });
+
+    this.otpArray.valueChanges.subscribe(() => {
+      this.emitOtp();
+    });
+  }
+
+  get otpArray(): FormArray {
+    return this.otpForm.get('otpArray') as FormArray;
+  }
+
+  handleInput(event: any, index: number) {
+    let value = event.target.value;
+
+    // /\d/.test(value)
+    if (value.length > 0) {
+      value = value.toUpperCase();
+      this.otpArray.at(index).setValue(value);
+
+      if (index < this.length - 1) {
+        this.focusNextInput(index);
+      }
+    } else {
+      this.otpArray.at(index).setValue(''); 
+    }
+  }
+
+  handleKeydown(event: KeyboardEvent, index: number) {
+    if (event.key === 'Backspace') {
+      const currentValue = this.otpArray.at(index).value;
+  
+      if (currentValue) {
+        this.otpArray.at(index).setValue('');
+      } else if (index > 0) {
+        this.focusPreviousInput(index);
+      }
+    }
+  }
+
+  handlePaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const pastedData = (event.clipboardData?.getData('text') || '').toUpperCase();
+    const validData = pastedData.slice(0, this.length);
+
+    validData.split('').forEach((char, index) => {
+      this.otpArray.at(index).setValue(char);
+    });
+
+    const nextIndex = validData.length < this.length ? validData.length : this.length - 1;
+    this.focusNextInput(nextIndex - 1);
+  }
+
+
+  private focusNextInput(index: number) {
+    const nextInput = document.getElementById(`otp-input-${index + 1}`);
+    nextInput?.focus();
+  }
+
+  private focusPreviousInput(index: number) {
+    const prevInput = document.getElementById(`otp-input-${index - 1}`);
+    prevInput?.focus();
+  }
+
+  private emitOtp() {
+    const otp = this.otpArray.value.join('');
+    this.otpChange.emit(otp);
+  }
+}

package/src/lib/components/otp-input/otp-input.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import {  VerbenaInputModule } from 'verben-ng-ui';
+import { OAuthModule } from '../o-auth/o-auth.module';
+import { ButtonModule } from '../button/button.module';
+import { OtpInputComponent } from './otp-input.component';
+
+@NgModule({
+  declarations: [OtpInputComponent],
+  imports: [CommonModule, FormsModule,VerbenaInputModule, RouterLink,ButtonModule,OAuthModule,ReactiveFormsModule],
+  exports: [OtpInputComponent]
+})
+export class OtpInputModule {}

package/src/lib/components/reset-password/ResetPasswordData.ts

@@ -0,0 +1,5 @@
+export interface ResetPasswordData {
+  OldPassword?: string;
+  Password: string;
+  ConfirmPassword: string;
+}

package/src/lib/components/reset-password/reset-password.component.css

@@ -0,0 +1,29 @@
+@import '../../../styles.css';
+
+.reset-password-container {
+  gap: 25px;
+  padding: 50px;
+  border: 1px solid rgba(102, 102, 102, 0.5);
+  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  border-radius: 24px;
+}
+
+.reset-password-title {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.reset-password-subtitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(102, 102, 102, 1);
+}
+
+.form-field {
+  gap: 5px;
+}
+
+.form-field-caption {
+  color: rgba(102, 102, 102, 1);
+  /* font-weight: 600; */
+}

package/src/lib/components/reset-password/reset-password.component.html

@@ -0,0 +1,24 @@
+<div [formGroup]="this.resetPasswordForm" class="reset-password-container flex flex-col">
+  <div class="reset-password-header flex flex-col">
+    <div class="reset-password-title">{{title}}</div>
+    <div class="reset-password-subtitle">{{subTitle}}</div>
+  </div>
+  <div *ngIf="showOldPassword" class="form-field flex flex-col">
+    <div class="form-field-caption">Old Password</div>
+    <verbena-input bgColor="white" borderRadius="12px" formControlName="OldPassword" [passwordToggle]="true"
+      type="password"></verbena-input>
+  </div>
+  <div class="form-field flex flex-col">
+    <div class="form-field-caption">New Password</div>
+    <verbena-input bgColor="white" borderRadius="12px" formControlName="Password" [passwordToggle]="true"
+      type="password"></verbena-input>
+  </div>
+  <div class="form-field flex flex-col">
+    <div class="form-field-caption">Confirm Password</div>
+    <verbena-input bgColor="white" borderRadius="12px" formControlName="ConfirmPassword" [passwordToggle]="true"
+      type="password"></verbena-input>
+  </div>
+  <verbena-button fontWeight="700" (click)="submit()" [text]="buttonCaption" width="100%" [textColor]="buttonTextColor"
+    [bgColor]="buttonBackgroundColor" borderRadius="25px" [disable]="!this.checkForm()"></verbena-button>
+
+</div>

package/src/lib/components/reset-password/reset-password.component.spec.ts

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

package/src/lib/components/reset-password/reset-password.component.ts

@@ -0,0 +1,108 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ValidationErrors,
+  Validators,
+} from '@angular/forms';
+import { ResetPasswordData } from './ResetPasswordData';
+import { HttpWebRequestService } from '../../services/http-web-request.service';
+import { ErrorResponse } from '../../models/ErrorResponse';
+import { ResponseKeyValue } from '../../models/ResponseKeyValue';
+import { PasswordRequestParam } from '../../models/PasswordRequestParam';
+import { UtilService } from '../../services/util.service';
+import CryptoJS from 'crypto-js';
+@Component({
+  selector: 'verben-reset-password',
+  templateUrl: './reset-password.component.html',
+  styleUrl: './reset-password.component.css',
+})
+
+export class ResetPasswordComponent {
+  @Input() title: string = 'Reset Password';
+  @Input() subTitle: string = 'Create a New Password';
+  @Input() buttonCaption: string = 'Submit';
+  @Input() buttonTextColor?: string;
+  @Input() buttonBackgroundColor?: string;
+  @Input() showOldPassword: boolean = false;
+  @Input() token?: string;
+
+  @Output() onSubmit: EventEmitter<ResetPasswordData> = new EventEmitter();
+  @Output() onSubmitEnd: EventEmitter<ResponseKeyValue | ErrorResponse> =
+    new EventEmitter();
+
+  resetPasswordForm: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    private server: HttpWebRequestService,
+    private utilService: UtilService
+  ) {
+    this.resetPasswordForm = this.fb.group({
+      OldPassword: new FormControl<string | null>(
+        null,
+        this.oldPasswordValidator.bind(this)
+      ),
+      Password: new FormControl<string | null>(null, Validators.required),
+      ConfirmPassword: new FormControl<string | null>(null, [
+        Validators.required,
+        this.confirmPasswordValidator.bind(this),
+      ]),
+    });
+  }
+
+  checkForm(): boolean {
+    return this.resetPasswordForm.valid;
+  }
+
+  oldPasswordValidator(control: AbstractControl): ValidationErrors | null {
+    if (this.showOldPassword && control.value == null) {
+      return { customValidation: true };
+    }
+    return null;
+  }
+  confirmPasswordValidator(control: AbstractControl): ValidationErrors | null {
+    if (
+      this.resetPasswordForm &&
+      this.resetPasswordForm.controls['Password'] &&
+      this.resetPasswordForm.controls['Password'].value !== control.value
+    ) {
+      return { customValidation: true };
+    }
+    return null;
+  }
+
+  async submit() {
+    if (!this.checkForm()) {
+      return;
+    }
+    var data: ResetPasswordData = {
+      OldPassword: this.showOldPassword
+        ? String(CryptoJS.MD5(this.resetPasswordForm.controls['OldPassword'].value))
+        : undefined,
+      Password: String(CryptoJS.MD5(this.resetPasswordForm.controls['Password'].value)),
+      ConfirmPassword: String(CryptoJS.MD5(this.resetPasswordForm.controls['ConfirmPassword'].value)),
+    };
+    this.onSubmit.emit(data);
+    var passwordRequest: PasswordRequestParam = {
+      NewPassword: data.Password,
+      OldPassword: data.OldPassword,
+      Token: this.token,
+    };
+    this.utilService.sendBI(true);
+    const res = await this.server.post(
+      `User/CompleteChangePasswordRequest`,
+      passwordRequest
+    );
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+      this.onSubmitEnd.emit(res);
+    } else {
+      var result = res as ResponseKeyValue;
+      this.onSubmitEnd.emit(result);
+    }
+  }
+}
+

package/src/lib/components/reset-password/reset-password.module.ts

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

package/src/lib/components/role-control/ChildrenType.ts

@@ -0,0 +1,4 @@
+export enum ChildrenType {
+  Permission = 'Permission',
+  Action = 'Action',
+}

package/{lib/components/role-control/MappedRole.d.ts → src/lib/components/role-control/MappedRole.ts}

@@ -1,7 +1,8 @@
 import { Role } from '../../models/Role';
 import { MappedRoleContext } from './MappedRoleContext';
 import { ChildrenType } from './ChildrenType';
+
 export interface MappedRole extends Role {
-    RoleContexts: MappedRoleContext[];
-    ChildrenType: ChildrenType;
+  RoleContexts: MappedRoleContext[];
+  ChildrenType: ChildrenType;
 }

package/{lib/components/role-control/MappedRoleAction.d.ts → src/lib/components/role-control/MappedRoleAction.ts}

@@ -1,4 +1,5 @@
 import { RoleAction } from '../../models/RoleAction';
+
 export interface MappedRoleAction extends RoleAction {
-    Selected: boolean;
+  Selected: boolean;
 }

package/{lib/components/role-control/MappedRoleContext.d.ts → src/lib/components/role-control/MappedRoleContext.ts}

@@ -1,8 +1,9 @@
 import { RoleContext } from '../../models/RoleContext';
 import { ChildrenType } from './ChildrenType';
 import { MappedRoleAction } from './MappedRoleAction';
+
 export interface MappedRoleContext extends RoleContext {
-    Selected: boolean;
-    RoleActions: MappedRoleAction[];
-    ChildrenType: ChildrenType;
+  Selected: boolean;
+  RoleActions: MappedRoleAction[];
+  ChildrenType: ChildrenType;
 }

package/src/lib/components/role-control/UIActions.ts

@@ -0,0 +1,5 @@
+export enum UIActions {
+  Save = 'Save',
+  Edit = 'Edit',
+  Delete = 'Delete',
+}

package/src/lib/components/role-control/UIs.ts

@@ -0,0 +1,38 @@
+export enum UIs {
+  ProductDistribution = 'ProductDistribution',
+  Terminals = 'Terminals',
+  Meters = 'Meters',
+  ProductInbound = 'ProductInbound',
+  TerminalDocumentation = 'TerminalDocumentation',
+  Laboratories = 'Laboratories',
+  Surveyors = 'Surveyors',
+  Products = 'Products',
+  Stocks = 'Stocks',
+  Tanks = 'Tanks',
+  Customers = 'Customers',
+  ProductAllocation = 'ProductAllocation',
+  ReleaseManagement = 'ReleaseManagement',
+  ProductPricing = 'ProductPricing',
+  Purchases = 'Purchases',
+  Agents = 'Agents',
+  Banks = 'Banks',
+  Vendors = 'Vendors',
+  Vessels = 'Vessels',
+  ExpenseList = 'ExpenseList',
+  ProcurementDocumentation = 'ProcurementDocumentation',
+  Journal = 'Journal',
+  JournalTemplate = 'JournalTemplate',
+  RecurringJournal = 'RecurringJournal',
+  InterCompanyJournal = 'InterCompanyJournal',
+  InterCompanyJournalTemplate = 'InterCompanyJournalTemplate',
+  UserManagement = 'UserManagement',
+  AccessRequest = 'AccessRequest',
+  RolesAndPermissions = 'RolesAndPermissions',
+  AuditTrail = 'AuditTrail',
+  LogViewer = 'LogViewer',
+  MessageHistory = 'MessageHistory',
+  MessageConfig = 'MessageConfig',
+  MessageList = 'MessageList',
+  Config = 'Config',
+  Reports = 'Reports',
+}

package/src/lib/components/role-control/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,
+  },
+};