Merge branch 'dev'

Author: tmunzer-AIDE

.DS_Store

@@ -1,4 +1,5 @@
 {
     "compile-hero.disable-compile-files-on-did-save-code": false,
-    "python.pythonPath": "/usr/local/bin/python3"
+    "python.pythonPath": "/usr/local/bin/python3",
+    "apimatic.notifications.whenApiFileIsDetected.enabled": false
 }

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "name": "mist-extension",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Generated with @larscom/ng-mist-extension",
   "scripts": {
     "start": "npm run watch",

angular/package.json

@@ -2,7 +2,7 @@
     height: 50px;
     width: 100%;
     object-fit: cover;
-    background: rgb(13, 76, 125);
+    background: #0d4c7d;
     background: linear-gradient(0deg, rgba(13, 76, 125, 1) 0%, rgba(52, 153, 244, 1) 100%);
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 }
@@ -45,8 +45,8 @@ div.bottom {
 
 // MENU BUTTONS
 button.bottom {
-    background-color: #202836;
-    color: #ddd;
+    background-color:  var(--background);
+    color: var(--text-color);
     transition: all .2s ease-in-out;
     flex-direction: column;
     width: 100%;

angular/src/app/app.component.scss

@@ -8,14 +8,14 @@ <h2>Extension information</h2>
             <div class="version-value">{{current_version}}</div>
         </div>
         <div class="version-info">
-            <div class="version-text">Lastest Version:</div>
+            <div class="version-text">Latest Version:</div>
             <div class="version-unknown" *ngIf="!last_version && !error_happened">
                 <div>Searching for new version...</div>
-                <img src="assets/question.svg" alt="unknow version">
+                <img src="assets/question.svg" alt="unknown version">
             </div>
             <div class="version-uptodate" *ngIf="last_version && up_to_date">
-                <div>You have the lastest Version</div>
-                <img src="assets/check_circle.svg" alt="unknow version">
+                <div>You have the latest Version</div>
+                <img src="assets/check_circle.svg" alt="unknown version">
             </div>
             <div class="version-newversion" *ngIf="last_version && !up_to_date">
                 <div>New version available ({{last_version}})</div>

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

@@ -26,13 +26,19 @@ <h2 class="title-cloud" >
                     <h3 class="title-cloud">API Usage</h3>
                     <div *ngIf="session.requests > -1" style="font-size: x-small;">{{session.requests}} / {{session.request_limit}}</div>
                     <div *ngIf="session.requests == -1" style="font-size: x-small;"> - / - </div>
-                <div *ngIf="session.requests == -1" class="progress-bar" role="progressbar" [ngStyle]="{'background': 'radial-gradient(closest-side, #161c26 79%, transparent 80% 100%), conic-gradient(#ff6969 0%, #698bc7 0)'}">
+                <div *ngIf="session.requests == -1" class="progress-bar" role="progressbar" [ngStyle]="{
+                    'background': 'radial-gradient(closest-side, var(--background2) 79%, transparent 80% 100%), conic-gradient(var(--progress-warning) 0%, var(--progress-background) 0)'
+                }">
                     - %
                 </div>
-                <div *ngIf="session.requests > 1 && session.request_percentage>=100" class="progress-bar" role="progressbar" [ngStyle]="{'background': 'radial-gradient(closest-side, #161c26 79%, transparent 80% 100%), conic-gradient(#ff6969 '+session.request_percentage+'%, #698bc7 0)'}">
+                <div *ngIf="session.requests > -1 && session.request_percentage>=100" class="progress-bar" role="progressbar" [ngStyle]="{
+                    'background': 'radial-gradient(closest-side, var(--background2) 79%, transparent 80% 100%), conic-gradient(var(--progress-warning) '+session.request_percentage+'%, var(--progress-background) 0)'
+                }">
                     {{session.request_percentage | number: '1.0-0' }}%
                 </div>
-                <div *ngIf="session.requests > 1 && session.request_percentage<100" class="progress-bar" role="progressbar" [ngStyle]="{'background': 'radial-gradient(closest-side, #161c26 79%, transparent 80% 100%), conic-gradient(#7dff69 '+session.request_percentage+'%, #698bc7 0)'}">
+                <div *ngIf="session.requests > -1 && session.request_percentage<100" class="progress-bar" role="progressbar" [ngStyle]="{
+                    'background': 'radial-gradient(closest-side, var(--background2) 79%, transparent 80% 100%), conic-gradient(var(--progress-green) '+session.request_percentage+'%, var(--progress-background) 0)'}
+                    ">
                     {{session.request_percentage | number: '1.0-0' }}%
                 </div>
             </div>
@@ -50,10 +56,14 @@ <h3 class="title-cloud">API Usage</h3>
                             <img class="icon"src="assets/list.svg">
                             <span *ngIf="session.two_factor_passed" class="tooltiptext top">Manage</span>
                     </button>
-                    <button class="circle secondary tooltip" (click)="openCreateToken(session.domain, 'user')" [disabled]="!session.two_factor_passed">
+                    <button  *ngIf="!session.domain.includes('mistsys.com')" class="circle secondary tooltip" (click)="openCreateToken(session.domain, 'user')" [disabled]="!session.two_factor_passed">
                         <img class="icon" src="assets/add.svg">
                         <span *ngIf="session.two_factor_passed" class="tooltiptext top">Create</span>
                     </button>
+                    <button  *ngIf="session.domain.includes('mistsys.com')" class="circle secondary tooltip" disabled>
+                        <img class="icon" src="assets/add.svg">
+                        <span *ngIf="session.two_factor_passed" class="tooltiptext top" style="color: var(--warning)">Disabled on staging</span>
+                    </button>
                 </div>
             </div>
 
