lock component and tabs component

jslib

@@ -1 +1 @@
-Subproject commit fd19efa9f260addca1f0fc14dd1641a276a22759
+Subproject commit a0ca51dda4ebbf710284a0f4e59d47ac8f31c8e7

src/popup2/accounts/environment.component.html

@@ -1,7 +1,7 @@
 <form #form class="modal-content" (ngSubmit)="submit()">
     <header>
         <div class="left">
-            <a routerLink="/">{{'close' | i18n}}</a>
+            <a routerLink="/home">{{'close' | i18n}}</a>
         </div>
         <div class="center">
             <span class="title">{{'appName' | i18n}}</span>

src/popup2/accounts/lock.component.html

@@ -0,0 +1,32 @@
+<form (ngSubmit)="submit()">
+    <header>
+        <div class="left"></div>
+        <div class="center">
+            <span class="title">{{'verifyMasterPassword' | i18n}}</span>
+        </div>
+        <div class="right">
+            <button type="submit" appBlurClick>{{'submit' | i18n}}</button>
+        </div>
+    </header>
+    <div class="box">
+        <div class="box-content">
+            <div class="box-content-row box-content-row-flex" appBoxRow>
+                <div class="row-main">
+                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                    <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
+                           class="monospaced" [(ngModel)]="masterPassword" required appAutofocus>
+                </div>
+                <div class="action-buttons">
+                    <a class="row-btn" href="#" appStopClick appBlurClick
+                       title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                        <i class="fa fa-lg"
+                           [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <p class="text-center">
+        <a href="#" appStopClick (click)="logOut()">{{'logOut' | i18n}}</a>
+    </p>
+</form>

src/popup2/accounts/lock.component.ts

@@ -0,0 +1,33 @@
+import * as template from './lock.component.html';
+
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { LockComponent as BaseLockComponent } from 'jslib/angular/components/lock.component';
+
+@Component({
+    selector: 'app-lock',
+    template: template,
+})
+export class LockComponent extends BaseLockComponent {
+    masterPassword: string = '';
+    showPassword: boolean = false;
+
+    constructor(router: Router, analytics: Angulartics2,
+        toasterService: ToasterService, i18nService: I18nService,
+        platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
+        userService: UserService, cryptoService: CryptoService) {
+        super(router, analytics, toasterService, i18nService, platformUtilsService,
+            messagingService, userService, cryptoService);
+        this.successRoute = '/tabs/current';
+    }
+}

src/popup2/accounts/login.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
     <header>
         <div class="left">
-            <a routerLink="/">{{'cancel' | i18n}}</a>
+            <a routerLink="/home">{{'cancel' | i18n}}</a>
         </div>
         <div class="center">
             <span class="title">{{'appName' | i18n}}</span>

src/popup2/accounts/login.component.ts

@@ -21,6 +21,7 @@ export class LoginComponent extends BaseLoginComponent {
         analytics: Angulartics2, toasterService: ToasterService,
         i18nService: I18nService, syncService: SyncService) {
         super(authService, router, analytics, toasterService, i18nService, syncService);
+        this.successRoute = '/tabs/vault';
     }
 
     settings() {

src/popup2/accounts/register.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
     <header>
         <div class="left">
-            <a routerLink="/">{{'cancel' | i18n}}</a>
+            <a routerLink="/home">{{'cancel' | i18n}}</a>
         </div>
         <div class="center">
             <span class="title">{{'createAccount' | i18n}}</span>

src/popup2/accounts/two-factor.component.ts

@@ -34,6 +34,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
         environmentService: EnvironmentService) {
         super(authService, router, analytics, toasterService, i18nService, apiService,
             platformUtilsService, syncService, window, environmentService);
+        this.successRoute = '/tabs/vault';
     }
 
     async ngOnInit() {

src/popup2/app-routing.module.ts

@@ -4,22 +4,47 @@ import {
     Routes,
 } from '@angular/router';
 
+import { AuthGuardService } from 'jslib/angular/services/auth-guard.service';
+
 import { EnvironmentComponent } from './accounts/environment.component';
 import { HintComponent } from './accounts/hint.component';
 import { HomeComponent } from './accounts/home.component';
+import { LockComponent } from './accounts/lock.component';
 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 { TabsComponent } from './tabs.component';
+import { CurrentTabComponent } from './vault/current-tab.component';
+import { GroupingsComponent } from './vault/groupings.component';
 
 const routes: Routes = [
-    { path: '', component: HomeComponent },
+    { path: '', redirectTo: '/tabs/current', pathMatch: 'full' },
+    { path: 'vault', redirectTo: '/tabs/vault', pathMatch: 'full' },
+    { path: 'home', component: HomeComponent },
     { path: 'login', component: LoginComponent },
+    { path: 'lock', component: LockComponent },
     { path: '2fa', component: TwoFactorComponent },
     { path: '2fa-options', component: TwoFactorOptionsComponent },
     { path: 'register', component: RegisterComponent },
     { path: 'hint', component: HintComponent },
     { path: 'environment', component: EnvironmentComponent },
+    {
+        path: 'tabs', component: TabsComponent,
+        children: [
+            { path: '', redirectTo: '/tabs/vault', pathMatch: 'full' },
+            {
+                path: 'current',
+                component: CurrentTabComponent,
+                canActivate: [AuthGuardService],
+            },
+            {
+                path: 'vault',
+                component: GroupingsComponent,
+                canActivate: [AuthGuardService],
+            }
+        ]
+    }
 ];
 
 @NgModule({

src/popup2/app.module.ts

@@ -18,10 +18,14 @@ import { AppComponent } from './app.component';
 import { EnvironmentComponent } from './accounts/environment.component';
 import { HintComponent } from './accounts/hint.component';
 import { HomeComponent } from './accounts/home.component';
+import { LockComponent } from './accounts/lock.component';
 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 { TabsComponent } from './tabs.component';
+import { CurrentTabComponent } from './vault/current-tab.component';
+import { GroupingsComponent } from './vault/groupings.component';
 
 import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive';
 import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive';
@@ -53,15 +57,19 @@ import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe';
         AutofocusDirective,
         BlurClickDirective,
         BoxRowDirective,
+        CurrentTabComponent,
         EnvironmentComponent,
         FallbackSrcDirective,
+        GroupingsComponent,
         HomeComponent,
         HintComponent,
         I18nPipe,
+        LockComponent,
         LoginComponent,
         RegisterComponent,
         StopClickDirective,
         StopPropDirective,
+        TabsComponent,
         TwoFactorOptionsComponent,
         TwoFactorComponent
     ],

src/popup2/tabs.component.ts

@@ -0,0 +1,42 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    Type,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-tabs',
+    template: `
+        <router-outlet></router-outlet>
+        <nav class="tabs">
+            <ul>
+                <li routerLinkActive="active">
+                    <a routerLink="current" title="{{'currentTab' | i18n}}">
+                        <i class="fa fa-folder fa-2x"></i>{{'tab' | i18n}}
+                    </a>
+                </li>
+                <li routerLinkActive="active">
+                    <a routerLink="vault" title="{{'myVault' | i18n}}">
+                        <i class="fa fa-lock fa-2x"></i>{{'myVault' | i18n}}
+                    </a>
+                </li>
+                <li routerLinkActive="active">
+                    <a routerLink="tools" title="{{'tools' | i18n}}">
+                        <i class="fa fa-wrench fa-2x"></i>{{'tools' | i18n}}
+                    </a>
+                </li>
+                <li routerLinkActive="active">
+                    <a routerLink="settings" title="{{'settings' | i18n}}">
+                        <i class="fa fa-cogs fa-2x"></i>{{'settings' | i18n}}
+                    </a>
+                </li>
+            </ul>
+        </nav>`,
+})
+export class TabsComponent { }

src/popup2/vault/current-tab.component.ts

@@ -0,0 +1,22 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    Type,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-vault-tab',
+    styles: [],
+    template: `Current Tab`,
+})
+export class CurrentTabComponent {
+    constructor() {
+
+    }
+}

src/popup2/vault/groupings.component.ts

@@ -0,0 +1,22 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    Type,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-vault-groupings',
+    styles: [],
+    template: `Groupings`,
+})
+export class GroupingsComponent {
+    constructor() {
+
+    }
+}

src/scss/base.scss

@@ -141,3 +141,58 @@ header {
 .content {
     padding: 15px;
 }
+
+.tabs {
+    width: 100%;
+    height: 55px;
+    background-color: white;
+    border-top: 1px solid $border-color-dark;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+
+    ul {
+        width: 100%;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+            width: 25%;
+            float: left;
+            display: inline-block;
+            padding: 0;
+            margin: 0;
+
+            a {
+                text-align: center;
+                display: block;
+                padding: 7px 0;
+                text-decoration: none;
+                color: $gray-light;
+                font-size: 12px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                &:hover, &:focus {
+                    background-color: $list-item-hover;
+                }
+
+                i {
+                    display: block;
+                    margin-bottom: 2px;
+                    text-align: center;
+                }
+            }
+
+            &.active {
+                a {
+                    color: $brand-primary;
+                }
+            }
+        }
+    }
+}