verben-authentication-ui 1.0.3 → 1.0.4

package/src/lib/components/sign-up/sign-up.component.ts

@@ -1,180 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import {
-  AbstractControl,
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  ValidationErrors,
-  ValidatorFn,
-  Validators,
-} from '@angular/forms';
-import { SignUpData } from '../../models/sign-up';
-import { HttpWebRequestService } from '../../services/http-web-request.service';
-import { ErrorResponse } from '../../models/ErrorResponse';
-import { ResponseKeyValue } from '../../models/ResponseKeyValue';
-import { UtilService } from '../../services/util.service';
-import { ObjectState } from '../../models/object-state';
-import { EncryptionService } from '../../services/encryption.service';
-import CryptoJS from 'crypto-js';
-@Component({
-  selector: 'verben-sign-up',
-  templateUrl: './sign-up.component.html',
-  styleUrl: './sign-up.component.css',
-})
-export class SignUpComponent {
-  @Input() headlingText: string = 'Create an account';
-  @Input() width: string = '';
-  @Input() maxWidth: string = '';
-  @Input() margin: string = '';
-  @Input() pd: string = '';
-  @Input() customClass: string = '';
-  @Input() headlingClass: 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() height: string = 'auto';
-  @Input() textColor: string = '#333';
-  @Input() disabled: boolean = false;
-
-  // button styles
-  @Input() btnClass: string = '';
-  @Input() btnBgColor: string = '#FFE681';
-  @Input() btnColor: string = '';
-  @Input() btnBorder: string = '';
-  @Input() btnBorderRadius: string = '24px';
-  @Input() btnPd: string = '';
-  @Input() btnText: string = 'Create account';
-
-  //inputStyles
-  @Input() inputLabelColor: string = '';
-  @Input() inputBgColor: string = 'transparent';
-  @Input() inputBorder: string = '1px solid #66666659';
-  @Input() inputBorderRadius: string = '12px';
-
-  // links
-  @Input() termsLink: string = '';
-  @Input() privacyLink: string = '';
-  @Input() routerLink: string = '';
-
-  @Output() formSubmit = new EventEmitter<SignUpData>();
-  @Output() onSubmitEnd: EventEmitter<ResponseKeyValue | ErrorResponse> =
-    new EventEmitter();
-  @Output() googleClick = new EventEmitter();
-  @Output() appleClick = new EventEmitter();
-
-  signUpForm: FormGroup;
-
-  constructor(
-    private fb: FormBuilder,
-    private server: HttpWebRequestService,
-    private utilService: UtilService,
-      private encryptionService: EncryptionService
-  ) {
-    this.signUpForm = this.fb.group(
-      {
-        Firstname: new FormControl<string | null>(null, Validators.required),
-        Lastname: new FormControl<string | null>(null, Validators.required),
-        Email: new FormControl<string | null>(null, [
-          Validators.required,
-          Validators.email,
-        ]),
-        Password: new FormControl<string | null>(null, [
-          Validators.required,
-          Validators.minLength(8),
-        ]),
-        Confirmpassword: new FormControl<string | null>(null, [
-          Validators.required,
-          Validators.minLength(8),
-        ]),
-        Terms: new FormControl<boolean>(false, [Validators.requiredTrue]),
-      },
-      { validators: this.passwordMatchValidator }
-    );
-  }
-
-  private passwordMatchValidator: ValidatorFn = (
-    group: AbstractControl
-  ): ValidationErrors | null => {
-    const password = group.get('Password')?.value;
-    const confirmPassword = group.get('Confirmpassword')?.value;
-    return password === confirmPassword ? null : { passwordMismatch: true };
-  };
-
-  checkForm(): boolean {
-    return this.signUpForm.valid;
-  }
-
-  async submit() {
-    if (!this.checkForm()) {
-      return;
-    }
-    const data: SignUpData = {
-      Firstname: this.signUpForm.controls['Firstname'].value,
-      Lastname: this.signUpForm.controls['Lastname'].value,
-      Email: this.signUpForm.controls['Email'].value,
-      Password:String(CryptoJS.MD5(this.signUpForm.controls['Password'].value)),
-      Terms: this.signUpForm.controls['Terms'].value,
-      Id: '61f7e48f0c651345677b7775',
-      CreatedAt: new Date(),
-      UpdatedAt: new Date(),
-      DataState: ObjectState.New,
-      id: '61f7e48f0c651345677b7775',
-      TenantId: 'James',
-      Code: '',
-      ServiceName: '',
-    };
-    const payload = [
-      {
-        ...data,
-        Code: '123 ',
-        ServiceName: 'Test 1',
-        MailAddress: data.Email,
-        OtherName: 'James',
-        Status: 'Inactive',
-        PhoneNumber: '07012345678',
-        TenantId: '61f7e48f0c651345677b7775',
-        Role: ['tester'],
-        Tags: [
-          {
-            Name: 'checker',
-            IsOptional: true,
-          },
-        ],
-      },
-    ];
-
-    this.formSubmit.emit(data);
-    this.utilService.sendBI(true);
-    const res = await this.server.post(`User/SaveUsers`, payload);
-    this.utilService.sendBI(false);
-    if (res instanceof ErrorResponse) {
-      this.onSubmitEnd.emit(res);
-    } else {
-      var result = res as ResponseKeyValue;
-      this.onSubmitEnd.emit(result);
-    }
-  }
-
-  handleGoogleAuth() {
-    this.googleClick.emit();
-  }
-  handleAppleAuth() {
-    this.appleClick.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/sign-up/sign-up.module.ts

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

package/src/lib/components/sso/base-table-style.ts

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

package/src/lib/components/sso/helper.ts

@@ -1,17 +0,0 @@
-import { ObjectState } from '../../models/object-state';
-import { SingleSignOn } from '../../models/single-sign-on';
-
-export const mockData: SingleSignOn[] = new Array(10).fill(1).map((id, i) => ({
-  Name: `Name ${id + i}`,
-  Id: id,
-  id: id.toString(),
-  Description: `Sign in option ${id + i}`,
-  Logo: `./assets/images/test-logo.png`,
-  Link: `Link ${id + i}`,
-  CreatedAt: new Date(),
-  UpdatedAt: new Date(),
-  DataState: ObjectState.New,
-  TenantId: `Tenant ${id + i}`,
-  Code: '',
-  ServiceName: '',
-}));

package/src/lib/components/sso/sso-form/sso-form.component.css

@@ -1,13 +0,0 @@
-#logo{
-    display: none;
-}
-.icon-width{
-    width: 20px;
-}
-.icon-width2{
-    width: 15px;
-}
-.icon-container{
-    width: 30px;
-    height: 30px;
-}

package/src/lib/components/sso/sso-form/sso-form.component.html

@@ -1,109 +0,0 @@
-<form
-  [formGroup]="form"
-  class="flex flex-col px-3 pb-3 rounded-xl h-full w-full relative"
->
-  <verbena-input
-    name="Name"
-    label="Name:"
-    formControlName="Name"
-    [(ngModel)]="currentData?.data.Name"
-  />
-  <verbena-input
-    label="Description:"
-    name="Description"
-    formControlName="Description"
-    [(ngModel)]="currentData?.data.Description"
-  />
-  <verbena-input
-  label="Link:"
-  name="Link"
-  formControlName="Link"
-  [(ngModel)]="currentData?.data.Link"
-/>
-<span class="block my-2 ">Logo</span>
-<label [style.background-color]="'#f9f9f9'" class="border cursor-pointer border-secondary-200 rounded-md w-full px-4 py-2 flex justify-between">
-  <span *ngIf="!uploadedFileName">{{isUploading?"uploading...":"Upload a photo"}}</span>
-  <span *ngIf="fileUploadError" class="error">{{ fileUploadError }}</span>
-  <div *ngIf="uploadedFileName" class="flex items-center text-sm gap-2 border border-primary rounded-lg px-3 ">
-    <span>{{ uploadedFileName }}</span>
-    <button
-      [style.color]="'black'"
-      type="button"
-      (click)="removeFile()"
-    >
-      &#x2715;
-    </button>
-  </div>
-  <input
-  id="logo"
-[type]="'file'"
-  label="Logo:"
-  name="Logo"
-  accept="image/png"
-  formControlName="Logo"
-  (change)="onFileSelected($event)"
-  formControlName="Logo"
-/>
-<span class="flex gap-2">
-<span class="bg-primary flex icon-container rounded-md justify-center items-center">
-  <img src="./assets/icons/cam.png" class="icon-width"/>
-</span>
-<span  class="bg-primary flex icon-container rounded-md justify-center items-center">
-  <img src="./assets/icons/file.png" class="icon-width2"/>
-</span>
-</span>
-</label>
-
-  <!-- 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="Delete"
-      [bgColor]="'#999999'"
-      [textColor]="'#404040'"
-      borderRadius="10px"
-    ></verbena-button>
-    <verbena-button
-      (click)="switchView.emit()"
-      text="Switch To Table"
-      styleType="ylw-outline"
-    ></verbena-button>
-    <verbena-button
-      text="Save"
-      bgColor="#28a745"
-      textColor="#404040"
-      borderRadius="10px"
-      pd="10px 20px"
-      [bgColor]="'#FFE681'"
-      width="114px"
-      height="39px"
-    ></verbena-button>
-  </div>
-</form>

package/src/lib/components/sso/sso-form/sso-form.component.spec.ts

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

package/src/lib/components/sso/sso-form/sso-form.component.ts

@@ -1,70 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { CardData } from 'verben-ng-ui';
-
-
-@Component({
-  selector: 'lib-sso-form',
-  templateUrl: './sso-form.component.html',
-  styleUrl: './sso-form.component.css',
-})
-export class SsoFormComponent {
-  isUploading: boolean = false;
-  uploadedFileName: string | null = null;
-  fileUploadError: string | null = null;
-  @Input() currentData:CardData|null=null
-  @Output() switchView = new EventEmitter<undefined>();
-
-  form: FormGroup;
-
-  constructor(private fb: FormBuilder) {
-    this.form = this.fb.group({
-      Description: [''],
-      Name: [''],
-      Link: [''],
-      Logo: [''],
-    });
-  }
-
-  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');
-  }
-  onFileSelected(event: Event) {
-    const input = event.target as HTMLInputElement;
-    if (input.files && input.files.length > 0) {
-      const file = input.files[0];
-      this.fileUploadError = null;
-      if (!file) {
-        this.isUploading = true;
-      }
-      if (file.size > 5000000) {
-        this.fileUploadError = 'File size exceeds 5MB limit.';
-        this.uploadedFileName = null;
-        this.isUploading = false; // Reset isUploading state
-      } else {
-        this.uploadedFileName = file.name;
-      }
-    } else {
-      this.isUploading = false;
-    }
-  }
-
-  removeFile() {
-    this.uploadedFileName = null;
-    this.fileUploadError = null;
-    const fileInput = document.getElementById('attachment') as HTMLInputElement;
-    if (fileInput) {
-      fileInput.value = '';
-    }
-  }
-
-}

