Update Xero registration for full API integration

src/app/settings/settings.component.html

@@ -57,9 +57,11 @@
 			</mat-dialog-actions>
 		</mat-tab>
 		<mat-tab label="Advanced">
-			<a mat-raised-button color="primary" href="{{this.xeroLink}}">
+			<div align="center">
-				Link to Xero
+				<a mat-raised-button color="primary" href="{{this.xeroLink}}">
-			</a>
+					Link to Xero
+				</a>
+			</div>
 		</mat-tab>
 	</mat-tab-group>
 </div>

src/app/settings/settings.component.ts

@@ -64,7 +64,7 @@ export class SettingsComponent implements OnInit {
 			xeroService.getXeroConfig();
 			this.clientIdUpdate.subscribe(clientId => {
 				this.clientId = clientId;
-				this.xeroLink = `https://login.xero.com/identity/connect/authorize?response_type=code&client_id=${this.clientId}&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Ftest&scope=accounting.transactions offline_access&state=1234`
+				this.xeroLink = `https://login.xero.com/identity/connect/authorize?response_type=code&client_id=${this.clientId}&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Ftest&scope=accounting.transactions offline_access&state=${this.owner.address.substring(0, 6)}`
 			});
 	}
 

src/app/xero.service.ts

@@ -12,7 +12,7 @@ var Buffer = require('buffer/').Buffer;
 export class XeroService {
 	beUrl = ConfigData.Be_URL;
 	clientId: string = '';
-	clientSecret: string = '';
+	//clientSecret: string = '';
 	xeroToken: any = {
 		accessToken: '',
 		refreshToken: '',
@@ -21,10 +21,10 @@ export class XeroService {
 		tokenType: ''
 	};
 	private _clientIdUpdated: BehaviorSubject<string> = new BehaviorSubject(this.clientId);
-	private _clientSecretUpdated: BehaviorSubject<string> = new BehaviorSubject(this.clientSecret);
+	//private _clientSecretUpdated: BehaviorSubject<string> = new BehaviorSubject(this.clientSecret);
 	private _tokenUpdated: BehaviorSubject<any> = new BehaviorSubject(this.xeroToken);
 	public readonly clientIdUpdate: Observable<string> = this._clientIdUpdated.asObservable();
-	public readonly clientSecretUpdate: Observable<string> = this._clientSecretUpdated.asObservable();
+	//public readonly clientSecretUpdate: Observable<string> = this._clientSecretUpdated.asObservable();
 	public readonly tokenUpdate: Observable<any> = this._tokenUpdated.asObservable();
 	private reqHeaders: HttpHeaders;
 
@@ -42,9 +42,9 @@ export class XeroService {
 		obs.subscribe(xeroDataResponse => {
 			if (xeroDataResponse.status == 200) {
 				this.clientId = xeroDataResponse.body!.xeroConfig.clientId;
-				this.clientSecret = xeroDataResponse.body!.xeroConfig.clientSecret;
+				//this.clientSecret = xeroDataResponse.body!.xeroConfig.clientSecret;
 				this._clientIdUpdated.next(Object.assign({}, this).clientId);
-				this._clientSecretUpdated.next(Object.assign({}, this).clientSecret);
+				//this._clientSecretUpdated.next(Object.assign({}, this).clientSecret);
 			} else {
 				console.log('No config in DB!');
 			}
@@ -53,21 +53,9 @@ export class XeroService {
 		return obs;
 	}
 
-	getXeroAccessToken(code: string){
+	getXeroAccessToken(code: string, address: string){
-		this.getXeroConfig().subscribe(xeroDataResponse => {
+		const params = new HttpParams().append('code', code).append('address', address);
-			console.log('XAT: '+this.clientId);
+		let obs = this.http.get(this.beUrl + 'api/xerotoken' , {headers: this.reqHeaders, params: params, observe: 'response'})
-			var xeroAuth = 'Basic ' + Buffer.from(`${this.clientId}:${this.clientSecret}`).toString('base64');
+		return obs;
-			var xeroHeaders = new HttpHeaders().set('Authorization', xeroAuth).append('Content-Type', 'application/x-www-form-urlencoded');
-			let obs = this.http.post('https://identity.xero.com/connect/token', `grant_type=authorization_code&code=${code}&redirect_uri=http://localhost:4200/test` , {headers: xeroHeaders, observe: 'response'})
-			obs.subscribe(tokenData => {
-				if (tokenData.status == 200) {
-					console.log(tokenData.body!);
-					this.xeroToken = tokenData.body!;
-					this._tokenUpdated.next(Object.assign({}, this).xeroToken);
-				} else {
-					console.log('Error: '+tokenData.status);
-				}
-			});
-		});
 	}
 }

src/app/xeroreg/xeroreg.component.css

@@ -0,0 +1,3 @@
+.text {
+	font-family: 'Spartan', sans-serif;
+}

src/app/xeroreg/xeroreg.component.html

@@ -1 +1,6 @@
-<p>test works!</p>
+<div *ngIf="!flag" align="center" class="text">
+	<h1>Connecting to Xero...</h1>
+</div>
+<div *ngIf="flag" align="center" class="text">
+	<h1>Connected to Xero!</h1>
+</div>

src/app/xeroreg/xeroreg.component.ts

@@ -1,13 +1,21 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
-import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import { UserService } from '../user.service';
+import { XeroService } from '../xero.service';
 import { Owner } from '../owner.model';
 import { Observable } from 'rxjs';
-import { XeroService } from '../xero.service';
 
 var Buffer = require('buffer/').Buffer;
 
+function sleep(ms:number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function redirect(r: Router) {
+        await sleep(2000);
+		r.navigate(['/shop']);
+}
+
 @Component({
   selector: 'app-xeroreg',
   templateUrl: './xeroreg.component.html',
@@ -16,38 +24,73 @@ var Buffer = require('buffer/').Buffer;
 
 	
 export class XeroRegComponent implements OnInit {
+	public owner:Owner = {
+		address: '',
+		name: '',
+		currency: '',
+		tax: false,
+		taxValue:0,
+		vat: false,
+		vatValue: 0,
+		first: '',
+		last: '',
+		email: '',
+		street: '',
+		city: '',
+		state: '',
+		postal: '',
+		phone: '',
+		paid: false,
+		website: '',
+		country: '',
+		zats: false,
+		invoices: false,
+		expiration: new Date(Date.now()).toISOString(),
+		payconf: false,
+		viewkey: ''
+	};
+	public ownerUpdate:Observable<Owner>;
+	public flag: boolean = false;
+
 
-	clientId: string = '';
-	clientSecret: string = '';
-	xeroToken: any;
-	clientIdUpdate: Observable<string>;
-	clientSecretUpdate: Observable<string>;
-	tokenUpdate: Observable<any>;
 
 	constructor(
 		public xeroService: XeroService,
+		public userService: UserService,
+		private router: Router,
 		private activatedRoute: ActivatedRoute
 	) {
-		this.tokenUpdate = xeroService.tokenUpdate;
+		this.ownerUpdate = userService.ownerUpdate;
-		this.clientIdUpdate = xeroService.clientIdUpdate;
+		this.ownerUpdate.subscribe((owner) => {
-		xeroService.getXeroConfig();
+			this.owner = owner;
-		this.clientIdUpdate.subscribe(clientId => {
-			this.clientId = clientId;
-		});
-		this.clientSecretUpdate = xeroService.clientSecretUpdate;
-		this.clientSecretUpdate.subscribe(clientSecret => {
-			this.clientSecret = clientSecret;
 		});
+		this.userService.findUser();
 	}
 
 	ngOnInit(): void {
-		this.activatedRoute.queryParams.subscribe((params) => {
+	}
-			console.log(params);
+
-			this.xeroService.getXeroAccessToken(params.code)
+	ngAfterViewInit(): void {
-			this.tokenUpdate.subscribe(token => {
+		this.ownerUpdate.subscribe((owner) => {
-				console.log(token);
+			this.owner = owner;
-				this.xeroToken = token;
+			this.activatedRoute.queryParams.subscribe((params) => {
+				console.log(params);
+				if (params.state === this.owner.address.substring(0,6)) {
+					this.xeroService.getXeroAccessToken(params.code, this.owner.address).subscribe(tokenData => {
+						if (tokenData.status == 200) {
+							console.log(tokenData.body!);
+							this.flag = true;
+							redirect(this.router);
+						} else {
+							console.log('Error: '+tokenData.status);
+							this.flag = false;
+						}
+					});
+				} else {
+					console.log('Error: State mismatch');
+				}
 			});
+
 		});
 	}