diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index e060534f35b..5e49c8bfd2b 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -1085,5 +1085,8 @@ }, "allItems": { "message": "All Items" + }, + "noPasswordsInList": { + "message": "There are no passwords to list." } } diff --git a/src/popup2/app-routing.animations.ts b/src/popup2/app-routing.animations.ts index 2b9968d69fd..b20d1b1caf5 100644 --- a/src/popup2/app-routing.animations.ts +++ b/src/popup2/app-routing.animations.ts @@ -103,4 +103,10 @@ export const routerTransition = trigger('routerTransition', [ transition('tabs => add-cipher, ciphers => add-cipher', inSlideUp), transition('add-cipher => tabs, add-cipher => ciphers', outSlideDown), + + transition('generator => generator-history', inSlideLeft), + transition('generator-history => generator', outSlideRight), + + transition('add-cipher => generator, edit-cipher => generator, tabs => generator', inSlideUp), + transition('generator => add-cipher, generator => edit-cipher, generator => tabs', outSlideDown), ]); diff --git a/src/popup2/app-routing.module.ts b/src/popup2/app-routing.module.ts index 5cc71825449..f820513915d 100644 --- a/src/popup2/app-routing.module.ts +++ b/src/popup2/app-routing.module.ts @@ -14,7 +14,11 @@ 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 { SettingsComponent } from './settings/settings.component'; import { TabsComponent } from './tabs.component'; +import { PasswordGeneratorComponent } from './tools/password-generator.component'; +import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component'; +import { ToolsComponent } from './tools/tools.component'; import { AddEditComponent } from './vault/add-edit.component'; import { CiphersComponent } from './vault/ciphers.component'; import { CurrentTabComponent } from './vault/current-tab.component'; @@ -36,6 +40,8 @@ const routes: Routes = [ { path: 'view-cipher', component: ViewComponent, data: { state: 'view-cipher' } }, { path: 'add-cipher', component: AddEditComponent, data: { state: 'add-cipher' } }, { path: 'edit-cipher', component: AddEditComponent, data: { state: 'edit-cipher' } }, + { path: 'generator', component: PasswordGeneratorComponent, data: { state: 'generator' } }, + { path: 'generator-history', component: PasswordGeneratorHistoryComponent, data: { state: 'generator-history' } }, { path: 'tabs', component: TabsComponent, data: { state: 'tabs' }, @@ -52,7 +58,19 @@ const routes: Routes = [ component: GroupingsComponent, canActivate: [AuthGuardService], data: { state: 'tabs_vault' }, - } + }, + { + path: 'tools', + component: ToolsComponent, + canActivate: [AuthGuardService], + data: { state: 'tabs_tools' }, + }, + { + path: 'settings', + component: SettingsComponent, + canActivate: [AuthGuardService], + data: { state: 'tabs_settings' }, + }, ] } ]; diff --git a/src/popup2/app.component.ts b/src/popup2/app.component.ts index 3fc79b290e7..2f07d489f73 100644 --- a/src/popup2/app.component.ts +++ b/src/popup2/app.component.ts @@ -92,6 +92,9 @@ export class AppComponent implements OnInit { this.stateService.remove('GroupingsComponent'); this.stateService.remove('CiphersComponent'); } + if (url.startsWith('/tabs/')) { + this.stateService.remove('addEditCipher'); + } this.previousUrl = url; } }); diff --git a/src/popup2/app.module.ts b/src/popup2/app.module.ts index b9a7b821c0c..6faee837fe1 100644 --- a/src/popup2/app.module.ts +++ b/src/popup2/app.module.ts @@ -23,7 +23,11 @@ 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 { SettingsComponent } from './settings/settings.component'; import { TabsComponent } from './tabs.component'; +import { PasswordGeneratorComponent } from './tools/password-generator.component'; +import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component'; +import { ToolsComponent } from './tools/tools.component'; import { AddEditComponent } from './vault/add-edit.component'; import { CiphersComponent } from './vault/ciphers.component'; import { CurrentTabComponent } from './vault/current-tab.component'; @@ -81,12 +85,16 @@ import { IconComponent } from 'jslib/angular/components/icon.component'; IconComponent, LockComponent, LoginComponent, + PasswordGeneratorComponent, + PasswordGeneratorHistoryComponent, PopOutComponent, RegisterComponent, SearchCiphersPipe, + SettingsComponent, StopClickDirective, StopPropDirective, TabsComponent, + ToolsComponent, TwoFactorOptionsComponent, TwoFactorComponent, ViewComponent, diff --git a/src/popup2/settings/settings.component.html b/src/popup2/settings/settings.component.html new file mode 100644 index 00000000000..a4a685a9306 --- /dev/null +++ b/src/popup2/settings/settings.component.html @@ -0,0 +1,16 @@ +
+
+ +
+
+ {{'settings' | i18n}} +
+
+
+ +
+
+ +
+
+ diff --git a/src/popup2/settings/settings.component.ts b/src/popup2/settings/settings.component.ts new file mode 100644 index 00000000000..3d0a61cf933 --- /dev/null +++ b/src/popup2/settings/settings.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-settings', + templateUrl: 'settings.component.html', +}) +export class SettingsComponent { } diff --git a/src/popup2/tools/password-generator-history.component.html b/src/popup2/tools/password-generator-history.component.html new file mode 100644 index 00000000000..622848500b2 --- /dev/null +++ b/src/popup2/tools/password-generator-history.component.html @@ -0,0 +1,39 @@ +
+
+ +
+
+ {{'passwordHistory' | i18n}} +
+
+ +
+
+ +
+
+
+
+ + {{h.password}} + + {{h.date | date:'medium'}} +
+
+ + + +
+
+
+
+
+

