1 files changed, 40 insertions, 21 deletions

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>