@colijnit/sharedcomponents 1.0.56 → 1.0.58

package/projects/sharedcomponents/src/lib/components/layout-switcher/layout-switcher.component.ts

@@ -1,98 +0,0 @@
-import {Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, ViewEncapsulation} from "@angular/core";
-import {animate, state, style, transition, trigger} from "@angular/animations";
-import {Icon} from "../../enum/icon.enum";
-import {IconCacheService} from "../../service/icon-cache.service";
-
-
-@Component({
-  selector: "co-layout-switcher",
-  template: `
-    <div class="mask-wrapper" [class.mask-wrapper-active]='showMaskSidebar' @showHideSidebar>
-      <div class="icon-wrapper" (click)="toggleMaskSidebar()">
-        <co-icon class="icon-mask" [iconData]="iconCacheService.getIcon(icon.BringForwardRegular)" [@positionIcon]="showMaskSidebar"></co-icon>
-
-        <co-icon class='icon-mask-sidebar-handle' [@positionHandle]='showMaskSidebar' [iconData]="showMaskSidebar ? iconCacheService.getIcon(this.icon.AngleLeftSolid) : iconCacheService.getIcon(this.icon.AngleRightSolid)"></co-icon>
-      </div>
-
-      <div class="mask-content" *ngIf="showMaskSidebar" @showHideSidebar>
-        <span *ngFor='let item of this.layoutItems' [class.active]="this.activeIndex === this.layoutItems.indexOf(item)" [textContent]="item" (click)='activeIndex = this.layoutItems.indexOf(item)' ></span>
-      </div>
-    </div>
-
-  `,
-  animations: [
-    trigger("showHideSidebar", [
-      state("void", style({"width": "0"})),
-      state("*", style({"width": "*"})),
-      transition("void <=> *", animate(200))
-    ]),
-    trigger("positionIcon", [
-      state("true", style({"left": "70px"})),
-      state("false", style({"left": "10px"})),
-      transition("true <=> false", animate(200))
-    ]),
-    trigger("positionHandle", [
-      state("true", style({"left": "15px"})),
-      state("false", style({"left": "75px"})),
-      transition("true <=> false", animate(200))
-    ])
-  ],
-  encapsulation: ViewEncapsulation.None
-})
-export class LayoutSwitcherComponent {
-  public readonly icon: typeof Icon = Icon;
-
-  @HostBinding('class.co-layout-switcher')
-  public showClass() {
-    return true;
-  }
-
-  @Input()
-  public layoutItems: string[] = [];
-
-  @Output()
-  public layoutSwitchEmit:EventEmitter<string> = new EventEmitter<string>();
-
-  public get activeIndex(): number {
-    return this._activeIndex;
-  }
-
-  public set activeIndex(index) {
-    this._activeIndex = index;
-    this.toggleMaskSidebar();
-    this.layoutSwitchEmit.emit(this.layoutItems[index]);
-  }
-
-  public showMaskSidebar: boolean = false;
-
-  private _activeIndex: number = 0;
-
-
-  constructor(public iconCacheService: IconCacheService) {
-  }
-
-  public toggleMaskSidebar(): void {
-    this.showMaskSidebar = !this.showMaskSidebar;
-  }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-}

package/projects/sharedcomponents/src/lib/components/layout-switcher/layout-switcher.module.ts

@@ -1,21 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {LayoutSwitcherComponent} from "./layout-switcher.component";
-import {IconModule} from "@colijnit/corecomponents_v12";
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IconModule
-  ],
-  declarations: [
-    LayoutSwitcherComponent,
-  ],
-  exports: [
-    LayoutSwitcherComponent
-  ]
-})
-export class LayoutSwitcherModule {
-
-}

package/projects/sharedcomponents/src/lib/components/linear-gauge/co-linear-gauge.component.ts

