[Key Connector] Test that Key Connector URL can be reached before saving (#1291)

* Test that Key Connector URL can be reached before saving

* Update jslib

* Add styling to validation messages

* Use inline button, fix styling

* Add accessibility call out to form validation

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

@@ -54,7 +54,23 @@
     
         <div class="form-group">
             <label for="keyConnectorUrl">{{'keyConnectorUrl' | i18n}}</label>
-            <input class="form-control" formControlName="keyConnectorUrl" id="keyConnectorUrl" required>
+            <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()"
+                        [disabled]="!enableTestKeyConnector">
+                        {{'keyConnectorTest' | i18n}}
+                    </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>
         </div>
     </ng-container>
 

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

@@ -38,6 +38,8 @@ export class SsoComponent implements OnInit {
     spMetadataUrl: string;
     spAcsUrl: string;
 
+    keyConnectorIsValid: boolean;
+
     enabled = this.fb.control(false);
     data = this.fb.group({
         configType: [],
@@ -115,6 +117,15 @@ 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;
+            }
+        }
+
         const request = new OrganizationSsoRequest();
         request.enabled = this.enabled.value;
         request.data = this.data.value;
@@ -128,4 +139,30 @@ export class SsoComponent implements OnInit {
         this.formPromise = null;
         this.platformUtilsService.showToast('success', null, this.i18nService.t('ssoSettingsSaved'));
     }
+
+    async testKeyConnector() {
+        if (this.keyConnectorIsValid && this.keyConnectorUrl.pristine) {
+            return;
+        }
+
+        this.keyConnectorUrl.markAsPristine();
+        try {
+            await this.apiService.getKeyConnectorAlive(this.keyConnectorUrl.value);
+        } catch {
+            this.keyConnectorIsValid = false;
+            return;
+        }
+
+        this.keyConnectorIsValid = true;
+    }
+
+    get enableTestKeyConnector() {
+        return this.data.get('keyConnectorEnabled').value &&
+            this.keyConnectorUrl != null &&
+            this.keyConnectorUrl.value !== '';
+    }
+
+    get keyConnectorUrl() {
+        return this.data.get('keyConnectorUrl');
+    }
 }

src/locales/en/messages.json

@@ -4571,5 +4571,14 @@
   },
   "migratedKeyConnector": {
     "message": "Migrated to Key Connector"
+  },
+  "keyConnectorTest": {
+    "message": "Test"
+  },
+  "keyConnectorTestSuccess": {
+    "message": "Success! Key Connector reached."
+  },
+  "keyConnectorTestFail": {
+    "message": "Cannot reach Key Connector. Check URL."
   }
 }