[GNUnet-SVN] [gnunet-webui] 04/04: finished namestore page

[gnunet]

This is an automated email from the git hooks/post-receive script.

phil pushed a commit to branch master
in repository gnunet-webui.

commit 560b3975d75c56b347c295424ab35d66dd9c8adc
Author: Phil <address@hidden>
AuthorDate: Tue Aug 14 01:02:57 2018 +0200

    finished namestore page
---
 src/app/api.service.ts                             |  22 +-
 src/app/identity-page/identity-page.component.ts   |  16 +-
 src/app/{identity-api.ts => identity.ts}           |   4 +-
 .../namestore-page/namestore-page.component.html   | 214 ++++++++++++++-----
 src/app/namestore-page/namestore-page.component.ts | 229 ++++++++++++++++-----
 src/app/peerinfo-page/peerinfo-page.component.html |   3 +
 src/scss/components/_button.scss                   |   4 +-
 src/scss/objects/_grid.scss                        |   2 +-
 8 files changed, 372 insertions(+), 122 deletions(-)

diff --git a/src/app/api.service.ts b/src/app/api.service.ts
index f2b90bb..8973911 100644
--- a/src/app/api.service.ts
+++ b/src/app/api.service.ts
@@ -28,7 +28,7 @@ import { Observable, of } from 'rxjs';
 import { RestAPI } from './rest-api';
 import { GNSRecord } from './gns-record';
 import { PeerinfoResponse } from './peerinfo-response';
-import { IdentityAPI } from './identity-api';
+import { Identity } from './identity';
 import { catchError, map, tap } from 'rxjs/operators';
 import { MessagesService } from './messages.service';
 
