verben-authentication-ui 1.0.12 → 1.0.13

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

@@ -1,90 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import {
-  AbstractControl,
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  ValidationErrors,
-  Validators,
-} from '@angular/forms';
-import { ForgotPasswordData } from './ForgotPasswordData';
-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 { EnvironmentService } from '../../services/environment.service';
-
-@Component({
-  selector: 'verben-forgot-password',
-  templateUrl: './forgot-password.component.html',
-  styleUrl: './forgot-password.component.css',
-})
-export class ForgotPasswordComponent {
-  @Input() title: string = 'Forgot Password';
-  @Input() subTitle: string = 'Enter the e-mail you used during registration';
-  @Input() buttonCaption: string = 'Submit';
-  @Input() buttonTextColor?: string;
-  @Input() buttonBackgroundColor?: string;
-  @Input() tenant: string = '';
-
-  @Output() onSubmit: EventEmitter<ForgotPasswordData> = new EventEmitter();
-  @Output() onSubmitEnd: EventEmitter<ResponseKeyValue | ErrorResponse> =
-    new EventEmitter();
-
-  forgotPasswordForm: FormGroup;
-  isSubmitted: boolean = false;
-
-  constructor(
-    private fb: FormBuilder,
-    private server: HttpWebRequestService,
-    private utilService: UtilService
-  ) {
-    this.forgotPasswordForm = this.fb.group({
-      Email: new FormControl<string | null>(null, [
-        Validators.required,
-        this.emailValidator.bind(this),
-      ]),
-    });
-  }
-
-  isValidEmail(mail: string): boolean {
-    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-    return emailPattern.test(mail);
-  }
-
-  emailValidator(control: AbstractControl): ValidationErrors | null {
-    const value = control.value;
-
-    if (this.isValidEmail(value) == false) {
-      return { customValidation: true };
-    }
-
-    return null;
-  }
-
-  checkForm(): boolean {
-    return this.forgotPasswordForm.valid;
-  }
-
-  async submit() {
-    if (!this.checkForm()) {
-      return;
-    }
-    var data: ForgotPasswordData = {
-      Email: this.forgotPasswordForm.controls['Email'].value,
-    };
-    this.onSubmit.emit(data);
-    this.utilService.sendBI(true);
-    const res = await this.server.get(
-      `User/PasswordChangeRequest/${data.Email}/${this.tenant}`
-    );
-    this.utilService.sendBI(false);
-    if (res instanceof ErrorResponse) {
-      this.onSubmitEnd.emit(res);
-    } else {
-      var result = res as ResponseKeyValue;
-      this.onSubmitEnd.emit(result);
-      this.isSubmitted = true;
-    }
-  }
-}

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

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

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

@@ -1,11 +0,0 @@
-<section
-[ngStyle]="styles"
-class="{{ customClass }}"
->
-    <h3 class="{{headlingClass}}">Your e-mail has been verified!</h3>
-    <lib-button 
-    text="Login" 
-    buttonClass=""
-    (click)="goToLogin()"
-    ></lib-button>   
-</section>

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

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

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

