verben-authentication-ui 1.0.1 → 1.0.3

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

@@ -0,0 +1,46 @@
+@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; */
+}
+
+.resend-caption {
+  font-size: 13px;
+}
+
+.resend-link {
+  color: #0000FF;
+  cursor: pointer;
+}
+
+.resend-link:hover {
+  text-decoration: underline;
+}
+
+.resend-title {
+  color: #666666;
+}

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

@@ -0,0 +1,19 @@
+<div *ngIf="!isSubmitted" [formGroup]="this.forgotPasswordForm" 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 class="form-field flex flex-col">
+    <div class="form-field-caption">Email</div>
+    <verbena-input bgColor="white" borderRadius="12px" formControlName="Email" type="email"></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>
+<div *ngIf="isSubmitted" class="reset-password-container flex flex-col">
+  <div class="reset-password-title resend-title">Follow the link sent to your e-mail to proceed</div>
+  <div class="flex gap-1">
+    <span class="resend-caption">Didn't get a link?</span> <span class="resend-caption resend-link"
+      (click)="submit()">Resend</span>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,88 @@
+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';
+
+@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;
+
+  @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.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

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

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

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

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

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

@@ -0,0 +1,59 @@
+/* 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

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

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

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

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

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

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

@@ -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();
+  });
+});