@@ -46,24 +46,24 @@ export class ApiService {
   constructor(private http: HttpClient,
               private messages:MessagesService) { }
 
-  getIdentityAll (): Observable<IdentityAPI[]>{
-    return this.http.get<IdentityAPI[]>(this.identityURL+'/all')
+  getIdentityAll (): Observable<Identity[]>{
+    return this.http.get<Identity[]>(this.identityURL+'/all')
     .pipe(
       tap(json => this.handleJSON(json)),
       catchError(this.handleError('IdentityGETall', []))
     );
   }
 
-  getIdentityName (name: string): Observable<IdentityAPI>{
-    return this.http.get<IdentityAPI>(this.identityURL+'/name/'+name)
+  getIdentityName (name: string): Observable<Identity>{
+    return this.http.get<Identity>(this.identityURL+'/name/'+name)
     .pipe(
       tap(json => this.handleJSON(json)),
       catchError(this.handleError<any>('IdentityGETname', {}))
     );
   }
 
-  getIdentitySubsystem (subsystem_name: string): Observable<IdentityAPI>{
-    return 
this.http.get<IdentityAPI>(this.identityURL+'/subsystem/'+subsystem_name)
+  getIdentitySubsystem (subsystem_name: string): Observable<Identity>{
+    return 
this.http.get<Identity>(this.identityURL+'/subsystem/'+subsystem_name)
     .pipe(
       tap(json => this.handleJSON(json)),
       catchError(this.handleError<any>('IdentityGETsubsystem', {}))
@@ -130,7 +130,7 @@ export class ApiService {
     );
   }
 
-  postNamestoreName (gns_record: GNSRecord, name: string): Observable<any>{
+  postNamestoreName (name: string, gns_record: GNSRecord): Observable<any>{
     const options = {headers: {'Content-Type': 'application/json'}};
     return this.http.post<any>(this.namestoreURL+'/'+name, gns_record, options)
     .pipe(
@@ -169,7 +169,7 @@ export class ApiService {
       return this.http.get<GNSRecord[]>(this.gnsURL+'/'+lookup)
       .pipe(
         tap(json => this.handleJSON(json)),
-        catchError(this.handleError('NamestoreGETname', []))
+        catchError(this.handleError('GnsGET', []))
       );
     }
   }
@@ -192,7 +192,9 @@ export class ApiService {
   */
   private handleError<T> (operation = 'operation', result?: T) {
     return (error: any): Observable<T> => {
-      result.error = true;
+      let test:any = result;
+      test.error = true;
+      result = test;
       if((operation == 'IdentityPOST') && (error.status == '409'))
       {
         this.messages.pushError('Identity already exists');
diff --git a/src/app/identity-page/identity-page.component.ts 
b/src/app/identity-page/identity-page.component.ts
index 90fa943..bd136e3 100644
--- a/src/app/identity-page/identity-page.component.ts
+++ b/src/app/identity-page/identity-page.component.ts
@@ -25,7 +25,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Pipe } from "@angular/core";
 import { ApiService } from '../api.service';
-import { IdentityAPI } from '../identity-api';
+import { Identity } from '../identity';
 import { MessagesService } from '../messages.service';
 
 @Component({
@@ -34,12 +34,12 @@ import { MessagesService } from '../messages.service';
 })
 export class IdentityPageComponent implements OnInit {
 
-  identities: IdentityAPI[];
-  filteredItems: IdentityAPI[];
+  identities: Identity[];
+  filteredItems: Identity[];
   rename: boolean = false;
   delete: boolean = false;
   addsubsystem: boolean = false;
-  changeIdentity: IdentityAPI;
+  changeIdentity: Identity;
   newname:string;
   json: any;
   is_displayed: boolean = true;
@@ -75,7 +75,7 @@ export class IdentityPageComponent implements OnInit {
     });
   }
 
-  onClickRename(identity: IdentityAPI){
+  onClickRename(identity: Identity){
     this.message.dismissAll();
     this.is_displayed = false;
     this.rename = true;
@@ -83,7 +83,7 @@ export class IdentityPageComponent implements OnInit {
   }
 
 
-  onRename(identity: IdentityAPI){
+  onRename(identity: Identity){
     this.request = true;
     this.onReset();
     this.filteredItems = [];
@@ -105,7 +105,7 @@ export class IdentityPageComponent implements OnInit {
     this.is_displayed = true;
   }
 
-  onClickDelete(identity: IdentityAPI){
+  onClickDelete(identity: Identity){
     this.message.dismissAll();
     this.is_displayed = false;
     this.delete = true;
@@ -129,7 +129,7 @@ export class IdentityPageComponent implements OnInit {
   }
 
 
-  onClickAddSubsystem(identity: IdentityAPI){
+  onClickAddSubsystem(identity: Identity){
     this.message.dismissAll();
     this.is_displayed = false;
     this.addsubsystem = true;
diff --git a/src/app/identity-api.ts b/src/app/identity.ts
similarity index 93%
rename from src/app/identity-api.ts
rename to src/app/identity.ts
index 005276f..74edf31 100644
--- a/src/app/identity-api.ts
+++ b/src/app/identity.ts
@@ -17,12 +17,12 @@
    */
 /**
  * @author Philippe Buschmann
- * @file src/app/identity-api.ts
+ * @file src/app/identity.ts
  * @brief
  *
  */
 
-export class IdentityAPI{
+export class Identity{
   pubkey: string;
   name: string;
 }
diff --git a/src/app/namestore-page/namestore-page.component.html 
b/src/app/namestore-page/namestore-page.component.html
index f5773c9..3d46a93 100644
--- a/src/app/namestore-page/namestore-page.component.html
+++ b/src/app/namestore-page/namestore-page.component.html
@@ -1,63 +1,177 @@
+<div *ngIf="!this.default_zone">
+  <div class="c-card c-card--no-padding u-p-x3">
+    <h1 class="o-type-22">Select temporary or default zone:</h1>
+  </div>
+  <div class="u-mv-x1 c-card" *ngFor="let identity of all_identities">
+    <p class="u-color-grey address@hidden u-text-center">Public Key: <span 
class="">{{identity.pubkey}}</span></p>
+    <p class="o-type-20 address@hidden u-text-center">{{identity.name}}</p>
+    <div class="o-list o-list--inline address@hidden u-text-center">
+      <a class="c-button c-button--outline o-list__item" 
(click)="setIdentityAsDefault(identity)">Set Identity as default</a>
+      <a class="c-button o-list__item" (click)="useIdentity(identity)">Use 
Identity temporary</a>
+    </div>
+  </div>
+</div>
 
-<div class="c-card u-p-x3">
-  <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Search Namesystem</h1>
-  <div class="o-list o-list--inline">
-    <div class="o-list__item">
-      <p class="u-color-grey">Name:</p>
-      <input class="c-input u-2/2" placeholder="Name" [(ngModel)]="gns_name" />
+<div *ngIf="this.default_zone">
+  <div *ngIf="!add_record && !search_gns">
+    <div class="c-card u-mb-x1 o-list ">
+      <div class="o-list__item">
+        <p class="u-color-grey">Namestore Zone:</p>
+        <p class="o-type-22 u-mb-x2">{{subsystem_identity.name}} - 
{{subsystem_identity.pubkey}}</p>
+      </div>
+      <div class="o-list__item u-text-right">
+        <a class="c-button" (click)="changeZone()">Change Zone</a>
+      </div>
     </div>
-    <div class="o-list__item">
-      <p class="u-color-grey">Record Type (optional):</p>
-      <select class="c-input c-input--select u-2/2" 
[(ngModel)]="gns_recordtype" name="record_type">
-        <option [value]="'ANY'">Any</option>
-        <option [value]="'PKEY'">Public Key</option>
-        <option [value]="'NICK'">Nickname</option>
-        <option [value]="'LEHO'">Legacy Hostname</option>
-        <option [value]="'VPN'">VPN resolution</option>
-        <option [value]="'GNS2DNS'">GNS 2 DNS</option>
-        <option [value]="'BOX'">Boxed Record</option>
-        <option [value]="'PLACE'">Social Place</option>
-        <option [value]="'PHONE'">Phone (Coversation)</option>
-        <option [value]="'ID_ATTR'">Identity Attribute</option>
-        <option [value]="'ID_TOKEN'">Identity Token</option>
-        <option [value]="'ID_TOKEN_METADATA'">Identity Metadata 
(Token)</option>
-        <option [value]="'CREDENTIAL'">Credential</option>
-        <option [value]="'POLICY'">Policy</option>
-        <option [value]="'ATTRIBUTE'">Reverse lookup (Attribute)</option>
-        <option [value]="'ABE_KEY'">ABE Record</option>
-        <option [value]="'ABE_MASTER'">ABE Master Key</option>
-      </select>
+    <!--<div class="c-card u-p-x3">
+      <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Search 
Namesystem</h1>
+      <div class="o-list o-list--inline">
+        <div class="o-list__item">
+          <p class="u-color-grey">Name:</p>
+          <input class="c-input u-2/2" placeholder="Name" 
[(ngModel)]="gns_name" />
+        </div>
+        <div class="o-list__item">
+          <p class="u-color-grey">Record Type (optional):</p>
+          <select class="c-input c-input--select u-2/2" 
[(ngModel)]="gns_recordtype" name="record_type">
+            <option [value]="'ANY'">Any</option>
+            <option [value]="'PKEY'">Public Key</option>
+            <option [value]="'NICK'">Nickname</option>
+            <option [value]="'LEHO'">Legacy Hostname</option>
+            <option [value]="'VPN'">VPN resolution</option>
+            <option [value]="'GNS2DNS'">GNS 2 DNS</option>
+            <option [value]="'BOX'">Boxed Record</option>
+            <option [value]="'PLACE'">Social Place</option>
+            <option [value]="'PHONE'">Phone (Coversation)</option>
+            <option [value]="'ID_ATTR'">Identity Attribute</option>
+            <option [value]="'ID_TOKEN'">Identity Token</option>
+            <option [value]="'ID_TOKEN_METADATA'">Identity Metadata 
(Token)</option>
+            <option [value]="'CREDENTIAL'">Credential</option>
+            <option [value]="'POLICY'">Policy</option>
+            <option [value]="'ATTRIBUTE'">Reverse lookup (Attribute)</option>
+            <option [value]="'ABE_KEY'">ABE Record</option>
+            <option [value]="'ABE_MASTER'">ABE Master Key</option>
+          </select>
+        </div>
+        <div class="o-list__item u-align-bottom">
+          <div class="u-text-right"><a class="c-button u-mt-x2" 
(click)="onSearch()">Search</a></div>
+        </div>
+      </div>
+    </div>-->
+    <div class="o-grid">
+      <div class="o-grid__col u-1/2">
+        <div class="c-card u-mv-x1 u-text-center">
+          <a class="c-button" (click)="openAddRecordMenu()">Add New Record</a>
+        </div>
+      </div>
+      <div class="o-grid__col u-1/2">
+        <div class="c-card u-mv-x1 u-text-center">
+          <a class="c-button" (click)="openSearchGNSMenu()">GNS Search</a>
+        </div>
+      </div>
     </div>
-    <div class="o-list__item u-align-bottom">
-      <div class="u-text-right"><a class="c-button u-mt-x2" 
(click)="onSearch()">Search</a></div>
+    <div *ngIf="!request" class="u-mv-x1">
+      <div class="o-grid">
+        <div class="o-grid__col u-1/1 u-1/address@hidden" *ngFor="let record 
of gns_records">
+          <div class="c-card u-p-x2 u-mv-x1" >
+            <p class="u-color-grey">Record Name</p>
+            <p class="o-type-28 u-mb-x1">{{record.record_name}}</p>
+            <div>
+              <span class="u-color-grey">{{record.record_type}}:</span> 
{{record.value}}<br>
+              <span class="u-color-grey">Expires on:</span> 
{{record.expiration_time}} <br>
+              <span class="u-color-grey">Flag:</span> {{record.flag}}
+            </div>
+            <div class="o-list__item u-mh-x1 u-text-right">
+              <div class="">
+                <a class="c-button c-button--danger" 
(click)="deleteRecord(record.record_name)">
+                  <i class="fa fa-trash"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="c-card u-mv-x2">
-  <h1 class="o-type-22 u-color-primary">Add new Namestore entry</h1>
-  <div class="o-list">
-    <div class="o-list__item">
-      <p class="u-color-grey">Label:</p>
-      <input class="c-input" placeholder="Label" 
[(ngModel)]="gns_record.label" name="label" />
+  <div *ngIf="add_record">
+    <div class="c-card">
+      <h1 class="o-type-22 u-mb-x3">Add GNS Record</h1>
+      <div class="">
+        <div class="u-mb-x2">
+          <p class="u-color-grey">Record Name</p>
+          <input class="c-input" placeholder="Name" 
[(ngModel)]="gns_record_add.record_name">
+        </div>
+        <div class="u-mb-x2">
+          <p class="u-color-grey">Record Type</p>
+          <input class="c-input" placeholder="e.g. A, AAAA, PKEY" 
[(ngModel)]="gns_record_add.record_type">
+        </div>
+        <div class="u-mb-x2">
+          <p class="u-color-grey">Value</p>
+          <input class="c-input" placeholder="e.g. 1.1.1.1, 1::1, ..." 
[(ngModel)]="gns_record_add.value">
+        </div>
+        <div class="u-mb-x2">
+          <p class="u-color-grey">Expiration Date</p>
+          <input class="c-input" placeholder="Expiration" 
[(ngModel)]="gns_record_add.expiration_time">
+        </div>
+        <div class="u-mb-x2">
+          <p class="u-color-grey">Flag</p>
+          <input class="c-input" placeholder="Flag" type="number" value="0" 
[(ngModel)]="gns_record_add.flag">
+        </div>
+        <div>
+          <a class="c-button u-mr-x1" (click)="addRecord(gns_record_add)">Add 
Record</a>
+          <a class="c-button c-button--outline" 
(click)="cancelAddRecord()">Cancel</a>
+        </div>
+      </div>
     </div>
-    <div class="o-list__item">
-      <p class="u-color-grey">Record Type:</p>
-      <input class="c-input" placeholder="Type" [(ngModel)]="gns_record.type" 
name="type" />
+  </div>
+
+  <div *ngIf="search_gns">
+    <div class="c-card u-p-x3" >
+      <h1 class="o-type-22 u-mb-x3 u-color-primary-light" >Search 
Namesystem</h1>
+      <div class="o-list">
+        <div class="o-list__item u-mb-x2">
+          <p class="u-color-grey">Name:</p>
+          <input class="c-input u-2/2" placeholder="Name" 
[(ngModel)]="gns_search_name" />
+        </div>
+        <div class="o-list__item u-mb-x2">
+          <p class="u-color-grey">Record Type (optional):</p>
+          <select class="c-input c-input--select u-2/2" 
[(ngModel)]="gns_search_type" name="record_type">
+            <option [value]="'ANY'">Any</option>
+            <option [value]="'PKEY'">Public Key</option>
+            <option [value]="'NICK'">Nickname</option>
+            <option [value]="'LEHO'">Legacy Hostname</option>
+            <option [value]="'VPN'">VPN resolution</option>
+            <option [value]="'GNS2DNS'">GNS 2 DNS</option>
+            <option [value]="'BOX'">Boxed Record</option>
+            <option [value]="'PLACE'">Social Place</option>
+            <option [value]="'PHONE'">Phone (Coversation)</option>
+            <option [value]="'ID_ATTR'">Identity Attribute</option>
+            <option [value]="'ID_TOKEN'">Identity Token</option>
+            <option [value]="'ID_TOKEN_METADATA'">Identity Metadata 
(Token)</option>
+            <option [value]="'CREDENTIAL'">Credential</option>
+            <option [value]="'POLICY'">Policy</option>
+            <option [value]="'ATTRIBUTE'">Reverse lookup (Attribute)</option>
+            <option [value]="'ABE_KEY'">ABE Record</option>
+            <option [value]="'ABE_MASTER'">ABE Master Key</option>
+          </select>
+        </div>
+        <div class="o-list__item u-align-bottom">
+          <div class="u-text-right">
+            <a class="c-button u-mr-x1" 
(click)="searchGNSRecord(gns_search_name,gns_search_type)">Search</a>
+            <a class="c-button c-button--outline" 
(click)="cancelSearchGNS()">Cancel</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="c-card u-mt-x1" *ngFor="let item of gns_search_result">
+      Record type: {{item.record_type}}<br>
+      Record value: {{item.value}}<br>
+      Expires: {{item.expiration_time}}
     </div>
   </div>
-  <a class="c-button" (click)="onGNSRecordAdd()" >Test GNS_record</a>
 </div>
 
-<div *ngIf="request" class="u-text-center"><div class="c-spinner"></div></div>
 
-<div *ngIf="!request" class="u-mt-x2">
-  <div class="c-card u-mv-x1" *ngFor="let record of gns_records">
-    <h1>{{record.label}}:</h1>
-    <div>
-      {{record.type}}: {{record.value}}<br>
-      expiration_time: {{record.expiration_time}} <br>
-      flag: {{record.flag}}
-    </div>
-  </div>
+<div *ngIf="request" class="u-text-center u-m-x3">
+  <div class="c-spinner"></div>
 </div>
diff --git a/src/app/namestore-page/namestore-page.component.ts 
b/src/app/namestore-page/namestore-page.component.ts
index aa809d3..773425a 100644
--- a/src/app/namestore-page/namestore-page.component.ts
+++ b/src/app/namestore-page/namestore-page.component.ts
@@ -1,30 +1,32 @@
 /*
-   This file is part of GNUnet.
-   Copyright (C) 2012-2015 GNUnet e.V.
-
-   GNUnet is free software: you can redistribute it and/or modify it
-   under the terms of the GNU Affero General Public License as published
-   by the Free Software Foundation, either version 3 of the License,
-   or (at your option) any later version.
-
-   GNUnet is distributed in the hope that it will be useful, but
-   WITHOUT ANY WARRANTY; without even the implied warranty of
-   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-   Affero General Public License for more details.
-
-   You should have received a copy of the GNU Affero General Public License
-   along with this program.  If not, see <http://www.gnu.org/licenses/>.
-   */
+This file is part of GNUnet.
+Copyright (C) 2012-2015 GNUnet e.V.
+
+GNUnet is free software: you can redistribute it and/or modify it
+under the terms of the GNU Affero General Public License as published
+by the Free Software Foundation, either version 3 of the License,
+or (at your option) any later version.
+
+GNUnet is distributed in the hope that it will be useful, but
+WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
 /**
- * @author Philippe Buschmann
- * @file src/app/namestore-page/namestore-page.component.ts
- * @brief
- *
- */
+* @author Philippe Buschmann
+* @file src/app/namestore-page/namestore-page.component.ts
+* @brief
+*
+*/
 
 import { Component, OnInit } from '@angular/core';
 import { ApiService } from '../api.service';
 import { GNSRecord } from '../gns-record';
+import { Identity } from '../identity';
+import { MessagesService } from '../messages.service';
 
 @Component({
   selector: 'app-namestore-page',
@@ -32,26 +34,54 @@ import { GNSRecord } from '../gns-record';
 })
 export class NamestorePageComponent implements OnInit {
 
-  gns_name:string = '';
-  gns_recordtype:string = 'ANY';
-  private gns_response:any =[];
-
   gns_record: GNSRecord = new GNSRecord();
   gns_records: GNSRecord[] = [];
 
-  request: boolean = false;
+  gns_record_add: GNSRecord = new GNSRecord();
+
+  subsystem_identity: Identity;
+  all_identities: Identity[];
 
+  gns_search_name: string = '';
+  gns_search_type: string = 'ANY';
+  gns_search_result: GNSRecord[] = [];
+
+  add_record: boolean = false;
+  search_gns: boolean = false;
+  request: boolean = false;
+  default_zone: boolean = false;
   private url: string;
 
-  constructor(private apiService:ApiService) { }
+  constructor(private apiService:ApiService, private messages:MessagesService) 
{ }
 
   ngOnInit() {
-    this.getGNSRecords();
+    this.getSubsystemIdentity();
   }
 
   getGNSRecords(){
     this.request = true;
-    this.apiService.getGNSRecords().subscribe(data => {
+    this.apiService.getNamestore().subscribe((data: any) => {
+      if(data)
+      if(!data.error)
+      this.default_zone = true;
+      if(data instanceof Array)
+      {
+        this.gns_records = data;
+      }
+      else
+      {
+        this.gns_records = [];
+      }
+      this.request = false;
+    });
+  }
+
+  getTemporaryGNSRecords(name: string){
+    this.request = true;
+    this.apiService.getNamestoreName(name).subscribe((data: any) => {
+      if(data)
+      if(!data.error)
+      this.default_zone = true;
       if(data instanceof Array)
       {
         this.gns_records = data;
@@ -64,30 +94,131 @@ export class NamestorePageComponent implements OnInit {
     });
   }
 
-  onSearch(){
-    this.url = '?name='+this.gns_name;
-    if(this.gns_recordtype != null){
-      this.url += '&record_type='+this.gns_recordtype;
-    }
-    console.log(this.url);
-    this.apiService.searchNameSystem(this.url).subscribe(data => {
-      this.gns_response = data;
-      console.log(data);
+  getSubsystemIdentity(){
+    this.request = true;
+    this.apiService.getIdentitySubsystem('namestore').subscribe((data: any) => 
{
+      if(data)
+      {
+        if(!data.error)
+        {
+          this.default_zone = true;
+          this.getGNSRecords();
+        }
+        else{
+          this.getIdentities();
+        }
+      }
+      this.subsystem_identity = data;
+      this.request = false;
+    });
+  }
+
+  getIdentities(){
+    this.request = true;
+    this.apiService.getIdentityAll().subscribe((data: Identity[]) => {
+      this.all_identities = data;
+      this.request = false;
+    });
+  }
+
+  setSubsystemIdentity(name:string){
+    this.request = true;
+    this.apiService.putIdentitySubsystem(name,'namestore').subscribe(data => {
+      if (data)
+      if(!data.error)
+      this.messages.pushSuccess('Add subsystem successful');
+
+      if (!data)
+      this.messages.pushSuccess('Add subsystem successful');
+
+      this.getGNSRecords();
+      this.request = false;
+    });
+  }
+
+  useIdentity(identity: Identity){
+    this.messages.dismissAll();
+    this.subsystem_identity = identity;
+    this.getTemporaryGNSRecords(identity.name);
+    this.default_zone = true;
+  }
+  setIdentityAsDefault(identity: Identity) {
+    this.messages.dismissAll();
+    this.subsystem_identity = identity;
+    this.setSubsystemIdentity(identity.name);
+    this.default_zone = true;
+  }
+
+  addRecord(gns_record: GNSRecord){
+    this.request = true;
+    this.messages.dismissAll();
+    
this.apiService.postNamestoreName(this.subsystem_identity.name,gns_record).subscribe(data
 => {
+      if (data)
+      {
+        if(!data.error)
+        {
+          this.messages.pushSuccess('Add record successful');
+          this.add_record = false;
+        }
+      }
+
+      if (!data)
+      {
+        this.messages.pushSuccess('Add record successful');
+        this.add_record = false;
+      }
+
+      this.getTemporaryGNSRecords(this.subsystem_identity.name);
+      this.request = false;
+    });
+  }
+
+  deleteRecord(record_name: string){
+    this.request = true;
+    
this.apiService.deleteNamestoreName(this.subsystem_identity.name,record_name).subscribe(data
 => {
+      if (data)
+        if(!data.error)
+          this.messages.pushSuccess('Record delete successful');
+
+      if (!data)
+        this.messages.pushSuccess('Record delete successful');
+
+      this.getTemporaryGNSRecords(this.subsystem_identity.name);
+      this.request = false;
     });
   }
 
-  onGNSRecordAdd(){/*
-    this.gns_record = new GNSRecord();
-    this.gns_record.label = 'test_name12';
-    this.gns_record.type = 'PKEY';
-    this.gns_record.expiration_time = 'never';
-    this.gns_record.flag = -1;
-    this.gns_record.value = 
'EY1FZ4CNHYXRB4MS1KVB7ZSS0FZ2WBCQBR3J438H6P8EP5BPBJ40';
-    this.apiService.addGNSRecord(this.gns_record).subscribe(data => {
-      console.log(data);
-    });*/
-    console.log(this.gns_record);
+  changeZone(){
+    this.default_zone = false;
+    this.getIdentities();
+  }
+
+  openAddRecordMenu(){
+    this.add_record = true;
+  }
+
+  cancelAddRecord(){
+    this.add_record = false;
+  }
 
+  openSearchGNSMenu(){
+    this.search_gns = true;
+  }
+
+  cancelSearchGNS(){
+    this.search_gns = false;
+  }
+
+  searchGNSRecord(record_name:string, record_type:string){
+    this.request = true;
+    this.apiService.getGNSlookup(record_name,record_type).subscribe((data: 
any) => {
+      if(data)
+        if(data.error)
+          this.messages.pushError("GNS lookup failed");
+
+      this.gns_search_result = data;
+      this.request = false;
+    });
   }
 
 }
diff --git a/src/app/peerinfo-page/peerinfo-page.component.html 
b/src/app/peerinfo-page/peerinfo-page.component.html
index 3d890b4..0ca707b 100644
--- a/src/app/peerinfo-page/peerinfo-page.component.html
+++ b/src/app/peerinfo-page/peerinfo-page.component.html
@@ -1,5 +1,8 @@
 
 <h1 class="o-type-35 c-card">Peerinfo</h1>
+<div *ngIf="request" class="u-text-center u-m-x3">
+  <div class="c-spinner"></div>
+</div>
 <div class="c-card u-mv-x1" *ngFor="let item of peerinfo">
   <p class="u-color-grey">Peer:</p>
   <p class="o-type-22 u-mb-x2">{{item.peer}}</p>
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index 5fc3f90..e088d89 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -4,9 +4,9 @@ $button-bgcolor-hover : darken($button-bgcolor, 10%);
 $button-color : $color-white;
 $button-radius : 3px;
 
-$button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
+$button-outline-padding : ( $baseline-x2 )( $baseline-x3 );
 $button-outline-bgcolor: transparent;
-$button-outline-color: $color-primary;
+$button-outline-color: $color-primary-button;
 $button-outline-color-hover: darken( $button-outline-color, 10% );
 
 .c-button {
diff --git a/src/scss/objects/_grid.scss b/src/scss/objects/_grid.scss
index 30312ca..b5be991 100644
--- a/src/scss/objects/_grid.scss
+++ b/src/scss/objects/_grid.scss
@@ -8,7 +8,7 @@
  * Type: Boolean
  */
 
-$iota-objs-grid-aligned: false;
+$iota-objs-grid-aligned: true;
 
 
 /**

-- 
To stop receiving notification emails like this one, please contact
address@hidden