@@ -1,47 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-
-@Component({
-  selector: 'verben-mail-message',
-  templateUrl: './mail.component.html',
-  styleUrl: './mail.component.css'
-})
-
-
-export class MailComponent {
-  @Input() customClass: string = ''
-  @Input() headlingClass: string = ''
-  @Input() width: string = '';
-  @Input() maxWidth: string = '';
-  @Input() margin: string = '';
-  @Input() pd: 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';
-
-  @Output() buttonClick = new EventEmitter();
-
-  goToLogin(){ 
-    this.buttonClick.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/mail/mail.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { RouterLink} from '@angular/router';
-import { ButtonModule } from '../button/button.module';
-import { MailComponent } from './mail.component';
-
-@NgModule({
-    declarations: [MailComponent],
-  imports: [CommonModule, FormsModule,RouterLink,ButtonModule],
-  exports: [MailComponent]
-})
-export class MailModule {}

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,26 +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;
-}
-.btnWrapper{ 
-  display: flex;
- flex-direction: column;
-  gap:10px;
-}
-.OrFlexWrapper{ 
-  display: flex;
-  align-items: center;
-  gap:8px;
-}

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

@@ -1,26 +0,0 @@
-<section class="oauthWrapper"> 
-    <div class="OrFlexWrapper">
-        <hr/>
-        <span>OR</span>
-        <hr/>
-    </div>
-     <div class="btnWrapper">
-      <div *ngFor="let btn of authMechanisms, let i = index"> 
-        <verbena-button
-        [svg]="checkForValue(btn.AuthMechanism)"
-        [svgHeight]="24"
-        [svgWidth]="24"
-        [text]="'Continue with ' + btn.AuthMechanism"
-        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)="handleOauthClick(btn)"
-        ></verbena-button>
-      </div> 
-     </div> 
-</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,115 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { AuthMechanism, MechanismType } from '../../models/auth-mechanism';
-import { ActivatedRoute, Router } from '@angular/router';
-import { HttpWebRequestService } from '../../services/http-web-request.service';
-import { UtilService } from '../../services/util.service';
-
-declare global {
-  interface Window {
-    google: any;
-  }
-}
-
-@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() emitMechanismFn = new EventEmitter<string>();
-  page: string = '';
-  type: string = '';
-
-  constructor(private router: Router) {}
-
-  ngOnInit(): void {
-    this.loadPage();
-    this.loadGoogleScript();
-    if (this.authMechanisms !== null) {
-      this.authMechanisms = this.authMechanisms.filter(
-        (item) => item.AuthMechanism !== MechanismType.InApp
-      );
-    }
-  }
-
-  loadPage() {
-    this.page = this.router.url;
-  }
-
-  loadGoogleScript(): void {
-    if (!document.getElementById('google-jssdk')) {
-      const script = document.createElement('script');
-      script.src = 'https://accounts.google.com/gsi/client';
-      script.id = 'google-jssdk';
-      script.async = true;
-      script.defer = true;
-      script.onload = () => console.log('Google SDK loaded');
-      script.onerror = () => console.log('Error loading Google SDK');
-      document.head.appendChild(script);
-    }
-  }
-
-  oAuthWithGoogle(data: AuthMechanism) {
-    this.type = data.AuthMechanism;
-    localStorage.setItem('type', JSON.stringify(this.type));
-    const redirectUri = encodeURIComponent(data.RedirectUri);
-    const scope = encodeURIComponent('openid email profile');
-    const responseType = 'code';
-    const state = encodeURIComponent(JSON.stringify({ returnTo: this.page }));
-    const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${data.ClientId}&redirect_uri=${redirectUri}&response_type=${responseType}&scope=${scope}&state=${state}`;
-    window.location.href = authUrl;
-  }
-
-  oAuthWithApple() {}
-
-  oAuthWithMicrosoft(data: AuthMechanism) {
-    this.type = data.AuthMechanism;
-    const cleanUrl = window.location.href.split('?')[0];
-    window.history.replaceState({}, document.title, cleanUrl);  // Update the URL without reloading
-    localStorage.setItem('type', JSON.stringify(this.type));
-    const redirectUri = encodeURIComponent(data.RedirectUri);
-    const scope = encodeURIComponent('openid email profile');
-    const responseType = 'code';
-    const state = encodeURIComponent(JSON.stringify({ returnTo: this.page }));
-    // const authUrl = `https://login.microsoftonline.com/${data.TenantId}/oauth2/v2.0/authorize?client_id=${data.ClientId}&response_type=${responseType}&redirect_uri=${redirectUri}&response_mode=query&state=${state}`;
-    const authUrl = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize
-?client_id=${data.ClientId}
-&response_type=${responseType}
-&redirect_uri=${redirectUri}&scope=${scope}
-&response_mode=query&state=${state}`;
-    window.location.href = authUrl;
-  }
-
-  checkForValue(value: string) {
-    switch (value) {
-      case MechanismType.Google:
-        return 'google-logo';
-      case MechanismType.Apple:
-        return 'apple-logo';
-      case MechanismType.MicrosoftAD:
-        return 'microsoft-logo';
-      default:
-        return '';
-    }
-  }
-
-  handleOauthClick(value: AuthMechanism) {
-    switch (value.AuthMechanism) {
-      case MechanismType.Google:
-        return this.oAuthWithGoogle(value);
-        break;
-      case MechanismType.Apple:
-        return this.oAuthWithApple();
-        break;
-      case MechanismType.MicrosoftAD:
-        return this.oAuthWithMicrosoft(value);
-        break;
-      default:
-        return '';
-    }
-  }
-}

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,15 +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)"
-      (paste)="handlePaste($event)"
-      [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();
-  });
-});