web-ui: Add base ui for the TransactionFinder

web-ui/src/app/app.component.ts

@@ -23,6 +23,9 @@ export class AppComponent {
   }
 
   englishLang(): Object {
-    return {};
+    return {
+      'action.find': 'Find',
+      'label.transactionId': 'Transaction Id'
+    };
   }
 }

web-ui/src/app/components/transaction-finder/transaction-finder.component.html

@@ -1,3 +1,12 @@
-<p>
-  transaction-finder works!
-</p>
+<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate role="form" class="form-horizontal">
+
+  <div class="form-group">
+    <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
+      <input formControlName="transactionId" type="text" id="transactionId" class="form-control" placeholder="{{ 'label.transactionId' | translate }}">
+    </div>
+    
+    <div class="text-left col-sm-offset-2">
+      <input type="submit" [disabled]="!form.valid" value="{{ 'action.find' | translate }}" class="btn btn-primary">
+    </div>
+  </div>
+</form>

web-ui/src/app/components/transaction-finder/transaction-finder.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'app-transaction-finder',
@@ -7,9 +9,22 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TransactionFinderComponent implements OnInit {
 
-  constructor() { }
+  form: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.createForm();
+  }
 
   ngOnInit() {
   }
 
+  private createForm() {
+    this.form = this.formBuilder.group({
+      transactionId: [null, [Validators.required, Validators.pattern('^[A-Fa-f0-9]{64}$')]],
+    });
+  }
+
+  onSubmit() {
+    console.log('submit now!');
+  }
 }