[Enterprise] Added button to launch portal (#570)

* initial commit

* Added Enterprise button and used new business portal bool

* Reverting services module local changes

* Formatted some new lines

package-lock.json

@@ -3501,7 +3501,7 @@
       }
     },
     "duo_web_sdk": {
-      "version": "git+https://github.com/duosecurity/duo_web_sdk.git#410a9186cc34663c4913b17d6528067cd3331f1d",
+      "version": "git+https://github.com/duosecurity/duo_web_sdk.git#4c5df7a4001b8b03e2d7130d9096b697c4032e77",
       "from": "git+https://github.com/duosecurity/duo_web_sdk.git"
     },
     "duplexify": {

src/app/layouts/organization-layout.component.html

@@ -1,45 +1,56 @@
 <app-navbar></app-navbar>
 <div class="org-nav" *ngIf="organization">
-    <div class="container d-flex flex-column">
+    <div class="container d-flex">
-        <div class="my-auto d-flex align-items-center pl-1">
+        <div class="d-flex flex-column">
-            <app-avatar [data]="organization.name" size="45" [circle]="true"></app-avatar>
+            <div class="my-auto d-flex align-items-center pl-1">
-            <div class="org-name ml-3">
+                <app-avatar [data]="organization.name" size="45" [circle]="true"></app-avatar>
-                <span>{{organization.name}}</span>
+                <div class="org-name ml-3">
-                <small class="text-muted">{{'organization' | i18n}}</small>
+                    <span>{{organization.name}}</span>
-            </div>
+                    <small class="text-muted">{{'organization' | i18n}}</small>
-            <div class="ml-auto card border-danger text-danger bg-transparent" *ngIf="!organization.enabled">
+                </div>
-                <div class="card-body py-2">
+                <div class="ml-auto card border-danger text-danger bg-transparent" *ngIf="!organization.enabled">
-                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                    <div class="card-body py-2">
-                    {{'organizationIsDisabled' | i18n}}
+                        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                        {{'organizationIsDisabled' | i18n}}
+                    </div>
                 </div>
             </div>
+            <ul class="nav nav-tabs" *ngIf="organization.isManager">
+                <li class="nav-item">
+                    <a class="nav-link" routerLink="vault" routerLinkActive="active">
+                        <i class="fa fa-lock" aria-hidden="true"></i>
+                        {{'vault' | i18n}}
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" routerLink="manage" routerLinkActive="active">
+                        <i class="fa fa-sliders" aria-hidden="true"></i>
+                        {{'manage' | i18n}}
+                    </a>
+                </li>
+                <li class="nav-item" *ngIf="organization.isAdmin">
+                    <a class="nav-link" routerLink="tools" routerLinkActive="active">
+                        <i class="fa fa-wrench" aria-hidden="true"></i>
+                        {{'tools' | i18n}}
+                    </a>
+                </li>
+                <li class="nav-item" *ngIf="organization.isOwner">
+                    <a class="nav-link" routerLink="settings" routerLinkActive="active">
+                        <i class="fa fa-cogs" aria-hidden="true"></i>
+                        {{'settings' | i18n}}
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="ml-auto d-flex align-items-center">
+            <button class="btn btn-primary" (click)="goToEnterprisePortal()" #enterpriseBtn
+                [appApiAction]="enterpriseTokenPromise" *ngIf="organization.useBusinessPortal">
+                <i class="fa fa-bank fa-fw" [hidden]="enterpriseBtn.loading" aria-hidden="true"></i>
+                <i class="fa fa-spinner fa-spin fa-fw" [hidden]="!enterpriseBtn.loading" title="{{'loading' | i18n}}"
+                    aria-hidden="true"></i>
+                Enterprise →
+            </button>
         </div>
-        <ul class="nav nav-tabs" *ngIf="organization.isManager">
-            <li class="nav-item">
-                <a class="nav-link" routerLink="vault" routerLinkActive="active">
-                    <i class="fa fa-lock" aria-hidden="true"></i>
-                    {{'vault' | i18n}}
-                </a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" routerLink="manage" routerLinkActive="active">
-                    <i class="fa fa-sliders" aria-hidden="true"></i>
-                    {{'manage' | i18n}}
-                </a>
-            </li>
-            <li class="nav-item" *ngIf="organization.isAdmin">
-                <a class="nav-link" routerLink="tools" routerLinkActive="active">
-                    <i class="fa fa-wrench" aria-hidden="true"></i>
-                    {{'tools' | i18n}}
-                </a>
-            </li>
-            <li class="nav-item" *ngIf="organization.isOwner">
-                <a class="nav-link" routerLink="settings" routerLinkActive="active">
-                    <i class="fa fa-cogs" aria-hidden="true"></i>
-                    {{'settings' | i18n}}
-                </a>
-            </li>
-        </ul>
     </div>
 </div>
 <router-outlet></router-outlet>

src/app/layouts/organization-layout.component.ts

@@ -4,11 +4,14 @@ import {
     OnDestroy,
     OnInit,
 } from '@angular/core';
+
 import { ActivatedRoute } from '@angular/router';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
 
+import { ApiService } from 'jslib/abstractions/api.service';
 import { EnvironmentService } from 'jslib/abstractions/environment.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
 import { Organization } from 'jslib/models/domain/organization';
@@ -21,13 +24,14 @@ const BroadcasterSubscriptionId = 'OrganizationLayoutComponent';
 })
 export class OrganizationLayoutComponent implements OnInit, OnDestroy {
     organization: Organization;
-
+    enterpriseTokenPromise: Promise<any>;
     private organizationId: string;
     private enterpriseUrl: string;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
-        private broadcasterService: BroadcasterService, private environmentService: EnvironmentService,
+        private broadcasterService: BroadcasterService, private ngZone: NgZone,
-        private ngZone: NgZone) { }
+        private apiService: ApiService, private platformUtilsService: PlatformUtilsService,
+        private environmentService: EnvironmentService) { }
 
     ngOnInit() {
         this.enterpriseUrl = 'https://enterprise.bitwarden.com';
@@ -42,7 +46,6 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
             this.organizationId = params.organizationId;
             await this.load();
         });
-
         this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
             this.ngZone.run(async () => {
                 switch (message.command) {
@@ -61,4 +64,20 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
     async load() {
         this.organization = await this.userService.getOrganization(this.organizationId);
     }
+
+    async goToEnterprisePortal() {
+        if (this.enterpriseTokenPromise != null) {
+            return;
+        }
+        try {
+            this.enterpriseTokenPromise = this.apiService.getEnterprisePortalSignInToken();
+            const token = await this.enterpriseTokenPromise;
+            if (token != null) {
+                const userId = await this.userService.getUserId();
+                this.platformUtilsService.launchUri(this.enterpriseUrl + '/login?userId=' + userId +
+                    '&token=' + (window as any).encodeURIComponent(token) + '&organizationId=' + this.organization.id);
+            }
+        } catch { }
+        this.enterpriseTokenPromise = null;
+    }
 }