verben-authentication-ui 0.3.3 → 0.3.5

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

@@ -1,183 +0,0 @@
-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';
-
-@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: "verbena@gmail.com",
-    Password: "Default",
-    LoginType: "InApp",
-    APIKey: "PDLTC6",
-    Secrete: "$White360$",
-    RedirectUri: "/auth/otp"
-  };
-  
-  @Input() User:MainUser = {
-    Code: '024',
-    TenantId: '53b1c579bdf3de74f76bdac9',
-    Id: '53b1c579bdf3de74f76bdac9',
-    ServiceName: 'chinedu',
-    MailAddress: 'nwaekwuchinedu@gmail.com',
-    PhoneNumber: '070',
-    FirstName: 'nwaekwu',
-    LastName: 'chinedu',
-    OtherName: 'chinedu',
-    Role: [],
-    Tags: [
-      {
-      Name: "tester",
-      IsOptional: true
-    }],
-    Password: 'Default',
-    Status: 'Active',
-    CreatedAt: new Date(),
-    UpdatedAt: new Date(),
-    DataState: ObjectState.New
-  }
-
-  @Input() OtpData:OtpData = {
-    User: this.User,
-    Token: '',
-    ValidateUrl: '',
-    Secret: '',
-    OTP: '',
-    Info: ''
-  }
-
-  @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() 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,
-    };
-    
-
-    if (this.otpForm.valid) {
-      // this.buttonClick.emit(this.otpForm.get('otpValue')?.value);
-      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,
-      APIKey:this.resendOtpData?.APIKey,
-      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

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

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

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

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

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

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

@@ -1,52 +0,0 @@
-export const baseStyle: any = {
-  width:"100%",
-  fontFamily: '"Fraunces", serif',
-  fontSize: '80%',
-  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,
-  },
-};

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

