finished identity page

6 files changed, 136 insertions, 18 deletions

diff --git a/src/app/api.service.ts b/src/app/api.service.ts
index b659198..6597514 100644
--- a/src/app/api.service.ts
+++ b/src/app/api.service.ts
@@ -62,7 +62,7 @@ export class ApiService {
 
   deleteIdentity (id: string): Observable<any>{
     this.messages.dismissError();
-    return this.http.delete(this.identityURL+'/'+id)
+    return this.http.delete(this.identityURL+'?pubkey='+id)
     .pipe(
       tap(json => this.handleJSON(json)),
       catchError(this.handleError('deleteIdentity', []))
@@ -70,10 +70,20 @@ export class ApiService {
   }
 
 
-  changeIdentity (id: string, json: any): Observable<any>{
+  changeIdentity (json: any): Observable<any>{
     this.messages.dismissError();
     const options = {headers: {'Content-Type': 'application/json'}};
-    return this.http.put(this.identityURL+'/'+id, json, options)
+    return this.http.put(this.identityURL, json, options)
+    .pipe(
+      tap(json => this.handleJSON(json)),
+      catchError(this.handleError('changeIdentity', []))
+    );
+  }
+
+  assignIdentity (json: any): Observable<any>{
+    this.messages.dismissError();
+    const options = {headers: {'Content-Type': 'application/json'}};
+    return this.http.put(this.identityURL, json, options)
     .pipe(
       tap(json => this.handleJSON(json)),
       catchError(this.handleError('changeIdentity', []))
diff --git a/src/app/identity-api.ts b/src/app/identity-api.ts
index d694110..005276f 100644
--- a/src/app/identity-api.ts
+++ b/src/app/identity-api.ts
@@ -11,19 +11,18 @@
    WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
    Affero General Public License for more details.
-  
+
    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
    */
 /**
  * @author Philippe Buschmann
  * @file src/app/identity-api.ts
- * @brief 
+ * @brief
  *
  */
 
 export class IdentityAPI{
-  id: string;
+  pubkey: 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
index fe72dc1..b0f22d8 100644
--- a/src/app/identity-page/identity-page.component.html
+++ b/src/app/identity-page/identity-page.component.html
@@ -18,12 +18,13 @@
   <div class="u-mv-x1" *ngFor="let identity of filteredItems">
     <div class="c-card c-card--no-padding u-p-x1">
       <div class="o-grid">
-        <div class="o-grid__col u-1/12"><div class="c-circle" [ngStyle]="{'background-color': returnHSL(identity.id)}">{{identity.name | slice:0:1 | uppercase}}</div></div>
-        <div class="o-grid__col u-9/12">
-          <p class="u-color-grey">Public Key: <span class="">{{identity.id}}</span></p>
+        <div class="o-grid__col u-1/12"><div class="c-circle" [ngStyle]="{'background-color': returnHSL(identity.pubkey)}">{{identity.name | slice:0:1 | uppercase}}</div></div>
+        <div class="o-grid__col u-8/12">
+          <p class="u-color-grey">Public Key: <span class="">{{identity.pubkey}}</span></p>
           <span class="o-type-20">{{identity.name}}</span>
         </div>
         <div class="o-grid__col u-1/12"><p class="u-color-grey">Rename</p><a class="c-button c-button--rename" (click)="onClickRename(identity)"><i class="fa fa-pencil"></i></a></div>
+        <div class="o-grid__col u-1/12"><p class="u-color-grey">Subsystem</p><a class="c-button c-button--rename" (click)="onClickAddSubsystem(identity)"><i class="fa fa-plus"></i></a></div>
         <div class="o-grid__col u-1/12"><p class="u-color-grey">Delete</p><a class="c-button c-button--danger" (click)="onClickDelete(identity)"><i class="fa fa-trash"></i></a></div>
       </div>
     </div>
@@ -32,20 +33,32 @@
 
 <div class="c-card u-p-x3 u-mt-x2" *ngIf="this.rename">
   <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Rename</h1>
-  <div class="u-color-grey">Public Key: <span>{{changeIdentity.id}}</span></div>
+  <div class="u-color-grey u-pb-x1">Public Key: <span>{{changeIdentity.pubkey}}</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" (click)="onRename(changeIdentity)">Save</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.addsubsystem">
+  <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Add Subsystem</h1>
+  <div class="u-color-grey">Public Key: <span>{{changeIdentity.pubkey}}</span></div>
+  <div class="u-color-grey">Name: <span>{{changeIdentity.name}}</span></div>
+  <span class="u-mr-x2">
+    <span class="u-mr-x3">Subsystem: </span>
+    <input class="c-input" placeholder="e.g. namestore, ..." [(ngModel)]="newsubsystem"/>
+  </span>
+  <a class="c-button" (click)="onAddSubsystem(changeIdentity.pubkey)">Add</a>
+  <a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
+</div>
+
 <div class="c-card u-p-x3 u-mt-x2" *ngIf="this.delete">
   <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Delete</h1>
-  <div >Public Key: <span>{{changeIdentity.id}}</span></div>
+  <div >Public Key: <span>{{changeIdentity.pubkey}}</span></div>
   <div >Name: <span>{{changeIdentity.name}}</span></div>
   <div>
-    <a class="c-button" (click)="onDelete(changeIdentity.id)">Delete</a>
+    <a class="c-button" (click)="onDelete(changeIdentity.pubkey)">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 f347f44..7588799 100644
--- a/src/app/identity-page/identity-page.component.ts
+++ b/src/app/identity-page/identity-page.component.ts
@@ -38,10 +38,12 @@ export class IdentityPageComponent implements OnInit {
   filteredItems: IdentityAPI[];
   rename: boolean = false;
   delete: boolean = false;
+  addsubsystem: boolean = false;
   changeIdentity: IdentityAPI;
   json: any;
   is_displayed: boolean = true;
   request: boolean = false;
+  newsubsystem: string="";
 
   constructor(private apiService: ApiService,private message: MessagesService) { }
 
@@ -68,8 +70,7 @@ export class IdentityPageComponent implements OnInit {
     this.filteredItems = Object.assign([], this.identities).filter(
     item => {
       return ((item.name.indexOf(value) > -1) ||
-      (item.id.indexOf(value) > -1) ||
-      (item.type.indexOf(value) > -1 ))
+      (item.pubkey.indexOf(value) > -1))
     });
   }
 
@@ -79,12 +80,13 @@ export class IdentityPageComponent implements OnInit {
     this.changeIdentity = Object.assign({},identity);
   }
 
+
   onRename(identity: IdentityAPI){
     this.request = true;
     this.onReset();
     this.filteredItems = [];
-    this.json = {'newname':identity.name};
-    this.apiService.changeIdentity(identity.id,this.json).subscribe(data => {
+    this.json = {'newname':identity.name,'pubkey':identity.pubkey};
+    this.apiService.changeIdentity(this.json).subscribe(data => {
       this.message.pushSuccess('Rename was successful.');
       this.getAPIs();
     });
@@ -93,6 +95,7 @@ export class IdentityPageComponent implements OnInit {
   onReset(){
     this.rename = false;
     this.delete = false;
+    this.addsubsystem = false;
     this.is_displayed = true;
   }
 
@@ -112,6 +115,25 @@ export class IdentityPageComponent implements OnInit {
     });
   }
 
+
+  onClickAddSubsystem(identity: IdentityAPI){
+    this.is_displayed = false;
+    this.addsubsystem = true;
+    this.changeIdentity = Object.assign({},identity);
+  }
+
+  onAddSubsystem(pubkey:string){
+    this.request = true;
+    this.onReset();
+    this.filteredItems = [];
+    this.json = {'subsystem':this.newsubsystem,'pubkey':pubkey};
+    this.apiService.assignIdentity(this.json).subscribe(data => {
+      this.newsubsystem = "";
+      this.message.pushSuccess('Subsystem was successfully added.');
+      this.getAPIs();
+    });
+  }
+
   intFromHash(str:string): number{
     let hash: number = 0;
     for (var i = 0; i < str.length; i++) {
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
new file mode 100644
index 0000000..bca0ac1
--- /dev/null
+++ b/src/scss/components/_modal.scss
@@ -0,0 +1,73 @@
+// Modal Comp
+// Options
+$iota-components-modal                   : true;
+
+$iota-components-modal-namespace         : 'modal' !default;
+$iota-components-modal-dialog-name       : 'dialog' !default;
+$iota-components-modal-open-name         : 'is-modal-open' !default;
+$iota-components-modal-active-name       : 'is-active' !default;
+
+$iota-components-modal-padding           : $iota-global-gutter-default !default;
+$iota-components-modal-background        : rgba(0, 0, 0, 0.5) !default;
+$iota-components-modal-dialog-background : rgb(255, 255, 255) !default;
+
+// Helper Local Variables
+$iota-components-modal-var-modal         : $iota-global-components-namespace + $iota-components-modal-namespace;
+$iota-components-modal-var-modal-active  : $iota-components-modal-var-modal + '.' + $iota-components-modal-active-name;
+$iota-components-modal-var-modal-dialog  : $iota-components-modal-var-modal + '__' + $iota-components-modal-dialog-name;
+
+// Modal Component
+
+.#{$iota-components-modal-open-name} {
+  position: fixed;
+  top:  0;
+  left: 0;
+  width:  100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+
+.#{$iota-components-modal-var-modal} {
+  position: fixed;
+  visibility: hidden;
+  top:    0;
+  right:  0;
+  bottom: 0;
+  left:   0;
+  overflow: auto;
+  text-align: center;
+  opacity: 0;
+  z-index: 10000;
+  background: $iota-components-modal-background;
+
+  -webkit-overflow-scrolling: touch;
+          backface-visibility: hidden;
+}
+
+.#{$iota-components-modal-var-modal-active} {
+  visibility: visible;
+  opacity: 1;
+}
+
+.#{$iota-components-modal-var-modal}:after {
+  display: inline-block;
+  height: 100%;
+  margin-left: -0.05em;
+  content: "";
+  vertical-align: middle;
+}
+
+
+  .#{$iota-components-modal-var-modal-dialog} {
+    position: relative;
+    display: inline-block;
+    padding: $iota-components-modal-padding;
+    max-width: 700px;
+    width: 100%;
+    background: $iota-components-modal-dialog-background;
+    vertical-align: middle;
+    transform: translate3d(0,0,0);
+    text-size-adjust: 100%;
+    box-sizing: border-box;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 18b0408..3865945 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -34,6 +34,7 @@
 @import 'components/markdown';
 @import 'components/circle';
 @import 'components/dropdown';
+@import 'components/modal';
 
 //@import 'utilities/align-items';
 @import 'utilities/align';