verify email and outdated browser callouts

src/app/app.module.ts

@@ -83,6 +83,7 @@ import { TwoFactorVerifyComponent } from './settings/two-factor-verify.component
 import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.component';
 import { UpdateLicenseComponent } from './settings/update-license.component';
 import { UserBillingComponent } from './settings/user-billing.component';
+import { VerifyEmailComponent } from './settings/verify-email.component';
 
 import { BreachReportComponent } from './tools/breach-report.component';
 import { ExportComponent } from './tools/export.component';
@@ -225,6 +226,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
         UserBillingComponent,
         UserLayoutComponent,
         VaultComponent,
+        VerifyEmailComponent,
     ],
     entryComponents: [
         AddEditComponent,

src/app/settings/verify-email.component.html

@@ -0,0 +1,15 @@
+<div class="card border-warning">
+    <div class="card-header bg-warning text-white">
+        <i class="fa fa-envelope-o fa-fw"></i> {{'verifyEmail' | i18n}}
+    </div>
+    <div class="card-body">
+        <p>{{'verifyEmailDesc' | i18n}}</p>
+        <button type="button" class="btn btn-block btn-outline-secondary btn-submit" #sendBtn [appApiAction]="actionPromise" [disabled]="sendBtn.loading"
+            (click)="send()">
+            <i class="fa fa-spin fa-spinner"></i>
+            <span>
+                {{'sendEmail' | i18n}}
+            </span>
+        </button>
+    </div>
+</div>

src/app/settings/verify-email.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+@Component({
+    selector: 'app-verify-email',
+    templateUrl: 'verify-email.component.html',
+})
+export class VerifyEmailComponent {
+    actionPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService) { }
+
+    async send() {
+        if (this.actionPromise != null) {
+            return;
+        }
+        try {
+            this.actionPromise = this.apiService.postAccountVerifyEmail();
+            await this.actionPromise;
+            this.analytics.eventTrack.next({ action: 'Sent Verification Email' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('checkInboxForVerification'));
+        } catch { }
+        this.actionPromise = null;
+    }
+}

src/app/vault/vault.component.html

@@ -49,12 +49,19 @@
             </app-vault-ciphers>
         </div>
         <div class="col-3">
-            <div class="card">
+            <app-verify-email *ngIf="showVerifyEmail" class="d-block mb-4"></app-verify-email>
+            <div class="card border-warning mb-4" *ngIf="showBrowserOutdated">
+                <div class="card-header bg-warning text-white">
+                    <i class="fa fa-warning fa-fw"></i> {{'updateBrowser' | i18n}}
+                </div>
                 <div class="card-body">
-                    Some callout
+                    <p>{{'updateBrowserDesc' | i18n}}</p>
+                    <a class="btn btn-block btn-outline-secondary" target="_blank" href="https://browser-update.org/update-browser.html" rel="noopener">
+                        {{'updateBrowser' | i18n}}
+                    </a>
                 </div>
             </div>
-            <div class="card mt-3">
+            <div class="card">
                 <div class="card-header">
                     {{'organizations' | i18n}}
                 </div>

src/app/vault/vault.component.ts

@@ -30,7 +30,9 @@ import { GroupingsComponent } from './groupings.component';
 import { ShareComponent } from './share.component';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
+import { TokenService } from 'jslib/abstractions/token.service';
 
 @Component({
     selector: 'app-vault',
@@ -53,14 +55,22 @@ export class VaultComponent implements OnInit {
     type: CipherType = null;
     folderId: string = null;
     collectionId: string = null;
+    showVerifyEmail = false;
+    showBrowserOutdated = false;
+    showUpdateKey = false;
 
     private modal: ModalComponent = null;
 
     constructor(private syncService: SyncService, private route: ActivatedRoute,
         private router: Router, private location: Location,
-        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver) { }
+        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private tokenService: TokenService, private storageService: StorageService) { }
 
     async ngOnInit() {
+        this.showVerifyEmail = !(await this.tokenService.getEmailVerified());
+        this.showBrowserOutdated = window.navigator.userAgent.indexOf('MSIE') !== -1;
+        this.showUpdateKey = !this.showVerifyEmail && (await this.storageService.get<string>('encKey')) == null;
+
         this.route.queryParams.subscribe(async (params) => {
             await this.syncService.fullSync(false);
             await Promise.all([

src/locales/en/messages.json

@@ -2086,5 +2086,20 @@
   },
   "endDate": {
     "message": "End Date"
+  },
+  "verifyEmail": {
+    "message": "Verify Email"
+  },
+  "verifyEmailDesc": {
+    "message": "Verify your account's email address to unlock access to all features."
+  },
+  "checkInboxForVerification": {
+    "message": "Check your email inbox for a verification link."
+  },
+  "updateBrowser": {
+    "message": "Update Browser"
+  },
+  "updateBrowserDesc": {
+    "message": "You are using an unsupported web browser. The web vault may not function properly."
   }
 }