verben-authentication-ui 1.0.2 → 1.0.3

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

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

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

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

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

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

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

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

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

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

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

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