[Key Connector] Fix Key Connector Url test (#1308)

bitwarden_license/src/app/organizations/manage/sso.component.html

@@ -57,20 +57,26 @@
             <div class="input-group">
                 <input class="form-control" formControlName="keyConnectorUrl" id="keyConnectorUrl" required>
                 <div class="input-group-append">
-                    <button type="button" class="btn btn-outline-secondary" (click)="testKeyConnector()"
+                    <button type="button" class="btn btn-outline-secondary" (click)="validateKeyConnectorUrl()"
                         [disabled]="!enableTestKeyConnector">
-                        {{'keyConnectorTest' | i18n}}
+                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"
+                            *ngIf="keyConnectorUrl.pending"></i>
+                        <span *ngIf="!keyConnectorUrl.pending">
+                            {{'keyConnectorTest' | i18n}}
+                        </span>
                     </button>
                 </div>
             </div>
-            <div class="text-danger" *ngIf="keyConnectorIsValid === false && keyConnectorUrl.pristine" role="alert">
-                <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
-                {{'keyConnectorTestFail' | i18n}}
-            </div>
-            <div class="text-success" *ngIf="keyConnectorIsValid && keyConnectorUrl.pristine" role="alert">
-                <i class="fa fa-check-circle-o" aria-hidden="true"></i>
-                {{'keyConnectorTestSuccess' | i18n}}
-            </div>
+            <ng-container *ngIf="keyConnectorUrl.pristine && !keyConnectorUrl.pending">
+                <div class="text-danger" *ngIf="keyConnectorUrl.hasError('invalidUrl')" role="alert">
+                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+                    {{'keyConnectorTestFail' | i18n}}
+                </div>
+                <div class="text-success" *ngIf="!keyConnectorUrl.hasError('invalidUrl')" role="alert">
+                    <i class="fa fa-check-circle-o" aria-hidden="true"></i>
+                    {{'keyConnectorTestSuccess' | i18n}}
+                </div>
+            </ng-container>
         </div>
     </ng-container>
 

bitwarden_license/src/app/organizations/manage/sso.component.ts

@@ -38,8 +38,6 @@ export class SsoComponent implements OnInit {
     spMetadataUrl: string;
     spAcsUrl: string;
 
-    keyConnectorIsValid: boolean;
-
     enabled = this.fb.control(false);
     data = this.fb.group({
         configType: [],
@@ -105,6 +103,8 @@ export class SsoComponent implements OnInit {
         this.spMetadataUrl = ssoSettings.urls.spMetadataUrl;
         this.spAcsUrl = ssoSettings.urls.spAcsUrl;
 
+        this.keyConnectorUrl.markAsDirty();
+
         this.loading = false;
     }
 
@@ -117,12 +117,28 @@ export class SsoComponent implements OnInit {
     }
 
     async submit() {
-        if (!this.keyConnectorIsValid || this.keyConnectorUrl.dirty)
-        {
-            await this.testKeyConnector();
-            if (!this.keyConnectorIsValid) {
-                this.platformUtilsService.showToast('error', null, this.i18nService.t('keyConnectorTestFail'));
-                return;
+        this.formPromise = this.postData();
+
+        try {
+            const response = await this.formPromise;
+
+            this.data.patchValue(response.data);
+            this.enabled.setValue(response.enabled);
+
+            this.platformUtilsService.showToast('success', null, this.i18nService.t('ssoSettingsSaved'));
+        } catch {
+            // Logged by appApiAction, do nothing
+        }
+
+        this.formPromise = null;
+    }
+
+    async postData() {
+        if (this.data.get('keyConnectorEnabled').value) {
+            await this.validateKeyConnectorUrl();
+
+            if (this.keyConnectorUrl.hasError('invalidUrl')) {
+                throw new Error(this.i18nService.t('keyConnectorTestFail'));
             }
         }
 
@@ -130,30 +146,26 @@ export class SsoComponent implements OnInit {
         request.enabled = this.enabled.value;
         request.data = this.data.value;
 
-        this.formPromise = this.apiService.postOrganizationSso(this.organizationId, request);
-
-        const response = await this.formPromise;
-        this.data.patchValue(response.data);
-        this.enabled.setValue(response.enabled);
-
-        this.formPromise = null;
-        this.platformUtilsService.showToast('success', null, this.i18nService.t('ssoSettingsSaved'));
+        return this.apiService.postOrganizationSso(this.organizationId, request);
     }
 
-    async testKeyConnector() {
-        if (this.keyConnectorIsValid && this.keyConnectorUrl.pristine) {
+    async validateKeyConnectorUrl() {
+        if (this.keyConnectorUrl.pristine) {
             return;
         }
 
-        this.keyConnectorUrl.markAsPristine();
+        this.keyConnectorUrl.markAsPending();
+
         try {
             await this.apiService.getKeyConnectorAlive(this.keyConnectorUrl.value);
+            this.keyConnectorUrl.updateValueAndValidity();
         } catch {
-            this.keyConnectorIsValid = false;
-            return;
+            this.keyConnectorUrl.setErrors({
+                invalidUrl: true,
+            });
         }
 
-        this.keyConnectorIsValid = true;
+        this.keyConnectorUrl.markAsPristine();
     }
 
     get enableTestKeyConnector() {