verben-authentication-ui 0.3.2 → 0.3.3

package/src/lib/components/o-auth/o-auth.component.html

@@ -0,0 +1,60 @@
+<section class="oauthWrapper"> 
+    <div class="OrFlexWrapper">
+        <hr/>
+        <span>OR</span>
+        <hr/>
+    </div>
+     <span *ngIf="showMicrosoft"> 
+       <verbena-button
+       svg="microsoft-logo"
+       [svgHeight]="24"
+       [svgWidth]="24"
+       text="Continue with Microsoft"
+       bgColor="white"
+       textColor="black"
+       border="1px solid #333"
+       borderRadius="40px"
+       pd="10px 20px"
+       width="100%"
+       svgPosition="left"
+       buttonClass="font-normal text-[24px] leading-[29.05px] text-[#333] mt-2"
+       (click)="oAuthWithMicrosoft()"
+       ></verbena-button>
+     </span> 
+
+    <span *ngIf="showGoogle"> 
+      <verbena-button
+      svg="google-logo"
+      [svgHeight]="24"
+      [svgWidth]="24"
+      text="Continue with Google"
+      bgColor="white"
+      textColor="black"
+      border="1px solid #333"
+      borderRadius="40px"
+      pd="10px 20px"
+      width="100%"
+      svgPosition="left"
+      buttonClass="font-normal text-[24px] leading-[29.05px] text-[#333] mt-2"
+      (click)="oAuthWithGoogle()"
+      ></verbena-button>
+    </span>
+   
+    <span *ngIf="showApple"> 
+      <verbena-button
+      svg="apple-logo"
+      [svgHeight]="24"
+      [svgWidth]="24"
+      text="Continue with Apple"
+      bgColor="white"
+      textColor="black"
+      border="1px solid #333"
+      borderRadius="40px"
+      pd="10px 20px"
+      width="100%"
+      svgPosition="left"
+      buttonClass="font-normal text-[24px] leading-[29.05px] text-[#333] mt-2"
+      (click)="oAuthWithApple()"
+      ></verbena-button>
+    </span>
+</section>

package/src/lib/components/o-auth/o-auth.component.spec.ts

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

package/src/lib/components/o-auth/o-auth.component.ts

@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AuthMechanism, MechanismType } from '../../models/auth-mechanism';
+
+@Component({
+  selector: 'verben-o-auth',
+  templateUrl: './o-auth.component.html',
+  styleUrl: './o-auth.component.css'
+})
+export class OAuthComponent implements OnInit {
+  showGoogle:boolean = false;
+  showMicrosoft:boolean = false;
+  showApple:boolean = false;
+  @Input() authMechanisms:AuthMechanism[] | null = null
+  @Output() microsoftClick = new EventEmitter<void>();
+  @Output() googleClick = new EventEmitter<void>();
+  @Output() appleClick = new EventEmitter<void>();
+
+
+  ngOnInit(): void {
+      if(this.authMechanisms !== null ){ 
+       this.showMicrosoft = this.authMechanisms.some(item =>
+          item.AuthMechanism.includes(MechanismType.MicrosoftAD)
+        );
+       this.showGoogle = this.authMechanisms.some(item =>
+          item.AuthMechanism.includes(MechanismType.Google)
+        );
+       this.showApple = this.authMechanisms.some(item =>
+          item.AuthMechanism.includes(MechanismType.Apple)
+        );
+      }  
+  }
+
+  oAuthWithMicrosoft(){
+    this.microsoftClick.emit(); 
+  }
+  oAuthWithGoogle(){
+    this.googleClick.emit(); 
+  }
+  oAuthWithApple(){
+    this.appleClick.emit(); 
+  }
+
+}

package/src/lib/components/o-auth/o-auth.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VerbenaButtonModule, VerbenaInputModule } from 'verben-ng-ui';
+import { OAuthComponent } from './o-auth.component';
+
+@NgModule({
+  declarations: [OAuthComponent],
+  imports: [CommonModule,VerbenaInputModule,VerbenaButtonModule],
+  exports: [OAuthComponent]
+})
+export class OAuthModule {}

package/src/lib/components/otp-input/otp-input.component.css

@@ -0,0 +1,19 @@
+.otp-container {
+    display: flex;
+    gap: 15px;
+  }
+  
+  .otp-input {
+    width: 50px;
+    height: 46px;
+    text-align: center;
+    font-size: 1.5rem;
+    border: 1px solid #66666658;
+    border-radius: 12px;
+  }
+  
+
+  .otp-input:focus {
+    border-color: #FFE681;
+    outline: none;
+}

package/src/lib/components/otp-input/otp-input.component.html

