20 files changed, 443 insertions, 29 deletions

diff --git a/src/app/api.service.ts b/src/app/api.service.ts
index 5b45ad3..9756bd4 100644
--- a/src/app/api.service.ts
+++ b/src/app/api.service.ts
@@ -1,20 +1,110 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { RestAPI } from './rest-api';
+import { IdentityAPI } from './identity-api';
+import { catchError, map, tap } from 'rxjs/operators';
+import { MessagesService } from './messages.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ApiService {
   apis: RestAPI[] = [
-    {name: 'Rest API 1', 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_api1'},
+    {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'}
   ];
 
-  constructor() { }
+  private identityURL = 'http://localhost:7776/identity';  // URL to GNUnet identity web api
+
+  constructor(private http: HttpClient,
+              private messages:MessagesService) { }
 
   getAPIs(): Observable<RestAPI[]> {
     return of(this.apis);
   }
+
+  getIdentities (): Observable<IdentityAPI[]>{
+    return this.http.get<IdentityAPI[]>(this.identityURL)
+    .pipe(
+      tap(json => this.handleJSON(json)),
+      catchError(this.handleError('getIdentities', []))
+    );
+  }
+
+  createIdentity (json: any): Observable<any>{
+    this.messages.dismissError();
+    const options = {headers: {'Content-Type': 'application/json'}};
+    return this.http.post(this.identityURL, json, options)
+    .pipe(
+      tap(json => this.handleJSON(json)),
+      catchError(this.handleError('createIdentity', []))
+    );
+  }
+
+  deleteIdentity (id: string): Observable<any>{
+    this.messages.dismissError();
+    return this.http.delete(this.identityURL+'/'+id)
+    .pipe(
+      tap(json => this.handleJSON(json)),
+      catchError(this.handleError('deleteIdentity', []))
+    );
+  }
+
+
+  changeIdentity (id: string, json: any): Observable<any>{
+    this.messages.dismissError();
+    const options = {headers: {'Content-Type': 'application/json'}};
+    return this.http.put(this.identityURL+'/'+id, json, options)
+    .pipe(
+      tap(json => this.handleJSON(json)),
+      catchError(this.handleError('changeIdentity', []))
+    );
+  }
+  /**
+  * Handle Http operation that failed.
+  * Let the app continue.
+  * @param operation - name of the operation that failed
+  * @param result - optional value to return as the observable result
+  */
+  private handleError<T> (operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
+
+      //console.error(error); // log to console instead
+
+      if((operation == 'createIdentity') && (error.status == '409'))
+      {
+        this.messages.pushError('Cannot create identity. Identity already exists.');
+      }
+      if((operation == 'changeIdentity') && (error.status == '404'))
+      {
+        this.messages.pushError('Cannot rename identity. Identity not found.');
+      }
+      if((operation == 'changeIdentity') && (error.status == '409'))
+      {
+        this.messages.pushError('Cannot rename identity. Identity with this name already exists.');
+      }
+      if((operation == 'deleteIdentity') && (error.status == '404'))
+      {
+        this.messages.pushError('Cannot delete identity. Identity not found.');
+      }
+
+      if((error.statusText == 'Unknown Error'))
+      {
+        this.messages.pushError('Unknown Error. Is the server running?');
+      }
+
+      return of(result as T);
+    };
+  }
+
+  private handleJSON (json: any) {
+    if(json != null)
+    {
+      if(json.error != null){
+        this.messages.pushError(json.error);
+      }
+    }
+  }
 }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 498467d..5d38c0f 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,11 +3,13 @@ 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';
 
 
 const routes: Routes = [
   { path: '', component: MainPageComponent },
-  { path: 'apis', component: RestApisComponent }
+  { path: 'apis', component: RestApisComponent },
+  { path: 'identity', component: IdentityPageComponent }
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 70136f0..c13abbe 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -9,10 +9,10 @@
        <nav>
          <ul class="o-list o-list--inline o-list--gutter-x4">
            <li class="o-list__item">
-             <a routerLink="/" class="c-link">Item</a>
+             <a routerLink="/" class="c-link">Main Page</a>
            </li>
            <li class="o-list__item">
-             <a routerLink="apis" class="c-link">Item1</a>
+             <a routerLink="identity" class="c-link">Identity</a>
            </li>
          </ul>
        </nav>
@@ -21,7 +21,8 @@
  </div>
 </header>
 
-<main class="u-pv-x5">
+<main class="u-pv-x3 o-container">
+  <error-message></error-message>
   <router-outlet></router-outlet>
 </main>
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 293f9af..c1b600d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,24 +1,34 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 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 { AppRoutingModule } from './app-routing.module';
 import { MainPageComponent } from './main-page/main-page.component';
+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';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeroesComponent,
     RestApisComponent,
-    MainPageComponent
+    MainPageComponent,
+    IdentityPageComponent,
+    CreateIdentityComponent,
+    MyFilterPipe,
+    ErrorMessageComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/create-identity/create-identity.component.html b/src/app/create-identity/create-identity.component.html
new file mode 100644
index 0000000..328e447
--- /dev/null
+++ b/src/app/create-identity/create-identity.component.html
@@ -0,0 +1,8 @@
+<div class="c-card c-card--no-padding 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>
+</div>
diff --git a/src/app/create-identity/create-identity.component.spec.ts b/src/app/create-identity/create-identity.component.spec.ts
new file mode 100644
index 0000000..cc43e69
--- /dev/null
+++ b/src/app/create-identity/create-identity.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateIdentityComponent } from './create-identity.component';
+
+describe('CreateIdentityComponent', () => {
+  let component: CreateIdentityComponent;
+  let fixture: ComponentFixture<CreateIdentityComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateIdentityComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateIdentityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/create-identity/create-identity.component.ts b/src/app/create-identity/create-identity.component.ts
new file mode 100644
index 0000000..2ba7fce
--- /dev/null
+++ b/src/app/create-identity/create-identity.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ApiService } from '../api.service';
+import { IdentityPageComponent } from '../identity-page/identity-page.component';
+
+@Component({
+  selector: 'create-identity-component',
+  templateUrl: './create-identity.component.html'
+})
+export class CreateIdentityComponent implements OnInit {
+
+  private input_text: string = '';
+  private json: any = {'name':''};
+  private is_free:boolean = true;
+
+  constructor(private apiService: ApiService,
+              private identity: IdentityPageComponent) { }
+
+  ngOnInit() {
+  }
+
+  onClick() {
+    if (this.input_text != "" && this.is_free){
+      this.is_free = false;
+      this.json.name = this.input_text;
+      this.apiService.createIdentity(this.json).subscribe(test => {
+        this.identity.getAPIs();
+        this.is_free = true;
+      });
+    } else {
+      alert("No input");
+    }
+  }
+
+}
diff --git a/src/app/error-message/error-message.component.html b/src/app/error-message/error-message.component.html
new file mode 100644
index 0000000..fc7cc10
--- /dev/null
+++ b/src/app/error-message/error-message.component.html
@@ -0,0 +1,7 @@
+
+<div *ngIf="messages.getError()" class="c-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>
+  </div>
+</div>
diff --git a/src/app/error-message/error-message.component.spec.ts b/src/app/error-message/error-message.component.spec.ts
new file mode 100644
index 0000000..d90c1d5
--- /dev/null
+++ b/src/app/error-message/error-message.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorMessageComponent } from './error-message.component';
+
+describe('ErrorMessageComponent', () => {
+  let component: ErrorMessageComponent;
+  let fixture: ComponentFixture<ErrorMessageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ErrorMessageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ErrorMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/error-message/error-message.component.ts b/src/app/error-message/error-message.component.ts
new file mode 100644
index 0000000..eabf12d
--- /dev/null
+++ b/src/app/error-message/error-message.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { MessagesService } from '../messages.service';
+
+@Component({
+  selector: 'error-message',
+  templateUrl: './error-message.component.html'
+})
+export class ErrorMessageComponent implements OnInit {
+
+  constructor(public messages: MessagesService) { }
+
+  ngOnInit() {
+  }
+
+  dismissError(){
+    this.messages.dismissError();
+  }
+
+}
diff --git a/src/app/filter.pipe.ts b/src/app/filter.pipe.ts
new file mode 100644
index 0000000..06e5fe4
--- /dev/null
+++ b/src/app/filter.pipe.ts
@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'filter',
+    pure: false
+})
+export class MyFilterPipe implements PipeTransform {
+    transform(items: any[], filter: Object): any {
+        if (!items || !filter) {
+            return items;
+        }
+        // filter items array, items which match and return true will be
+        // kept, false will be filtered out
+        return items.filter(item => item.indexOf(filter) !== -1);
+    }
+}
diff --git a/src/app/identity-api.ts b/src/app/identity-api.ts
new file mode 100644
index 0000000..f15d41a
--- /dev/null
+++ b/src/app/identity-api.ts
@@ -0,0 +1,5 @@
+export class IdentityAPI{
+  id: string;
+  name: string;
+  type: string;
+}
diff --git a/src/app/identity-page/identity-page.component.html b/src/app/identity-page/identity-page.component.html
new file mode 100644
index 0000000..edcac69
--- /dev/null
+++ b/src/app/identity-page/identity-page.component.html
@@ -0,0 +1,45 @@
+
+<div class="o-grid u-pb-x3">
+  <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>
+    </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">
+    <tr>
+      <th>Type</th>
+      <th>Name</th>
+      <th>ID</th>
+      <th>Rename</th>
+      <th>Delete</th>
+    </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>
+      <td>
+        <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>
+    </tr>
+  </table>
+</div>
diff --git a/src/app/identity-page/identity-page.component.spec.ts b/src/app/identity-page/identity-page.component.spec.ts
new file mode 100644
index 0000000..5212965
--- /dev/null
+++ b/src/app/identity-page/identity-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IdentityPageComponent } from './identity-page.component';
+
+describe('IdentityPageComponent', () => {
+  let component: IdentityPageComponent;
+  let fixture: ComponentFixture<IdentityPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IdentityPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IdentityPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/identity-page/identity-page.component.ts b/src/app/identity-page/identity-page.component.ts
new file mode 100644
index 0000000..296fe4c
--- /dev/null
+++ b/src/app/identity-page/identity-page.component.ts
@@ -0,0 +1,72 @@
+import { Component, OnInit } from '@angular/core';
+import { Pipe } from "@angular/core";
+import { ApiService } from '../api.service';
+import { IdentityAPI } from '../identity-api';
+
+@Component({
+  selector: 'app-identity-page',
+  templateUrl: './identity-page.component.html'
+})
+export class IdentityPageComponent implements OnInit {
+
+  identities: IdentityAPI[];
+  filteredItems: IdentityAPI[];
+  rename: boolean = false;
+  changeIdentity: IdentityAPI;
+  json: any;
+
+  constructor(private apiService: ApiService) { }
+
+  getAPIs(): void {
+    this.apiService.getIdentities().subscribe(data => {
+      this.identities = data;
+      this.assignCopy();
+    });
+  }
+
+  ngOnInit() {
+    this.getAPIs();
+  }
+
+  assignCopy(){
+    this.filteredItems = Object.assign([], this.identities);
+  }
+
+  filterItem(value : string){
+    this.onRenameCancel();
+    if(!value) this.assignCopy(); //when nothing has typed
+    this.filteredItems = Object.assign([], this.identities).filter(
+    item => {
+      return ((item.name.indexOf(value) > -1) ||
+      (item.id.indexOf(value) > -1) ||
+      (item.type.indexOf(value) > -1 ))
+    });
+  }
+
+  onClickRename(identity: IdentityAPI){
+    this.rename = true;
+    this.changeIdentity = Object.assign({},identity);
+  }
+
+  onRename(identity: IdentityAPI){
+    this.rename = false;
+    this.filteredItems = [];
+    this.json = {'newname':identity.name};
+    this.apiService.changeIdentity(identity.id,this.json).subscribe(data => {
+      this.getAPIs();
+    });
+  }
+
+  onRenameCancel(){
+    this.rename = false;
+  }
+
+  onClickDelete(id: string){
+    this.onRenameCancel();
+    this.filteredItems = [];
+    this.apiService.deleteIdentity(id).subscribe(data => {
+      this.getAPIs();
+    });
+  }
+
+}
diff --git a/src/app/main-page/main-page.component.html b/src/app/main-page/main-page.component.html
index 659a5d4..e7cd074 100644
--- a/src/app/main-page/main-page.component.html
+++ b/src/app/main-page/main-page.component.html
@@ -1,17 +1,11 @@
-<div class="o-container">
-  <div class="c-card">
-    <div class="o-container">
-        <h1 class="u-text-center u-pb-x3 o-type-35">
-          GNUnet Web User Interface
-        </h1>
-        <p>
-          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.
+<div class="c-card">
+  <h1 class="u-text-center u-pb-x3 o-type-35">
+    GNUnet Web User Interface
+  </h1>
+  <p>
+    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.
 
-          Luctus magnis mi odio cursus ut pharetra pretium congue mattis, sagittis taciti iaculis mollis gravida fringilla facilisi faucibus, tincidunt consequat eu fusce arcu potenti proin sapien. Taciti sem placerat fringilla a fusce pretium nunc praesent habitant, sociosqu maecenas conubia mollis aliquam aliquet curae ad, mauris arcu urna pellentesque laoreet inceptos suscipit nullam. Curabitur molestie class gravida donec nisl cum urna integer, sodales etiam placerat vivamus scelerisque sollicitudin.
-        </p>
-    </div>
-  </div>
-</div>
-<div class="u-text-center">
-  <app-rest-apis></app-rest-apis>
+    Luctus magnis mi odio cursus ut pharetra pretium congue mattis, sagittis taciti iaculis mollis gravida fringilla facilisi faucibus, tincidunt consequat eu fusce arcu potenti proin sapien. Taciti sem placerat fringilla a fusce pretium nunc praesent habitant, sociosqu maecenas conubia mollis aliquam aliquet curae ad, mauris arcu urna pellentesque laoreet inceptos suscipit nullam. Curabitur molestie class gravida donec nisl cum urna integer, sodales etiam placerat vivamus scelerisque sollicitudin.
+  </p>
 </div>
+<app-rest-apis class="u-text-center"></app-rest-apis>
diff --git a/src/app/messages.service.spec.ts b/src/app/messages.service.spec.ts
new file mode 100644
index 0000000..43d170d
--- /dev/null
+++ b/src/app/messages.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MessagesService } from './messages.service';
+
+describe('MessagesService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MessagesService]
+    });
+  });
+
+  it('should be created', inject([MessagesService], (service: MessagesService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/messages.service.ts b/src/app/messages.service.ts
new file mode 100644
index 0000000..6d18405
--- /dev/null
+++ b/src/app/messages.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessagesService {
+
+  private error:string;
+
+  constructor() { }
+
+  getError() :string{
+    return this.error;
+  }
+
+  pushError(errorText:string){
+    this.error = errorText;
+  }
+
+  dismissError(){
+    this.error='';
+  }
+}
diff --git a/src/app/rest-apis/rest-apis.component.html b/src/app/rest-apis/rest-apis.component.html
index 4a15a85..6081599 100644
--- a/src/app/rest-apis/rest-apis.component.html
+++ b/src/app/rest-apis/rest-apis.component.html
@@ -1,6 +1,5 @@
-<div class="o-container o-container--size-small">
-  <div class="o-grid" >
-    <div class="o-grid__col u-1/3 u-p-x2" *ngFor="let api of apis">
+<div class="o-grid u-pt-x2 ">
+    <div class="o-grid__col u-1/4" *ngFor="let api of apis">
       <div class="c-card">
         <h1 class="o-type-28">{{api.name}}</h1>
         <br>
@@ -8,4 +7,3 @@
       </div>
     </div>
   </div>
-</div>
diff --git a/src/app/rest-apis/rest-apis.component.ts b/src/app/rest-apis/rest-apis.component.ts
index f9cd3cf..1660174 100644
--- a/src/app/rest-apis/rest-apis.component.ts
+++ b/src/app/rest-apis/rest-apis.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { RestAPI } from '../rest-api';
 import { ApiService } from '../api.service';
-
 @Component({
   selector: 'app-rest-apis',
   templateUrl: './rest-apis.component.html'