improve UI and add session expire time info

Author: tmunzer

.DS_Store

@@ -17,6 +17,13 @@
     z-index: 100;
 }
 
+app-api {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
 //
 .app-container {
     height: 450px;

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

@@ -8,7 +8,8 @@ <h2 class="title-cloud" (click)="openTab(session.domain)">
                 </h2>
             </div>
         </div>
-        <div class="text-cloud">Logged in as <b>{{session.email}}</b></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>

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

@@ -11,7 +11,7 @@
     top: 50px;
     left: 0;
     height: 453px;
-    width: 375px;
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -81,10 +81,18 @@
 }
 
 .text-cloud {
-    margin: 1em auto 2em;
+    margin: 0.2em auto;
     font-weight: 200;
 }
 
+.text-cloud.first {
+    margin-top: 1.5em;
+}
+
+.text-cloud.last {
+    margin-bottom: 2em;
+}
+
 .cloud {
     width: 50%;
     transition: background-color 0.2s ease-in-out;

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

@@ -8,6 +8,7 @@ export interface SessionElement {
   csrftoken: string;
   email: string;
   has_sessionid: boolean;
+  expires_at: number;
 }
 
 @Component({
@@ -73,10 +74,12 @@ export class AccountComponent implements OnInit {
         if (i > -1) {
           if (cookie.name.startsWith("csrftoken")) this.sessions[i].csrftoken = cookie.value;
           else if (cookie.name.startsWith("sessionid")) this.sessions[i].has_sessionid = true;
+          // if the current cookie has a shorter lifetime than the previous one, use its expirationDate instead
+          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 });
-          else if (cookie.name.startsWith("sessionid")) this.sessions.push({ domain: cookie.domain, email: null, csrftoken: null, has_sessionid: true });
+          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 });
         }
       }
     }

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

@@ -1,11 +1,11 @@
-<div class="content">
+<div class="content no-grow">
     <div class="box-apitab">
         <button  class="apitab" [disabled]="!api_url_obj" (click)="openApiTab(api_url_obj)">GET API</button>
         <button  class="apitab" [disabled]="!api_url_stats_obj" (click)="openApiTab(api_url_stats_obj)">GET STATS
             API</button>
     </div>
 </div>
-<div class="content">
+<div class="content grow">
     <h2>Page Info</h2>
     <div *ngIf="!org_id" class="not_mist">
         Information only available on Mist Cloud pages...
@@ -47,7 +47,7 @@ <h2>Page Info</h2>
     </div>
 </div>
 
-<div class="content">
+<div class="content no-grow">
     <h2>Documentation</h2>
     <div class="box-links">
         <button class="links"  (click)="openTab('postman')">Postman</button>

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

@@ -6,6 +6,14 @@
     flex-direction: column;
 }
 
+.content.no-grow {
+    flex-grow: 0;
+}
+
+.content.grow {
+    flex-grow: 1;
+}
+
 // TITLES
 h2 {
     font-weight: 200;

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

@@ -1,6 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 
 body {
-    width: 375px !important;
+    width: 350px !important;
     margin: 0 !important;
 }