set page titles

jslib

@@ -1 +1 @@
-Subproject commit 91081d92327da22ab3be88a60f8b71be26933370
+Subproject commit ed93fa9ea3c486d78ba2591b3057245ead147a15

src/app/app-routing.module.ts

@@ -52,8 +52,16 @@ const routes: Routes = [
         children: [
             { path: '', pathMatch: 'full', component: LoginComponent, canActivate: [UnauthGuardService] },
             { path: '2fa', component: TwoFactorComponent, canActivate: [UnauthGuardService] },
-            { path: 'register', component: RegisterComponent, canActivate: [UnauthGuardService] },
-            { path: 'hint', component: HintComponent, canActivate: [UnauthGuardService] },
+            {
+                path: 'register', component: RegisterComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'createAccount' },
+            },
+            {
+                path: 'hint', component: HintComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'passwordHint' },
+            },
             { path: 'lock', component: LockComponent },
         ],
     },
@@ -62,20 +70,24 @@ const routes: Routes = [
         component: UserLayoutComponent,
         canActivate: [AuthGuardService],
         children: [
-            { path: 'vault', component: VaultComponent },
+            { path: 'vault', component: VaultComponent, data: { titleId: 'myVault' } },
             {
                 path: 'settings',
                 component: SettingsComponent,
                 children: [
                     { path: '', pathMatch: 'full', redirectTo: 'account' },
-                    { path: 'account', component: AccountComponent },
-                    { path: 'options', component: OptionsComponent },
-                    { path: 'domain-rules', component: DomainRulesComponent },
-                    { path: 'two-factor', component: TwoFactorSetupComponent },
-                    { path: 'premium', component: PremiumComponent },
-                    { path: 'billing', component: UserBillingComponent },
-                    { path: 'organizations', component: OrganizationsComponent },
-                    { path: 'create-organization', component: CreateOrganizationComponent },
+                    { path: 'account', component: AccountComponent, data: { titleId: 'myAccount' } },
+                    { path: 'options', component: OptionsComponent, data: { titleId: 'options' } },
+                    { path: 'domain-rules', component: DomainRulesComponent, data: { titleId: 'domainRules' } },
+                    { path: 'two-factor', component: TwoFactorSetupComponent, data: { titleId: 'twoStepLogin' } },
+                    { path: 'premium', component: PremiumComponent, data: { titleId: 'goPremium' } },
+                    { path: 'billing', component: UserBillingComponent, data: { titleId: 'billingAndLicensing' } },
+                    { path: 'organizations', component: OrganizationsComponent, data: { titleId: 'organizations' } },
+                    {
+                        path: 'create-organization',
+                        component: CreateOrganizationComponent,
+                        data: { titleId: 'newOrganization' },
+                    },
                 ],
             },
             {
@@ -84,10 +96,14 @@ const routes: Routes = [
                 canActivate: [AuthGuardService],
                 children: [
                     { path: '', pathMatch: 'full', redirectTo: 'generator' },
-                    { path: 'import', component: ImportComponent },
-                    { path: 'export', component: ExportComponent },
-                    { path: 'generator', component: PasswordGeneratorComponent },
-                    { path: 'breach-report', component: BreachReportComponent },
+                    { path: 'import', component: ImportComponent, data: { titleId: 'importData' } },
+                    { path: 'export', component: ExportComponent, data: { titleId: 'exportVault' } },
+                    {
+                        path: 'generator',
+                        component: PasswordGeneratorComponent,
+                        data: { titleId: 'passwordGenerator' },
+                    },
+                    { path: 'breach-report', component: BreachReportComponent, data: { titleId: 'dataBreachReport' } },
                 ],
             },
         ],
@@ -98,7 +114,7 @@ const routes: Routes = [
         canActivate: [AuthGuardService, OrganizationGuardService],
         children: [
             { path: '', pathMatch: 'full', redirectTo: 'vault' },
-            { path: 'vault', component: OrgVaultComponent },
+            { path: 'vault', component: OrgVaultComponent, data: { titleId: 'vault' } },
             {
                 path: 'tools',
                 component: OrgToolsComponent,
@@ -106,8 +122,8 @@ const routes: Routes = [
                 data: { allowedTypes: [OrganizationUserType.Owner, OrganizationUserType.Admin] },
                 children: [
                     { path: '', pathMatch: 'full', redirectTo: 'export' },
-                    // { path: 'import', component: ImportComponent },
-                    { path: 'export', component: OrgExportComponent },
+                    // { path: 'import', component: ImportComponent, data: { titleId: 'importData' } },
+                    { path: 'export', component: OrgExportComponent, data: { titleId: 'exportVault' } },
                 ],
             },
         ],

src/app/organizations/tools/tools.component.html

@@ -5,7 +5,7 @@
                 <div class="card-header">{{'tools' | i18n}}</div>
                 <div class="list-group list-group-flush">
                     <a routerLink="import" class="list-group-item" routerLinkActive="active">
-                        {{'import' | i18n}}
+                        {{'importData' | i18n}}
                     </a>
                     <a routerLink="export" class="list-group-item" routerLinkActive="active">
                         {{'exportVault' | i18n}}

src/app/services/organization-type-guard.service.ts

@@ -15,7 +15,7 @@ export class OrganizationTypeGuardService implements CanActivate {
 
     async canActivate(route: ActivatedRouteSnapshot) {
         const org = await this.userService.getOrganization(route.parent.params.organizationId);
-        const allowedTypes = route.data['allowedTypes'] as OrganizationUserType[];
+        const allowedTypes = route.data == null ? null : route.data.allowedTypes as OrganizationUserType[];
         if (allowedTypes == null || allowedTypes.indexOf(org.type) === -1) {
             this.router.navigate(['/organizations', org.id]);
             return false;

src/app/services/router.service.ts

@@ -1,20 +1,53 @@
 import { Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import {
+    ActivatedRoute,
     NavigationEnd,
     Router,
 } from '@angular/router';
 
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
 @Injectable()
 export class RouterService {
     private previousUrl: string = undefined;
     private currentUrl: string = undefined;
 
-    constructor(private router: Router) {
+    constructor(private router: Router, private activatedRoute: ActivatedRoute,
+        private titleService: Title, private i18nService: I18nService) {
         this.currentUrl = this.router.url;
         router.events.subscribe((event) => {
             if (event instanceof NavigationEnd) {
                 this.previousUrl = this.currentUrl;
                 this.currentUrl = event.url;
+
+                let title = i18nService.t('pageTitle', 'Bitwarden');
+                let titleId: string = null;
+                let rawTitle: string = null;
+                let child = this.activatedRoute.firstChild;
+                while (child != null) {
+                    if (child.firstChild != null) {
+                        child = child.firstChild;
+                    } else if (child.snapshot.data != null && child.snapshot.data.title != null) {
+                        rawTitle = child.snapshot.data.title;
+                        break;
+                    } else if (child.snapshot.data != null && child.snapshot.data.titleId != null) {
+                        titleId = child.snapshot.data.titleId;
+                        break;
+                    } else {
+                        titleId = null;
+                        rawTitle = null;
+                        break;
+                    }
+                }
+
+                if (titleId != null || rawTitle != null) {
+                    const newTitle = rawTitle != null ? rawTitle : i18nService.t(titleId);
+                    if (newTitle != null && newTitle !== '') {
+                        title = (newTitle + ' | ' + title);
+                    }
+                }
+                this.titleService.setTitle(title);
             }
         });
     }

src/app/tools/import.component.html

@@ -1,5 +1,5 @@
 <div class="page-header">
-    <h1>Import</h1>
+    <h1>{{'importData' | i18n}}</h1>
 </div>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
@@ -48,6 +48,6 @@
     </div>
     <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
         <i class="fa fa-spinner fa-spin"></i>
-        <span>{{'import' | i18n}}</span>
+        <span>{{'importData' | i18n}}</span>
     </button>
 </form>

src/app/tools/tools.component.html

@@ -8,7 +8,7 @@
                         {{'passwordGenerator' | i18n}}
                     </a>
                     <a routerLink="import" class="list-group-item" routerLinkActive="active">
-                        {{'import' | i18n}}
+                        {{'importData' | i18n}}
                     </a>
                     <a routerLink="export" class="list-group-item" routerLinkActive="active">
                         {{'exportVault' | i18n}}

src/locales/en/messages.json

@@ -1,4 +1,14 @@
 {
+  "pageTitle": {
+    "message": "$APP_NAME$ Web Vault",
+    "description": "The title of the website in the browser window.",
+    "placeholders": {
+      "app_name": {
+        "content": "$1",
+        "example": "Bitwarden"
+      }
+    }
+  },
   "whatTypeOfItem": {
     "message": "What type of item is this?"
   },
@@ -884,8 +894,8 @@
   "tools": {
     "message": "Tools"
   },
-  "import": {
-    "message": "Import"
+  "importData": {
+    "message": "Import Data"
   },
   "importSuccess": {
     "message": "Data has been successfully imported into your vault."