@@ -0,0 +1,14 @@
+<form [formGroup]="otpForm" >
+  <div formArrayName="otpArray" class="otp-container">
+    <input
+      *ngFor="let control of otpArray.controls; let i = index"
+      [id]="'otp-input-' + i"
+      class="otp-input {{otpClass}}"
+      maxlength="1"
+      (input)="handleInput($event, i)"
+      (keydown)="handleKeydown($event, i)"
+      [formControlName]="i"
+      type="text"
+    />
+  </div>
+</form>

package/src/lib/components/otp-input/otp-input.component.spec.ts

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

package/src/lib/components/otp-input/otp-input.component.ts

@@ -0,0 +1,73 @@
+import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
+import { FormBuilder, FormArray, FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'verben-otp-input',
+  templateUrl: './otp-input.component.html',
+  styleUrl: './otp-input.component.css'
+})
+export class OtpInputComponent implements OnInit {
+  @Input() length: number = 6;
+  @Input() otpClass: string = '';
+  @Output() otpChange = new EventEmitter<string>();
+
+  otpForm!: FormGroup;
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit() {
+    this.otpForm = this.fb.group({
+      otpArray: this.fb.array(Array(this.length).fill('').map(() => new FormControl('')))
+    });
+
+    this.otpArray.valueChanges.subscribe(() => {
+      this.emitOtp();
+    });
+  }
+
+  get otpArray(): FormArray {
+    return this.otpForm.get('otpArray') as FormArray;
+  }
+
+  handleInput(event: any, index: number) {
+    const value = event.target.value;
+
+    // /\d/.test(value)
+    if (value.length > 0) {
+      this.otpArray.at(index).setValue(value);
+
+      if (index < this.length - 1) {
+        this.focusNextInput(index);
+      }
+    } else {
+      this.otpArray.at(index).setValue(''); 
+    }
+  }
+
+  handleKeydown(event: KeyboardEvent, index: number) {
+    if (event.key === 'Backspace') {
+      const currentValue = this.otpArray.at(index).value;
+  
+      if (currentValue) {
+        this.otpArray.at(index).setValue('');
+      } else if (index > 0) {
+        this.focusPreviousInput(index);
+      }
+    }
+  }
+
+  private focusNextInput(index: number) {
+    const nextInput = document.getElementById(`otp-input-${index + 1}`);
+    nextInput?.focus();
+  }
+
+  private focusPreviousInput(index: number) {
+    const prevInput = document.getElementById(`otp-input-${index - 1}`);
+    prevInput?.focus();
+  }
+
+  private emitOtp() {
+    const otp = this.otpArray.value.join('');
+    this.otpChange.emit(otp);
+  }
+}

package/src/lib/components/otp-input/otp-input.module.ts

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

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

@@ -0,0 +1,5 @@
+export interface ResetPasswordData {
+  OldPassword?: string;
+  Password: string;
+  ConfirmPassword: string;
+}

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

@@ -0,0 +1,29 @@
+@import '../../../styles.css';
+
+.reset-password-container {
+  gap: 25px;
+  padding: 50px;
+  border: 1px solid rgba(102, 102, 102, 0.5);
+  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  border-radius: 24px;
+}
+
+.reset-password-title {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.reset-password-subtitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(102, 102, 102, 1);
+}
+
+.form-field {
+  gap: 5px;
+}
+
+.form-field-caption {
+  color: rgba(102, 102, 102, 1);
+  /* font-weight: 600; */
+}

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

@@ -0,0 +1,22 @@
+<div [formGroup]="this.resetPasswordForm" class="reset-password-container flex flex-col">
+  <div class="reset-password-header flex flex-col">
+    <div class="reset-password-title">{{title}}</div>
+    <div class="reset-password-subtitle">{{subTitle}}</div>
+  </div>
+  <div *ngIf="showOldPassword" class="form-field flex flex-col">
+    <div class="form-field-caption">Old Password</div>
+    <verbena-input bgColor="white" borderRadius="12px" formControlName="OldPassword" type="password"></verbena-input>
+  </div>
+  <div class="form-field flex flex-col">
+    <div class="form-field-caption">New Password</div>
+    <verbena-input bgColor="white" borderRadius="12px" formControlName="Password" type="password"></verbena-input>
+  </div>
+  <div class="form-field flex flex-col">
+    <div class="form-field-caption">Confirm Password</div>
+    <verbena-input bgColor="white" borderRadius="12px" formControlName="ConfirmPassword"
+      type="password"></verbena-input>
+  </div>
+  <verbena-button fontWeight="700" (click)="submit()" [text]="buttonCaption" width="100%" [textColor]="buttonTextColor"
+    [bgColor]="buttonBackgroundColor" borderRadius="25px" [disable]="!this.checkForm()"></verbena-button>
+
+</div>

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

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

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

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

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

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

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

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