verben-authentication-ui 0.3.2 → 0.3.3

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

@@ -0,0 +1,184 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ValidationErrors,
+  Validators,
+} from '@angular/forms';
+import { LoginData } from '../../models/log-in';
+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 { EnvironmentService } from '../../services/environment.service'
+import { AuthMechanism, MechanismType } from '../../models/auth-mechanism';
+
+
+@Component({
+  selector: 'verben-sign-in',
+  templateUrl: './sign-in.component.html',
+  styleUrl: './sign-in.component.css'
+})
+
+export class SignInComponent implements OnInit {
+  @Input() headlingText: string = 'Sign in';
+  @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() textColor: string = '#333';
+  @Input() height: string = 'auto';
+  @Input() forgetPasswordClass: string = '';
+  @Input() requestAccessClass: string = '';
+  @Input() createAccountClass: string = '';
+  @Input() createAccountLinkClass: string = '';
+
+  // links
+  @Input() forgetPasswordLink: string = '';
+  @Input() createAccountLink: string = '';
+  @Input() requestAccessLink: string = '';
+
+  // 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 = 'Log in';
+
+  //inputStyles
+   @Input() inputLabelColor: string = ''
+   @Input() inputBgColor: string = 'transparent'
+   @Input() inputBorder: string = '1px solid #66666659'
+   @Input() inputBorderRadius: string = '12px'
+   @Input() termsErrorText: string = 'Please agree to the terms of use and privacy policy.'
+
+   @Output() formSubmit = new EventEmitter<LoginData>();
+   @Output() onSubmitEnd: EventEmitter<ResponseKeyValue | ErrorResponse> = new EventEmitter();
+   @Output() googleClick = new EventEmitter();
+   @Output() microsoftClick = new EventEmitter();
+   @Output() appleClick = new EventEmitter();
+ 
+  tenantDetails:any | null = null;
+  AuthMechanisms:AuthMechanism[] | null = null
+  showform:boolean = false;
+  loginForm: FormGroup;
+  apiKey:string;
+  secret:string;
+
+  constructor(private fb: FormBuilder,
+    private server: HttpWebRequestService,
+    private utilService: UtilService,
+    private envSvc: EnvironmentService,
+  ) {
+    this.loginForm = this.fb.group({
+      Email: new FormControl<string | null>(null, [
+        Validators.required,
+        Validators.email,
+      ]),
+      Password: new FormControl<string | null>(null, [
+        Validators.required,
+        Validators.minLength(5),
+      ]),
+    });
+   this.apiKey =  this.envSvc.environment.APIKey
+   this.secret =  this.envSvc.environment.Secret
+  }
+
+  ngOnInit(){ 
+    this.getTenantConfig()
+  }
+
+  async getTenantConfig(){ 
+    const res = await this.server.get(
+      `Tenant/GetTenantConfigByKey/${this.apiKey}`
+    );
+   this.tenantDetails = res;
+   this.AuthMechanisms =  this.tenantDetails?.AuthMechanisms;
+   if(!this.tenantDetails?.AuthMechanism && this.tenantDetails?.AuthMechanism !== MechanismType.InApp){ 
+    this.showform = false;
+   }else if(this.tenantDetails?.AuthMechanism === MechanismType.InApp){ 
+    this.showform = true;
+   }else  if(this.AuthMechanisms !== null){ 
+    this.showform = this.AuthMechanisms.some(item =>
+      item.AuthMechanism.includes(MechanismType.InApp)
+    ) 
+   } 
+  }
+ 
+  checkForm(): boolean {
+    return this.loginForm.valid;
+  }
+
+  async submit() {
+    if (!this.checkForm()) {
+      return;
+    }
+    
+    const data: LoginData = {
+      MailAddress: this.loginForm.controls['Email'].value,
+      Password: this.loginForm.controls['Password'].value,
+      LoginType:this.tenantDetails?.AuthMechanism,
+      APIKey:this.apiKey,
+      Secrete:this.secret
+    };
+    
+    this.formSubmit.emit(data);
+
+    this.utilService.sendBI(true);
+    const res = await this.server.post(
+      `Authentication/Login`,data
+    );
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+      this.onSubmitEnd.emit(res);
+    } else {
+      var result = res as ResponseKeyValue;
+      this.onSubmitEnd.emit(result);
+    }
+  }
+
+  handleGoogleAuth() {
+    if(this.AuthMechanisms !== null){ 
+      const data = this.AuthMechanisms.filter(item => item.AuthMechanism === MechanismType.Google)
+      this.googleClick.emit();
+    }
+  }
+  handleMicrosoft(){ 
+    if(this.AuthMechanisms !== null){ 
+      const data = this.AuthMechanisms.filter(item => item.AuthMechanism === MechanismType.MicrosoftAD)
+      this.microsoftClick.emit();
+    }
+  }
+  handleAppleAuth() {
+    if(this.AuthMechanisms !== null){ 
+      const data = this.AuthMechanisms.filter(item => item.AuthMechanism === MechanismType.Apple)
+      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-in/sign-in.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SignInComponent } from '../sign-in/sign-in.component';
+import { FormsModule } from '@angular/forms';
+import { RouterLink} from '@angular/router';
+import { VerbenaButtonModule, 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: [SignInComponent],
+  imports: [CommonModule,FormsModule,VerbenaInputModule,VerbenaButtonModule,RouterLink,OAuthModule,ButtonModule,ReactiveFormsModule],
+  exports: [SignInComponent]
+})
+export class SignInModule {}
+

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

