Implemented GNS and fixed UI issuesfeature/services

39 files changed, 612 insertions, 167 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.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() {
+  }
+
+}
diff --git a/src/index.html b/src/index.html
index 63da4dd..3c1fbca 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
   <title>GnunetWebui</title>
   <base href="/">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-  <link href="https://fonts.googleapis.com/css?family=Archivo:400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
diff --git a/src/scss/base/_body.scss b/src/scss/base/_body.scss
index 0310cde..74c1df2 100644
--- a/src/scss/base/_body.scss
+++ b/src/scss/base/_body.scss
@@ -1,4 +1,6 @@
 body {
   background-color: $color-grey-light;
-  font-family: Archivo, sans-serif;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 200;
+  height: 100%;
 }
diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
new file mode 100644
index 0000000..b2b222e
--- /dev/null
+++ b/src/scss/components/_alert.scss
@@ -0,0 +1,31 @@
+
+.c-alert {
+  padding: $baseline-x2;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: .25rem;
+}
+
+.c-alert--error{
+  color: $error-color;
+  background-color: $error-bgcolor;
+  border-color: $error-border-color;
+}
+
+.c-alert--warning{
+  color: $warning-color;
+  background-color: $warning-bgcolor;
+  border-color: $warning-border-color;
+}
+
+.c-alert--success{
+  color: $success-color;
+  background-color: $success-bgcolor;
+  border-color: $success-border-color;
+}
+
+.c-alert--information{
+  color: $info-color;
+  background-color: $info-bgcolor;
+  border-color: $info-border-color;
+}
diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss
new file mode 100644
index 0000000..615425f
--- /dev/null
+++ b/src/scss/components/_badge.scss
@@ -0,0 +1,11 @@
+.c-badge {
+    display: inline-block;
+    padding: .25em .4em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25rem;
+}
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index a16d5e4..9f7b70b 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -1,13 +1,13 @@
 $button-padding : $baseline-x2 $baseline-x4;
-$button-bgcolor : $color-blue;
-$button-bgcolor-hover : darken($color-blue, 10%);
+$button-bgcolor : $color-secondary;
+$button-bgcolor-hover : darken($color-secondary, 10%);
 $button-color : $color-white;
 $button-radius : 3px;
 
 $button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
 $button-outline-bgcolor: transparent;
-$button-outline-color: $color-blue;
-$button-outline-color-hover: darken( $color-blue, 10% );
+$button-outline-color: $color-secondary;
+$button-outline-color-hover: darken( $color-secondary, 10% );
 
 .c-button {
   padding: $button-padding;
@@ -33,6 +33,28 @@ $button-outline-color-hover: darken( $color-blue, 10% );
   background-color: $button-outline-bgcolor;
 }
 
