more tab with about and logout

src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { LaunchGuardService } from './services/launch-guard.service';
 import { LoginComponent } from './accounts/login.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { DashboardComponent } from './tabs/dashboard.component';
+import { MoreComponent } from './tabs/more.component';
 import { SettingsComponent } from './tabs/settings.component';
 import { TabsComponent } from './tabs/tabs.component';
 
@@ -40,6 +41,11 @@ const routes: Routes = [
                 component: SettingsComponent,
                 canActivate: [AuthGuardService],
             },
+            {
+                path: 'more',
+                component: MoreComponent,
+                canActivate: [AuthGuardService],
+            },
         ],
     },
 ];

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { LoginComponent } from './accounts/login.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { DashboardComponent } from './tabs/dashboard.component';
+import { MoreComponent } from './tabs/more.component';
 import { SettingsComponent } from './tabs/settings.component';
 import { TabsComponent } from './tabs/tabs.component';
 
@@ -64,6 +65,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         IconComponent,
         LoginComponent,
         ModalComponent,
+        MoreComponent,
         SearchCiphersPipe,
         SettingsComponent,
         StopClickDirective,

src/app/tabs/more.component.html

@@ -0,0 +1,23 @@
+<div class="row">
+    <div class="col-sm">
+        <div class="card">
+            <h3 class="card-header">{{'about' | i18n}}</h3>
+            <div class="card-body">
+                <p>
+                    {{'bitwardenDirectoryConnector' | i18n}}<br />
+                    {{'version' | i18n : version}}
+                    <br /> &copy; 8bit Solutions LLC 2015-{{year}}
+                </p>
+                <button class="btn btn-primary" type="button" (click)="update()">{{'checkForUpdates' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm">
+        <div class="card">
+            <h3 class="card-header">{{'other' | i18n}}</h3>
+            <div class="card-body">
+                <button class="btn btn-primary" type="button" (click)="logOut()">{{'logOut' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/tabs/more.component.ts

@@ -0,0 +1,36 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+@Component({
+    selector: 'app-more',
+    templateUrl: 'more.component.html',
+})
+export class MoreComponent implements OnInit {
+    version: string;
+    year: string;
+
+    constructor(private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
+        private messagingService: MessagingService) { }
+
+    ngOnInit() {
+        this.year = new Date().getFullYear().toString();
+        this.version = this.platformUtilsService.getApplicationVersion();
+    }
+
+    async update() { }
+
+    async logOut() {
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('logOutConfirmation'), this.i18nService.t('logOut'),
+            this.i18nService.t('yes'), this.i18nService.t('cancel'));
+        if (confirmed) {
+            this.messagingService.send('logout');
+        }
+    }
+}

src/app/tabs/settings.component.html

@@ -1,7 +1,7 @@
 <div class="row">
     <div class="col-sm">
         <div class="card">
-            <h5 class="card-header">{{'directory' | i18n}}</h5>
+            <h3 class="card-header">{{'directory' | i18n}}</h3>
             <div class="card-body">
                 <div class="form-group">
                     <label for="directory">{{'type' | i18n}}</label>
@@ -106,7 +106,7 @@
     </div>
     <div class="col-sm">
         <div class="card">
-            <h5 class="card-header">{{'sync' | i18n}}</h5>
+            <h3 class="card-header">{{'sync' | i18n}}</h3>
             <div class="card-body">
                 <div class="form-group">
                     <label for="interval">{{'interval' | i18n}}</label>

src/app/tabs/tabs.component.html

@@ -12,6 +12,12 @@
                 {{'settings' | i18n}}
             </a>
         </li>
+        <li class="nav-item">
+            <a class="nav-link" routerLink="more" routerLinkActive="active">
+                <i class="fa fa-sliders"></i>
+                {{'more' | i18n}}
+            </a>
+        </li>
     </ul>
     <router-outlet></router-outlet>
 </div>

src/locales/en/messages.json

@@ -283,8 +283,8 @@
         "message": "Bring All to Front",
         "description": "Bring all windows to front (foreground)"
     },
-    "aboutBitwarden": {
-        "message": "About Bitwarden Directory Connector"
+    "about": {
+        "message": "About"
     },
     "services": {
         "message": "Services"
@@ -428,5 +428,11 @@
     },
     "organization": {
         "message": "Organization"
+    },
+    "more": {
+        "message": "More"
+    },
+    "other": {
+        "message": "Other"
     }
 }