22 files changed, 383 insertions, 76 deletions

diff --git a/src/app/api.service.ts b/src/app/api.service.ts
index 9756bd4..579939d 100644
--- a/src/app/api.service.ts
+++ b/src/app/api.service.ts
@@ -12,11 +12,14 @@ import { MessagesService } from './messages.service';
 export class ApiService {
   apis: RestAPI[] = [
     {name: 'Identity API', desc: 'This is the identity API', link: 'identity'},
-    {name: 'Rest API 2', desc: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin.', link: 'rest_api2'},
-    {name: 'Rest API 3', desc: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin.', link: 'rest_api3'}
+    {name: 'GNS API', desc: 'This is the gns API', link: 'gns'},
+    {name: 'Namestore API', desc: 'This is the namestore API', link: 'namestore'},
+    {name: 'Peerstore API', desc: 'This is the peerstore API', link: 'peerstore'},
   ];
 
-  private identityURL = 'http://localhost:7776/identity';  // URL to GNUnet identity web api
+  private restURL = 'http://localhost:7776/'
+  private identityURL = this.restURL+'identity';
+  private gnsURL = this.restURL+'gns';
 
   constructor(private http: HttpClient,
               private messages:MessagesService) { }
@@ -62,6 +65,18 @@ export class ApiService {
       catchError(this.handleError('changeIdentity', []))
     );
   }
+
+  searchNameSystem (url: string): Observable<any>{
+    this.messages.dismissError();
+    return this.http.get(this.gnsURL+'/'+url)
+    .pipe(
+      tap(json => this.handleJSON(json)),
+      catchError(this.handleError('searchNameSystem', []))
+    );
+  }
+
+
+
   /**
   * Handle Http operation that failed.
   * Let the app continue.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5d38c0f..82a9d64 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,12 +4,18 @@ import { RouterModule, Routes } from '@angular/router';
 import { RestApisComponent } from './rest-apis/rest-apis.component';
 import { MainPageComponent } from './main-page/main-page.component';
 import { IdentityPageComponent } from './identity-page/identity-page.component';
+import { GnsPageComponent } from './gns-page/gns-page.component';
+import { PeerstorePageComponent } from './peerstore-page/peerstore-page.component';
+import { NamestorePageComponent } from './namestore-page/namestore-page.component';
 
 
 const routes: Routes = [
   { path: '', component: MainPageComponent },
   { path: 'apis', component: RestApisComponent },
-  { path: 'identity', component: IdentityPageComponent }
+  { path: 'identity', component: IdentityPageComponent },
+  { path: 'gns', component: GnsPageComponent },
+  { path: 'peerstore', component: PeerstorePageComponent },
+  { path: 'namestore', component: NamestorePageComponent }
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index c13abbe..7f098f2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<header class="u-bgcolor-purple u-color-white u-p-x3">
+<header class="c-header u-p-x2">
  <div class="o-container o-container--size-small">
    <div class="o-media o-media--middle">
      <div class="o-media__fixed">
@@ -14,6 +14,15 @@
            <li class="o-list__item">
              <a routerLink="identity" class="c-link">Identity</a>
            </li>
+           <li class="o-list__item">
+             <a routerLink="gns" class="c-link">GNS</a>
+           </li>
+           <li class="o-list__item">
+             <a routerLink="namestore" class="c-link">Namestore</a>
+           </li>
+           <li class="o-list__item">
+             <a routerLink="peerstore" class="c-link">Peerstore</a>
+           </li>
          </ul>
        </nav>
      </div>
@@ -21,16 +30,23 @@
  </div>
 </header>
 
-<main class="u-pv-x3 o-container">
+<main class="u-mv-x2 o-container">
   <error-message></error-message>
   <router-outlet></router-outlet>
 </main>
 
-<footer class="u-bgcolor-purple u-color-white u-p-x3">
+<footer class="c-footer u-p-x2">
  <div class="o-container o-container--size-small">
    <div class="o-media o-media--middle">
      <div class="o-media__fixed">
-       <a class="c-link">Impressum</a>
+       <ul class="o-list o-list--inline o-list--gutter-x4">
+         <li class="o-list__item">
+           <a routerLink="/" class="c-link">Impressum</a>
+         </li>
+         <li class="o-list__item">
+           <a routerLink="/" class="c-link">Documentation</a>
+         </li>
+       </ul>
      </div>
      <div class="o-media__fluid u-text-right">
        Copyright things
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c1b600d..80b303f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,7 +4,6 @@ import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
-import { HeroesComponent } from './heroes/heroes.component';
 import { RestApisComponent } from './rest-apis/rest-apis.component';
 import { AppRoutingModule } from './app-routing.module';
 import { MainPageComponent } from './main-page/main-page.component';
@@ -12,17 +11,22 @@ import { IdentityPageComponent } from './identity-page/identity-page.component';
 import { CreateIdentityComponent } from './create-identity/create-identity.component';
 import { MyFilterPipe } from './filter.pipe';
 import { ErrorMessageComponent } from './error-message/error-message.component';
+import { GnsPageComponent } from './gns-page/gns-page.component';
+import { NamestorePageComponent } from './namestore-page/namestore-page.component';
+import { PeerstorePageComponent } from './peerstore-page/peerstore-page.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HeroesComponent,
     RestApisComponent,
     MainPageComponent,
     IdentityPageComponent,
     CreateIdentityComponent,
     MyFilterPipe,
-    ErrorMessageComponent
+    ErrorMessageComponent,
+    GnsPageComponent,
+    NamestorePageComponent,
+    PeerstorePageComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/create-identity/create-identity.component.html b/src/app/create-identity/create-identity.component.html
index 328e447..d2e27fe 100644
--- a/src/app/create-identity/create-identity.component.html
+++ b/src/app/create-identity/create-identity.component.html
@@ -1,8 +1,8 @@
-<div class="c-card c-card--no-padding u-p-x3">
+<div class="c-card u-p-x3">
   <div class="o-type-20 u-pb-x1" >Create new identity</div>
-  <div class="u-ph-x2">
-    <input [(ngModel)]="this.input_text" type="text" class="c-input" placeholder="Identity Name"/>
-    <span class="u-ph-x3"><a class="c-button" (click)="onClick()">Create</a></span>
-    <span *ngIf="!is_free">Loading... Please wait.</span>
+  <div class="o-list o-list--inline">
+    <input [(ngModel)]="this.input_text" type="text" class="o-list__item c-input" placeholder="Identity Name"/>
+    <a class="o-list__item c-button" (click)="onClick()"><i class="fa fa-plus"></i></a>
+    <div *ngIf="!is_free" class="o-list__item c-spinner"></div>
   </div>
 </div>
diff --git a/src/app/create-identity/create-identity.component.ts b/src/app/create-identity/create-identity.component.ts
index 2ba7fce..1f20d65 100644
--- a/src/app/create-identity/create-identity.component.ts
+++ b/src/app/create-identity/create-identity.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 import { ApiService } from '../api.service';
 import { IdentityPageComponent } from '../identity-page/identity-page.component';
+import { MessagesService } from '../messages.service';
 
 @Component({
   selector: 'create-identity-component',
@@ -14,6 +15,7 @@ export class CreateIdentityComponent implements OnInit {
   private is_free:boolean = true;
 
   constructor(private apiService: ApiService,
+              private message: MessagesService,
               private identity: IdentityPageComponent) { }
 
   ngOnInit() {
@@ -23,12 +25,14 @@ export class CreateIdentityComponent implements OnInit {
     if (this.input_text != "" && this.is_free){
       this.is_free = false;
       this.json.name = this.input_text;
+      this.input_text = '';
       this.apiService.createIdentity(this.json).subscribe(test => {
+        this.message.pushSuccess('Created new identity');
         this.identity.getAPIs();
         this.is_free = true;
       });
     } else {
-      alert("No input");
+      this.message.pushError('Missing input. Define name of new object');
     }
   }
 
diff --git a/src/app/error-message/error-message.component.html b/src/app/error-message/error-message.component.html
index fc7cc10..a481548 100644
--- a/src/app/error-message/error-message.component.html
+++ b/src/app/error-message/error-message.component.html
@@ -1,7 +1,28 @@
 
-<div *ngIf="messages.getError()" class="c-error u-mb-x2">
+<div *ngIf="messages.getError()" class="c-alert c-alert--error u-mb-x2">
   <div class="o-media">
     <span class="o-media__fixed u-text-left">Error: {{messages.getError()}}</span>
-    <a class="o-media__fluid u-text-right c-link" (click)="dismissError()">X</a>
+    <a class="o-media__fluid u-text-right c-link" (click)="messages.dismissError()">X</a>
+  </div>
+</div>
+
+<div *ngIf="messages.getWarning()" class="c-alert c-alert--warning u-mb-x2">
+  <div class="o-media">
+    <span class="o-media__fixed u-text-left">Warning: {{messages.getWarning()}}</span>
+    <a class="o-media__fluid u-text-right c-link" (click)="messages.dismissWarning()">X</a>
+  </div>
+</div>
+
+<div *ngIf="messages.getSuccess()" class="c-alert c-alert--success u-mb-x2">
+  <div class="o-media">
+    <span class="o-media__fixed u-text-left">Success: {{messages.getSuccess()}}</span>
+    <a class="o-media__fluid u-text-right c-link" (click)="messages.dismissSuccess()">X</a>
+  </div>
+</div>
+
+<div *ngIf="messages.getInformation()" class="c-alert c-alert--information u-mb-x2">
+  <div class="o-media">
+    <span class="o-media__fixed u-text-left">Information: {{messages.getInformation()}}</span>
+    <a class="o-media__fluid u-text-right c-link" (click)="messages.dismissInformation()">X</a>
   </div>
 </div>
diff --git a/src/app/gns-page/gns-page.component.html b/src/app/gns-page/gns-page.component.html
new file mode 100644
index 0000000..47e5102
--- /dev/null
+++ b/src/app/gns-page/gns-page.component.html
@@ -0,0 +1,47 @@
+<div class="o-grid">
+  <div class="o-grid__col u-1/3">
+    <div class="c-card u-p-x3 u-mr-x2">
+      <div class="o-type-20 u-pb-x1" >Search for namesystem</div>
+      <div class="">
+        Name:<br>
+        <input class="c-input u-2/2" placeholder="Name" [(ngModel)]="gns_name" /><br><br>
+        Record Type (optional):<br>
+        <select class="c-input c-input--select u-2/2" [(ngModel)]="gns_recordtype" name="record_type">
+          <option [value]="0">ANY</option>
+          <option [value]="65536">PKEY</option>
+          <option [value]="65537">NICK</option>
+          <option [value]="65538">LEHO</option>
+          <option [value]="65539">VPN</option>
+          <option [value]="65540">GNS2DNS</option>
+          <option [value]="65541">BOX</option>
+          <option [value]="65542">PLACE</option>
+          <option [value]="65543">PHONE</option>
+          <option [value]="65544">ID_ATTR</option>
+          <option [value]="65545">ID_TOKEN</option>
+          <option [value]="65546">ID_TOKEN_METADATA</option>
+          <option [value]="65547">CREDENTIAL</option>
+          <option [value]="65548">POLICY</option>
+          <option [value]="65549">ATTRIBUTE</option>
+          <option [value]="65550">ABE_KEY</option>
+          <option [value]="65551">ABE_MASTER</option>
+        </select><br><br>
+        Search in:<br>
+        <div class="">
+          <input type="radio" name="options" [(ngModel)]="gns_options" [value]="0"> local namestore, then DHT<br>
+          <input type="radio" name="options" [(ngModel)]="gns_options" [value]="1"> local namestore only<br>
+          <input type="radio" name="options" [(ngModel)]="gns_options" [value]="2"> local namestore only for rightmost label, for others in DHT
+        </div><br>
+        Zone key (optional):<br>
+        <input *ngIf="display_zonekey" class="c-input u-2/2" placeholder="Zone Key" [(ngModel)]="gns_zonekey" (input)="toggleEgo()"/><br><br>
+        <div *ngIf="display_ego">Ego identifier (optional):<br>
+        <input class="c-input u-2/2" placeholder="Ego" [(ngModel)]="gns_ego" (input)="toggleZonekey()" /><br></div>
+        <div class="u-text-right"><a class="c-button u-mt-x2" (click)="onSearch()">Search</a></div>
+      </div>
+    </div>
+  </div>
+  <div class="o-grid__col u-2/3">
+    <div class="c-card u-p-x3">
+      {{gns_response}}
+    </div>
+  </div>
+</div>
diff --git a/src/app/heroes/heroes.component.spec.ts b/src/app/gns-page/gns-page.component.spec.ts
index 66518e4..c76f655 100644
--- a/src/app/heroes/heroes.component.spec.ts
+++ b/src/app/gns-page/gns-page.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HeroesComponent } from './heroes.component';
+import { GnsPageComponent } from './gns-page.component';
 
-describe('HeroesComponent', () => {
-  let component: HeroesComponent;
-  let fixture: ComponentFixture<HeroesComponent>;
+describe('GnsPageComponent', () => {
+  let component: GnsPageComponent;
+  let fixture: ComponentFixture<GnsPageComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeroesComponent ]
+      declarations: [ GnsPageComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HeroesComponent);
+    fixture = TestBed.createComponent(GnsPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/gns-page/gns-page.component.ts b/src/app/gns-page/gns-page.component.ts
new file mode 100644
index 0000000..ea25fc5
--- /dev/null
+++ b/src/app/gns-page/gns-page.component.ts
@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../api.service';
+
+@Component({
+  selector: 'gns-page',
+  templateUrl: './gns-page.component.html'
+})
+export class GnsPageComponent implements OnInit {
+
+  private gns_name:string;
+  private gns_recordtype:number = 0;
+  private gns_options:number = 0;
+  private gns_zonekey:string = '';
+  private display_ego: boolean = true;
+  private display_zonekey: boolean = true;
+  private gns_ego:string = '';
+  private gns_response:any =[];
+
+  private url: string;
+
+  constructor(private apiService:ApiService) { }
+
+  ngOnInit() {
+  }
+
+  onSearch(){
+    this.url = '?name='+this.gns_name;
+    if(this.gns_recordtype != null && this.gns_recordtype != ''){
+      this.url += '&record_type='+this.gns_recordtype;
+    }
+    if(this.gns_options != null && this.gns_options != ''){
+      this.url += '&options='+this.gns_options;
+    }
+    if(this.gns_zonekey != null && this.gns_zonekey != ''){
+      this.url += '&pkey='+this.gns_zonekey;
+    }
+    if(this.gns_ego != null && this.gns_ego != ''){
+      this.url += '&ego='+this.gns_ego;
+    }
+    console.log(this.url);
+    this.apiService.searchNameSystem(this.url).subscribe(data => {
+      this.gns_response = data;
+    });
+  }
+
+  toggleEgo(){
+    if(this.gns_zonekey == ''){ this.display_ego = true; }
+    else { this.display_ego = false; }
+  }
+
+  toggleZonekey(){
+    if(this.gns_ego == ''){ this.display_zonekey = true; }
+    else { this.display_zonekey = false; }
+  }
+
+
+}
diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
deleted file mode 100644
index 0bc287b..0000000
--- a/src/app/heroes/heroes.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{{hero.name | uppercase}} Details <br>id: {{hero.id}}<br>name: {{hero.name}}
-<br>
-<br>
-<input [(ngModel)]="hero.name" placeholder="name">
diff --git a/src/app/heroes/heroes.component.scss b/src/app/heroes/heroes.component.scss
deleted file mode 100644
index e69de29..0000000
--- a/src/app/heroes/heroes.component.scss
+++ /dev/null
diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
deleted file mode 100644
index 0f72ae9..0000000
--- a/src/app/heroes/heroes.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Hero } from '../hero';
-
-@Component({
-  selector: 'app-heroes',
-  templateUrl: './heroes.component.html',
-  styleUrls: ['./heroes.component.scss']
-})
-export class HeroesComponent implements OnInit {
-  hero: Hero ={
-    id: 1,
-    name: 'Windstorm'
-  };
-  
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/identity-page/identity-page.component.html b/src/app/identity-page/identity-page.component.html
index edcac69..4eeb8da 100644
--- a/src/app/identity-page/identity-page.component.html
+++ b/src/app/identity-page/identity-page.component.html
@@ -1,36 +1,33 @@
-
-<div class="o-grid u-pb-x3">
+<div *ngIf="is_displayed">
+<div class="o-grid">
   <div class="o-grid__col u-1/2">
     <create-identity-component></create-identity-component>
   </div>
   <div class="o-grid__col u-1/2">
     <div class="c-card c-card--no-padding u-p-x3">
       <div class="o-type-20 u-pb-x1" >Search</div>
-      <div class="u-ph-x2">
-        <input #myInput class="c-input" placeholder="Search" [(ngModel)]="name" (input)="filterItem(myInput.value)"/>
+      <div class="">
+        <input #myInput class="c-input u-2/2" placeholder="Search" [(ngModel)]="name" (input)="filterItem(myInput.value)"/>
       </div>
     </div>
   </div>
 </div>
 
-<div class="c-card" *ngIf="this.rename">
-  <div class="o-type-20 u-pb-x1" >Search</div>
-  <div class="u-color-grey">ID: <span>{{changeIdentity.id}}</span></div>
-  <div>
-    <span class="u-m-x2">Name: <input class="c-input" placeholder="Change Name" [(ngModel)]="changeIdentity.name"/></span>
-    <a class="c-button u-m-x2" (click)="onRename(changeIdentity)">Rename now</a>
-    <a class="c-button c-button--outline u-m-x2" (click)="onRenameCancel()">Cancel</a>
-  </div>
-</div>
-
-<div class="o-grid c-card u-mt-x3">
-  <table class="o-grid__col u-2/2 c-table">
+<div class="c-card u-mt-x2">
+  <table class=" u-2/2 c-table">
     <tr>
-      <th>Type</th>
+      <th class="u-text-center">Type</th>
       <th>Name</th>
       <th>ID</th>
-      <th>Rename</th>
-      <th>Delete</th>
+      <th class="u-text-center">Rename</th>
+      <th class="u-text-center">Delete</th>
+    </tr>
+    <tr *ngIf="request">
+      <td class="u-text-center"><div class="c-spinner"></div></td>
+      <td class="u-text-center"><div class="c-spinner"></div></td>
+      <td class="u-text-center"><div class="c-spinner"></div></td>
+      <td class="u-text-center"><div class="c-spinner"></div></td>
+      <td class="u-text-center"><div class="c-spinner"></div></td>
     </tr>
     <tr *ngFor="let identity of filteredItems">
       <td class="u-text-center"><span class="fa fa-user o-type-20" *ngIf="identity.type == 'ego'"></span></td>
@@ -38,8 +35,30 @@
         <span class="">{{identity.name}}</span>
       </td>
       <td>{{identity.id}}</td>
-      <td><a class="c-button" (click)="onClickRename(identity)">Rename</a></td>
-      <td><a class="c-button" (click)="onClickDelete(identity.id)">Delete</a></td>
+      <td class="u-text-center"><a class="c-button c-button--rename" (click)="onClickRename(identity)"><i class="fa fa-pencil"></i></a></td>
+      <td class="u-text-center"><a class="c-button c-button--danger" (click)="onClickDelete(identity)"><i class="fa fa-trash"></i></a></td>
     </tr>
   </table>
 </div>
+</div>
+
+
+<div class="c-card u-p-x3 u-mt-x2" *ngIf="this.rename">
+  <div class="o-type-20 u-pb-x1" >Rename</div>
+  <div class="u-color-grey">ID: <span>{{changeIdentity.id}}</span></div>
+  <div>
+    <span class="u-mr-x2"><span class="u-mr-x3">Name: </span><input class="c-input" placeholder="Change Name" [(ngModel)]="changeIdentity.name"/></span>
+    <a class="c-button" (click)="onRename(changeIdentity)">Rename</a>
+    <a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
+  </div>
+</div>
+
+<div class="c-card u-p-x3 u-mt-x2" *ngIf="this.delete">
+  <div class="o-type-20 u-pb-x1" >Rename</div>
+  <div >ID: <span>{{changeIdentity.id}}</span></div>
+  <div >Name: <span>{{changeIdentity.name}}</span></div>
+  <div>
+    <a class="c-button" (click)="onDelete(changeIdentity.id)">Delete</a>
+    <a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
+  </div>
+</div>
diff --git a/src/app/identity-page/identity-page.component.ts b/src/app/identity-page/identity-page.component.ts
index 296fe4c..0d6e784 100644
--- a/src/app/identity-page/identity-page.component.ts
+++ b/src/app/identity-page/identity-page.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Pipe } from "@angular/core";
 import { ApiService } from '../api.service';
 import { IdentityAPI } from '../identity-api';
+import { MessagesService } from '../messages.service';
 
 @Component({
   selector: 'app-identity-page',
@@ -12,14 +13,19 @@ export class IdentityPageComponent implements OnInit {
   identities: IdentityAPI[];
   filteredItems: IdentityAPI[];
   rename: boolean = false;
+  delete: boolean = false;
   changeIdentity: IdentityAPI;
   json: any;
+  is_displayed: boolean = true;
+  request: boolean = false;
 
-  constructor(private apiService: ApiService) { }
+  constructor(private apiService: ApiService,private message: MessagesService) { }
 
   getAPIs(): void {
+    this.request = true;
     this.apiService.getIdentities().subscribe(data => {
       this.identities = data;
+      this.request = false;
       this.assignCopy();
     });
   }
@@ -33,7 +39,7 @@ export class IdentityPageComponent implements OnInit {
   }
 
   filterItem(value : string){
-    this.onRenameCancel();
+    this.onReset();
     if(!value) this.assignCopy(); //when nothing has typed
     this.filteredItems = Object.assign([], this.identities).filter(
     item => {
@@ -44,27 +50,40 @@ export class IdentityPageComponent implements OnInit {
   }
 
   onClickRename(identity: IdentityAPI){
+    this.is_displayed = false;
     this.rename = true;
     this.changeIdentity = Object.assign({},identity);
   }
 
   onRename(identity: IdentityAPI){
-    this.rename = false;
+    this.request = true;
+    this.onReset();
     this.filteredItems = [];
     this.json = {'newname':identity.name};
     this.apiService.changeIdentity(identity.id,this.json).subscribe(data => {
+      this.message.pushSuccess('Rename was successful.');
       this.getAPIs();
     });
   }
 
-  onRenameCancel(){
+  onReset(){
     this.rename = false;
+    this.delete = false;
+    this.is_displayed = true;
+  }
+
+  onClickDelete(identity: IdentityAPI){
+    this.is_displayed = false;
+    this.delete = true;
+    this.changeIdentity = Object.assign({},identity);
   }
 
-  onClickDelete(id: string){
-    this.onRenameCancel();
+  onDelete(id:string){
+    this.request = true;
+    this.onReset();
     this.filteredItems = [];
     this.apiService.deleteIdentity(id).subscribe(data => {
+      this.message.pushSuccess('Delete was successful.');
       this.getAPIs();
     });
   }
diff --git a/src/app/messages.service.ts b/src/app/messages.service.ts
index 6d18405..0d323bb 100644
--- a/src/app/messages.service.ts
+++ b/src/app/messages.service.ts
@@ -6,6 +6,9 @@ import { Injectable } from '@angular/core';
 export class MessagesService {
 
   private error:string;
+  private warning:string;
+  private info:string;
+  private success:string;
 
   constructor() { }
 
@@ -20,4 +23,40 @@ export class MessagesService {
   dismissError(){
     this.error='';
   }
+
+  getWarning() :string{
+    return this.warning;
+  }
+
+  pushWarning(errorText:string){
+    this.warning = errorText;
+  }
+
+  dismissWarning(){
+    this.warning='';
+  }
+
+  getSuccess() :string{
+    return this.success;
+  }
+
+  pushSuccess(errorText:string){
+    this.success = errorText;
+  }
+
+  dismissSuccess(){
+    this.success='';
+  }
+
+  getInformation() :string{
+    return this.info;
+  }
+
+  pushInformation(errorText:string){
+    this.info = errorText;
+  }
+
+  dismissInformation(){
+    this.info='';
+  }
 }
diff --git a/src/app/namestore-page/namestore-page.component.html b/src/app/namestore-page/namestore-page.component.html
new file mode 100644
index 0000000..f235c16
--- /dev/null
+++ b/src/app/namestore-page/namestore-page.component.html
@@ -0,0 +1,3 @@
+<p>
+  namestore-page works!
+</p>
diff --git a/src/app/namestore-page/namestore-page.component.spec.ts b/src/app/namestore-page/namestore-page.component.spec.ts
new file mode 100644
index 0000000..540a7cc
--- /dev/null
+++ b/src/app/namestore-page/namestore-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NamestorePageComponent } from './namestore-page.component';
+
+describe('NamestorePageComponent', () => {
+  let component: NamestorePageComponent;
+  let fixture: ComponentFixture<NamestorePageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NamestorePageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NamestorePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/namestore-page/namestore-page.component.ts b/src/app/namestore-page/namestore-page.component.ts
new file mode 100644
index 0000000..ec5cbba
--- /dev/null
+++ b/src/app/namestore-page/namestore-page.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-namestore-page',
+  templateUrl: './namestore-page.component.html'
+})
+export class NamestorePageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/peerstore-page/peerstore-page.component.html b/src/app/peerstore-page/peerstore-page.component.html
new file mode 100644
index 0000000..8bdd960
--- /dev/null
+++ b/src/app/peerstore-page/peerstore-page.component.html
@@ -0,0 +1,3 @@
+<p>
+  peerstore-page works!
+</p>
diff --git a/src/app/peerstore-page/peerstore-page.component.spec.ts b/src/app/peerstore-page/peerstore-page.component.spec.ts
new file mode 100644
index 0000000..f96c645
--- /dev/null
+++ b/src/app/peerstore-page/peerstore-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PeerstorePageComponent } from './peerstore-page.component';
+
+describe('PeerstorePageComponent', () => {
+  let component: PeerstorePageComponent;
+  let fixture: ComponentFixture<PeerstorePageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PeerstorePageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PeerstorePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/peerstore-page/peerstore-page.component.ts b/src/app/peerstore-page/peerstore-page.component.ts
new file mode 100644
index 0000000..6abc3dc
--- /dev/null
+++ b/src/app/peerstore-page/peerstore-page.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-peerstore-page',
+  templateUrl: './peerstore-page.component.html'
+})
+export class PeerstorePageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}