[DEV] add a generic entry

front/src/common/component/entry/entry.html

@@ -0,0 +1,9 @@
+<div class="top">
+	<input
+		type="text"
+		[placeholder]="placeholder"
+		required=""
+		[style.border]="hasError? '2px dashed red' : ''"
+		[value]="value"
+		(input)="onChangeValue($event.target.value)" />
+</div>

front/src/common/component/entry/entry.less

@@ -0,0 +1,9 @@
+input[type='text'] {
+	width: 100%;
+	padding: 12px 20px;
+	margin: 8px 0;
+	display: inline-block;
+	border: 1px solid #ccc;
+	box-sizing: border-box;
+	z-index: 5;
+}

front/src/common/component/entry/entry.spec.ts

@@ -0,0 +1,68 @@
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { PasswordEntryComponent } from './entry';
+
+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/entry/entry.ts

@@ -0,0 +1,31 @@
+/** @file
+ * @author Edouard DUPIN
+ * @copyright 2018, Edouard DUPIN, all right reserved
+ * @license PROPRIETARY (see license file)
+ */
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'app-entry',
+	templateUrl: 'entry.html',
+	styleUrls: ['entry.less'],
+})
+export class EntryComponent {
+	/// Value of the password
+	@Input() value: string = '';
+	/// Placeholder of the Value
+	@Input() placeholder: string = '';
+	/// The element has an error
+	@Input() hasError: boolean = false;
+	/// event when change the value of the password
+    @Output() changeValue: EventEmitter<string> = new EventEmitter();
+
+	/**
+	 * When input value change, need update the display and change the internal value.
+	 * @param newValue  New value set on the password
+	 */
+	onChangeValue(newValue: string): void {
+		this.value = newValue;
+		this.changeValue.emit(this.value);
+	}
+}