verben-authentication-ui 0.3.2 → 0.3.3

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/verben-authentication-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": ["tslib"]
+}

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "verben-authentication-ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
+  "scripts": {
+    "build-watch": "ng build --watch"
+  },
   "peerDependencies": {
     "@angular/common": "^14.0.0 || ^18.0.0",
     "@angular/core": "^14.0.0 || ^18.0.0",
@@ -10,17 +13,8 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "module": "fesm2022/verben-authentication-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/verben-authentication-ui.mjs",
-      "esm": "./esm2022/verben-authentication-ui.mjs",
-      "default": "./fesm2022/verben-authentication-ui.mjs"
-    }
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "verben-ng-ui": "^0.2.1"
   }
-}
+}

package/src/lib/components/button/button.component.css

@@ -0,0 +1,3 @@
+.disable-btn{
+    cursor: not-allowed;
+  }

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

@@ -0,0 +1,13 @@
+<verbena-button
+[text]="text"
+[bgColor]="bgColor"
+[textColor]="color"
+[border]="border"
+[borderRadius]="borderRadius"
+[pd]="pd"
+[width]="width"
+[disable]="disabled"
+[ngStyle]="{'cursor': disabled ? 'not-allowed' : 'pointer' }"
+buttonClass="font-medium text-[22px] leading-[33px] {{buttonClass}}"
+(click)="handleClick()"
+></verbena-button>

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

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

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

@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'lib-button',
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css'
+})
+export class ButtonComponent {
+  @Input() text: string = '';
+  @Input() color: string = 'black';
+  @Input() border: string = '1px solid #FFE681';
+  @Input() borderRadius:string = "40px"
+  @Input() bgColor: string = '#FFE681';
+  @Input() width: string = '100%';
+  @Input() pd: string = '10px 20px';
+  @Input() buttonClass: string = '';
+  @Input() disabled: boolean = false;
+
+  @Output() buttonClick = new EventEmitter<void>();
+
+  handleClick(){ 
+    this.buttonClick.emit();
+  }
+}

package/src/lib/components/button/button.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VerbenaButtonModule } from 'verben-ng-ui';
+import { ButtonComponent } from './button.component';
+import { FormsModule } from '@angular/forms';
+@NgModule({
+  declarations: [ButtonComponent],
+  imports: [CommonModule,VerbenaButtonModule,FormsModule],
+  exports: [ButtonComponent]
+})
+export class ButtonModule {}

package/{lib/components/forgot-password/ForgotPasswordData.d.ts → src/lib/components/forgot-password/ForgotPasswordData.ts}

@@ -1,3 +1,3 @@
 export interface ForgotPasswordData {
-    Email: string;
+  Email: string;
 }

package/src/lib/components/forgot-password/forgot-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/forgot-password/forgot-password.component.html

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

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

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,21 @@
+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;
+}