diff --git a/templates/zephyr/settings.html b/templates/zephyr/settings.html index 42477249ec..6e70810175 100644 --- a/templates/zephyr/settings.html +++ b/templates/zephyr/settings.html @@ -135,7 +135,10 @@ - + + + + + +
NameUsernameAPI keyNameUsernameAvatar (optional)API key
@@ -144,14 +147,24 @@ maxlength=100 placeholder="Bot name" value="" />
+
-bot@{{ user_profile.realm.domain }}
-
+ +

+ +

+
+
+ +
+
diff --git a/zephyr/static/js/settings.js b/zephyr/static/js/settings.js index a7799e6ba3..21a5a9d4bb 100644 --- a/zephyr/static/js/settings.js +++ b/zephyr/static/js/settings.js @@ -2,9 +2,18 @@ var settings = (function () { var exports = {}; -function add_bot_row(name, email, api_key) { +function add_bot_row(name, email, avatar_url, api_key) { + var avatar_cell; + + if (avatar_url) { + avatar_cell = ''; + } else { + avatar_cell = '(default)'; + } + var row = $('').append($('').text(name), $('').text(email), + $('').html(avatar_cell), $('').text(api_key)); $('#create_bot_row').before(row); } @@ -23,7 +32,7 @@ $(function () { $('#bot_table_error').hide(); $.each(data.bots, function (idx, elem) { - add_bot_row(elem.full_name, elem.username, elem.api_key); + add_bot_row(elem.full_name, elem.username, elem.avatar_url, elem.api_key); }); }, error: function (xhr, error_type, xhn) { @@ -37,27 +46,73 @@ $(function () { }, "Please only use characters that are valid in an email address"); + function clear_bot_avatar_file_input() { + var control = $('#bot_avatar_file_input'); + var new_control = control.clone(true); + control.replaceWith(new_control); + } + + $('#bot_avatar_file_input').change(function(e) { + if (e.target.files.length === 0) { + $('#bot_avatar_file_input_error').hide(); + } else if (e.target.files.length === 1) { + var file = e.target.files[0]; + if (file.size > 5*1024*1024) { + $('#bot_avatar_file_input_error').text('File size must be < 5Mb.'); + $('#bot_avatar_file_input_error').show(); + clear_bot_avatar_file_input(); + } + else { + $('#bot_avatar_file_input_error').hide(); + } + } + else { + $('#bot_avatar_file_input_error').text('Please just upload one file.'); + } + }); + $('#create_bot_form').validate({ errorClass: 'text-error', success: function () { $('#bot_table_error').hide(); }, submitHandler: function () { - var name = $('#create_bot_name').val(); + var full_name = $('#create_bot_name').val(); var short_name = $('#create_bot_short_name').val(); + var formData = new FormData(); + formData.append('csrfmiddlewaretoken', csrf_token); + formData.append('full_name', full_name); + formData.append('short_name', short_name); + jQuery.each($('#bot_avatar_file_input')[0].files, function(i, file) { + formData.append('file-'+i, file); + }); + util.make_loading_indicator($('#create_bot_spinner'), 'Adding bot'); + $('#create_bot_button').hide(); $.ajax({ - type: 'POST', url: '/json/create_bot', - dataType: 'json', - data: {full_name: name, short_name: short_name}, + type: 'POST', + data: formData, + cache: false, + processData: false, + contentType: false, success: function (data) { + util.destroy_loading_indicator($("#create_bot_spinner")); $('#bot_table_error').hide(); $('#create_bot_name').val(''); $('#create_bot_short_name').val(''); + $('#create_bot_button').show(); + clear_bot_avatar_file_input(); - add_bot_row(name, short_name + "-bot@" + page_params.domain, data.api_key); + add_bot_row( + full_name, + short_name + "-bot@" + page_params.domain, + data.avatar_url, + data.api_key + ); }, error: function (xhr, error_type, exn) { + util.destroy_loading_indicator($("#create_bot_spinner")); + $('#create_bot_button').show(); $('#bot_table_error').text(JSON.parse(xhr.responseText).msg).show(); } });