@@ -1,29 +0,0 @@
-import { ObjectState } from '../../models/object-state';
-import { UserAccessRequest } from '../../models/user-access-request';
-import { UserAccessRequestStatus } from '../../models/user-access-request-status';
-
-export const mockData: UserAccessRequest[] = 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}`,
-    RequestStatus: UserAccessRequestStatus.Pending,
-    Address: `AAA Block`,
-
-    Password: '1234567',
-    ExpireOn: new Date(),
-    IsSeeded: false,
-    OTPExpireOn: new Date(),
-    Tenants: [],
-    Role: ['Manager'],
-
-    CreatedAt: new Date(),
-    UpdatedAt: new Date(),
-    DataState: ObjectState.New,
-    Tenant: `Tenant${id + i}`,
-  }));

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

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

package/src/lib/components/user-management/useer-management.module.ts

@@ -1,48 +0,0 @@
-
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UserManagementComponent } from './user-management.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import {
-  CardDataViewModule,
-  CardModule,
-  DataExportModule,
-  DataTableModule,
-  DataViewModule,
-  SortTableModule,
-  SvgModule,
-  TableFilterModule,
-  VerbenaButtonModule,
-  VerbenaInputModule,
-  VisibleColumnModule,
-  DropDownModule,
-
-  VerbenaBadgeModule
-} from 'verben-ng-ui';
-import { UserManagementFormComponent } from './user-management-form/use-management-form.component';
-
-@NgModule({
-  declarations: [UserManagementComponent, UserManagementFormComponent],
-  imports: [
-    CommonModule,
-
-    DataTableModule,
-    CardModule,
-    SvgModule,
-    DataViewModule,
-    CardDataViewModule,
-    SortTableModule,
-    VisibleColumnModule,
-    TableFilterModule,
-    DataExportModule,
-    FormsModule,
-    ReactiveFormsModule,
-    VerbenaInputModule,
-    VerbenaButtonModule,
-    VerbenaBadgeModule,
-    DropDownModule
-  ],
-  exports: [UserManagementComponent],
-})
-export class LibUserManagementModule {}

package/src/lib/components/user-management/user-management-form/use-management-form.component.ts

@@ -1,61 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { CardData } from 'verben-ng-ui';
-// import { roles } from '../helper';
-
-interface UserFormData {
-  MailAddress: string;
-  Name: string;
-  PhoneNumber: string;
-}
-
-@Component({
-  selector: 'lib-user-request-form',
-  templateUrl: './user-management-form.component.html',
-  styleUrl: './user-management-form.component.css',
-})
-export class UserManagementFormComponent {
-  @Input() set currentData(value: CardData | null) {
-    if (value?.data) {
-      this.form.patchValue({
-        MailAddress: value.data.MailAddress || '',
-        Name: value.data.Name || '',
-        PhoneNumber: value.data.PhoneNumber || '',
-      });
-    } else {
-      this.form.reset();
-    }
-  }
-  @Output() switchView = new EventEmitter<undefined>();
-
-  form: FormGroup;
-
-  roles: { id: string; name: string }[] = [
-    { id: 'admin', name: 'Admin' },
-    { id: 'manager', name: 'Manager' },
-    { id: 'staff', name: 'Staff' },
-  ];
-
-  constructor(private fb: FormBuilder) {
-    this.form = this.fb.group({
-      MailAddress: ['', { readonly: true }],
-      Name: ['', { readonly: true }],
-      PhoneNumber: ['', { readonly: true }],
-      RoleId: [''],
-    });
-  }
-
-  ngOnInit(): void {}
-
-  onSave(): void {
-    if (this.form.valid) {
-      // Emit save event with form value
-      console.log('Form saved:', this.form.value);
-    }
-  }
-
-  onDelete(): void {
-    // Emit delete event
-    console.log('Delete requested');
-  }
-}

package/src/lib/components/user-management/user-management-form/user-management-form.component.html

@@ -1,91 +0,0 @@
-<form
-  [formGroup]="form"
-  class="flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4"
->
-  <verbena-input
-    name="MailAddress"
-    label="Mail Address:"
-    [type]="'email'"
-    formControlName="MailAddress"
-  />
-  <verbena-input label="Name:" name="Name" type="text" formControlName="Name" />
-  <verbena-input
-    label="Phone Number:"
-    name="PhoneNumber"
-    type="tel"
-    formControlName="PhoneNumber"
-  />
-
-  <div class="space-y-1">
-    <label for="role">Role</label>
-
-    <verben-drop-down
-      label="Role"
-      styleClass="w-full"
-      width="100%"
-      [multiselect]="false"
-      [filter]="true"
-      [showClear]="true"
-      placeholder=""
-      [(options)]="roles"
-      id="role"
-      optionLabel="name"
-      optionValue="id"
-      formControlName="RoleId"
-      class="form-control"
-    >
-    </verben-drop-down>
-  </div>
-
-  <!-- buttons -->
-  <div
-    class="flex justify-between bottom-8 left-0 right-0 px-3 pb-2 absolute"
-    style="
-      display: flex;
-      justify-content: space-between;
-      position: absolute;
-      padding: 8px 12px;
-      right: 0;
-      left: 0;
-      bottom: 32;
-    "
-  >
-    <!-- <verbena-button
-      text="Delete"
-      class="bg-secondary-200 text-[black]"
-      (click)="onDelete()"
-    />
-    <verbena-button
-      text="Save"
-      class="bg-primary text-[black]"
-      (click)="onSave()"
-    />
-
-    <verbena-button
-      text="Secondary Button"
-      styleType="secondary"
-    ></verbena-button> -->
-    <verbena-button
-      width="114px"
-      height="39px"
-      text="Reject"
-      styleType="danger"
-      borderRadius="10px"
-    ></verbena-button>
-    <verbena-button
-      (click)="switchView.emit()"
-      text="Switch To Table"
-      styleType="ylw-outline"
-    ></verbena-button>
-    <verbena-button
-      text="Approve"
-      bgColor="#28a745"
-      textColor="white"
-      border="1px solid #28a745"
-      borderRadius="10px"
-      pd="10px 20px"
-      width="114px"
-      height="39px"
-    ></verbena-button>
-  </div>
-</form>

package/src/lib/components/user-management/user-management-form/user-management-form.component.spec.ts

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