Send transcript credentials data to backend

Add Cielo Username

- EDUCATOR-1456

cms/static/js/views/course_video_settings.js

@@ -606,6 +606,7 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
 
         validateOrganizationCredentials: function() {
             var $OrganizationApiSecretWrapperEl,
+                $OrganizationUsernameWrapperEl,
                 isValid = true,
                 $OrganizationApiKeyWrapperEl = this.$el.find('.' + this.selectedProvider + '-api-key-wrapper');
 
@@ -630,6 +631,14 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
                 } else {
                     this.clearPreferenceErrorState($OrganizationApiSecretWrapperEl);
                 }
+            } else {
+                $OrganizationUsernameWrapperEl = this.$el.find('.' + this.selectedProvider + '-username-wrapper');
+                if ($OrganizationUsernameWrapperEl.find('input').val() === '') {
+                    isValid = false;
+                    this.addErrorState($OrganizationUsernameWrapperEl);
+                } else {
+                    this.clearPreferenceErrorState($OrganizationUsernameWrapperEl);
+                }
             }
 
             return isValid;
@@ -673,14 +682,25 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
         },
 
         saveOrganizationCredentials: function() {
-            var self = this;
+            var self = this,
+                username,
+                apiSecret,
+                apiKey = this.$el.find('.' + this.selectedProvider + '-api-key').val();
+
             // First clear response status if present already
             this.clearResponseStatus();
 
-            // TODO: Send actual organization credentials.
+            if (this.selectedProvider === THREE_PLAY_MEDIA) {
+                apiSecret = this.$el.find('.' + this.selectedProvider + '-api-secret').val();
+            } else {
+                username = this.$el.find('.' + this.selectedProvider + '-username').val();
+            }
 
             $.postJSON(self.transcriptCredentialsHandlerUrl, {
                 provider: self.selectedProvider,
+                api_key: apiKey,
+                api_secret_key: apiSecret,
+                username: username,
                 global: false   // Do not trigger global AJAX error handler
             }, function() {
                 self.$el.find('.organization-credentials-wrapper').hide();

cms/static/sass/views/_video-upload.scss

@@ -86,13 +86,10 @@
       .organization-credentials-content {
         margin-top: ($baseline*1.6);
         .org-credentials-wrapper input {
-          width: 75%;
-          margin: ($baseline*0.8) 0;
-        }
-        .action-update-org-credentials {
-          margin-top: ($baseline*1.6);
+          width: 65%;
+          margin-top: ($baseline*0.8);
+          display: inline-block;
         }
-
       }
 
       .transcript-preferance-wrapper {