verben-authentication-ui 1.0.1 → 1.0.3

package/src/lib/components/role-control/role-control.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RoleControlComponent } from './role-control.component';
+import { SharedModule } from '../../shared/shared.module';
+
+@NgModule({
+  declarations: [RoleControlComponent],
+  imports: [SharedModule],
+  exports: [RoleControlComponent],
+})
+export class RoleControlModule {}

package/src/lib/components/role-control/role-control.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RoleControlService } from './role-control.service';
+
+describe('RoleControlService', () => {
+  let service: RoleControlService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RoleControlService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/components/role-control/role-control.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { ColumnDefinition } from 'verben-ng-ui';
+import { Role } from '../../models/Role';
+import { AuthorizationService } from '../../services/authorization.service';
+import { MappedRole } from './MappedRole';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RoleControlService {
+  constructor() {}
+
+  get roleColumns(): ColumnDefinition<MappedRole>[] {
+    return [
+      {
+        id: 'select',
+        header: '',
+      },
+      {
+        id: 'createdAt',
+        header: 'CREATED',
+        accessorKey: 'CreatedAt',
+      },
+      {
+        id: 'updatedAt',
+        header: 'UPDATED',
+        accessorKey: 'UpdatedAt',
+      },
+      {
+        id: 'name',
+        header: 'NAME',
+        accessorFn: (row: MappedRole) => {
+          return row;
+        },
+      },
+      {
+        id: 'permissions',
+        header: 'PERMISSIONS',
+        accessorFn: (row: MappedRole) => {
+          const sum = row.RoleContexts.filter((x) => x.Selected == true).length;
+          return `${sum} of ${row.RoleContexts.length} Permissions`;
+        },
+      },
+      {
+        id: 'actions',
+        header: 'ACTIONS',
+        accessorFn: (row: MappedRole) => {
+          return row;
+        },
+      },
+    ];
+  }
+}

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,83 @@
+<section
+[ngStyle]="styles"
+class="{{ customClass }}"
+>
+    <h2 class="{{headlingClass}}">{{headlingText}}</h2>
+    <form [formGroup]="loginForm" (ngSubmit)="submit('InApp')" 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"
+        [passLength]="5"
+        [customErrorMessages]="{
+          password:'Password is required'
+        }"
+        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>
+  </form>
+  <div> 
+    <div *ngIf="AuthMechanisms !== null"> 
+      <verben-o-auth 
+        [authMechanisms]="AuthMechanisms"
+      ></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>
+  </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();
+  });
+});

package/src/lib/components/sign-in/sign-in.component.ts

