[DEV] add an async status icon display

front/src/common/component/async-action-status/async-status-component.html

@@ -0,0 +1,3 @@
+<div>
+	<img height="50px" [src]="getImage()"/>
+</div>

front/src/common/component/async-action-status/async-status-component.spec.ts

@@ -0,0 +1,68 @@
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { PasswordEntryComponent } from './async-status-component';
+
+describe('PasswordEntryComponent global test', () => {
+	let component: PasswordEntryComponent;
+	let fixture: ComponentFixture<PasswordEntryComponent>;
+	let input: HTMLInputElement;
+	let button: HTMLButtonElement;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [PasswordEntryComponent],
+		}).compileComponents();
+		fixture = TestBed.createComponent(PasswordEntryComponent);
+		component = fixture.componentInstance;
+		input = fixture.nativeElement.querySelector('div').querySelector('input');
+		button = fixture.nativeElement.querySelector('div').querySelector('button');
+	});
+
+	it('Test mode password (default)', () => {
+		fixture.detectChanges();
+		expect(input.textContent).toEqual('');
+		expect(button.textContent).toEqual('visibility_off');
+		expect(input.type).toEqual('password');
+	});
+
+	it('Test mode text', () => {
+		component.passwordVisibility = true;
+		fixture.detectChanges();
+		expect(input.textContent).toEqual('');
+		expect(button.textContent).toEqual('visibility');
+		expect(input.type).toEqual('text');
+	});
+
+	it('test click on hide button', fakeAsync(() => {
+		fixture.detectChanges();
+		expect(component.passwordVisibility).toEqual(false);
+		button.click();
+		tick();
+		fixture.detectChanges();
+		expect(component.passwordVisibility).toEqual(true);
+		expect(button.textContent).toEqual('visibility');
+		expect(input.type).toEqual('text');
+		button.click();
+		tick();
+		fixture.detectChanges();
+		expect(component.passwordVisibility).toEqual(false);
+		expect(button.textContent).toEqual('visibility_off');
+		expect(input.type).toEqual('password');
+	}));
+
+	it('Set password', fakeAsync(() => {
+		fixture.detectChanges();
+		expect(component.passwordVisibility).toEqual(false);
+		let tmpData = 'My beautifull Password';
+		input.value = tmpData;
+		input.dispatchEvent(new Event('input'));
+		fixture.detectChanges();
+		expect(input.textContent).toEqual(tmpData);
+		expect(component.value).toEqual(tmpData);
+		tmpData = '';
+		input.value = tmpData;
+		input.dispatchEvent(new Event('input'));
+		fixture.detectChanges();
+		expect(input.textContent).toEqual(tmpData);
+		expect(component.value).toEqual(tmpData);
+	}));
+});

front/src/common/component/async-action-status/async-status-component.ts

@@ -0,0 +1,37 @@
+/** @file
+ * @author Edouard DUPIN
+ * @copyright 2018, Edouard DUPIN, all right reserved
+ * @license PROPRIETARY (see license file)
+ */
+import { Component, Input } from '@angular/core';
+
+export enum AsyncActionState {
+	IDLE = "idle",
+	LOADING = "loading",
+	DONE = "done",
+	FAIL = "fail",
+}
+
+@Component({
+	selector: 'app-async-status-component',
+	templateUrl: 'async-status-component.html',
+	styleUrls: ['async-status-component.less'],
+})
+export class AsyncActionStatusComponent {
+	/// Value of the password
+	@Input() value: AsyncActionState = AsyncActionState.IDLE;
+	
+	public getImage(): string {
+		switch(this.value) {
+			case AsyncActionState.IDLE:
+				return '';
+			case AsyncActionState.LOADING:
+				return 'assets/images/load.svg';
+			case AsyncActionState.DONE:
+				return 'assets/images/validate.svg';
+			case AsyncActionState.FAIL:
+				return 'assets/images/validate-not.svg';
+
+		}
+	}	
+}