From 292f5810ac80ff9ca99f091800e1dc8d38130ac9 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Wed, 4 Apr 2018 22:59:42 -0400 Subject: [PATCH] lock component and tabs component --- jslib | 2 +- .../accounts/environment.component.html | 2 +- src/popup2/accounts/lock.component.html | 32 +++++++++++ src/popup2/accounts/lock.component.ts | 33 +++++++++++ src/popup2/accounts/login.component.html | 2 +- src/popup2/accounts/login.component.ts | 1 + src/popup2/accounts/register.component.html | 2 +- src/popup2/accounts/two-factor.component.ts | 1 + src/popup2/app-routing.module.ts | 27 ++++++++- src/popup2/app.module.ts | 8 +++ src/popup2/tabs.component.ts | 42 ++++++++++++++ src/popup2/vault/current-tab.component.ts | 22 ++++++++ src/popup2/vault/groupings.component.ts | 22 ++++++++ src/scss/base.scss | 55 +++++++++++++++++++ 14 files changed, 246 insertions(+), 5 deletions(-) create mode 100644 src/popup2/accounts/lock.component.html create mode 100644 src/popup2/accounts/lock.component.ts create mode 100644 src/popup2/tabs.component.ts create mode 100644 src/popup2/vault/current-tab.component.ts create mode 100644 src/popup2/vault/groupings.component.ts diff --git a/jslib b/jslib index fd19efa9f26..a0ca51dda4e 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit fd19efa9f260addca1f0fc14dd1641a276a22759 +Subproject commit a0ca51dda4ebbf710284a0f4e59d47ac8f31c8e7 diff --git a/src/popup2/accounts/environment.component.html b/src/popup2/accounts/environment.component.html index 004ae7adc57..8eacaf7bf9e 100644 --- a/src/popup2/accounts/environment.component.html +++ b/src/popup2/accounts/environment.component.html @@ -1,7 +1,7 @@
- {{'close' | i18n}} + {{'close' | i18n}}
{{'appName' | i18n}} diff --git a/src/popup2/accounts/lock.component.html b/src/popup2/accounts/lock.component.html new file mode 100644 index 00000000000..176a5597705 --- /dev/null +++ b/src/popup2/accounts/lock.component.html @@ -0,0 +1,32 @@ + +
+
+
+ {{'verifyMasterPassword' | i18n}} +
+
+ +
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+

+ {{'logOut' | i18n}} +

+ diff --git a/src/popup2/accounts/lock.component.ts b/src/popup2/accounts/lock.component.ts new file mode 100644 index 00000000000..170da2102ee --- /dev/null +++ b/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'; + } +} diff --git a/src/popup2/accounts/login.component.html b/src/popup2/accounts/login.component.html index 9c387e61dcc..57743af04be 100644 --- a/src/popup2/accounts/login.component.html +++ b/src/popup2/accounts/login.component.html @@ -1,7 +1,7 @@
- {{'cancel' | i18n}} + {{'cancel' | i18n}}
{{'appName' | i18n}} diff --git a/src/popup2/accounts/login.component.ts b/src/popup2/accounts/login.component.ts index 6441e2eee8a..f4e1e7dffaa 100644 --- a/src/popup2/accounts/login.component.ts +++ b/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() { diff --git a/src/popup2/accounts/register.component.html b/src/popup2/accounts/register.component.html index 8589e4a82aa..a64c1c446f0 100644 --- a/src/popup2/accounts/register.component.html +++ b/src/popup2/accounts/register.component.html @@ -1,7 +1,7 @@
- {{'cancel' | i18n}} + {{'cancel' | i18n}}
{{'createAccount' | i18n}} diff --git a/src/popup2/accounts/two-factor.component.ts b/src/popup2/accounts/two-factor.component.ts index a39b98e9478..1960a549f3a 100644 --- a/src/popup2/accounts/two-factor.component.ts +++ b/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() { diff --git a/src/popup2/app-routing.module.ts b/src/popup2/app-routing.module.ts index 1a08d599e06..f22d66cb8f2 100644 --- a/src/popup2/app-routing.module.ts +++ b/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({ diff --git a/src/popup2/app.module.ts b/src/popup2/app.module.ts index 086d06b7b27..4d25cd64c8c 100644 --- a/src/popup2/app.module.ts +++ b/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 ], diff --git a/src/popup2/tabs.component.ts b/src/popup2/tabs.component.ts new file mode 100644 index 00000000000..aae3c32c228 --- /dev/null +++ b/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: ` + + `, +}) +export class TabsComponent { } diff --git a/src/popup2/vault/current-tab.component.ts b/src/popup2/vault/current-tab.component.ts new file mode 100644 index 00000000000..8dd0ae8ce47 --- /dev/null +++ b/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() { + + } +} diff --git a/src/popup2/vault/groupings.component.ts b/src/popup2/vault/groupings.component.ts new file mode 100644 index 00000000000..fa4ad445513 --- /dev/null +++ b/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() { + + } +} diff --git a/src/scss/base.scss b/src/scss/base.scss index 735b0375b80..74b8188ac85 100644 --- a/src/scss/base.scss +++ b/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; + } + } + } + } +}