@@ -1,57 +0,0 @@
-import { Component, HostBinding, Input, ViewEncapsulation } from "@angular/core";
-import { GaugeColor } from "../../enum/gauge-color.enum";
-
-@Component({
-  selector: "co-linear-gauge",
-  template: `
-    <div class="linear-gauge"
-         [style.background]="getStyle()"
-         [style.border-color]="color"
-         [textContent]="count ? count : ''"
-    ></div>
-  `,
-  encapsulation: ViewEncapsulation.None
-})
-export class CoLinearGaugeComponent {
-
-  @Input()
-  public set value(value: number) {
-    this._value = value;
-    this._setColor();
-  }
-
-  public get value(): number {
-    return this._value;
-  }
-
-  @Input()
-  public count: number;
-
-  @HostBinding("class.co-linear-gauge")
-  public showClass() {
-    return true;
-  }
-
-  private _value: number;
-  public color: GaugeColor = GaugeColor.Low;
-
-  public getStyle(): string {
-    return `linear-gradient(90deg, ${this.color} 0 ${this.value}%, white ${this.value}% 100%`;
-  }
-
-  private _setColor(): void {
-    if (this.value <= 0) {
-      this.color = GaugeColor.Lowest;
-    } else if (this.value >= 1 && this.value < 25) {
-      this.color = GaugeColor.Low;
-    } else if (this.value >= 25 && this.value < 50) {
-      this.color = GaugeColor.MediumLow;
-    } else if (this.value >= 50 && this.value < 75) {
-      this.color = GaugeColor.MediumHigh;
-    } else if (this.value >= 75 && this.value < 100) {
-      this.color = GaugeColor.High;
-    } else if (this.value >= 100) {
-      this.color = GaugeColor.Highest;
-    }
-  }
-}

package/projects/sharedcomponents/src/lib/components/linear-gauge/co-linear-gauge.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { CoLinearGaugeComponent } from "./co-linear-gauge.component";
-
-@NgModule({
-  imports: [
-    CommonModule,
-  ],
-  declarations: [
-    CoLinearGaugeComponent
-  ],
-  exports: [
-    CoLinearGaugeComponent
-  ]
-})
-export class CoLinearGaugeModule {
-}

package/projects/sharedcomponents/src/lib/components/login/components/login-base.component.ts

@@ -1,98 +0,0 @@
-import {Directive, EventEmitter, Input, Output, ViewChild} from '@angular/core';
-import {FormMasterService} from '@colijnit/corecomponents_v12';
-import {RecaptchaComponent} from 'ng-recaptcha';
-import {Icon} from '../../../enum/icon.enum';
-import {IconCacheService} from '../../../service/icon-cache.service';
-import {LoginService} from '../service/login.service';
-import {LoginComponentExtraActionType} from '../../../enum/login-component-extra-action-type.enum';
-import {LoginStatus} from '@colijnit/ioneconnector/build/enum/login-status.enum';
-import {LoginResponse} from '@colijnit/ioneconnector/build/model/login-response';
-
-@Directive()
-export abstract class LoginBaseComponent {
-    public readonly icons: typeof Icon = Icon;
-    public readonly extraActions: typeof LoginComponentExtraActionType = LoginComponentExtraActionType;
-
-    @ViewChild(RecaptchaComponent)
-    public recaptchaComponent: RecaptchaComponent;
-
-    @Input()
-    public title: string;
-
-    @Input()
-    public username: string;
-
-    @Input()
-    public password: string;
-
-    @Input()
-    public upId: number;
-
-    @Input()
-    public securityCode: string;
-
-    @Input()
-    public clientType: string;
-
-    @Input()
-    public clientVersion: string;
-
-    @Input()
-    public clientCompileRevision: string;
-
-    @Input()
-    public clientLanguage: string;
-
-    @Input()
-    public clientDeviceFingerprint: string;
-
-    @Input()
-    public showRecaptcha: boolean = false;
-
-    @Input()
-    public reCaptchaSiteKey: string;
-
-    @Input()
-    public extraAction: LoginComponentExtraActionType;
-
-    @Output()
-    public showChangePasswordForm: EventEmitter<string> = new EventEmitter<string>();
-
-    @Output()
-    public showMFAForm: EventEmitter<string> = new EventEmitter<string>();
-
-    @Output()
-    public loginReponseReceived: EventEmitter<LoginResponse> = new EventEmitter<LoginResponse>();
-
-    public submitButtonEnabled: boolean;
-    public validationErrorMessage: string;
-    public validationMessage: string;
-
-    constructor(
-        public iconCacheService: IconCacheService,
-        protected loginService: LoginService,
-        private _formMasterService: FormMasterService
-    ) {
-    }
-
-    protected getEnterVerificationCodeLabel(loginStatus: LoginStatus): string {
-        switch (loginStatus) {
-            case LoginStatus.MFA_SMS_CODE_CONFIRMATION_SENT:
-                return "ENTER_SMS_VERIFICATION_CODE";
-            case LoginStatus.MFA_EMAIL_CODE_CONFIRMATION_SENT:
-                return "ENTER_EMAIL_VERIFICATION_CODE";
-            case LoginStatus.MFA_GOOGLE_CODE_CONFIRMATION_AWAIT:
-                return "ENTER_GOOGLE_VERIFICATION_CODE";
-            default:
-                return "";
-        }
-    }
-
-    public hideRecaptcha(): void {
-        this.showRecaptcha = false;
-    }
-
-    public onFormValidityChange(valid: boolean): void {
-        this.submitButtonEnabled = valid;
-    }
-}

