Internationalization process starting

languages.csv

@@ -0,0 +1,13 @@
+"encode_id","view_name","view_element","view_element_text"
+"en-US","login","login_confirm_login","ZGo confirms your login on the Zcash blockhain"
+"en-US","login","login_connect_to_zgo","Connect your wallet to ZGo"
+"en-US","login","login_enter_pin","Enter the PIN sent by ZGo to confirm wallet ownership:"
+"en-US","login","login_last_block","Last block seen:"
+"en-US","login","login_link_wallet","Link Wallet"
+"en-US","main","main_price_data","Price data provided by CoinGecko API"
+"es-US","login","login_confirm_login","ZGo confirma su ingreso en la cadena de Zcash"
+"es-US","login","login_connect_to_zgo","Conectar su billetera a ZGo"
+"es-US","login","login_enter_pin","Ingrese el PIN enviado por ZGo para confirmar su billetera:"
+"es-US","login","login_last_block","Ultimo Bloque Verificado: "
+"es-US","login","login_link_wallet","Asociar Billetera"
+"es-US","main","main_price_data","Precios provistos por API de CoinGecko"

src/app/language.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LanguageService } from './language.service';
+
+describe('LanguageService', () => {
+  let service: LanguageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LanguageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/language.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { viewElement } from './viewelement.model';
+import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
+
+import { ConfigData } from './configdata';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class LanguageService {
+
+  private baseURL = 'http://www.test.com/getlang';
+
+  constructor(private http:HttpClient) { 
+  }
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json'
+    })
+  };
+
+  _getViewElements ( viewName:string, 
+                    encoding:string = 'en-US' ){
+
+    
+    const vElem : string = '{' +
+              '"login_confirm_login":"ZGo confirma su ingreso en la cadena de Zcash"' + ',' +
+              '"login_connect_to_zgo":"Conectar su billetera a ZGo"' + ',' +
+              '"login_enter_pin":"Ingrese el PIN enviado por ZGo para confirmar su billetera:"' + ',' +
+              '"login_last_block":"Ultimo Bloque Verificado: "' + ',' +
+              '"login_link_wallet":"Asociar Billetera"' + '}';  
+
+    return vElem;
+
+  }
+
+  getViewElements ( viewName:string, 
+                    encoding:string = 'en-US' )  {
+
+    return this.http.get<any>(this.baseURL + 
+                        '/?lang_id=' + encoding +
+                        '&viewname=' + viewName);
+
+  }  
+   
+}

src/app/login/login.component.html

@@ -1,32 +1,32 @@
 <div align="center" class="text">
 	<mat-card class="coolcard">
 		<img src="/assets/logo-new-white_01.png" height="120px" />
-	<p class="text">Last block seen: <span class="numbers">{{ heightUpdate | async }}</span></p>
+	<p class="text">{{ vE.loginLastBlock }}<span class="numbers">{{ heightUpdate | async }}</span></p>
 	</mat-card>
 </div>
 <div align="center">
 	<mat-card class="centercard">
 		<h3>The Zcash Register</h3>
 			<mat-vertical-stepper #stepper linear>
-				<mat-step label="Connect your wallet to ZGo" editable="false">
+				<mat-step label= "{{ vE.loginConnectToZGo }}" editable="false">
 					<mat-card>
 						<div align="center" id="info">
 							<mat-card-actions>
 								<button mat-raised-button color="primary" (click)="login(stepper)">
-									<mat-icon class="icon">login</mat-icon><span class="bigbutton">Link wallet</span>
+									<mat-icon class="icon">login</mat-icon><span class="bigbutton">{{ vE.loginLinkWallet }}</span>
 								</button>
 							</mat-card-actions>
 						</div>
 					</mat-card>
 				</mat-step>
-				<mat-step label="ZGo confirms your login on the Zcash blockhain:" editable="false">
+				<mat-step label="{{ vE.loginConfirmLogin }}" editable="false">
 					<p>{{barMessage}}</p>
 					<mat-progress-bar
 						[mode]="barMode"
 						[value]="barValue">
 					</mat-progress-bar>
 				</mat-step>
-				<mat-step label="Enter the PIN sent by ZGo to confirm wallet ownership:">
+				<mat-step label="{{ vE.loginEnterPin }}">
 					<mat-card [formGroup]="pinForm">
 						<h4>
 							Check your wallet

src/app/login/login.component.ts

@@ -8,15 +8,25 @@ import { UserService } from '../user.service';
 import { FullnodeService } from '../fullnode.service';
 import { ScanComponent} from '../scan/scan.component';
 import { Tx } from '../tx.model';
-import {User} from '../user.model';
+import { User } from '../user.model';
 import { Owner } from '../owner.model';
 import { Subscription, Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { v4 as uuidv4 } from 'uuid';
+
+import { LanguageService } from '../language.service';
+
 var QRCode = require('easyqrcodejs');
 var URLSafeBase64 = require('urlsafe-base64');
 var Buffer = require('buffer/').Buffer;
 
+interface _vE_login {
+    	login_confirm_login : string,
+    	login_connect_to_zgo : string,
+    	login_enter_pin : string,
+    	login_last_block : string,
+    	login_link_wallet : string
+}
 
 @Component({
 	selector: 'app-login',
@@ -82,6 +92,21 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	entryForm: UntypedFormGroup;
 	pinForm: UntypedFormGroup;
 
+    public vResponse : _vE_login = {
+    	login_confirm_login : '',
+    	login_connect_to_zgo : '',
+    	login_enter_pin : '',
+    	login_last_block : '',
+    	login_link_wallet : ''
+    }; 
+
+    public vE = {
+    	loginConfirmLogin : '',
+    	loginConnectToZGo : '',
+    	loginEnterPin : '',
+    	loginLastBlock : '',
+    	loginLinkWallet : ''
+    }
 
 	constructor(
 		private fb: UntypedFormBuilder,
@@ -90,7 +115,8 @@ export class LoginComponent implements OnInit, AfterViewInit {
 		private router: Router,
 		public userService: UserService,
 		private dialog: MatDialog,
-		private _changeDetectorRef: ChangeDetectorRef
+		private _changeDetectorRef: ChangeDetectorRef,
+		private languageService: LanguageService
 	){
 		//this.fullnodeService.getAddr();
 		this.entryForm = fb.group({
@@ -116,6 +142,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	}
 
 	ngAfterViewInit(){
+
 		//console.log('Step', this.myStepper);
 		this.pinError = false;
 		//console.log('Activated route data in Component:::', this.activatedRoute.data);
@@ -135,6 +162,25 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	}
 
 	ngOnInit(){
+ 
+ 		this.languageService.getViewElements('login','es-US').subscribe(
+					response => { 
+						console.log('Received >> ', response );
+					    var xv = JSON.parse(response) as _vE_login;
+
+						console.log('Last block -> ', );
+/*				        this.vE.loginLastBlock = vElemObject.login_last_block;
+				        
+				        this.vE.loginConnectToZGo = vElemObject.login_connect_to_zgo;
+				        this.vE.loginLinkWallet = vElemObject.login_link_wallet;
+				        this.vE.loginConfirmLogin = vElemObject.login_confirm_login;
+				        this.vE.loginEnterPin = vElemObject.login_enter_pin;
+*/
+					},
+					error  => { console.log('Error >> ',error); }
+				);
+       
+
 		this.intervalHolder = setInterval(() => {
 			this.fullnodeService.getHeight();
 			//this.userService.findUser();

src/app/viewelement.model.ts

@@ -0,0 +1,3 @@
+export interface viewElement {
+	text: string;
+}