implement api key storage + cleanup

micossow · Oct 29, 2018 · 8fd3aeb · 8fd3aeb
1 parent 9d79999
commit 8fd3aeb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 31 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,6 +1,13 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div class="container">
-  <h1>Guild Wars 2 items viewer</h1>
+  <h1>Guild Wars 2 Item Inspector</h1>
+
+  <div class="input-group mb-3">
+    <input type="text" class="form-control" placeholder="API Key" [formControl]="apiKey">
+    <div class="input-group-append">
+      <button class="btn btn-primary" type="button" (click)="updateApiKey()">Save the Key to browser storage<br><small>nothing's gonnna be uploaded anywhere</small></button>
+    </div>
+  </div>
 
   <ngb-tabset type="pills">
     <ngb-tab title="Per storage">

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -7,7 +7,6 @@ import { catchError, map, tap } from 'rxjs/operators';
 import { of } from 'rxjs/observable/of';
 import 'rxjs/add/observable/forkJoin';
 import 'rxjs/add/operator/debounceTime';
-import { ApiStatus } from './apiStatus';
 import { Character, Item, ItemView, Stat, StatsView } from './gw2-models';
 
 import * as jQuery from 'jquery';
@@ -81,36 +80,13 @@ const WEAPON_TYPES = [
   'Spear'
 ]
 
-const ACCESS_TOKEN = '###';
-
-const HTTP_OPTIONS = {
-  headers: new HttpHeaders({
-    'Authorization': `Bearer ${ACCESS_TOKEN}`,
-    'Access-Control-Allow-Origin': '*'
-  })
-};
-
 @Component({
   selector: 'gw2-item',
   templateUrl: './gw2-item.component.html',
   styleUrls: ['./app.component.css']
 })
 export class GW2Item {
   @Input() itemView: ItemView;
-
-  //@ViewChild('t') public tooltip: NgbTooltip;
-
-  //clicked = false
-
-  //showTooltip(click: boolean) {
-  //  this.tooltip.open();
-  //  if (!this.clicked && click)
-  //    this.clicked = true;
-  //}
-
-  //hideTooltip() {
-  //  if (!this.clicked) this.tooltip.close();
-  //}
 }
 
 class Column {
@@ -124,9 +100,7 @@ class Column {
 })
 export class AppComponent implements OnInit {
   title = 'app';
-  status: ApiStatus = {
-    status: 'notok'
-  };
+  apiKey = new FormControl('');
   characters = [];
   charactersData: Character[];
   itemMap = {}
@@ -151,6 +125,17 @@ export class AppComponent implements OnInit {
   }
 
   async ngOnInit() {
+    let apiKey = localStorage.getItem('apiKey');
+    if (apiKey) {
+      this.apiKey.setValue(apiKey);
+    }
+    await this.init();
+  }
+
+  async init() {
+    if (!this.apiKey.value) {
+      return;
+    }
     await this.getCharacters();
     await this.getInventories();
     await this.getStatsAndItems();
@@ -173,16 +158,16 @@ export class AppComponent implements OnInit {
   }
 
   async getCharacters() {
-    let characters = await this.http.get<string[]>(`https://api.guildwars2.com/v2/characters?access_token=${ACCESS_TOKEN}`).toPromise();
+    let characters = await this.http.get<string[]>(`https://api.guildwars2.com/v2/characters?access_token=${this.apiKey.value}`).toPromise();
     this.characters = characters;
   }
 
   async getInventories() {
-    let bankPromise = this.http.get<ItemView[]>(`https://api.guildwars2.com/v2/account/bank?access_token=${ACCESS_TOKEN}`).toPromise();
+    let bankPromise = this.http.get<ItemView[]>(`https://api.guildwars2.com/v2/account/bank?access_token=${this.apiKey.value}`).toPromise();
 
     let promises: Array<Promise<Character>> = [];
     for (let character of this.characters) {
-      promises.push(this.http.get<Character>(`https://api.guildwars2.com/v2/characters/${character}?access_token=${ACCESS_TOKEN}`).toPromise());
+      promises.push(this.http.get<Character>(`https://api.guildwars2.com/v2/characters/${character}?access_token=${this.apiKey.value}`).toPromise());
     }
 
     this.bank = await bankPromise;
@@ -422,6 +407,13 @@ export class AppComponent implements OnInit {
     }
   }
 
+  async updateApiKey() {
+    if (this.apiKey.value) {
+      localStorage.setItem('apiKey', this.apiKey.value);
+      await this.init();
+    }
+  }
+
   private log(msg : string) {
     console.log(msg);
   }