verben-authentication-ui 0.3.2 → 0.3.3

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+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();
+  });
+});

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

@@ -0,0 +1,45 @@
+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: 'address',
+    header: 'ADDRESS',
+    accessorKey: 'Address',
+  },
+  {
+    id: 'role',
+    header: 'ROLE',
+    accessorKey: 'Role',
+  },
+  {
+    id: 'status',
+    header: 'STATUS',
+    accessorKey: 'Status',
+  },
+  {
+    id: 'actions',
+    header: 'ACTIONS',
+    accessorKey: 'MailAddress',
+  },
+];

package/src/lib/components/user-management/user-management.component.css

@@ -0,0 +1,26 @@
+@import "../../../theme/tailwind.css";
+
+.master-only-contanier{
+  margin-top: 0 !important;
+}
+
+.scroll-no::-webkit-scrollbar{
+  width: 4px;
+}
+
+.scroll-no::-webkit-scrollbar-thumb{
+  background: grey;
+}
+.justify-pp{
+  justify-content: start !important;
+  margin-top: 0 !important;
+}
+.toolbar{
+  margin: 0 !important;
+}
+
+@media screen and (max-width: 1024px) {
+  .scroll-no{
+    padding: 5px ;
+  }
+}