@@ -0,0 +1,267 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ValidationErrors,
+  Validators,
+} from '@angular/forms';
+import { LoginData } from '../../models/log-in';
+import { HttpWebRequestService } from '../../services/http-web-request.service';
+import { UtilService } from '../../services/util.service';
+import { ErrorResponse } from '../../models/ErrorResponse';
+import { ResponseKeyValue } from '../../models/ResponseKeyValue';
+import { EnvironmentService } from '../../services/environment.service';
+import { AuthMechanism, MechanismType } from '../../models/auth-mechanism';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IOauthResp } from '../../models/oauth-resp';
+import {TenantConfig} from '../../models/TenantConfig'
+import { EncryptionService } from '../../services/encryption.service';
+import CryptoJS from 'crypto-js';
+@Component({
+  selector: 'verben-sign-in',
+  templateUrl: './sign-in.component.html',
+  styleUrl: './sign-in.component.css',
+})
+export class SignInComponent implements OnInit {
+  @Input() headlingText: string = 'Sign in';
+  @Input() width: string = '';
+  @Input() maxWidth: string = '';
+  @Input() margin: string = '';
+  @Input() pd: string = '';
+  @Input() customClass: string = '';
+  @Input() headlingClass: 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';
+  @Input() forgetPasswordClass: string = '';
+  @Input() requestAccessClass: string = '';
+  @Input() createAccountClass: string = '';
+  @Input() createAccountLinkClass: string = '';
+
+  // links
+  @Input() forgetPasswordLink: string = '';
+  @Input() createAccountLink: string = '';
+  @Input() requestAccessLink: string = '';
+  // button styles
+  @Input() btnClass: string = '';
+  @Input() btnBgColor: string = '#FFE681';
+  @Input() btnColor: string = '';
+  @Input() btnBorder: string = '';
+  @Input() btnBorderRadius: string = '24px';
+  @Input() btnPd: string = '';
+  @Input() btnText: string = 'Log in';
+
+  //inputStyles
+  @Input() inputLabelColor: string = '';
+  @Input() inputBgColor: string = 'transparent';
+  @Input() inputBorder: string = '1px solid #66666659';
+  @Input() inputBorderRadius: string = '12px';
+  @Input() termsErrorText: string =
+    'Please agree to the terms of use and privacy policy.';
+
+  @Output() formSubmit = new EventEmitter<LoginData>();
+  @Output() onSubmitEnd: EventEmitter<ResponseKeyValue | ErrorResponse> =
+    new EventEmitter();
+  @Output() onGoogleAuthResponse: EventEmitter<
+    ResponseKeyValue | ErrorResponse
+  > = new EventEmitter();
+  @Output() onSubmitGoogleAuth: EventEmitter<ResponseKeyValue | ErrorResponse> = new EventEmitter();
+  @Output() tenantConfigLoaded = new EventEmitter<TenantConfig | null>();
+  @Output() googleClick = new EventEmitter();
+  @Output() microsoftClick = new EventEmitter();
+  @Output() appleClick = new EventEmitter();
+
+  tenantDetails: any | null = null;
+  AuthMechanisms: AuthMechanism[] | null = null;
+  showform: boolean = false;
+  loginForm: FormGroup;
+  apiKey: string;
+  secret: string;
+  isLoading: boolean = false;
+  code: string = '';
+  type: string = '';
+  mechanismType: string = '';
+  OauthData: IOauthResp = {
+    AccessToken: '',
+    Email: '',
+    FirstName: '',
+    LastName: '',
+  };
+  configData:TenantConfig | null = null
+
+  constructor(
+    private fb: FormBuilder,
+    private server: HttpWebRequestService,
+    private utilService: UtilService,
+    private envSvc: EnvironmentService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private encryptionService: EncryptionService
+  ) {
+    this.loginForm = this.fb.group({
+      Email: new FormControl<string | null>(null, [
+        Validators.required,
+        Validators.email,
+      ]),
+      Password: new FormControl<string | null>(null, [
+        Validators.required,
+        Validators.minLength(5),
+      ]),
+    });
+    this.apiKey = this.envSvc.environment.Tenant;
+    this.secret = this.envSvc.environment.Secret;
+  }
+
+  async ngOnInit() {
+  
+    await this.getTenantConfig();
+    this.route.queryParams.subscribe((params) => {
+      this.code = params['code'];
+      this.type = params['type'];
+      if (this.code) {
+        this.verifyUserDetails();
+      }
+    });
+   
+    
+  }
+
+    
+  async getTenantConfig() {
+     const isLocalhost = window?.location?.hostname === 'localhost';
+     const payload = isLocalhost
+     ? {
+         Key: "UrlKey",
+         Value:'https://bovas.white360.net'
+       }
+     : undefined;
+    try{ 
+      const res = await this.server.post<TenantConfig>(
+        `Tenant/GetTenantConfigByUrlKey`,
+         payload
+        
+      );
+      this.tenantDetails = res;
+      this.configData = res;
+      this.AuthMechanisms = this.tenantDetails?.AuthMechanisms;
+      if (
+        !this.tenantDetails?.AuthMechanism &&
+        this.tenantDetails?.AuthMechanism !== MechanismType.InApp
+      ) {
+        this.showform = false;
+      } else {
+        this.showform = true;
+      }
+      this.tenantConfigLoaded.emit(this.configData);
+    }catch(err){ 
+     const msg = err;
+     this.tenantConfigLoaded.emit(null);
+    }
+  }
+
+  checkForm(): boolean {
+    return this.loginForm.valid;
+  }
+
+  async verifyUserDetails() {
+    if (this.AuthMechanisms !== null && this.apiKey) {
+      const data: any = this.AuthMechanisms.find((item) =>
+        item.AuthMechanism.includes(this.type)
+      );
+      const payload = {
+        AuthCode: this.code,
+        Tenant: this.apiKey,
+        AuthMechanism: data.AuthMechanism,
+      };
+
+      this.utilService.sendBI(true);
+      const res = await this.server.post(
+        `Authentication/GetUserDetails`,
+        payload
+      );
+      this.utilService.sendBI(false);
+      if (res instanceof ErrorResponse) {
+        return;
+      } else {
+        var result = res as IOauthResp;
+        this.OauthData = {
+          AccessToken: result?.AccessToken,
+          Email: result?.Email,
+          FirstName: result?.FirstName,
+          LastName: result?.LastName,
+        };
+
+        this.submit(data.AuthMechanism);
+      }
+    }
+  }
+
+  async submit(type: string) {
+    let data: LoginData = {
+      MailAddress: '',
+      Password: '',
+      LoginType: type,
+      Tenant: this.tenantDetails.TenantId,
+      Secrete: this.secret,
+      Token: '',
+    };
+  
+    if (type === MechanismType.InApp && this.checkForm()) {
+      data = {
+        ...data,
+        MailAddress: this.loginForm.controls['Email'].value,
+        Password:String(CryptoJS.MD5(this.loginForm.controls['Password'].value)),
+      };
+    } else if (type === MechanismType.Google || type === MechanismType.MicrosoftAD) {
+      data = {
+        ...data,
+        MailAddress: this.OauthData?.Email,
+        Token: this.OauthData?.AccessToken,
+      };
+    }
+      
+    this.formSubmit.emit(data);
+    this.utilService.sendBI(true); // Preserving your utilService call
+    this.isLoading = true;
+  
+ 
+  
+    try {
+      const res = await this.server.post(`Authentication/Login`, data);
+      console.log('Response:', res);
+      this.utilService.sendBI(false); // Stop utilService tracking on success/failure
+      this.isLoading = false;
+  
+      if (res instanceof ErrorResponse) {
+        this.onSubmitEnd.emit(res);
+      } else {
+        const result = res as ResponseKeyValue;
+        this.onSubmitEnd.emit(result);
+      }
+    } catch (error) {
+      this.utilService.sendBI(false); // Stop utilService tracking on error
+      this.isLoading = false;
+      console.error('Error during login:', error);
+    }
+  }
+  
+  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/sign-in/sign-in.module.ts

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

package/src/lib/components/sign-up/sign-up.component.css

@@ -0,0 +1,36 @@
+a{ 
+    text-decoration: underline;
+    cursor: pointer;
+}
+  input[type="checkbox"]:checked {
+    accent-color: #111;
+  }
+
+  .flexWrapper{ 
+    display: flex;
+    flex-direction: column;
+    gap:10px;
+  }
+
+  .checkBoxWrapper{ 
+    display: flex;
+    align-items: start;
+    gap:2px;
+  }
+
+  .checBoxInput{ 
+    margin-top:6px
+  }
+
+  .bigcheckboxWrapper{ 
+    margin-top: 0.5rem;
+   margin-bottom: 1.5rem;
+  }
+
+  .error-text{ 
+    color:red
+  }
+
+  .disable-btn{
+    cursor: not-allowed;
+  }

package/src/lib/components/sign-up/sign-up.component.html

@@ -0,0 +1,132 @@
+<section [ngStyle]="styles" class="{{ customClass }}">
+    <h2 class="{{headlingClass}}">
+      {{headlingText}}
+    </h2>
+    <form [formGroup]="signUpForm" (ngSubmit)="submit()" class="flexWrapper">
+      <verbena-input
+        [label]="'First name'"
+        [labelColor]="inputLabelColor"
+        [placeHolder]="''"
+        [required]="true"
+        [type]="'text'"
+        formControlName="Firstname"
+        [showBorder]="true"
+        [bgColor]="inputBgColor"
+        [border]="inputBorder"
+        [borderRadius]="inputBorderRadius"
+        [showErrorMessage]="true"
+        [errorMessageColor]="'red'"
+        [errorBorderColor]="'red'"
+        [errorPosition]="'bottom'"
+        class="outline-none focus-none"
+        [customErrorMessages]="{required:'First name is required'}"
+      ></verbena-input>
+      <verbena-input
+        [label]="'Last name'"
+        [labelColor]="inputLabelColor"
+        [placeHolder]="''"
+        [required]="true"
+        [type]="'text'"
+        formControlName="Lastname"
+        [showBorder]="true"
+        [bgColor]="inputBgColor"
+        [border]="inputBorder"
+        [borderRadius]="inputBorderRadius"
+        [showErrorMessage]="true"
+        [errorMessageColor]="'red'"
+        [errorBorderColor]="'red'"
+        [errorPosition]="'bottom'"
+        class="outline-none focus-none"
+        [customErrorMessages]="{required:'Last name is required'}"
+      ></verbena-input>
+      <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>
+      <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"
+        class="outline-none focus-none"
+      ></verbena-input>
+      <div>
+        <verbena-input
+          [label]="'Confirm Password'"
+          [labelColor]="inputLabelColor"
+          [placeHolder]="''"
+          [required]="true"
+          [type]="'password'"
+          formControlName="Confirmpassword"
+          [showBorder]="true"
+          [bgColor]="inputBgColor"
+          [border]="inputBorder"
+          [borderRadius]="inputBorderRadius"
+          [showErrorMessage]="false"
+          [errorBorderColor]="'red'"
+          class="outline-none focus-none"
+        ></verbena-input>
+      <span *ngIf="signUpForm.hasError('passwordMismatch') && signUpForm.get('Confirmpassword')?.dirty">
+        <small class="error-text">Passwords do not match.</small>
+      </span>
+      </div>
+      <div>
+        <div class="checkBoxWrapper">
+          <input type="checkbox" id="terms" formControlName="Terms"  class="checBoxInput" />
+          <label for="terms"
+          class="break-all font-normal leading-6"
+            >By creating an account, I agree to our <a  [attr.href]="termsLink">Terms of use</a> and
+            <a [attr.href]="privacyLink">Privacy Policy</a></label
+          >
+        </div>
+       <p *ngIf="signUpForm.controls['Terms'].invalid && signUpForm.controls['Terms'].touched">
+        <small class="error-text">Please agree to the terms of use and privacy policy.</small>
+       </p>
+      </div>
+      <lib-button
+      [buttonClass]="btnClass"
+      [color]="btnColor"
+      [border]="btnBorder"
+      [borderRadius]="btnBorderRadius"
+      [bgColor]="btnBgColor"
+      [pd]="btnPd"
+      [text]="btnText"
+      type="submit"
+      [disabled]="!this.checkForm()"
+      [ngStyle]="{'margin-top':'10px'}"
+      ></lib-button>
+      <verben-o-auth
+      (googleClick)="handleGoogleAuth()"
+      (appleClick)="handleAppleAuth()"
+      ></verben-o-auth>
+      <p>
+        Already have an account?
+        <a [routerLink]="routerLink"  class="">Log in</a>
+      </p>
+    </form>
+  </section>
+

package/src/lib/components/sign-up/sign-up.component.spec.ts

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