verben-authentication-ui 0.3.3 → 0.3.5

package/src/lib/components/reset-password/reset-password.component.ts

@@ -1,108 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import {
-  AbstractControl,
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  ValidationErrors,
-  Validators,
-} from '@angular/forms';
-import { ResetPasswordData } from './ResetPasswordData';
-import { HttpWebRequestService } from '../../services/http-web-request.service';
-import { ErrorResponse } from '../../models/ErrorResponse';
-import { ResponseKeyValue } from '../../models/ResponseKeyValue';
-import { PasswordRequestParam } from '../../models/PasswordRequestParam';
-import { UtilService } from '../../services/util.service';
-
-@Component({
-  selector: 'verben-reset-password',
-  templateUrl: './reset-password.component.html',
-  styleUrl: './reset-password.component.css',
-})
-
-export class ResetPasswordComponent {
-  @Input() title: string = 'Reset Password';
-  @Input() subTitle: string = 'Create a New Password';
-  @Input() buttonCaption: string = 'Submit';
-  @Input() buttonTextColor?: string;
-  @Input() buttonBackgroundColor?: string;
-  @Input() showOldPassword: boolean = false;
-  @Input() token?: string;
-
-  @Output() onSubmit: EventEmitter<ResetPasswordData> = new EventEmitter();
-  @Output() onSubmitEnd: EventEmitter<ResponseKeyValue | ErrorResponse> =
-    new EventEmitter();
-
-  resetPasswordForm: FormGroup;
-
-  constructor(
-    private fb: FormBuilder,
-    private server: HttpWebRequestService,
-    private utilService: UtilService
-  ) {
-    this.resetPasswordForm = this.fb.group({
-      OldPassword: new FormControl<string | null>(
-        null,
-        this.oldPasswordValidator.bind(this)
-      ),
-      Password: new FormControl<string | null>(null, Validators.required),
-      ConfirmPassword: new FormControl<string | null>(null, [
-        Validators.required,
-        this.confirmPasswordValidator.bind(this),
-      ]),
-    });
-  }
-
-  checkForm(): boolean {
-    return this.resetPasswordForm.valid;
-  }
-
-  oldPasswordValidator(control: AbstractControl): ValidationErrors | null {
-    if (this.showOldPassword && control.value == null) {
-      return { customValidation: true };
-    }
-    return null;
-  }
-  confirmPasswordValidator(control: AbstractControl): ValidationErrors | null {
-    if (
-      this.resetPasswordForm &&
-      this.resetPasswordForm.controls['Password'] &&
-      this.resetPasswordForm.controls['Password'].value !== control.value
-    ) {
-      return { customValidation: true };
-    }
-    return null;
-  }
-
-  async submit() {
-    if (!this.checkForm()) {
-      return;
-    }
-    var data: ResetPasswordData = {
-      OldPassword: this.showOldPassword
-        ? this.resetPasswordForm.controls['OldPassword'].value
-        : undefined,
-      Password: this.resetPasswordForm.controls['Password'].value,
-      ConfirmPassword: this.resetPasswordForm.controls['ConfirmPassword'].value,
-    };
-    this.onSubmit.emit(data);
-    var passwordRequest: PasswordRequestParam = {
-      NewPassword: data.Password,
-      OldPassword: data.OldPassword,
-      Token: this.token,
-    };
-    this.utilService.sendBI(true);
-    const res = await this.server.post(
-      `User/CompleteChangePasswordRequest`,
-      passwordRequest
-    );
-    this.utilService.sendBI(false);
-    if (res instanceof ErrorResponse) {
-      this.onSubmitEnd.emit(res);
-    } else {
-      var result = res as ResponseKeyValue;
-      this.onSubmitEnd.emit(result);
-    }
-  }
-}
-

package/src/lib/components/reset-password/reset-password.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ResetPasswordComponent } from './reset-password.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { VerbenaButtonModule, VerbenaInputModule } from 'verben-ng-ui';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-  declarations: [ResetPasswordComponent],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    VerbenaInputModule,
-    VerbenaButtonModule,
-    CommonModule,
-  ],
-  exports: [ResetPasswordComponent],
-})
-export class ResetPasswordModule {}

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

@@ -1,21 +0,0 @@
-a{ 
-    text-decoration: underline;
-}
-
-.flexWrapper{ 
- display: flex;
- flex-direction: column;
- gap:20px;
- margin-top: 12px;
-}
-.formWrapper{ 
- display: flex;
- flex-direction: column;
- gap:20px;
-}
-
-.pwdWrapper{ 
- display: flex;
- justify-content: flex-end;
- cursor: pointer;
-}

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

@@ -1,84 +0,0 @@
-<section
-[ngStyle]="styles"
-class="{{ customClass }}"
->
-    <h2 class="{{headlingClass}}">{{headlingText}}</h2>
-    <form [formGroup]="loginForm" (ngSubmit)="submit()" class="flexWrapper"> 
-      <div class="formWrapper" *ngIf="showform"> 
-      <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>
-      <div> 
-        <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"
-        [customErrorMessages]="{
-          password:'length must be 5 characters'
-        }"
-        class="outline-none focus-none"
-      ></verbena-input>
-      <div class="pwdWrapper"> 
-          <p clas="mb-0"> <a [routerLink]="forgetPasswordLink" class="{{forgetPasswordClass}}">Forgot password</a></p>
-      </div>
-      </div>
-      <lib-button 
-      [buttonClass]="btnClass"
-      [color]="btnColor"
-      [border]="btnBorder"
-      [borderRadius]="btnBorderRadius"
-      [bgColor]="btnBgColor"
-      [pd]="btnPd"
-      [text]="btnText" 
-      type="submit" 
-      [disabled]="!this.checkForm()"
-      ></lib-button>
-    </div>
-    <div> 
-      <p *ngIf="requestAccessLink">
-        <a [routerLink]="requestAccessLink"  class="{{requestAccessClass}}">Click here to request user access</a>
-      </p>
-      <div> 
-        <div *ngIf="AuthMechanisms !== null"> 
-          <verben-o-auth 
-            [authMechanisms]="AuthMechanisms"
-            (googleClick)="handleGoogleAuth()"
-            (appleClick)="handleAppleAuth()"
-            (microsoftClick)="handleMicrosoft()"
-          ></verben-o-auth>
-        </div>
-          <p class="{{createAccountClass}}" *ngIf="createAccountLink">
-            Don't have an account?
-            <a [routerLink]="createAccountLink"  class="{{createAccountLinkClass}}">Create an account</a>
-          </p>
-      </div>
-    </div>
-  </form>
-  </section>
-  

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

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

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

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

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

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

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

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