@colijnit/sharedcomponents 1.0.55 → 1.0.56

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

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

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

@@ -0,0 +1,44 @@
+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;
+    }
+
+}

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

@@ -0,0 +1,167 @@
+import {Component, HostBinding, ViewChild, ViewEncapsulation} from '@angular/core';
+import {LoginBaseComponent} from './login-base.component';
+import {LoginResponse} from '@colijnit/ioneconnector/build/model/login-response';
+import {FormComponent, InputTextComponent} from '@colijnit/corecomponents_v12';
+import {LoginRequest} from '@colijnit/ioneconnector/build/model/login-request';
+import {LoginStatus} from '@colijnit/ioneconnector/build/enum/login-status.enum';
+import {HttpErrorResponse} from '@angular/common/http';
+import {ResetPasswordStatus} from '@colijnit/ioneconnector/build/enum/reset-password-status.enum';
+
+@Component({
+    selector: 'co-login-username-password',
+    template: `
+        <co-form #loginForm *ngIf="!showRecaptcha" class="user-and-pass" (validSubmit)="onLoginSubmit()"
+                 (validityChange)="onFormValidityChange($event)">
+            <div class="login-header" *ngIf="title" [textContent]="title"></div>
+            <div class="field-wrapper">
+                <co-input-text #userNameInput required
+                               [(model)]="username" 
+                               [placeholder]="'EMAIL_OR_USERNAME' | localize"
+                               [leftIconData]="iconCacheService.getIcon(icons.Account)"
+                               (keyDown)="handleInputKeyDown($event)"
+                ></co-input-text>
+                <co-input-text #passwordInput type="password" class="password" required
+                               [(model)]="password" 
+                               [placeholder]="'PASSWORD' | localize" 
+                               [leftIconData]="iconCacheService.getIcon(icons.Lock)"
+                               [rightIconData]="iconCacheService.getIcon(icons.EyeRegular)"
+                               (rightIconMouseDown)="handlePasswordShow($event)"
+                               (rightIconMouseUp)="handlePasswordHide($event)"
+                               (keyDown)="handleInputKeyDown($event)"
+                ></co-input-text>
+                <div *ngIf="validationErrorMessage" class="login-validation-error-message" [textContent]="validationErrorMessage | localize"></div>
+                <div *ngIf="validationMessage" class="login-validation-message" [textContent]="validationMessage | 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>
+            <co-button class="login-submit-button" [label]="'LOGIN' | localize" [disabled]="!submitButtonEnabled"
+                       (click)="submitForm()"></co-button>
+            <div class="login-extended-wrapper">
+                <a [class.undefined-username]="!username" class="login-password-forget-text"
+                   [textContent]="'PASSWORD_FORGOTTEN_TEXT' | localize"
+                   (click)="onPasswordForgottenLinkClick()"></a>
+                <span [class.undefined-username]="!username" class="login-no-username-text"
+                      [textContent]="'PASSWORD_FORGOTTEN_TEXT_EXTRA' | localize"></span>
+            </div>
+        </co-form>
+        <re-captcha class="login-recaptcha" [class.hidden]="!showRecaptcha"
+                    [siteKey]="reCaptchaSiteKey"
+                    (resolved)="onReCaptchaResolved($event)"
+                    (clickOutside)="hideRecaptcha()"></re-captcha>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class LoginUsernamePasswordComponent extends LoginBaseComponent {
+    @ViewChild('loginForm')
+    public form: FormComponent;
+
+    @ViewChild('passwordInput')
+    public inputPassword: InputTextComponent;
+
+    @HostBinding('class.co-login-username-password')
+    public showClass() {
+        return true;
+    }
+
+    public async onReCaptchaResolved(reCaptchaResponse: string): Promise<void> {
+        if (!reCaptchaResponse) {
+            return;
+        }
+
+        let resetPasswordSuccess: ResetPasswordStatus;
+        try {
+            resetPasswordSuccess = await this.loginService.sendResetPasswordOrInviteMessage(this.upId, this.username, reCaptchaResponse);
+        } catch (error) {
+            this.validationErrorMessage = "EMAIL_FORGOT_PW_NOT_SENT";
+        }
+
+        switch (resetPasswordSuccess) {
+            case ResetPasswordStatus.SUCCESS:
+                this.validationMessage = "EMAIL_SENT";
+                break;
+            case ResetPasswordStatus.ACCOUNT_IS_DEACTIVATED:
+                this.validationMessage = "ACCOUNT_INACTIVE_PW_NOT_SENT";
+                break;
+            case ResetPasswordStatus.USER_DOESNT_HAVE_EMAIL:
+                this.validationErrorMessage = "USER_DOESNT_HAVE_EMAIL_PW_NOT_SENT";
+                break;
+        }
+        if (this.recaptchaComponent) {
+            this.recaptchaComponent.reset();
+        }
+        this.showRecaptcha = false;
+    }
+
+    public async onLoginSubmit(): Promise<void> {
+        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;
+        // this._toolTip.destroyAllErrorTooltips();
+        // this.passwordInput.forceBlur();
+
+        // this._saveLanguage();
+
+        this.submitButtonEnabled = false;
+        let loginResponse: LoginResponse;
+        try {
+            loginResponse = await this.loginService.login(loginRequest);
+        } catch (error) {
+            if (error instanceof HttpErrorResponse) {
+                this.validationErrorMessage = error.message;
+            }
+            return;
+        } finally {
+            this.submitButtonEnabled = true;
+        }
+
+        // for security reasons are both inputfields highlighted red when a login attempt failed (doesn't matter what kind of login failure)
+        if (loginResponse.loginStatus === LoginStatus.LOGIN_INCORRECT) {
+            this.validationErrorMessage = "LOGIN_INCORRECT";
+        } 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 if (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));
+        }
+        this.loginReponseReceived.emit(loginResponse);
+    }
+
+    public onPasswordForgottenLinkClick(): void {
+        if (this.username) {
+            this.showChangePasswordForm.emit(this.username);
+        }
+    }
+
+    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 submitForm(): void {
+        if (this.form) {
+            this.form.submit();
+        }
+    }
+
+    public handleInputKeyDown(event: KeyboardEvent): void {
+        if (event.key === 'Enter' || event.key === 'NumPadEnter') {
+            this.submitForm();
+        }
+    }
+}

package/projects/sharedcomponents/src/lib/components/login/localization/login-translation.ts

@@ -0,0 +1,15 @@
+import {Translation} from '../../../localization/translation';
+
+export class LoginTranslation extends Translation {
+    public ACTIVATE_ACCOUNT?: string = 'ACTIVATE_ACCOUNT';
+    public CHANGE_PASSWORD?: string = 'CHANGE_PASSWORD';
+    public CHANGE_PASSWORD_ACTIVATE_USER_MSG?: string = 'CHANGE_PASSWORD_ACTIVATE_USER_MSG';
+    public EMAIL_OR_USERNAME?: string = 'EMAIL_OR_USERNAME';
+    public NEW_PASSWORD?: string = 'NEW_PASSWORD';
+    public PASSWORD?: string = 'PASSWORD';
+    public PASSWORD_FORGOTTEN_TEXT?: string = 'PASSWORD_FORGOTTEN_TEXT';
+    public PASSWORD_FORGOTTEN_TEXT_EXTRA?: string = 'PASSWORD_FORGOTTEN_TEXT_EXTRA';
+    public PASSWORD_REPEAT?: string = 'PASSWORD_REPEAT';
+    public LOGIN?: string = 'LOGIN';
+    public LOGIN_INCORRECT?: string = 'LOGIN_INCORRECT';
+}

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

@@ -0,0 +1,137 @@
+import {ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core';
+import {LoginComponentPageType} from '../../enum/login-component-page.type.enum';
+import {LocalizeService} from '../../localization/localize.service';
+import {LoginTranslation} from './localization/login-translation';
+import {LoginService} from './service/login.service';
+import {LoginResponse} from '@colijnit/ioneconnector/build/model/login-response';
+import {LoginStatus} from '@colijnit/ioneconnector/build/enum/login-status.enum';
+
+@Component({
+    selector: 'co-login',
+    template: `
+        <div class="co-login-wrapper" *ngIf="!loggedIn">
+            <ng-container *ngIf="loginType === loginTypes.UserNameAndPasswordEntry">
+                <co-login-username-password 
+                        [username]="username" 
+                        [password]="password"
+                        [upId]="upId"
+                        [clientVersion]="clientVersion"
+                        [clientDeviceFingerprint]="clientDeviceFingerprint"
+                        [clientLanguage]="clientLanguage"
+                        [reCaptchaSiteKey]="reCaptchaSiteKey"
+                        (showChangePasswordForm)="handleShowChangePasswordForm($event)"
+                        (loginReponseReceived)="handleLogin($event)"
+                ></co-login-username-password>
+            </ng-container>
+            <ng-container *ngIf="loginType === loginTypes.MFACodeSetup">
+                <co-login-mfa-code-setup></co-login-mfa-code-setup>
+            </ng-container>
+            <ng-container *ngIf="loginType === loginTypes.MFACodeEntry">
+                <co-login-mfa-code-entry></co-login-mfa-code-entry>
+            </ng-container>
+            <ng-container *ngIf="loginType === loginTypes.ChangePasswordAndOptionallyActivateUser">
+                <co-login-change-password
+                        [username]="username"
+                        [upId]="upId"
+                        [securityCode]="securityCode"
+                        [clientVersion]="clientVersion"
+                        [clientDeviceFingerprint]="clientDeviceFingerprint"
+                        [clientLanguage]="clientLanguage"
+                        [reCaptchaSiteKey]="reCaptchaSiteKey"
+                        (showMFAForm)="handleShowMFAForm($event)"
+                        (loginReponseReceived)="handleLogin($event)"
+                ></co-login-change-password>
+            </ng-container>
+        </div>
+        <co-button *ngIf="loggedIn" [label]="'Log uit'" (click)="logOut()"></co-button>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class LoginComponent {
+    public readonly loginTypes: typeof LoginComponentPageType = LoginComponentPageType;
+
+    @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 loginType: LoginComponentPageType = LoginComponentPageType.UserNameAndPasswordEntry;
+
+    @Input()
+    public reCaptchaSiteKey: string;
+
+    @Input()
+    public set translation(value: LoginTranslation) {
+        this._localizeService.translation = value;
+        this._changeDetector.markForCheck();
+    }
+
+    @Input()
+    public set settings(value: any) {
+        this._loginService.init(value);
+    }
+
+    @Output()
+    public userLoggedIn: EventEmitter<LoginResponse> = new EventEmitter<LoginResponse>();
+
+    @HostBinding('class.co-login')
+    public showClass() {
+        return true;
+    }
+
+    public reCaptchaVisible: boolean = false;
+    public verificationCodeLabel: string;
+    public loggedIn: boolean = false;
+
+    constructor(
+        private _localizeService: LocalizeService,
+        private _changeDetector: ChangeDetectorRef,
+        private _loginService: LoginService
+    ) {
+    }
+
+    public async logOut(): Promise<void> {
+        if (await this._loginService.logout()) {
+            this.loggedIn = false;
+        }
+    }
+
+    public handleShowMFAForm(verificationCodeLabel: string): void {
+        this.verificationCodeLabel = verificationCodeLabel;
+        this.loginType = LoginComponentPageType.MFACodeEntry;
+    }
+
+    public handleShowChangePasswordForm(username: string): void {
+        this.username = username;
+        this.loginType = LoginComponentPageType.ChangePasswordAndOptionallyActivateUser;
+    }
+
+    public handleLogin(loginResponse: LoginResponse): void {
+        this.loggedIn = loginResponse.loginStatus === LoginStatus.SUCCESS;
+        this.userLoggedIn.next(loginResponse);
+    }
+
+} 

package/projects/sharedcomponents/src/lib/components/login/login.module.ts

@@ -0,0 +1,53 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {LoginComponent} from './login.component';
+import {
+    ButtonModule,
+    CoreComponentsTranslationModule,
+    FormModule,
+    IconModule,
+    InputCheckboxModule,
+    InputTextModule,
+    ListOfValuesModule
+} from '@colijnit/corecomponents_v12';
+import {LoginUsernamePasswordComponent} from './components/login-username-password.component';
+import {LoginMfaCodeSetupComponent} from './components/login-mfa-code-setup.component';
+import {LoginMfaCodeEntryComponent} from './components/login-mfa-code-entry.component';
+import {LoginChangePasswordComponent} from './components/login-change-password.component';
+import {RecaptchaModule} from 'ng-recaptcha';
+import {LocalizationModule} from '../../localization/localization.module';
+import {LocalizeService} from '../../localization/localize.service';
+import {LoginService} from './service/login.service';
+import {LoginAdapterService} from './service/login-adapter.service';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormModule,
+        InputTextModule,
+        ListOfValuesModule,
+        ButtonModule,
+        IconModule,
+        InputCheckboxModule,
+        RecaptchaModule,
+        CoreComponentsTranslationModule.forRoot()/*,
+        LocalizationModule*/
+    ],
+    declarations: [
+        LoginComponent,
+        LoginUsernamePasswordComponent,
+        LoginMfaCodeSetupComponent,
+        LoginMfaCodeEntryComponent,
+        LoginChangePasswordComponent
+    ],
+    providers: [
+        LoginAdapterService,
+        LoginService/*,
+        LocalizeService*/
+    ],
+    exports: [
+        LoginComponent
+    ]
+})
+export class LoginModule {
+}