adding org token management

src/angular/src/app/app.component.html

@@ -14,15 +14,15 @@
 
 <div class="bottom">
     <button class="bottom" (click)="show('api')" [ngClass]="display == 'api'? 'selected' : ''">
-        <img class="bottom" src="assets/api.svg" alt="api">
-        <div class="bottom">API</div>
+        <img class="bottom icon" src="assets/api.svg" alt="api">
+        <div class="bottom xxs">API</div>
     </button>
     <button class="bottom" (click)="show('account')" [ngClass]="display == 'account'? 'selected' : ''">
-        <img class="bottom" src="assets/account.svg" alt="api">
-        <div class="bottom">Accounts</div>
+        <img class="bottom icon" src="assets/account.svg" alt="account">
+        <div class="bottom xxs">Accounts</div>
     </button>
     <button class="bottom" (click)="show('about')" [ngClass]="display == 'about'? 'selected' : ''">
-        <img class="bottom" src="assets/help.svg" alt="api">
-        <div class="bottom">about</div>
+        <img class="bottom icon" src="assets/help.svg" alt="help">
+        <div class="bottom xxs">about</div>
     </button>
 </div>

src/angular/src/app/app.component.scss

@@ -91,6 +91,14 @@ div.bottom {
     font-size: smaller;
 }
 
