verben-authentication-ui 0.3.3 → 0.3.4

package/src/lib/components/mail-validation/mail-validation.component.css

@@ -1,59 +0,0 @@
-/* Container Styles */
-.flex {
-    display: flex;
-  }
-  .overflow-hidden {
-    overflow: hidden;
-  }
-  .h-full {
-    height: 100%;
-  }
-  
-  .underline {
-    text-decoration: underline;
-  }
-  
-  .mt-4 {
-    margin-top: 1rem;
-  }
-  .resend{
-    color: blue;
-  }
-  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
-    margin-top: 1rem;
-  }
-  .gap-1 > :not([hidden]) ~ :not([hidden]) {
-    gap: 0.25rem;
-  }
-  .pt-3 {
-    padding-top: 0.75rem;
-  }
-  .mt-5 {
-    margin-top: 1.25rem;
-  }
-  
-  /* Form and Input Styles */
-  .border {
-    border-width: 1px;
-  }
-  
-  .rounded-xl {
-    border-radius: 0.75rem;
-  }
-  .px-3 {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-  .py-3 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-  .flex-col {
-    flex-direction: column;
-  }
-  .w-full {
-    width: 100%;
-  }
-
-  
- 

package/src/lib/components/mail-validation/mail-validation.component.html

@@ -1,37 +0,0 @@
-<section  [ngStyle]="styles" class="{{ customClass }}">
-  <div *ngIf="currentStep === 'linkSent'">
-    <p [style.color]="textColor" [style.font-size]="textSize">
-      Follow the link sent to your e-mail to verify your e-mail address
-    </p>
-    <p class="mt-4" (click)="handleResendOtp()">
-      Didn't get a link? <a href="#" class="underline resend">Resend</a>
-    </p>
-  </div>
-
-  <div *ngIf="currentStep === 'verified'">
-    <p [style.color]="textColor" [style.font-size]="textSize">
-      Your e-mail has been verified! You will be notified when your access has
-      been authorized
-    </p>
-  </div>
-
-  <div *ngIf="currentStep === 'accessGranted'">
-    <p [style.color]="textColor" [style.font-size]="textSize">
-    Your e-mail has been verified!
-    </p>
-  <div class="mt-4">
-    <verbena-button
-    [text]="text"
-    [bgColor]="btnBgColor"
-    [textColor]="color"
-    [border]="btnBorder"
-    [borderRadius]="btnBorderRadius"
-    [pd]="btnPd"
-    (click)="handleLogin()"
-    [width]="btnWidth"
-    textSize="'22px'"
-    buttonClass="font-medium text-[22px] leading-[33px]"
-  ></verbena-button>
-  </div>
-  </div>
-</section>

package/src/lib/components/mail-validation/mail-validation.component.spec.ts

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

package/src/lib/components/mail-validation/mail-validation.component.ts

@@ -1,66 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'lib-mail-validation',
-  templateUrl: './mail-validation.component.html',
-  styleUrls: ['./mail-validation.component.css']
-})
-export class MailValidationComponent {
-  @Input() customClass: 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 = '#666666';
-  @Input() height: string = 'auto';
-  @Input() pd: string = '32px 48px';
-  @Input() width: string = '600px';
-  @Input() text: string = 'Login';
-  @Input() textAlign: string = 'center';
-  @Input() color: string = 'black';
-  @Input() textSize: string = '32px';
-  @Input() btnBorder: string = '1px solid #FFE681';
-  @Input() btnBorderRadius: string = "40px";
-  @Input() btnBgColor: string = '#FFE681';
-  @Input() btnWidth: string = '100%';
-  @Input() btnPd: string = '7px 10px';
-
-  @Output() resendOtp = new EventEmitter<void>();
-  @Output() proceedToNextStep = new EventEmitter<'verified' | 'accessGranted'>();
-  @Output() login = new EventEmitter<void>();
-
-  currentStep: 'linkSent' | 'verified' | 'accessGranted' = 'linkSent';
-
-  handleResendOtp() {
-    this.resendOtp.emit();
-  }
-
-  goToNextStep() {
-    switch (this.currentStep) {
-      case 'linkSent':
-        this.currentStep = 'verified';
-        this.proceedToNextStep.emit(this.currentStep);
-        break;
-      case 'verified':
-        this.currentStep = 'accessGranted';
-        this.proceedToNextStep.emit(this.currentStep);
-        break;
-    }
-  }
-  get styles() {
-    return {
-      'background-color': this.bgColor,
-      'box-shadow': this.boxShadow,
-      'border': this.border,
-      'border-radius': this.borderRadius,
-      'color': this.textColor,
-      'max-width': this.width,
-      'margin': '0 auto',
-      'height': this.height,
-      'padding': this.pd,
-    };
-  }
-  handleLogin() {
-    this.login.emit();
-  }
-}

package/src/lib/components/mail-validation/mail-validation.module.ts

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

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

@@ -1,21 +0,0 @@
-hr {
-    height: 1px;
-    margin: 0; 
-    border:1px solid #66666640;
-    flex:1
-  }
-
- .OR{ 
-  margin: 0 2px;
-  color:#666666
- } 
-.oauthWrapper{ 
-  display: flex;
- flex-direction: column;
-  gap:12px;
-}
-.OrFlexWrapper{ 
-  display: flex;
-  align-items: center;
-  gap:8px;
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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