download license component

src/app/app.module.ts

@@ -58,6 +58,7 @@ import { AccountComponent as OrgAccountComponent } from './organizations/setting
 import { AdjustSeatsComponent } from './organizations/settings/adjust-seats.component';
 import { ApiKeyComponent as OrgApiKeyComponent } from './organizations/settings/api-key.component';
 import { DeleteOrganizationComponent } from './organizations/settings/delete-organization.component';
+import { DownloadLicenseComponent } from './organizations/settings/download-license.component';
 import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
 import { OrganizationSubscriptionComponent } from './organizations/settings/organization-subscription.component';
 import { RotateApiKeyComponent as OrgRotateApiKeyComponent } from './organizations/settings/rotate-api-key.component';
@@ -257,6 +258,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         DeleteAccountComponent,
         DeleteOrganizationComponent,
         DomainRulesComponent,
+        DownloadLicenseComponent,
         ExportComponent,
         ExposedPasswordsReportComponent,
         FallbackSrcDirective,

src/app/organizations/settings/download-license.component.html

@@ -0,0 +1,25 @@
+<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <div class="card-body">
+        <h3 class="card-body-header">{{'downloadLicense' | i18n}}</h3>
+        <div class="row">
+            <div class="form-group col-6">
+                <div class="d-flex">
+                    <label for="installationId">{{'enterInstallationId' | i18n}}</label>
+                    <a class="ml-auto" target="_blank" rel="noopener" title="{{'learnMore' | i18n}}"
+                        href="https://help.bitwarden.com/article/licensing-on-premise/#organization-account-sharing">
+                        <i class="fa fa-question-circle-o"></i>
+                    </a>
+                </div>
+                <input id="installationId" class="form-control" type="text" name="InstallationId"
+                    [(ngModel)]="installationId" required>
+            </div>
+        </div>
+        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <span>{{'submit' | i18n}}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
+            {{'cancel' | i18n}}
+        </button>
+    </div>
+</form>

src/app/organizations/settings/download-license.component.ts

@@ -0,0 +1,43 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+@Component({
+    selector: 'app-download-license',
+    templateUrl: 'download-license.component.html',
+})
+export class DownloadLicenseComponent {
+    @Input() organizationId: string;
+    @Output() onDownloaded = new EventEmitter();
+    @Output() onCanceled = new EventEmitter();
+
+    installationId: string;
+    formPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private platformUtilsService: PlatformUtilsService) { }
+
+    async submit() {
+        if (this.installationId == null || this.installationId === '') {
+            return;
+        }
+
+        try {
+            this.formPromise = this.apiService.getOrganizationLicense(this.organizationId, this.installationId);
+            const license = await this.formPromise;
+            const licenseString = JSON.stringify(license, null, 2);
+            this.platformUtilsService.saveFile(window, licenseString, null, 'bitwarden_organization_license.json');
+            this.platformUtilsService.eventTrack('Downloaded License');
+            this.onDownloaded.emit();
+        } catch { }
+    }
+
+    cancel() {
+        this.onCanceled.emit();
+    }
+}

src/app/organizations/settings/organization-subscription.component.html

@@ -88,11 +88,9 @@
             <button type="button" class="btn btn-outline-secondary" (click)="changePlan()">
                 {{'changeBillingPlan' | i18n}}
             </button>
-            <button type="button" class="btn btn-outline-secondary btn-submit ml-1" #licenseBtn
-                [appApiAction]="licensePromise" [disabled]="licenseBtn.loading" (click)="downloadLicense()"
-                *ngIf="canDownloadLicense">
-                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
-                <span>{{'downloadLicense' | i18n}}</span>
+            <button type="button" class="btn btn-outline-secondary ml-1" (click)="downloadLicense()"
+                *ngIf="canDownloadLicense" [disabled]="showDownloadLicense">
+                {{'downloadLicense' | i18n}}
             </button>
             <button #cancelBtn type="button" class="btn btn-outline-danger btn-submit ml-auto" (click)="cancel()"
                 [appApiAction]="cancelPromise" [disabled]="cancelBtn.loading"
@@ -101,6 +99,10 @@
                 <span>{{'cancelSubscription' | i18n}}</span>
             </button>
         </div>
+        <div class="mt-3" *ngIf="showDownloadLicense">
+            <app-download-license [organizationId]="organizationId" (onDownloaded)="closeDownloadLicense()"
+                (onCanceled)="closeDownloadLicense()"></app-download-license>
+        </div>
         <h2 class="spaced-header">{{'userSeats' | i18n}}</h2>
         <p>{{'subscriptionUserSeats' | i18n : sub.seats}}</p>
         <ng-container *ngIf="subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel">

src/app/organizations/settings/organization-subscription.component.ts

@@ -30,12 +30,12 @@ export class OrganizationSubscriptionComponent implements OnInit {
     adjustStorageAdd = true;
     showAdjustStorage = false;
     showUpdateLicense = false;
+    showDownloadLicense = false;
     sub: OrganizationSubscriptionResponse;
     selfHosted = false;
 
     cancelPromise: Promise<any>;
     reinstatePromise: Promise<any>;
-    licensePromise: Promise<any>;
 
     constructor(private tokenService: TokenService, private apiService: ApiService,
         private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
@@ -109,22 +109,12 @@ export class OrganizationSubscriptionComponent implements OnInit {
         }
     }
 
-    async downloadLicense() {
-        if (this.loading) {
-            return;
-        }
+    downloadLicense() {
+        this.showDownloadLicense = !this.showDownloadLicense;
+    }
 
-        const installationId = window.prompt(this.i18nService.t('enterInstallationId'));
-        if (installationId == null || installationId === '') {
-            return;
-        }
-
-        try {
-            this.licensePromise = this.apiService.getOrganizationLicense(this.organizationId, installationId);
-            const license = await this.licensePromise;
-            const licenseString = JSON.stringify(license, null, 2);
-            this.platformUtilsService.saveFile(window, licenseString, null, 'bitwarden_organization_license.json');
-        } catch { }
+    closeDownloadLicense() {
+        this.showDownloadLicense = false;
     }
 
     updateLicense() {