@@ -69,10 +79,14 @@ <h3 class="title-cloud">API Usage</h3>
                         <img class="icon"src="assets/list.svg">
                         <span *ngIf="session.two_factor_passed" class="tooltiptext top">Manage</span>
                     </button>
-                    <button class="circle secondary tooltip" (click)="openCreateToken(session.domain, 'org')" [disabled]="!session.two_factor_passed">
+                    <button *ngIf="!session.domain.includes('mistsys.com')" class="circle secondary tooltip" (click)="openCreateToken(session.domain, 'org')" [disabled]="!session.two_factor_passed">
                         <img class="icon" src="assets/add.svg">
                         <span *ngIf="session.two_factor_passed" class="tooltiptext top">Create</span>
                     </button>
+                    <button *ngIf="session.domain.includes('mistsys.com')" class="circle secondary tooltip" disabled>
+                        <img class="icon" src="assets/add.svg">
+                        <span *ngIf="session.two_factor_passed" class="tooltiptext top" style="color: var(--warning)">Disabled on staging</span>
+                    </button>
                 </div>
             </div>
         </div>

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

@@ -4,10 +4,10 @@
     display: flex;
     align-items: stretch;
     flex-direction: column;
-    border: 1px solid #4f5560;
+    border: 1px solid var(--border);
     box-shadow: 0 3px 6px 0 rgba(99, 99, 99, 0.1);
     border-radius: 15px;
-    background-color: #161c26;
+    background-color: var(--background);
 }
 
 // info on the top part of the box
@@ -29,7 +29,7 @@
 .box-cloud-info-login div.error {
     height: 1em;
     margin: .9em 0;
-    color: #ff0000d7;
+    color: var(--error);
 }
 
 .title-cloud-box {
@@ -48,20 +48,20 @@
 .title-cloud-box.link h2 {
     text-decoration: none;
     transition: all 0.2s ease-in-out;
-    color: white;
+    color: var(--text-color);
 }
 
 .title-cloud-box.link:hover h2 {
     text-decoration: underline;
     transition: all 0.2s ease-in-out;
-    color: #62b4ee;
+    color: var(--text-hover);
 }
 
 .title-cloud {
     font-weight: 300;
     margin: 0.2em;
     display: flex;
-    color: white;
+    color: var(--text-color);
     flex-direction: row;
     align-items: center;
 }
@@ -120,14 +120,14 @@
         display: flex;
         flex-direction: column;
         margin: .7em;
-        border: 1px solid #4f5560;
+        border: 1px solid var(--border);
         border-radius: 15px;
         align-items: center;
         justify-content: space-between;
         align-content: center;
         width: 40%;
         padding: .5em;
-        background-color: black;
+        background-color:  var(--background2);
 
         .box-cloud-token-title {
             display: flex;

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

@@ -25,13 +25,13 @@
         input {
             margin: 1em 0;
             padding: 0.5em;
-            border: 1px solid white;
+            border: 1px solid var(--b, var(--text-color));
             border-radius: 10px;
-            background-color: rgba(50, 50, 93, 0.25);
-            color: white;
+            background-color: var(--b, var(--background));
+            color:  var(--b, var(--text-color));
         }
         input:focus {
-            background-color: black;
+            background-color:  var(--background2);
             border-color: var(--primary) ;
     }
 }

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

@@ -64,14 +64,19 @@ export class AccountCreateComponent implements OnInit {
   ////////////
   // SESSIONS
   ////////////
-  createToken(): void {
+  createToken(csrftoken: string = null, retry:boolean=true): void {
+    console.log(this.session);
+    if (!csrftoken) {csrftoken = this.session.csrftoken}
     if (this.do_create) {
       let url = "https://" + this.session.api_host + "/api/v1/self/apitokens";
-      this._http.post(url, { name: this.token_name }, { headers: { "X-CSRFTOKEN": this.session.csrftoken } }).subscribe((token: TokenElement) => {
-        this.session.requests += 1;
-        this.token = token;
-        this._cd.detectChanges();
-      })
+      this._http.post(url, { name: this.token_name }, { headers: { "X-CSRFTOKEN": csrftoken, 'Access-Control-Allow-Origin': 'https://api.mistsys.com/api/v1/self/apitokens' } })
+        .subscribe({
+          next: (token: TokenElement) => {
+            this.session.requests += 1;
+            this.token = token;
+            this._cd.detectChanges();
+          }
+        })
     }
   }
 

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

@@ -29,14 +29,14 @@
                     <tr>
                         <th>Last Used Time:</th>
                         <td>
-                            <div *ngIf="token.last_used" [ngStyle]="{'color': now - (token.last_used * 1000) > 7776000000  ? '#e26b00' : null}">{{(token.last_used * 1000)| date:'yyyy-MM-dd HH:mm:ss'}}</div>
-                            <div *ngIf="!token.last_used" style="color: #f44336;font-weight: 400;">Never</div>
+                            <div *ngIf="token.last_used" [ngStyle]="{'color': now - (token.last_used * 1000) > 7776000000  ? 'var(--warning)' : null}">{{(token.last_used * 1000)| date:'yyyy-MM-dd HH:mm:ss'}}</div>
+                            <div *ngIf="!token.last_used" style="color: var(--error);font-weight: 400;">Never</div>
                         </td>
                     </tr>
                 </table>
             </div>
             <div class="delete">
-                <button (click)="deleteToken(token.id)">
+                <button (click)="deleteToken(token.id)" [disabled]="session.domain.includes('mistsys.com')">
                     <img src="assets/delete.svg" alt="delete">
                 </button>
             </div>