@@ -0,0 +1,36 @@
+a{ 
+    text-decoration: underline;
+    cursor: pointer;
+}
+  input[type="checkbox"]:checked {
+    accent-color: #111;
+  }
+
+  .flexWrapper{ 
+    display: flex;
+    flex-direction: column;
+    gap:10px;
+  }
+
+  .checkBoxWrapper{ 
+    display: flex;
+    align-items: start;
+    gap:2px;
+  }
+
+  .checBoxInput{ 
+    margin-top:6px
+  }
+
+  .bigcheckboxWrapper{ 
+    margin-top: 0.5rem;
+   margin-bottom: 1.5rem;
+  }
+
+  .error-text{ 
+    color:red
+  }
+
+  .disable-btn{
+    cursor: not-allowed;
+  }

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

@@ -0,0 +1,132 @@
+<section [ngStyle]="styles" class="{{ customClass }}">
+    <h2 class="{{headlingClass}}">
+      {{headlingText}}
+    </h2>
+    <form [formGroup]="signUpForm" (ngSubmit)="submit()" class="flexWrapper">
+      <verbena-input
+        [label]="'First name'"
+        [labelColor]="inputLabelColor"
+        [placeHolder]="''"
+        [required]="true"
+        [type]="'text'"
+        formControlName="Firstname"
+        [showBorder]="true"
+        [bgColor]="inputBgColor"
+        [border]="inputBorder"
+        [borderRadius]="inputBorderRadius"
+        [showErrorMessage]="true"
+        [errorMessageColor]="'red'"
+        [errorBorderColor]="'red'"
+        [errorPosition]="'bottom'"
+        class="outline-none focus-none"
+        [customErrorMessages]="{required:'First name is required'}"
+      ></verbena-input>
+      <verbena-input
+        [label]="'Last name'"
+        [labelColor]="inputLabelColor"
+        [placeHolder]="''"
+        [required]="true"
+        [type]="'text'"
+        formControlName="Lastname"
+        [showBorder]="true"
+        [bgColor]="inputBgColor"
+        [border]="inputBorder"
+        [borderRadius]="inputBorderRadius"
+        [showErrorMessage]="true"
+        [errorMessageColor]="'red'"
+        [errorBorderColor]="'red'"
+        [errorPosition]="'bottom'"
+        class="outline-none focus-none"
+        [customErrorMessages]="{required:'Last name is required'}"
+      ></verbena-input>
+      <verbena-input
+        [label]="'Email'"
+        [labelColor]="inputLabelColor"
+        [placeHolder]="''"
+        [required]="true"
+        [type]="'email'"
+        formControlName="Email"
+        [showBorder]="true"
+        [bgColor]="inputBgColor"
+        [border]="inputBorder"
+        [borderRadius]="inputBorderRadius"
+        [showErrorMessage]="true"
+        [errorMessageColor]="'red'"
+        [errorBorderColor]="'red'"
+        [errorPosition]="'bottom'"
+        class="outline-none focus-none"
+      ></verbena-input>
+      <verbena-input
+        [label]="'Password'"
+        [labelColor]="inputLabelColor"
+        [placeHolder]="''"
+        [required]="true"
+        [type]="'password'"
+        formControlName="Password"
+        [showBorder]="true"
+        [bgColor]="inputBgColor"
+        [border]="inputBorder"
+        [borderRadius]="inputBorderRadius"
+        [showErrorMessage]="true"
+        [errorMessageColor]="'red'"
+        [errorBorderColor]="'red'"
+        [errorPosition]="'bottom'"
+        [passwordToggle]="true"
+        class="outline-none focus-none"
+      ></verbena-input>
+      <div> 
+        <verbena-input
+          [label]="'Confirm Password'"
+          [labelColor]="inputLabelColor"
+          [placeHolder]="''"
+          [required]="true"
+          [type]="'password'"
+          formControlName="Confirmpassword"
+          [showBorder]="true"
+          [bgColor]="inputBgColor"
+          [border]="inputBorder"
+          [borderRadius]="inputBorderRadius"
+          [showErrorMessage]="false"
+          [errorBorderColor]="'red'"
+          class="outline-none focus-none"
+        ></verbena-input>
+      <span *ngIf="signUpForm.hasError('passwordMismatch') && signUpForm.get('Confirmpassword')?.dirty"> 
+        <small class="error-text">Passwords do not match.</small>
+      </span>
+      </div>
+      <div> 
+        <div class="checkBoxWrapper">
+          <input type="checkbox" id="terms" formControlName="Terms"  class="checBoxInput" />
+          <label for="terms" 
+          class="break-all font-normal leading-6"
+            >By creating an account, I agree to our <a  [attr.href]="termsLink">Terms of use</a> and
+            <a [attr.href]="privacyLink">Privacy Policy</a></label
+          >
+        </div>
+       <p *ngIf="signUpForm.controls['Terms'].invalid && signUpForm.controls['Terms'].touched">
+        <small class="error-text">Please agree to the terms of use and privacy policy.</small>
+       </p>
+      </div>
+      <lib-button 
+      [buttonClass]="btnClass"
+      [color]="btnColor"
+      [border]="btnBorder"
+      [borderRadius]="btnBorderRadius"
+      [bgColor]="btnBgColor"
+      [pd]="btnPd"
+      [text]="btnText" 
+      type="submit"
+      [disabled]="!this.checkForm()"
+      [ngStyle]="{'margin-top':'10px'}"
+      ></lib-button>
+      <verben-o-auth 
+      (googleClick)="handleGoogleAuth()"
+      (appleClick)="handleAppleAuth()"
+      ></verben-o-auth>
+      <p>
+        Already have an account?
+        <a [routerLink]="routerLink"  class="">Log in</a>
+      </p>
+    </form>
+  </section>
+  

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

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

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

@@ -0,0 +1,176 @@
+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';
+
+
+@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
+  ) {
+    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: this.signUpForm.controls['Password'].value,
+      Terms: this.signUpForm.controls['Terms'].value,
+      Id:'61f7e48f0c651345677b7775' ,
+      CreatedAt: new Date(),
+      UpdatedAt: new Date(),
+      DataState: ObjectState.New,
+      id:'61f7e48f0c651345677b7775',
+      Tenant:'James'
+    };
+
+    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,15 @@
+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,
+  Tenant: `Tenant ${id + i}`,
+}));

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