+div.xxs {
+    font-size: xx-small !important;
+}
+
+img.icon {
+    margin: 0.2em;
+}
+
 button.selected {
     color: #eee;
     background-color: #999;

src/angular/src/app/app.module.ts

@@ -1,17 +1,20 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { ApiComponent } from './pages/api/api.component';
 import { AccountComponent } from './pages/account/account.component';
 import { AccountManageComponent } from './pages/account/manage/manage.component';
 import { AccountCreateComponent } from './pages/account/create/create.component'
+import { AccountManageOrgComponent } from './pages/account/manage_org/manage_org.component';
+import { AccountCreateOrgComponent } from './pages/account/create_org/create_org.component'
 import { AboutComponent } from './pages/about/about.component'
 
 @NgModule({
-  declarations: [AppComponent, ApiComponent, AccountComponent, AccountManageComponent, AccountCreateComponent, AboutComponent],
-  imports: [BrowserModule, AppRoutingModule, HttpClientModule],
+  declarations: [AppComponent, ApiComponent, AccountComponent, AccountManageComponent, AccountCreateComponent, AccountManageOrgComponent, AccountCreateOrgComponent, AboutComponent],
+  imports: [BrowserModule, AppRoutingModule, FormsModule, HttpClientModule],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/angular/src/app/pages/about/about.component.scss

@@ -65,7 +65,7 @@ button.links:enabled:hover {
     display: flex;
     align-items: stretch;
     flex-direction: column;
-    border: 1px solid #eee;
+    border: 1px solid #ddd;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
     border-radius: 2px;
 }

src/angular/src/app/pages/account/account.component.html

@@ -9,10 +9,44 @@ <h2 class="title-cloud" (click)="openTab(session.domain)">
             </div>
         </div>
         <div class="text-cloud first">Logged in as <b>{{session.email}}</b></div>
-        <div class="text-cloud last">Session expires at <b>{{(session.expires_at * 1000) | date:'yyyy-MM-dd HH:mm:ss' }}</b></div>
-        <div>
-            <button class="cloud" (click)="openManageTokens(session.domain)">Manage Tokens</button>
-            <button class="cloud" (click)="openCreateToken(session.domain)">Create New Token</button>
+        <div class="text-cloud last">Session expires at <b>{{(session.expires_at * 1000) | date:'yyyy-MM-dd HH:mm:ss'}}</b></div>
+        <div style="display: flex; flex-direction: row;">
+            <div style="display: flex;flex-direction: column;width: 45%;margin: 1em;border: 1px solid #bbb;border-radius: 2px;align-items: stretch;">
+                <div style="display: flex;flex-direction: row;justify-content: center;">
+                    <img class="bottom icon" src="assets/user.svg" alt="user" style="height: 20px; margin: 4px;">
+                    <div style="display: flex;justify-content: center;flex-direction: column;"> User Token
+                    </div>
+                </div>
+
+                <div style="display: flex;flex-direction: row;">
+                    <button class="cloud token tooltip left" (click)="openManageTokens(session.domain, 'user')">
+                            <img class="icon"src="assets/list.svg">
+                            <span class="tooltiptext">Manage</span>
+                    </button>
+                    <button class="cloud token tooltip right" (click)="openCreateToken(session.domain, 'user')">
+                        <img class="icon" src="assets/add.svg">
+                        <span class="tooltiptext">Create</span>
+                    </button>
+                </div>
+            </div>
+            <div style="display: flex;flex-direction: column;width: 45%;margin: 1em;border: 1px solid #bbb;border-radius: 2px;align-items: stretch;">
+                <div style="display: flex;flex-direction: row;justify-content: center;">
+                    <img class="bottom icon" src="assets/org.svg" alt="user" style="height: 20px; margin: 4px;">
+                    <div style="display: flex;justify-content: center;flex-direction: column;">
+                        Org Token
+                    </div>
+                </div>
+                <div style="display: flex;flex-direction: row;">
+                    <button class="cloud token tooltip left" (click)="openManageTokens(session.domain, 'org')">
+                        <img class="icon"src="assets/list.svg">
+                        <span class="tooltiptext">Manage</span>
+                    </button>
+                    <button class="cloud token tooltip right" (click)="openCreateToken(session.domain, 'org')">
+                        <img class="icon" src="assets/add.svg">
+                        <span class="tooltiptext">Create</span>
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -21,5 +55,7 @@ <h2 class="title-cloud" (click)="openTab(session.domain)">
     <div>Please log in to your Mist Dashobard first.</div>
 </div>
 
-<app-account-manage [ngClass]="{hidden: manageTokens == ''}" class="popup white" [sessionEvent]="enventSession.asObservable()" (closeManageTokens)="closeManageTokens()" [enventManageTokens]="enventManageTokens.asObservable()"></app-account-manage>
-<app-account-create [ngClass]="{hidden: createToken == ''}" class="popup transparent" [sessionEvent]="enventSession.asObservable()" (closeCreateToken)="closeCreateToken()" [enventCreateToken]="enventCreateToken.asObservable()"></app-account-create>
+<app-account-manage [ngClass]="{hidden: manageTokens == '' || scope !='user'}" class="popup white" [sessionEvent]="enventSession.asObservable()" (closeManageTokens)="closeManageTokens()" [enventManageTokens]="enventManageTokens.asObservable()"></app-account-manage>
+<app-account-create [ngClass]="{hidden: createToken == '' || scope != 'user'}" class="popup transparent" [sessionEvent]="enventSession.asObservable()" (closeCreateToken)="closeCreateToken()" [enventCreateToken]="enventCreateToken.asObservable()"></app-account-create>
+<app-account-manage-org [ngClass]="{hidden: manageTokens == '' || scope != 'org'}" class="popup white" [sessionEvent]="enventSession.asObservable()" (closeManageTokens)="closeManageTokens()" [enventManageTokens]="enventManageTokens.asObservable()"></app-account-manage-org>
+<app-account-create-org [ngClass]="{hidden: createToken == '' || scope != 'org'}" class="popup transparent" [sessionEvent]="enventSession.asObservable()" (closeCreateToken)="closeCreateToken()" [enventCreateToken]="enventCreateToken.asObservable()"></app-account-create-org>

src/angular/src/app/pages/account/account.component.scss

@@ -55,8 +55,8 @@
     display: flex;
     align-items: stretch;
     flex-direction: column;
-    border: 1px solid #eee;
-    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    border: 1px solid #ddd;
+    box-shadow: 0 3px 6px 0 rgb(99 99 99 / 10%);
     border-radius: 2px;
 }
 
@@ -101,7 +101,7 @@
 }
 
 .text-cloud.last {
-    margin-bottom: 2em;
+    margin-bottom: 0.2em;
 }
 
 .cloud {
@@ -114,6 +114,18 @@
     background-color: #bbb;
 }
 
+.cloud.token.left {
+    border-radius: 0 0 0 2px;
+}
+
+.cloud.token.right {
+    border-radius: 0 0 2px 0;
+}
+
+.cloud.token img {
+    height: 20px;
+}
+
 // BUTTONS
 button {
     border: none;
@@ -124,4 +136,52 @@ button:disabled {
     background-color: #eee;
     color: #aaa;
     box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px;
+}
+
+button.token {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    padding: 0.1em;
+}
+
+///////////////////////
+// TOOTLTIP
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 60px;
+    background-color: #00000061;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 4px 0;
+    position: absolute;
+    z-index: 1;
+    top: 150%;
+    left: 50%;
+    margin-left: -30px;
+    font-size: smaller;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent #00000061 transparent;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }

src/angular/src/app/pages/account/account.component.ts

@@ -3,12 +3,18 @@ import { HttpClient } from '@angular/common/http';
 import { AccountManageComponent } from './manage/manage.component';
 import { Subject } from 'rxjs';
 
+export interface OrgElement {
+  org_id: string;
+  name: string;
+}
+
 export interface SessionElement {
   domain: string;
   csrftoken: string;
   email: string;
   has_sessionid: boolean;
   expires_at: number;
+  orgs: OrgElement[];
 }
 
 @Component({
@@ -30,12 +36,14 @@ export class AccountComponent implements OnInit {
 
   manageTokens: string = "";
   createToken: string = "";
+  scope: string = "";
   constructor(
     private _cd: ChangeDetectorRef,
     private _http: HttpClient
   ) { }
 
   domains = [
+    "mistsys.com",
     ".mist.com",
     ".eu.mist.com",
     ".gc1.mist.com"
@@ -78,8 +86,8 @@ export class AccountComponent implements OnInit {
           if (this.sessions[i].expires_at > cookie.expirationDate) this.sessions[i].expires_at = cookie.expirationDate
           // otherwise, add a new entry in the list
         } else {
-          if (cookie.name.startsWith("csrftoken")) this.sessions.push({ domain: cookie.domain, email: null, csrftoken: cookie.value, has_sessionid: false, expires_at: cookie.expirationDate });
-          else if (cookie.name.startsWith("sessionid")) this.sessions.push({ domain: cookie.domain, email: null, csrftoken: null, has_sessionid: true, expires_at: cookie.expirationDate });
+          if (cookie.name.startsWith("csrftoken")) this.sessions.push({ domain: cookie.domain, email: null, csrftoken: cookie.value, has_sessionid: false, expires_at: cookie.expirationDate, orgs: [] });
+          else if (cookie.name.startsWith("sessionid")) this.sessions.push({ domain: cookie.domain, email: null, csrftoken: null, has_sessionid: true, expires_at: cookie.expirationDate, orgs: [] });
         }
       }
     }
@@ -90,13 +98,34 @@ export class AccountComponent implements OnInit {
       if (session.has_sessionid && session.csrftoken) {
         let url = "https://api" + session.domain + "/api/v1/self"
         this._http.get(url).subscribe((data) => {
-          session.email= data["email"];
+          session.email = data["email"];
+          session.orgs = this.processOrgs(data["privileges"]);
           this._cd.detectChanges()
         })
       }
     })
   }
 
+  processOrgs(privileges: any[]): OrgElement[] {
+    let orgs: OrgElement[] = [];
+    privileges.forEach(privilege => {
+      if (["admin", "write"].indexOf(privilege["role"]) > -1) {
+        if (privilege["scope"] == "org") {
+          orgs.push({ org_id: privilege["org_id"], name: privilege["name"] });
+        }
+      }
+    })
+
+    orgs.sort(function (a, b) {
+      let c = b.name.toLowerCase() < a.name.toLowerCase()
+      if (c) return 1
+      else return -1
+    });;
+
+    return orgs;
+  }
+
+
   openTab(domain: string) {
     let dest_url = "https://manage" + domain + "/cloud.html";
     chrome.tabs.create({ url: dest_url });
@@ -106,8 +135,9 @@ export class AccountComponent implements OnInit {
   ////////////
   // MANAGE TOKENS
   ////////////
-  openManageTokens(domain: string): void {
+  openManageTokens(domain: string, scope: string): void {
     this.manageTokens = domain;
+    this.scope = scope;
     this.enventManageTokens.next(true)
     this.sessions.forEach(session => {
       if (session.domain == domain) {
@@ -119,15 +149,17 @@ export class AccountComponent implements OnInit {
 
   closeManageTokens(): void {
     this.manageTokens = "";
+    this.scope = "";
     this.enventManageTokens.next(false)
     this._cd.detectChanges();
   }
 
   ////////////
   // CREATE TOKENS
   ////////////
-  openCreateToken(domain: string): void {
+  openCreateToken(domain: string, scope: string): void {
     this.createToken = domain;
+    this.scope = scope;
     this.enventCreateToken.next(true)
     this.sessions.forEach(session => {
       if (session.domain == domain) {
@@ -139,6 +171,7 @@ export class AccountComponent implements OnInit {
 
   closeCreateToken(): void {
     this.createToken = "";
+    this.scope = "";
     this.enventCreateToken.next(false)
     this._cd.detectChanges();
   }

src/angular/src/app/pages/account/create/create.component.scss

@@ -7,6 +7,8 @@
     background-color: white;
     margin: 1em;
     padding: 0;
+    border: 1px solid #bbb;
+    border-radius: 2px;
 }
 
 .cloud {
@@ -81,6 +83,7 @@ button {
 
 button.close {
     width: 100%;
+    border-radius: 0 0 2px 2px;
     background-color: #0096a3;
     color: white;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;