[Provider] Add provider link in navbar (#1091)

bitwarden_license/src/app/providers/providers-routing.module.ts

@@ -18,11 +18,17 @@ import { SetupComponent } from './setup/setup.component';
 
 import { FrontendLayoutComponent } from 'src/app/layouts/frontend-layout.component';
 
+import { ProvidersComponent } from 'src/app/providers/providers.component';
 import { ProviderGuardService } from './services/provider-guard.service';
 import { ProviderTypeGuardService } from './services/provider-type-guard.service';
 import { AccountComponent } from './settings/account.component';
 
 const routes: Routes = [
+    {
+        path: '',
+        canActivate: [AuthGuardService],
+        component: ProvidersComponent,
+    },
     {
         path: '',
         component: FrontendLayoutComponent,

src/app/layouts/navbar.component.html

@@ -11,6 +11,14 @@
                 <li class="nav-item" routerLinkActive="active">
                     <a class="nav-link" routerLink="/sends">{{'send' | i18n}}</a>
                 </li>
+                <ng-container *ngIf="providers.length >= 1">
+                    <li class="nav-item" routerLinkActive="active" *ngIf="providers.length == 1">
+                        <a class="nav-link" [routerLink]="['/providers', providers[0].id]">{{'provider' | i18n}}</a>
+                    </li>
+                    <li class="nav-item" routerLinkActive="active" *ngIf="providers.length > 1">
+                        <a class="nav-link" routerLink="/providers">{{'provider' | i18n}}</a>
+                    </li>
+                </ng-container>
                 <li class="nav-item" routerLinkActive="active">
                     <a class="nav-link" routerLink="/tools">{{'tools' | i18n}}</a>
                 </li>

src/app/layouts/navbar.component.ts

@@ -5,7 +5,11 @@ import {
 
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { SyncService } from 'jslib-common/abstractions/sync.service';
 import { TokenService } from 'jslib-common/abstractions/token.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
+
+import { Provider } from 'jslib-common/models/domain/provider';
 
 @Component({
     selector: 'app-navbar',
@@ -15,9 +19,10 @@ export class NavbarComponent implements OnInit {
     selfHosted = false;
     name: string;
     email: string;
+    providers: Provider[] = [];
 
     constructor(private messagingService: MessagingService, private platformUtilsService: PlatformUtilsService,
-        private tokenService: TokenService) {
+        private tokenService: TokenService, private userService: UserService, private syncService: SyncService) {
         this.selfHosted = this.platformUtilsService.isSelfHost();
     }
 
@@ -27,6 +32,12 @@ export class NavbarComponent implements OnInit {
         if (this.name == null || this.name.trim() === '') {
             this.name = this.email;
         }
+
+        // Ensure provides are loaded
+        if (await this.syncService.getLastSync() == null) {
+            await this.syncService.fullSync(false);
+        }
+        this.providers = await this.userService.getAllProviders();
     }
 
     lock() {

src/app/providers/providers.component.html

@@ -1,20 +1,52 @@
-<ng-container>
+<ng-container *ngIf="vault">
     <p *ngIf="!loaded" class="text-muted">
         <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span class="sr-only">{{'loading' | i18n}}</span>
     </p>
     <ng-container *ngIf="loaded">
         <ul class="fa-ul card-ul carets" *ngIf="providers && providers.length">
-            <li *ngFor="let o of providers">
-                <a [routerLink]="['/providers', o.id]" class="text-body">
-                    <i class="fa-li fa fa-caret-right" aria-hidden="true"></i> {{o.name}}
-                    <ng-container *ngIf="!o.enabled">
-                        <i class="fa fa-exclamation-triangle text-danger" title="{{'organizationIsDisabled' | i18n}}"
+            <li *ngFor="let p of providers">
+                <a [routerLink]="['/providers', p.id]" class="text-body">
+                    <i class="fa-li fa fa-caret-right" aria-hidden="true"></i> {{p.name}}
+                    <ng-container *ngIf="!p.enabled">
+                        <i class="fa fa-exclamation-triangle text-danger" title="{{'providerIsDisabled' | i18n}}"
                             aria-hidden="true"></i>
-                        <span class="sr-only">{{'organizationIsDisabled' | i18n}}</span>
+                        <span class="sr-only">{{'providerIsDisabled' | i18n}}</span>
                     </ng-container>
                 </a>
             </li>
         </ul>
     </ng-container>
 </ng-container>
+<ng-container *ngIf="!vault">
+    <app-navbar></app-navbar>
+    <div class="container page-content">
+        <div class="page-header d-flex">
+            <h1>{{'providers' | i18n}}</h1>
+        </div>
+        <p *ngIf="!loaded" class="text-muted">
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
+        </p>
+        <ng-container *ngIf="loaded">
+            <table class="table table-hover table-list" *ngIf="providers && providers.length">
+                <tbody>
+                    <tr *ngFor="let p of providers">
+                        <td width="30">
+                            <app-avatar [data]="p.name" size="25" [circle]="true" [fontSize]="14"></app-avatar>
+                        </td>
+                        <td>
+                            <a href="#" [routerLink]="['/providers', p.id]">{{p.name}}</a>
+                            <ng-container *ngIf="!p.enabled">
+                                <i class="fa fa-exclamation-triangle text-danger"
+                                    title="{{'providerIsDisabled' | i18n}}" aria-hidden="true"></i>
+                                <span class="sr-only">{{'providerIsDisabled' | i18n}}</span>
+                            </ng-container>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </ng-container>
+    </div>
+    <app-footer></app-footer>
+</ng-container>

src/app/providers/providers.component.ts

@@ -1,10 +1,10 @@
 import {
     Component,
+    Input,
     OnInit,
 } from '@angular/core';
 
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { SyncService } from 'jslib-common/abstractions/sync.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
 import { Provider } from 'jslib-common/models/domain/provider';
@@ -16,14 +16,16 @@ import { Utils } from 'jslib-common/misc/utils';
     templateUrl: 'providers.component.html',
 })
 export class ProvidersComponent implements OnInit {
+    @Input() vault = false;
+
     providers: Provider[];
     loaded: boolean = false;
     actionPromise: Promise<any>;
 
-    constructor(private userService: UserService, private i18nService: I18nService, private syncService: SyncService) { }
+    constructor(private userService: UserService, private i18nService: I18nService) { }
 
     async ngOnInit() {
-        await this.syncService.fullSync(false);
+        document.body.classList.remove('layout_frontend');
         await this.load();
     }
 

src/app/vault/vault.component.html

@@ -94,7 +94,7 @@
                     </a>
                 </div>
                 <div class="card-body">
-                    <app-providers></app-providers>
+                    <app-providers vault="true"></app-providers>
                 </div>
             </div>
         </div>