tabs

src/app/app-routing.module.ts

@@ -9,7 +9,9 @@ import { LaunchGuardService } from './services/launch-guard.service';
 
 import { LoginComponent } from './accounts/login.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
+import { DashboardComponent } from './tabs/dashboard.component';
+import { SettingsComponent } from './tabs/settings.component';
+import { TabsComponent } from './tabs/tabs.component';
 
 const routes: Routes = [
     { path: '', redirectTo: '/login', pathMatch: 'full' },
@@ -20,9 +22,25 @@ const routes: Routes = [
     },
     { path: '2fa', component: TwoFactorComponent },
     {
-        path: 'dashboard',
-        component: DashboardComponent,
-        canActivate: [AuthGuardService],
+        path: 'tabs',
+        component: TabsComponent,
+        children: [
+            {
+                path: '',
+                redirectTo: '/tabs/dashboard',
+                pathMatch: 'full',
+            },
+            {
+                path: 'dashboard',
+                component: DashboardComponent,
+                canActivate: [AuthGuardService],
+            },
+            {
+                path: 'settings',
+                component: SettingsComponent,
+                canActivate: [AuthGuardService],
+            },
+        ],
     },
 ];
 

src/app/app.module.ts

@@ -22,7 +22,9 @@ import { EnvironmentComponent } from './accounts/environment.component';
 import { LoginComponent } from './accounts/login.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
+import { DashboardComponent } from './tabs/dashboard.component';
+import { SettingsComponent } from './tabs/settings.component';
+import { TabsComponent } from './tabs/tabs.component';
 
 import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive';
 import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive';
@@ -63,8 +65,10 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         LoginComponent,
         ModalComponent,
         SearchCiphersPipe,
+        SettingsComponent,
         StopClickDirective,
         StopPropDirective,
+        TabsComponent,
         TwoFactorComponent,
         TwoFactorOptionsComponent,
     ],

src/app/services/launch-guard.service.ts

@@ -16,7 +16,7 @@ export class LaunchGuardService implements CanActivate {
             return true;
         }
 
-        this.router.navigate(['/dashboard']);
+        this.router.navigate(['/tabs/dashboard']);
         return false;
     }
 }

src/app/tabs/settings.component.html

@@ -0,0 +1,3 @@
+<i class="fa fa-rocket"></i>
+
+The settings!!!

src/app/tabs/settings.component.ts

@@ -0,0 +1,20 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: 'settings.component.html',
+})
+export class SettingsComponent {
+    constructor(analytics: Angulartics2, toasterService: ToasterService,
+        i18nService: I18nService,  private componentFactoryResolver: ComponentFactoryResolver) {}
+}

src/app/tabs/tabs.component.html

@@ -0,0 +1,13 @@
+<div class="tab-page">
+    <nav class="nav flex-column">
+        <a class="nav-link" routerLink="dashboard" routerLinkActive="active">
+            <i class="fa fa-rocket"></i>
+            {{'masterPass' | i18n}}
+        </a>
+        <a class="nav-link" routerLink="settings" routerLinkActive="active">
+            <i class="fa fa-cogs"></i>
+            {{'settings' | i18n}}
+        </a>
+    </nav>
+    <router-outlet></router-outlet>
+</div>

src/app/tabs/tabs.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-tabs',
+    templateUrl: 'tabs.component.html',
+})
+export class TabsComponent { }