package/projects/sharedcomponents/src/lib/components/login/components/login-change-password.component.ts

@@ -1,194 +0,0 @@
-import {Component, HostBinding, ViewChild, ViewEncapsulation} from '@angular/core';
-import {LoginBaseComponent} from './login-base.component';
-import {equalValidator, FormComponent, InputTextComponent, passwordValidator} from '@colijnit/corecomponents_v12';
-import {LoginStatus} from '@colijnit/ioneconnector/build/enum/login-status.enum';
-import {ValidatorFn} from '@angular/forms';
-import {LoginComponentExtraActionType} from '../../../enum/login-component-extra-action-type.enum';
-import {ActivateUserAccountStatus} from '@colijnit/ioneconnector/build/enum/activate-user-account-status.enum';
-import {HttpErrorResponse} from '@angular/common/http';
-import {LoginResponse} from '@colijnit/ioneconnector/build/model/login-response';
-import {LoginRequest} from '@colijnit/ioneconnector/build/model/login-request';
-
-@Component({
-    selector: 'co-login-change-password',
-    template: `
-        <co-form #formChangePassword (validityChange)="onFormValidityChange($event)">
-            <h2 [textContent]="(extraAction === extraActions.ChangePasswordAndActivateUser ? 'ACTIVATE_ACCOUNT' : 'CHANGE_PASSWORD') | localize"></h2>
-            <p *ngIf="extraAction === extraActions.ChangePasswordAndActivateUser"
-               [textContent]="'CHANGE_PASSWORD_ACTIVATE_USER_MSG' | localize"></p>
-            <div class="field-wrapper">
-                <co-input-text [(model)]="username" [placeholder]="'EMAIL_OR_USERNAME' | localize"
-                               [leftIconData]="iconCacheService.getIcon(icons.Account)"
-                               #userNameInput [disabled]="true"></co-input-text>
-                <div class="input-text-and-button-container">
-                    <co-input-text [(model)]="password" type="password" class="password" [placeholder]="'NEW_PASSWORD' | localize" required
-                                   #passwordInput
-                                   [leftIconData]="iconCacheService.getIcon(icons.Lock)"
-                                   [rightIconData]="iconCacheService.getIcon(icons.EyeRegular)"
-                                   [validators]="[passwordValidatorFn]"
-                                   (rightIconMouseDown)="handlePasswordShow($event)"
-                                   (rightIconMouseUp)="handlePasswordHide($event)"
-                    ></co-input-text>
-                    <!--
-                                        <co-button icon="magic_wand"
-                                                       tabindex="-1"
-                                                       (click)="generateRandomPassword()"
-                                                       (mouseenter)="handleGenerateButtonMouseEnter($event)"
-                                                       (mouseleave)="handleGenerateButtonMouseLeave($event)"></co-button>
-                    -->
-                </div>
-                <co-input-text [(model)]="repeatPassword" type="password" class="repeat-password"
-                               [placeholder]="'PASSWORD_REPEAT' | localize" required #passwordRepeatInput
-                               [leftIconData]="iconCacheService.getIcon(icons.Lock)"
-                               [rightIconData]="iconCacheService.getIcon(icons.EyeRegular)"
-                               [validators]="[repeatPasswordValidatorFn]"
-                               (rightIconMouseDown)="handlePasswordRepeatShow($event)"
-                               (rightIconMouseUp)="handlePasswordRepeatHide($event)"
-                ></co-input-text>
-                <div class="login-validation-error-message" [textContent]="validationErrorMessage | localize"></div>
-
-                <!--
-                                <co-list-of-values *ngIf="showLanguageSelect" doNotLoadCollection [collection]="languages" icon="dictionary" [(selectedModel)]="language"
-                                                    label="LANGUAGE" descriptionField="description" required></co-list-of-values>
-                -->
-            </div>
-            <div class="login-extended-wrapper">
-                <span class="password-requirement-message" [textContent]="'PASSWORD_REQUIREMENT_MESSAGE' | localize"></span>
-            </div>
-            <co-button class="login-submit-button" [label]="'COMPLETE' | localize" [disabled]="!submitButtonEnabled"
-                       (click)="onChangePasswordButtonClick()"></co-button>
-        </co-form>
-        <re-captcha class="login-recaptcha" [class.hidden]="!showRecaptcha"
-                    [siteKey]="reCaptchaSiteKey"
-                    (resolved)="onChangePasswordSubmit($event)"
-                    (clickOutside)="hideRecaptcha()"></re-captcha>
-    `,
-    encapsulation: ViewEncapsulation.None
-})
-export class LoginChangePasswordComponent extends LoginBaseComponent {
-    @ViewChild('formChangePassword')
-    public formChangePassword: FormComponent;
-
-    @ViewChild('passwordInput')
-    public inputPassword: InputTextComponent;
-
-    @ViewChild('passwordRepeatInput')
-    public inputPasswordRepeat: InputTextComponent;
-
-    @HostBinding('class.co-login-change-password')
-    public showClass() {
-        return true;
-    }
-
-    public repeatPassword: string;
-
-    public handlePasswordShow(event: MouseEvent): void {
-        if (this.inputPassword) {
-            this.inputPassword.type = undefined;
-        }
-    }
-
-    public handlePasswordHide(event: MouseEvent): void {
-        if (this.inputPassword) {
-            this.inputPassword.type = 'password';
-        }
-    }
-
-    public handlePasswordRepeatShow(event: MouseEvent): void {
-        if (this.inputPasswordRepeat) {
-            this.inputPasswordRepeat.type = undefined;
-        }
-    }
-
-    public handlePasswordRepeatHide(event: MouseEvent): void {
-        if (this.inputPasswordRepeat) {
-            this.inputPasswordRepeat.type = 'password';
-        }
-    }
-
-    public async onChangePasswordButtonClick(): Promise<void> {
-        this.formChangePassword.submit();
-        this.showRecaptcha = true;
-    }
-
-    public async onChangePasswordSubmit(reCaptchaResponse: string): Promise<void> {
-        if (!reCaptchaResponse) {
-            return;
-        }
-        // if (!this.isChangePasswordFormValid()) {
-        //     return;
-        // }
-
-        let isChangePwSuccess: boolean;
-        try {
-            if (this.extraAction === LoginComponentExtraActionType.ChangePasswordAndActivateUser) {
-                let activateUserAccountStatus: ActivateUserAccountStatus;
-                activateUserAccountStatus = await this.loginService.changePasswordAndActivateUser(this.repeatPassword, this.securityCode, this.upId, reCaptchaResponse);
-                if (activateUserAccountStatus === ActivateUserAccountStatus.SUCCESS) {
-                    isChangePwSuccess = true;
-                } else {
-                    isChangePwSuccess = false;
-                    if (activateUserAccountStatus === ActivateUserAccountStatus.NOT_VALID_SECURITY_CODE) {
-                        this.validationErrorMessage = "SECURITY_CODE_NOT_VALID";
-                    } else if (activateUserAccountStatus === ActivateUserAccountStatus.ACCOUNT_IS_ALREADY_ACTIVE) {
-                        this.validationErrorMessage = "ACCOUNT_IS_ALREADY_ACTIVE";
-                    }
-                }
-            } else {
-                isChangePwSuccess = await this.loginService.changePassword(this.repeatPassword, this.securityCode, this.upId);
-            }
-        } catch (error) {
-            if (error instanceof HttpErrorResponse) {
-                this.validationErrorMessage = "CODE_NOT_FOUND_POSSIBLY_EXPIRED";
-            }
-            return;
-        }
-
-        if (isChangePwSuccess) {
-            // this.userService.userName = this._userNameInInitialUrl;
-            // this.userService.password = this.repeatPassword;
-            const loginRequest: LoginRequest = new LoginRequest();
-            loginRequest.upId = this.upId;
-            loginRequest.userName = this.username;
-            loginRequest.userPassword = this.password;
-            loginRequest.clientVersion = this.clientVersion;
-            loginRequest.clientLanguage = this.clientLanguage;
-            loginRequest.clientDeviceFingerprint = this.clientDeviceFingerprint;
-            let loginResponse: LoginResponse;
-            try {
-                loginResponse = await this.loginService.login(loginRequest);
-            } catch (error) {
-                if (error instanceof HttpErrorResponse) {
-                    this.validationErrorMessage = error.message;
-                }
-                return;
-            }
-            this.loginReponseReceived.emit(loginResponse);
-            if (loginResponse && loginResponse.isLogInStatusSuccess()) {
-                return;
-            } else if (loginResponse
-                && (loginResponse.loginStatus === LoginStatus.MFA_SMS_CODE_CONFIRMATION_SENT
-                    || loginResponse.loginStatus === LoginStatus.MFA_EMAIL_CODE_CONFIRMATION_SENT
-                    || loginResponse.loginStatus === LoginStatus.MFA_GOOGLE_CODE_CONFIRMATION_AWAIT)
-            ) {
-                this.showMFAForm.emit(this.getEnterVerificationCodeLabel(loginResponse.loginStatus));
-            } else if (loginResponse.loginStatus === LoginStatus.SERVER_NOT_READY) {
-                this.validationErrorMessage = "MESSAGE_SERVER_NOT_READY";
-            } else if (loginResponse.loginStatus === LoginStatus.SERVER_FAILED_TO_START) {
-                this.validationErrorMessage = "MESSAGE_SERVER_FAILED_TO_START";
-            } else {
-                this.validationErrorMessage = "MESSAGE_LOGIN_FAILURE2";
-            }
-        }
-        this.recaptchaComponent.reset();
-        this.showRecaptcha = false;
-    }
-
-    public passwordValidatorFn: ValidatorFn = passwordValidator(() => {
-        return this.username;
-    });
-
-    public repeatPasswordValidatorFn: ValidatorFn = equalValidator(() => {
-        return this.password;
-    });
-}

