private mode component

src/popup/app-routing.module.ts

@@ -18,6 +18,7 @@ import { TwoFactorOptionsComponent } from './accounts/two-factor-options.compone
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
 import { PasswordGeneratorComponent } from './generator/password-generator.component';
+import { PrivateModeComponent } from './private-mode.component';
 import { ExportComponent } from './settings/export.component';
 import { FolderAddEditComponent } from './settings/folder-add-edit.component';
 import { FoldersComponent } from './settings/folders.component';
@@ -175,6 +176,11 @@ const routes: Routes = [
         canActivate: [AuthGuardService],
         data: { state: 'options' },
     },
+    {
+        path: 'private-mode',
+        component: PrivateModeComponent,
+        data: { state: 'private-mode' },
+    },
     {
         path: 'tabs',
         component: TabsComponent,

src/popup/app.component.ts

@@ -1,3 +1,5 @@
+import { BrowserApi } from '../browser/browserApi';
+
 import {
     ToasterConfig,
     ToasterContainerComponent,
@@ -65,6 +67,10 @@ export class AppComponent implements OnInit {
         private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone) { }
 
     ngOnInit() {
+        if (BrowserApi.getBackgroundPage() == null) {
+            return;
+        }
+
         this.ngZone.runOutsideAngular(() => {
             window.onmousemove = () => this.recordActivity();
             window.onmousedown = () => this.recordActivity();

src/popup/app.module.ts

@@ -14,8 +14,6 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { AppComponent } from './app.component';
-
 import { EnvironmentComponent } from './accounts/environment.component';
 import { HintComponent } from './accounts/hint.component';
 import { HomeComponent } from './accounts/home.component';
@@ -24,8 +22,10 @@ import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
+import { AppComponent } from './app.component';
 import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
 import { PasswordGeneratorComponent } from './generator/password-generator.component';
+import { PrivateModeComponent } from './private-mode.component';
 import { ExportComponent } from './settings/export.component';
 import { FolderAddEditComponent } from './settings/folder-add-edit.component';
 import { FoldersComponent } from './settings/folders.component';
@@ -102,6 +102,7 @@ import { IconComponent } from 'jslib/angular/components/icon.component';
         PasswordGeneratorHistoryComponent,
         PopOutComponent,
         PremiumComponent,
+        PrivateModeComponent,
         RegisterComponent,
         SearchCiphersPipe,
         SettingsComponent,
@@ -113,9 +114,7 @@ import { IconComponent } from 'jslib/angular/components/icon.component';
         TwoFactorComponent,
         ViewComponent,
     ],
-    entryComponents: [
-
-    ],
+    entryComponents: [],
     providers: [],
     bootstrap: [AppComponent],
 })

src/popup/private-mode.component.html

@@ -0,0 +1,6 @@
+<div class="content">
+    <p class="text-center">{{privateModeMessage}}</p>
+    <button type="button" class="btn primary block" (click)="learnMore()">
+        <b>{{learnMoreMessage}}</b>
+    </button>
+</div>

src/popup/private-mode.component.ts

@@ -0,0 +1,24 @@
+import { BrowserApi } from '../browser/browserApi';
+
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-private-mode',
+    templateUrl: 'private-mode.component.html',
+})
+export class PrivateModeComponent implements OnInit {
+    privateModeMessage: string;
+    learnMoreMessage: string;
+
+    ngOnInit() {
+        this.privateModeMessage = chrome.i18n.getMessage('privateModeMessage');
+        this.learnMoreMessage = chrome.i18n.getMessage('learnMore');
+    }
+
+    learnMore() {
+        BrowserApi.createNewTab('https://help.bitwarden.com/article/extension-wont-load-in-private-mode/');
+    }
+}

src/popup/scss/base.scss

@@ -76,6 +76,10 @@ textarea {
     resize: vertical;
 }
 
+main {
+    height: 100%;
+}
+
 content::-webkit-scrollbar {
     width: 10px;
     height: 10px;

src/popup/services/launch-guard.service.ts

@@ -1,3 +1,5 @@
+import { BrowserApi } from '../../browser/browserApi';
+
 import { Injectable } from '@angular/core';
 import {
     CanActivate,
@@ -12,6 +14,11 @@ export class LaunchGuardService implements CanActivate {
     constructor(private cryptoService: CryptoService, private userService: UserService, private router: Router) { }
 
     async canActivate() {
+        if (BrowserApi.getBackgroundPage() == null) {
+            this.router.navigate(['private-mode']);
+            return false;
+        }
+
         const isAuthed = await this.userService.isAuthenticated();
         if (!isAuthed) {
             return true;

src/popup/services/services.module.ts

@@ -73,10 +73,10 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer
             window.document.body.classList.add('body-sm');
         }
 
-        stateService.save(ConstantsService.disableFaviconKey,
-            await storageService.get<boolean>(ConstantsService.disableFaviconKey));
-
         if (BrowserApi.getBackgroundPage() != null) {
+            stateService.save(ConstantsService.disableFaviconKey,
+                await storageService.get<boolean>(ConstantsService.disableFaviconKey));
+
             window.document.documentElement.classList.add('locale_' + i18nService.translationLocale);
             authService.init();
 

src/popup/vault/current-tab.component.html

@@ -30,8 +30,8 @@
                 <app-ciphers-list [ciphers]="loginCiphers" title="{{'autoFill' | i18n}}" [showView]="true"
                                   (onSelected)="fillCipher($event)" (onView)="viewCipher($event)"
                                   *ngIf="loginCiphers.length"></app-ciphers-list>
-                <div class="box-content-row text-center padded no-hover" *ngIf="!loginCiphers.length">
-                    <p>{{'autoFillInfo' | i18n}}</p>
+                <div class="box-content-row padded no-hover" *ngIf="!loginCiphers.length">
+                    <p class="text-center">{{'autoFillInfo' | i18n}}</p>
                     <button type="button" class="btn primary link block" (click)="addCipher()">
                         {{'addLogin' | i18n}}
                     </button>