package/src/lib/components/sso/sso.columns.ts

@@ -1,32 +0,0 @@
-
-import { ColumnDefinition } from 'verben-ng-ui';
-import { SingleSignOn } from '../../models/single-sign-on';
-
-export const columns: ColumnDefinition<SingleSignOn>[] = [
-  {
-    id: 'createdAt',
-    header: 'Created',
-    accessorKey: 'CreatedAt',
-  },
-  {
-    id: 'name',
-    header: 'Name',
-    accessorKey: 'Name',
-  },
-  {
-    id: 'description',
-    header: 'Description',
-    accessorKey: 'Description',
-  },
-  {
-    id: 'link',
-    header: 'Link',
-    accessorKey: 'Link',
-  },
-  {
-    id: 'logo',
-    header: 'Logo',
-    accessorKey: 'Logo',
-  },
-  { id: 'actions', header: 'Actions', accessorKey: 'Name' },
-];

package/src/lib/components/sso/sso.component.css

@@ -1,47 +0,0 @@
-.flex {
-  display: flex;
-}
-.w-full {
-  width: 100%;
-}
-.bg-secondary-200 {
-  background-color: #e8eaf1;
-}
-.flex-col {
-  flex-direction: column;
-}
-.items-center{
-    align-items: center;
-}
-.bg-primary {
-  background-color: #d4a007;
-}
-.border-primary{
-    border:1px solid #d4a007;
-}
-.rounded-lg{
-    border-radius: 20px;
-}
-.w-3 {
-  width: 6px;
-}
-.rounded-tr-none {
-  border-top-right-radius: 0;
-}
-
-.rounded-br-none {
-  border-bottom-right-radius: 0;
-}
-.bg-secondary-100 {
-    background-color: rgba(128, 128, 128, 0.055);
-
-}
-.bg-secondary{
-    background-color: #E8EAF1;
-}
-.p-2{
-    padding: 6px;
-}
-.logo-width{
-  width: 70px;
-}