{{'noPasswordsInList' | i18n}}

+
+ diff --git a/src/popup2/tools/password-generator-history.component.ts b/src/popup2/tools/password-generator-history.component.ts new file mode 100644 index 00000000000..62e4db056a4 --- /dev/null +++ b/src/popup2/tools/password-generator-history.component.ts @@ -0,0 +1,29 @@ +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { Location } from '@angular/common'; +import { Component } from '@angular/core'; + +import { I18nService } from 'jslib/abstractions/i18n.service'; +import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service'; +import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; + +import { + PasswordGeneratorHistoryComponent as BasePasswordGeneratorHistoryComponent +} from 'jslib/angular/components/password-generator-history.component'; + +@Component({ + selector: 'app-password-generator-history', + templateUrl: 'password-generator-history.component.html', +}) +export class PasswordGeneratorHistoryComponent extends BasePasswordGeneratorHistoryComponent { + constructor(passwordGenerationService: PasswordGenerationService, analytics: Angulartics2, + platformUtilsService: PlatformUtilsService, i18nService: I18nService, + toasterService: ToasterService, private location: Location) { + super(passwordGenerationService, analytics, platformUtilsService, i18nService, toasterService); + } + + close() { + this.location.back(); + } +} diff --git a/src/popup2/tools/password-generator.component.html b/src/popup2/tools/password-generator.component.html new file mode 100644 index 00000000000..529f5d21610 --- /dev/null +++ b/src/popup2/tools/password-generator.component.html @@ -0,0 +1,79 @@ +
+
+ +
+
+ {{'passGen' | i18n}} +
+
+ +
+
+ +
{{password}}
+
+
+ {{'regeneratePassword' | i18n}} + {{'copyPassword' | i18n}} + +
{{'passwordHistory' | i18n}}
+ + +
+
+
+
+ {{'options' | i18n}} +
+
+
+ + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ diff --git a/src/popup2/tools/password-generator.component.ts b/src/popup2/tools/password-generator.component.ts new file mode 100644 index 00000000000..40bf22e90b3 --- /dev/null +++ b/src/popup2/tools/password-generator.component.ts @@ -0,0 +1,52 @@ +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { Location } from '@angular/common'; +import { + Component, +} from '@angular/core'; +import { + Router, +} from '@angular/router'; + +import { I18nService } from 'jslib/abstractions/i18n.service'; +import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service'; +import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; +import { StateService } from 'jslib/abstractions/state.service'; + +import { CipherView } from 'jslib/models/view/cipherView'; + +import { + PasswordGeneratorComponent as BasePasswordGeneratorComponent +} from 'jslib/angular/components/password-generator.component'; + +@Component({ + selector: 'app-password-generator', + templateUrl: 'password-generator.component.html', +}) +export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent { + private cipherState: CipherView; + + constructor(passwordGenerationService: PasswordGenerationService, analytics: Angulartics2, + platformUtilsService: PlatformUtilsService, i18nService: I18nService, + toasterService: ToasterService, private stateService: StateService, + private router: Router, private location: Location) { + super(passwordGenerationService, analytics, platformUtilsService, i18nService, toasterService); + } + + async ngOnInit() { + await super.ngOnInit(); + this.cipherState = await this.stateService.get('addEditCipher'); + super.showSelect = this.cipherState != null; + } + + select() { + super.select(); + this.cipherState.login.password = this.password; + this.close(); + } + + close() { + this.location.back(); + } +} diff --git a/src/popup2/tools/tools.component.html b/src/popup2/tools/tools.component.html new file mode 100644 index 00000000000..c089b9a8a72 --- /dev/null +++ b/src/popup2/tools/tools.component.html @@ -0,0 +1,19 @@ +
+
+ +
+
+ {{'tools' | i18n}} +
+
+
+ +
+
+ +
{{'passGen' | i18n}}
+ + +
+
+ diff --git a/src/popup2/tools/tools.component.ts b/src/popup2/tools/tools.component.ts new file mode 100644 index 00000000000..d5ffd9f3567 --- /dev/null +++ b/src/popup2/tools/tools.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-tools', + templateUrl: 'tools.component.html', +}) +export class ToolsComponent { } diff --git a/src/popup2/vault/add-edit.component.ts b/src/popup2/vault/add-edit.component.ts index 57debec45e5..562ac96e804 100644 --- a/src/popup2/vault/add-edit.component.ts +++ b/src/popup2/vault/add-edit.component.ts @@ -16,6 +16,7 @@ import { CipherService } from 'jslib/abstractions/cipher.service'; import { FolderService } from 'jslib/abstractions/folder.service'; import { I18nService } from 'jslib/abstractions/i18n.service'; import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; +import { StateService } from 'jslib/abstractions/state.service'; import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/components/add-edit.component'; @@ -27,10 +28,11 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit { constructor(cipherService: CipherService, folderService: FolderService, i18nService: I18nService, platformUtilsService: PlatformUtilsService, analytics: Angulartics2, toasterService: ToasterService, - auditService: AuditService, private route: ActivatedRoute, - private router: Router, private location: Location) { + auditService: AuditService, stateService: StateService, + private route: ActivatedRoute, private router: Router, + private location: Location) { super(cipherService, folderService, i18nService, platformUtilsService, analytics, - toasterService, auditService); + toasterService, auditService, stateService); } ngOnInit() { @@ -56,4 +58,10 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit { super.cancel(); this.location.back(); } + + async generatePassword() { + await super.generatePassword(); + this.stateService.save('addEditCipher', this.cipher); + this.router.navigate(['generator']); + } } diff --git a/src/popup2/vault/groupings.component.html b/src/popup2/vault/groupings.component.html index c40f7494b43..a8bdb0dc337 100644 --- a/src/popup2/vault/groupings.component.html +++ b/src/popup2/vault/groupings.component.html @@ -125,7 +125,7 @@

{{'noItemsInList' | i18n}}

-
+
diff --git a/src/scss/box.scss b/src/scss/box.scss index 7aca9f44658..80158155e75 100644 --- a/src/scss/box.scss +++ b/src/scss/box.scss @@ -368,7 +368,7 @@ } } - .text, .detail { + .text:not(.no-ellipsis), .detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -391,4 +391,12 @@ border-bottom: none; } } + + &.full-list { + margin: 0; + + .box-content { + border: none; + } + } } diff --git a/src/scss/misc.scss b/src/scss/misc.scss index 4a2cd82d44a..eb35292d7e4 100644 --- a/src/scss/misc.scss +++ b/src/scss/misc.scss @@ -97,3 +97,11 @@ app-root > #loading { width: 100%; color: $text-muted; } + +app-password-generator .password-block { + font-size: $font-size-large; + word-break: break-all; + font-family: $font-family-monospace; + text-align: center; + margin: 20px; +}