package/projects/sharedcomponents/src/lib/components/login/components/login-mfa-code-entry.component.ts

@@ -1,41 +0,0 @@
-import {Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';
-
-@Component({
-    selector: 'co-login-mfa-code-entry',
-    template: `
-<!--
-        <co-form fxLayout="column" fxLayoutGap="40px" fxLayoutAlign="center center"
-                 (validityChange)="onFormValidityChange($event)">
-            <h2 localize="VERIFICATION_CODE" fxFlexAlign="left"></h2>
-            <span [localize]="enterVerificationCodeLabel"></span>
-            <input-code [(model)]="userService.confirmationCode" [codePattern]="'3-3'"
-                        (completeChange)="onConfirmationCodeCompleteChange($event)"
-                        (keydown.enter)="onSendVerificationCodeBttnClick(verificationCodeBttn)">
-            </input-code>
-            <co-button #verificationCodeBttn type="submit" label="SEND" class="login" fxFlexAlign="center"
-                           (click)="onSendVerificationCodeBttnClick(verificationCodeBttn)"
-                           [disabled]="sendConfirmationCodeBttnDisabled"></co-button>
-            <co-button *ngIf="isAvailableToResetGoogleAuth()" label="RESET_GOOGLE_AUTHENTICATOR"
-                           (click)="onResetGoogleAuthClick()"></co-button>
-
-        </co-form>
-        <div class="footer" fxLayout fxLayoutAlign="space-between center">
-            <div fxLayout fxLayoutGap="5px" (click)="onMfaGoBackClick()" class="pointer-hover"
-                 fxLayoutAlign="start center">
-                <co-icon [icon]="Icons.ArrowLeftRoundOpen" class="dark"></co-icon>
-                <span localize="BACK"></span>
-            </div>
-            <co-input-checkbox [(model)]="rememberDevice" [label]="'REMEMBER_DEVICE' | localize"></co-input-checkbox>
-        </div>
--->
-    `,
-    encapsulation: ViewEncapsulation.None
-})
-export class LoginMfaCodeEntryComponent {
-
-    @HostBinding('class.login-mfa-code-entry')
-    public showClass() {
-        return true;
-    }
-
-}

package/projects/sharedcomponents/src/lib/components/login/components/login-mfa-code-setup.component.ts

@@ -1,44 +0,0 @@
-import {Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';
-
-@Component({
-    selector: 'co-login-mfa-code-setup',
-    template: `
-<!--
-        <div>
-            <ng-container *ngIf="showBarcode">
-                <co-form fxLayout="column" fxLayoutGap="40px" fxLayoutAlign="center center">
-                    <span localize="SCAN_GOOGLE_AUTHENTICATION_BARCODE"></span>
-                    <img class='barcode' [src]="imageSource">
-                    <default-ok-cancel-buttons [okLabel]="'SCANNED'"
-                                               [cancelLabel]="'DO_NOT_ACTIVATE_AUTH_APP'"
-                                               (okClick)="onScanBarcodeButtonClick()"
-                                               (cancelClick)="handlePopupClose()"></default-ok-cancel-buttons>
-                </co-form>
-            </ng-container>
-            <ng-container *ngIf="showCodeConfirmation">
-                <co-form fxLayout="column" fxLayoutGap="40px" fxLayoutAlign="center center">
-                    <span localize="CONFIRM_GOOGLE_AUTHENTICATION"></span>
-                    <input-code [(model)]="googleConfirmCode" [codePattern]="'3-3'"></input-code>
-                    <button-colijn label="CONFIRM" fxFlexAlign="center"
-                                   (click)="onCheckCodeClick()"></button-colijn>
-                </co-form>
-                <div class="back-button-container"
-                     fxLayout fxLayoutGap="5px" (click)="onBackButtonClick()"
-                     fxLayoutAlign="start center">
-                    <co-icon [icon]="Icons.ArrowLeftRoundOpen"></co-icon>
-                    <span localize="BACK"></span>
-                </div>
-            </ng-container>
-        </div>
--->
-    `,
-    encapsulation: ViewEncapsulation.None
-})
-export class LoginMfaCodeSetupComponent {
-
-    @HostBinding('class.login-mfa-code-setup')
-    public showClass() {
-        return true;
-    }
-
-}