improve error messages

Author: tmunzer

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

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

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

@@ -16,6 +16,10 @@ <h2 class="title-cloud" (click)="openTab(session.domain)">
         </div>
     </div>
 </div>
+<div *ngIf="sessions.length == 0" class="no-account">
+    <div>Sorry, I'm not able to find any Mist Session in this browser...</div>
+    <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>

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

@@ -6,6 +6,17 @@
     flex-direction: column;
 }
 
+.no-account {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 1em;
+    text-align: center;
+    font-weight: 200;
+    height: 100%;
+}
+
 .popup {
     position: absolute;
     top: 50px;

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

@@ -1,5 +1,9 @@
 <button (click)="close()" class="close">CLOSE</button>
 <div class="container">
+    <div *ngIF="tokens.length == 0">
+        <div>This account doesn't have any API Token yet...</div>
+        <div>You can go back and create a new API Token directly from this extension!</div>
+    </div>
     <div class="token-container" *ngFor="let token of tokens">
         <div class="token">
             <table>

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

@@ -8,7 +8,8 @@
 <div class="content grow">
     <h2>Page Info</h2>
     <div *ngIf="!org_id" class="not_mist">
-        Information only available on Mist Cloud pages...
+        <div>Sorry, this website does not look like a Mist Dashboard...</div>
+        <div>If you think I'm wrong, please send me an email with the current URL.</div>
     </div>
     <div *ngIf="org_id">
         <div class="box-ids" *ngIf="org_id">