+.c-button--danger {
+  padding: $button-outline-padding;
+  color: $error-color;
+  border: 1px solid $error-border-color;
+  background-color: $error-bgcolor;
+}
+
+.c-button--danger:hover {
+  background-color: darken($error-bgcolor, 10%);
+}
+
+.c-button--rename {
+  padding: $button-outline-padding;
+  color: $info-color;
+  border: 1px solid $info-border-color;
+  background-color: $info-bgcolor;
+}
+
+.c-button--rename:hover {
+  background-color: darken($info-bgcolor, 10%);
+}
+
 .c-button--disabled {
   padding: $button-outline-padding;
   color: $color-grey;
diff --git a/src/scss/components/_error.scss b/src/scss/components/_error.scss
deleted file mode 100644
index eaf6e51..0000000
--- a/src/scss/components/_error.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$error-bgcolor: #f79191;
-$error-color: #9e0c0c;
-
-.c-error {
-  padding: $baseline-x3;
-  color: $error-color;
-  background-color: $error-bgcolor;
-  border-radius: 2px;
-}
diff --git a/src/scss/components/_footer.scss b/src/scss/components/_footer.scss
new file mode 100644
index 0000000..8bd8664
--- /dev/null
+++ b/src/scss/components/_footer.scss
@@ -0,0 +1,6 @@
+.c-footer{
+  bottom: 0px;
+  width: 100%;
+  background-color: $color-primary;
+  color: $color-contrary;
+}
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
new file mode 100644
index 0000000..0bf8635
--- /dev/null
+++ b/src/scss/components/_header.scss
@@ -0,0 +1,7 @@
+.c-header{
+  top:0px;
+  position: sticky;
+  width: 100%;
+  background-color: $color-primary;
+  color: $color-contrary;
+}
diff --git a/src/scss/components/_input.scss b/src/scss/components/_input.scss
index e2d7338..347e98c 100644
--- a/src/scss/components/_input.scss
+++ b/src/scss/components/_input.scss
@@ -1,14 +1,8 @@
-$input-padding : $baseline-x2 $baseline-x2;
-$button-bgcolor : $color-blue;
-$button-bgcolor-hover : darken($color-blue, 10%);
-$button-color : $color-white;
-$input-bgcolor : darken($color-white, 5%);
-$button-radius : 3px;
-
-$button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
-$button-outline-bgcolor: transparent;
-$button-outline-color: $color-blue;
-$button-outline-color-hover: darken( $color-blue, 10% );
+$input-padding : $baseline-x2 $baseline-x4 $baseline-x2 $baseline;
+$input-bgcolor-hover : darken($color-blue, 10%);
+$input-bgcolor : $color-white;
+$input-radius : 3px;
+$input-border-color: darken($color-grey-light, 5%);
 
 .c-input {
   padding: $input-padding;
@@ -17,13 +11,14 @@ $button-outline-color-hover: darken( $color-blue, 10% );
   white-space: nowrap;
   vertical-align: middle;
   text-decoration: none;
-  background-color: $color-grey-light;
+  background-color: $input-bgcolor;
   color: $color-black;
-  border-style: none;
-  border-color: grey;
-  border-radius: $button-radius;
+  border-style: solid;
+  border-width: 1px;
+  border-color: $color-grey;
+  border-radius: $input-radius;
 }
 
 .c-input:focus {
-  box-shadow: 0 0 2px 2px $button-bgcolor-hover;
+  box-shadow: 0 0 2px 2px $input-bgcolor-hover;
 }
diff --git a/src/scss/components/_link.scss b/src/scss/components/_link.scss
index a51e9ed..73f6e00 100644
--- a/src/scss/components/_link.scss
+++ b/src/scss/components/_link.scss
@@ -1,8 +1,8 @@
 .c-link {
   text-decoration: none;
-  color: $color-white;
   font-weight: bold;
   cursor: pointer;
+  color: inherit;
 }
 
 .c-link:hover {
diff --git a/src/app/heroes/heroes.component.scss b/src/scss/components/_progressbar.scss
index e69de29..e69de29 100644
--- a/src/app/heroes/heroes.component.scss
+++ b/src/scss/components/_progressbar.scss
diff --git a/src/scss/components/_spinner.scss b/src/scss/components/_spinner.scss
new file mode 100644
index 0000000..b05af1c
--- /dev/null
+++ b/src/scss/components/_spinner.scss
@@ -0,0 +1,15 @@
+.c-spinner {
+    border: 5px solid $color-grey-light; /* Light grey */
+    border-top: 5px solid $color-secondary;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    top: 1000px;
+    display: inline-block;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss
index ce5e3fb..40d1b43 100644
--- a/src/scss/components/_table.scss
+++ b/src/scss/components/_table.scss
@@ -9,12 +9,12 @@
 
 .c-table tr:nth-child(even){background-color: $color-grey-light;}
 
-.c-table tr:hover {background-color: #ddd;}
+.c-table tr:hover {background-color: $color-white;}
 
 .c-table th {
     padding-top: 12px;
     padding-bottom: 12px;
     text-align: left;
-    background-color: $color-purple;
-    color: white;
+    background-color: $color-primary;
+    color: $color-contrary;
 }
diff --git a/src/scss/main.scss b/src/scss/main.scss
index aaf5e9e..4b462e9 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,3 +1,4 @@
+/* You can add global styles to this file, and also import other style files */
 @import 'settings/baseline';
 @import 'settings/core';
 @import 'settings/colors';
@@ -8,20 +9,31 @@
 //@import 'tools/breakpoint';
 //@import 'tools/ms';
 //@import 'tools/rtl';
-//@import 'tools/type';
+@import 'tools/type';
 
 @import 'base/initialize';
+@import 'base/body';
+@import 'base/types';
 
 @import 'objects/container';
 @import 'objects/grid';
 @import 'objects/list';
-//@import 'objects/media';
+@import 'objects/media';
 @import 'objects/type';
 
 @import 'components/button';
 @import 'components/card';
+@import 'components/link';
+@import 'components/input';
+@import 'components/table';
+@import 'components/alert';
+@import 'components/footer';
+@import 'components/header';
+@import 'components/badge';
+@import 'components/spinner';
+
 //@import 'utilities/align-items';
-//@import 'utilities/align';
+@import 'utilities/align';
 @import 'utilities/bgcolor';
 //@import 'utilities/clearfix';
 @import 'utilities/color';
diff --git a/src/scss/objects/_type.scss b/src/scss/objects/_type.scss
index 43a2b9f..7184ab0 100644
--- a/src/scss/objects/_type.scss
+++ b/src/scss/objects/_type.scss
@@ -15,8 +15,15 @@ $iota-objs-type-namespace: 'type-';
 
 $iota-objs-type-sizes: (
   16: $type-16,
+  18: $type-18,
   20: $type-20,
+  22: $type-22,
+  24: $type-24,
+  26: $type-26,
   28: $type-28,
+  30: $type-30,
+  32: $type-32,
+  34: $type-34,
   35: $type-35,
   80: $type-80
 );
diff --git a/src/scss/settings/_colors.scss b/src/scss/settings/_colors.scss
index 3be07a9..59a1f88 100644
--- a/src/scss/settings/_colors.scss
+++ b/src/scss/settings/_colors.scss
@@ -1,16 +1,46 @@
-$color-black: #0D2A4A;
+$color-black: #212121;
 $color-purple: #7070D5;
 $color-red: #FC4A33;
 $color-grey: #A3ADBF;
 $color-grey-light: #F5F5F7;
 $color-white: #FFFFFF;
 $color-blue: #38B2FF;
+$color-amber: #ffb549;
+$color-deep-blue: #03A9F4;
+$color-cyan: #0288D1;
+$color-cyan-light: #03A9F4;
+
+$error-bgcolor: #f8d7da;
+$error-color: #721c24;
+$error-border-color: #f5c6cb;
+
+$warning-color: #856404;
+$warning-bgcolor: #fff3cd;
+$warning-border-color: #ffeeba;
+
+$success-color: #155724;
+$success-bgcolor: #d4edda;
+$success-border-color: #c3e6cb;
+
+$info-color: #0c5460;
+$info-bgcolor: #d1ecf1;
+$info-border-color: #bee5eb;
+
+$color-primary: $color-purple;
+$color-contrary: $color-white;
+$color-secondary: $color-deep-blue;
+$color-secondary-light: $color-grey-light;
 
 $colors: (
+  'primary' : $color-primary,
+  'contrary' : $color-contrary,
+  'secondary' : $color-secondary,
+  'secondary-light' : $color-secondary-light,
   'black' : $color-black,
-  'purple': $color-purple,
-  'red': $color-red,
+//  'purple': $color-purple,
+//  'red': $color-red,
   'grey': $color-grey,
-  'grey-light' : $color-grey-light,
-  'white' : $color-white
+//  'grey-light' : $color-grey-light,
+//  'white' : $color-white,
+//  'blue': $color-blue
 );
diff --git a/src/scss/settings/_type.scss b/src/scss/settings/_type.scss
index f8f7d46..c7ad0af 100644
--- a/src/scss/settings/_type.scss
+++ b/src/scss/settings/_type.scss
@@ -3,6 +3,62 @@ $type-16: (
   sm: ( 16px, $baseline-x3 )
 );
 
+$type-18: (
+  null: ( 16px, $baseline-x3 ),
+  sm: ( 18px, $baseline-x3 )
+);
+
+$type-20: (
+  null: ( 18px, $baseline-x3 ),
+  sm: ( 20px, $baseline-x4 )
+);
+
+$type-22: (
+  null: ( 18px, $baseline-x3 ),
+  sm: ( 22px, $baseline-x4 )
+);
+
+$type-24: (
+  null: ( 19px, $baseline-x3 ),
+  sm: ( 24px, $baseline-x4 )
+);
+
+$type-26: (
+  null: ( 20px, $baseline-x4 ),
+  sm: ( 26px, $baseline-x5 )
+);
+
+$type-28: (
+  null: ( 20px, $baseline-x4 ),
+  sm: ( 28px, $baseline-x5 )
+);
+
+$type-30: (
+  null: ( 21px, $baseline-x4 ),
+  sm: ( 30px, $baseline-x5 )
+);
+
+$type-32: (
+  null: ( 22px, $baseline-x4 ),
+  sm: ( 32px, $baseline-x5 )
+);
+
+$type-34: (
+  null: ( 23px, $baseline-x4 ),
+  sm: ( 34px, $baseline-x5 )
+);
+
+$type-35: (
+  null: ( 25px, $baseline-x5 ),
+  sm: ( 35px, $baseline-x5 )
+);
+
+$type-80: (
+  null: ( 70px, $baseline-x13 ),
+  sm: ( 80px, $baseline-x13 )
+);
+
+
 $type-20: (
   null: ( 18px, $baseline-x3 ),
   sm: ( 20px, $baseline-x4 )
diff --git a/src/styles.scss b/src/styles.scss
index 7026523..673983b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,49 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
-@import 'scss/settings/baseline';
-@import 'scss/settings/core';
-@import 'scss/settings/colors';
-@import 'scss/settings/type';
-@import 'scss/settings/spacing';
-
-@import 'scss/tools/core';
-//@import 'scss/tools/breakpoint';
-//@import 'scss/tools/ms';
-//@import 'scss/tools/rtl';
-@import 'scss/tools/type';
-
-@import 'scss/base/initialize';
-@import 'scss/base/body';
-@import 'scss/base/types';
-
-@import 'scss/objects/container';
-@import 'scss/objects/grid';
-@import 'scss/objects/list';
-@import 'scss/objects/media';
-@import 'scss/objects/type';
-
-@import 'scss/components/button';
-@import 'scss/components/card';
-@import 'scss/components/link';
-@import 'scss/components/input';
-@import 'scss/components/table';
-@import 'scss/components/error';
-
-//@import 'scss/utilities/align-items';
-//@import 'scss/utilities/align';
-@import 'scss/utilities/bgcolor';
-//@import 'scss/utilities/clearfix';
-@import 'scss/utilities/color';
-@import 'scss/utilities/display';
-//@import 'scss/utilities/flex-direction';
-//@import 'scss/utilities/float';
-//@import 'scss/utilities/justify-content';
-@import 'scss/utilities/margin';
-//@import 'scss/utilities/opacity';
-@import 'scss/utilities/padding';
-//@import 'scss/utilities/position';
-//@import 'scss/utilities/pull';
-//@import 'scss/utilities/push';
-@import 'scss/utilities/size';
-@import 'scss/utilities/text';
-//@import 'scss/utilities/transform';
-//@import 'scss/utilities/weight';
+@import 'scss/main';