Use handlebars template

diff --git a/apps/files_external/js/statusmanager.js b/apps/files_external/js/statusmanager.js
index 504561ef1bf7eb97ab69daa466bfb8d71f3bd151..9a870d3e983f85ec292643a0675cfda440456136 100644 (file)
--- a/apps/files_external/js/statusmanager.js
+++ b/apps/files_external/js/statusmanager.js
@@ -368,32 +368,35 @@ OCA.External.StatusManager = {
                self.launchPartialConnectivityCheck(mountListData, recheck);
        },
 
+       credentialsDialogTemplate:
+               '<div id="files_external_div_form"><div>' +
+               '<div>{{credentials_text}}</div>' +
+               '<form>' +
+               '<input type="text" name="username" placeholder="{{placeholder_username}}"/>' +
+               '<input type="text" name="password" placeholder="{{placeholder_password}}"/>' +
+               '</form>' +
+               '</div></div>',
+
        /**
         * Function to display custom dialog to enter credentials
         * @param mountPoint
         * @param mountData
         */
        showCredentialsDialog: function (mountPoint, mountData) {
-               var $popup = $('<div id="files_external_div_form"/>').attr('title', t('files_external', 'Mount Credentials'));
-
-               var $inner = $('<div/>');
-               $popup.append($inner);
-
-               $inner.append($('<div/>').text(t('files_external', 'Please enter the credentials for the {mount} mount', {
-                       'mount': mountPoint
-               })));
+               var template = Handlebars.compile(OCA.External.StatusManager.credentialsDialogTemplate);
+               var dialog = $(template({
+                       credentials_text: t('files_external', 'Please enter the credentials for the {mount} mount', {
+                               'mount': mountPoint
+                       }),
+                       placeholder_username: t('files_external', 'Username'),
+                       placeholder_password: t('files_external', 'Password')
+               }));
 
-               var $form = $('<form/>');
-               $inner.append($form);
-               var $username = $('<input type="text" name="username"/>').attr('placeholder', t('files_external', 'Username'));
-               var $password = $('<input type="password" name="password"/>').attr('placeholder', t('files_external', 'Password'));
-               $form.append($username);
-               $form.append($password);
-               $form.on('submit', apply);
+               $('body').append(dialog);
 
                var apply = function () {
-                       var username = $username.val();
-                       var password = $password.val();
+                       var username = dialog.find('[name=username]').val();
+                       var password = dialog.find('[name=password]').val();
                        var endpoint = OC.generateUrl('apps/files_external/userglobalstorages/{id}', {
                                id: mountData.id
                        });
@@ -409,7 +412,7 @@ OCA.External.StatusManager = {
                                },
                                success: function (data) {
                                        OC.Notification.showTemporary(t('files_external', 'Credentials saved'));
-                                       $popup.ocdialog('close');
+                                       dialog.ocdialog('close');
                                        /* Trigger status check again */
                                        OCA.External.StatusManager.recheckConnectivityForMount([OC.basename(data.mountPoint)], true);
                                },
@@ -420,6 +423,8 @@ OCA.External.StatusManager = {
                        });
                };
 
+               dialog.find('form').on('submit', apply);
+
                var ocdialogParams = {
                        modal: true,
                        buttons: [{
@@ -430,11 +435,9 @@ OCA.External.StatusManager = {
                        closeOnExcape: true
                };
 
-               $('body').append($popup);
-
-               $popup.ocdialog(ocdialogParams)
+               dialog.ocdialog(ocdialogParams)
                        .bind('ocdialogclose', function () {
-                               $popup.ocdialog('destroy').remove();
+                               dialog.ocdialog('destroy').remove();
                        });
        }
 };