Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Settings page changes 

Bug fixes

Small fix to integrations and api links

(imported from commit 5944b175fbe0fdc4fdb5ecb3cab4e333127ca353)
This commit is contained in:
Allen Rabinovich 2013-10-20 16:04:25 -07:00
parent 286803660f
commit 3a5276aa4e
6 changed files with 551 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/alert_words_ui.js
View File

@ -48,7 +48,7 @@ $(function () {
}); });
$('#word-alerts').on('click', '.remove-alert-word', function (event) { $('#word-alerts').on('click', '.remove-alert-word', function (event) {
var li = $(event.target).parent(); var li = $(event.currentTarget).parent();
li.remove(); li.remove();
update_word_alerts(); update_word_alerts();

12
static/js/settings.js
View File

@ -104,12 +104,12 @@ $(function () {
}); });
$("#bots_list").on("click", "button.delete_bot", function (e) { $("#bots_list").on("click", "button.delete_bot", function (e) {
var email = $(e.target).data('email'); var email = $(e.currentTarget).data('email');
$.ajax({ $.ajax({
url: '/json/users/' + encodeURIComponent(email), url: '/json/users/' + encodeURIComponent(email),
type: 'DELETE', type: 'DELETE',
success: function () { success: function () {
var row = $(e.target).closest("li"); var row = $(e.currentTarget).closest("li");
row.hide('slow', function () { row.remove(); }); row.hide('slow', function () { row.remove(); });
}, },
error: function (xhr) { error: function (xhr) {
@ -119,17 +119,17 @@ $(function () {
}); });
$("#bots_list").on("click", "button.regenerate_bot_api_key", function (e) { $("#bots_list").on("click", "button.regenerate_bot_api_key", function (e) {
var email = $(e.target).data('email'); var email = $(e.currentTarget).data('email');
$.ajax({ $.ajax({
url: '/json/bots/' + encodeURIComponent(email) + '/api_key/regenerate', url: '/json/bots/' + encodeURIComponent(email) + '/api_key/regenerate',
type: 'POST', type: 'POST',
success: function (data) { success: function (data) {
var row = $(e.target).closest("li"); var row = $(e.currentTarget).closest("li");
row.find(".api_key").find(".value").text(data.api_key); row.find(".api_key").find(".value").text(data.api_key);
row.find("api_key_error").hide(); row.find("api_key_error").hide();
}, },
error: function (xhr) { error: function (xhr) {
var row = $(e.target).closest("li"); var row = $(e.currentTarget).closest("li");
row.find(".api_key_error").text(JSON.parse(xhr.responseText).msg).show(); row.find(".api_key_error").text(JSON.parse(xhr.responseText).msg).show();
} }
}); });
@ -138,7 +138,7 @@ $(function () {
var image_version = 0; var image_version = 0;
$("#bots_list").on("click", "button.open_edit_bot_form", function (e) { $("#bots_list").on("click", "button.open_edit_bot_form", function (e) {
var li = $(e.target).closest('li'); var li = $(e.currentTarget).closest('li');
var edit_div = li.find('div.edit_bot'); var edit_div = li.find('div.edit_bot');
var form = li.find('.edit_bot_form'); var form = li.find('.edit_bot_form');
var image = li.find(".image"); var image = li.find(".image");

376
static/styles/zulip.css
View File

@ -2426,8 +2426,9 @@ li.expanded_subject {
/* FIXME: Combine this rule with the one in portico.css somehow? */ /* FIXME: Combine this rule with the one in portico.css somehow? */
#pw_strength { #pw_strength {
/* Same width as a Bootstrap default text <input> with padding */
width: 220px; width: 220px;
height: 25px;
margin-bottom: 0px;
} }
/* Override padding-top on form labels when they label only text */ /* Override padding-top on form labels when they label only text */
@ -2546,12 +2547,40 @@ li.expanded_subject {
#word-alerts { #word-alerts {
list-style-type: none; list-style-type: none;
width: 295px; width: 300px;
margin-left: 0px; margin: auto;
} }
.alert-word-item { .alert-word-item {
margin-bottom: 5px; padding: 8px;
}
#word-alerts li.alert-word-item:nth-child(odd) {
background: #fdfdfd;
}
#word-alerts li.alert-word-item:nth-child(even) {
background: #f9f9f9;
}
#word-alerts li.alert-word-item:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
#word-alerts li.alert-word-item:nth-last-child(2) {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
#word-alerts li.alert-word-item:last-child {
background: none;
margin-top: 8px;
}
#word-alert-settings {
margin-top: 15px;
margin-bottom: 30px;
} }
.remove-alert-word, .remove-alert-word,
@ -2586,17 +2615,40 @@ input.edit-alert-word::-webkit-input-placeholder {
} }
#bots_list .name { #bots_list .name {
font-weight: bold; font-weight: 300;
font-size: 130%; font-size: 18px;
margin-bottom: 20px;
} }
#bots_list .field:after { #bots_list .field:after {
content: ':'; content: ':';
} }
#bots_list .regenerate_bot_api_key {
padding: 2px;
width: 20px;
height: 20px;
background: #e3e3e3;
color: #666;
position: relative;
top: -2px;
}
#bots_list .regenerate_bot_api_key:hover {
color: #000;
}
#bots_list .edit-bot-buttons {
position: absolute;
right: 20px;
top: 20px;
}
.bot_info .field { .bot_info .field {
width: 7em; width: 4em;
display: inline-block; font-weight: 300;
position: absolute;
} }
.edit_bot_form { .edit_bot_form {
@ -2604,24 +2656,22 @@ input.edit-alert-word::-webkit-input-placeholder {
} }
.edit_bot_email { .edit_bot_email {
font-weight: bold; font-weight: 300;
font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
} }
div.edit_bot { div.edit_bot {
border: 1px black solid;
display: none; display: none;
padding: 10px;
} }
.edit_bot_form .control-label, .edit_bot_form .control-label,
#create_bot_form .control-label { #create_bot_form .control-label {
width: 10em; width: 10em;
text-align: left; text-align: right;
margin-right: 3px; margin-right: 20px;
}
#create_bot_button {
margin-left: 24em;
} }
.edit_bot_avatar_clear_button, .edit_bot_avatar_clear_button,
@ -2629,11 +2679,6 @@ div.edit_bot {
display: none; display: none;
} }
.edit_bot_name,
#create_bot_name {
width: 20em;
}
#create_bot_short_name { #create_bot_short_name {
width: 7em; width: 7em;
} }
@ -2648,9 +2693,16 @@ div.edit_bot {
} }
#bots_list .email .value, #bots_list .email .value,
#bots_list .api_key .value { #bots_list .api_key .api-key-value-and-button {
font-family: monospace; display: inline-block;
font-size: 85%; margin-left: 4em;
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
} }
#onboarding-header { #onboarding-header {
@ -2760,10 +2812,282 @@ div.edit_bot {
} }
#settings { #settings {
margin-top: 45px; margin-top: 55px;
margin-left: 15px; margin-left: 15px;
} }
#settings .settings-section {
background-color: #f1f1f1;
border: 1px solid #e3e3e3;
border-top: 6px solid #e3e3e3;
padding: 45px 0px 15px 0px;
margin-right: 5px;
position: relative;
}
#settings .settings-section .account-settings-form,
#settings .settings-section .new-bot-form,
#settings .settings-section .edit-bot-form-box {
width: 400px;
margin: auto;
}
#settings .settings-section .new-bot-form,
#settings .settings-section .edit-bot-form-box {
margin-top: 35px;
}
#settings .settings-section .new-bot-section-title {
top: 20px;
left: 20px;
}
#settings .settings-section .notification-settings-form {
width: 400px;
margin: auto;
}
#settings .settings-section .account-settings-form .control-label,
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
width: 120px;
}
#settings .settings-section .account-settings-form .controls,
#settings .settings-section .new-bot-form .controls,
#settings .settings-section .edit-bot-form-box .controls {
margin-left: 140px;
}
#settings .settings-section .notification-settings-form .controls {
display: inline-block;
vertical-align: middle;
margin: 0px;
margin-left: 110px;
padding-top: 0px;
padding-bottom: 0px;
line-height: 30px;
margin-right: 12px;
}
#settings .settings-section .notification-settings-form .controls input[type='checkbox'] {
margin: 0px;
padding: 0px;
vertical-align: middle;
position: relative;
top: -1px;
}
#settings .settings-section .notification-settings-form .control-label {
float: none;
display: inline-block;
vertical-align: middle;
margin: 0px;
padding: 0px;
line-height: 30px;
width: 200px;
}
#settings .settings-section .notification-settings-form .notification-submission {
margin-left: 140px;
}
#settings .notification-settings-form .notification-settings-note {
margin-left: 110px;
width: 250px;
font-size: 13px;
line-height: 14px;
margin-top: 15px;
margin-bottom: 20px;
}
#settings .bot-settings-note {
margin-left: 38px;
font-size: 13px;
}
#settings .bot-information-box,
#settings .add-new-bot-box {
background: #e3e3e3;
padding: 10px;
margin-left: 38px;
margin-right: 38px;
margin-bottom: 15px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
position: relative;
font-size: 14px;
}
#settings .add-new-bot-box {
background: #cbe3cb;
}
#settings #get_api_key_box,
#settings #show_api_key_box,
#settings #api_key_button_box .control-group {
text-align: center;
}
#settings #get_api_key_box .control-group {
margin: 0px;
width: 100%;
}
#settings #get_api_key_box .control-group .control-label {
float: none;
width: auto;
margin: 0px;
display: inline-block;
margin-right: 15px;
}
#settings #get_api_key_box .control-group input {
width: auto;
margin: 0px;
display: inline-block;
}
#settings #get_api_key_box .control-group .btn {
margin-top: 20px;
}
#settings .bot-information-box .email,
#settings .bot-information-box .api_key {
position: relative;
}
#settings .bot-information-box .image {
border-radius: 20px;
overflow: hidden;
border: 1px solid #676767;
}
#settings .settings-section .api-key-note {
padding: 0px 20px 20px 20px;
}
@media (max-width: 580px) {
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
float: left;
width: 120px;
padding-top: 0;
text-align: right;
}
#settings .settings-section .new-bot-form .controls {
margin-left: 110px;
}
}
@media (max-width: 480px) {
#pw_strength {
margin: auto;
}
#settings .settings-section .account-settings-form,
#settings .settings-section .new-bot-form,
#settings .settings-section .notification-settings-form,
#settings .settings-section .edit-bot-form-box {
width: 100%;
}
#settings .settings-section .account-settings-form .control-label,
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
display: block;
width: 120px;
padding: 0px;
padding-top: 0;
text-align: center;
margin: auto;
float: none;
}
#settings .settings-section .account-settings-form .controls,
#settings .settings-section .new-bot-form .controls,
#settings .settings-section .edit-bot-form-box .controls {
margin: auto;
text-align: center;
}
#settings .settings-section .account-settings-form .controls button,
#settings .settings-section .account-settings-form .controls input,
#settings .settings-section .new-bot-form .controls button,
#settings .settings-section .edit-bot-form-box .controls button,
#settings .settings-section .new-bot-form .controls input,
#settings .settings-section .edit-bot-form-box .controls input {
margin: auto;
}
#settings .settings-section .new-bot-form {
padding: 0px;
width: 100%;
text-align: center;
}
#settings .settings-section .notification-settings-form .controls,
#settings .notification-settings-form .notification-settings-note {
margin-left: 80px;
}
#settings .settings-section .notification-settings-form .notification-submission {
margin: 0px;
width: 100%;
text-align: center;
}
}
#settings .settings-section .settings-section-title {
font-size: 18px;
font-weight: 300;
position: absolute;
left: 12px;
top: 15px;
}
#settings .settings-section .settings-section-icon {
margin-right: 8px;
}
#settings h1 {
font-size: 25px;
font-weight: 300;
}
#settings .settings-icon {
margin-right: 10px;
font-size: 20px;
}
#settings #notification-settings {
margin-top: 15px;
}
#notification-docs {
color: #666666;
font-size: 11px;
position: relative;
top: -6px;
}
#notification-docs:hover {
color: #111111;
}
#settings-status {
text-align: center;
width: 50%;
margin: auto;
margin-bottom: 20px;
}
#home { #home {
margin-top: 41px; margin-top: 41px;
padding-right: 5px; padding-right: 5px;

2
static/templates/alert_word_settings_item.handlebars
View File

@ -3,6 +3,6 @@
{{#if editing}} {{#if editing}}
<input class="edit-alert-word input-medium" type="text" placeholder="Alert Word"></input><button class="btn btn-mini add-alert-word" type="button">Add</button> <input class="edit-alert-word input-medium" type="text" placeholder="Alert Word"></input><button class="btn btn-mini add-alert-word" type="button">Add</button>
{{else}} {{else}}
{{word}}<button class="btn btn-mini remove-alert-word" type="button">Remove</button> {{word}}<button class="btn btn-mini remove-alert-word" type="button"><i class="icon-vector-remove"></i></button>
{{/if}} {{/if}}
</li> </li>

54
static/templates/bot_avatar_row.handlebars
View File

@ -1,6 +1,6 @@
<li> <li class="bot-information-box">
<div class="image"> <div class="image">
<img src="{{avatar_url}}" class=avatar /> <img src="{{avatar_url}}" class="avatar" />
</div> </div>
<div class="bot_info"> <div class="bot_info">
<div class="name">{{name}}</div> <div class="name">{{name}}</div>
@ -10,49 +10,55 @@
</div> </div>
<div class="api_key"> <div class="api_key">
<span class="field">API Key</span> <span class="field">API Key</span>
<span class="value">{{api_key}}</span> <span class="api-key-value-and-button">
<button type="submit" class="btn btn-secondary regenerate_bot_api_key" data-email="{{email}}"> <span class="value">{{api_key}}
Generate new API Key </span>
<button type="submit" class="btn btn-secondary regenerate_bot_api_key" title="Generate new API key" data-email="{{email}}">
<i class="icon-vector-refresh"></i>
</button> </button>
</span>
<div class="api_key_error text-error"></div> <div class="api_key_error text-error"></div>
</div> </div>
<button type="submit" class="btn btn-primary open_edit_bot_form"> <div class="edit-bot-buttons">
Edit Bot <button type="submit" class="btn btn-primary open_edit_bot_form" title="Edit bot">
<i class="icon-vector-pencil"></i>
</button> </button>
<button type="submit" class="btn btn-secondary delete_bot" data-email="{{email}}"> <button type="submit" class="btn btn-danger delete_bot" title="Delete bot" data-email="{{email}}">
Delete Bot <i class="icon-vector-trash"></i>
</button> </button>
</div>
<div id="bot_delete_error" class="alert alert-error hide"></div> <div id="bot_delete_error" class="alert alert-error hide"></div>
</div> </div>
<div class='edit_bot'> <div class='edit_bot'>
<form class="edit_bot_form form-horizontal" data-email="{{email}}"> <form class="edit_bot_form form-horizontal" data-email="{{email}}">
<div class="bot_edit_errors alert alert-error hide"></div> <div class="bot_edit_errors alert alert-error hide"></div>
<div class="edit_bot_email">{{email}}</div> <div class="edit_bot_email">{{email}}</div>
<div class="edit-bot-form-box">
<div class="control-group">
<label for="edit_bot_name" class="control-label">Full name</label> <label for="edit_bot_name" class="control-label">Full name</label>
<input type="text" name="bot_name" class="edit_bot_name required" <div class="controls">
maxlength=50 /> <input type="text" name="bot_name" class="edit_bot_name required" maxlength=50 />
<div><label for="edit_bot_name" generated="true" class="text-error"></label></div> <div><label for="edit_bot_name" generated="true" class="text-error"></label></div>
</div>
</div>
<br clear="left" /> <div class="control-group">
<label for="bot_avatar_file_input" class="control-label">Avatar</label> <label for="bot_avatar_file_input" class="control-label">Avatar</label>
<input type="file" name="bot_avatar_file_input" class="notdisplayed edit_bot_avatar_file_input" value="Upload avatar" /> <input type="file" name="bot_avatar_file_input" class="notdisplayed edit_bot_avatar_file_input" value="Upload avatar" />
<div class="controls">
<div class="edit_bot_avatar_file"></div>
<button type="button" class="btn edit_bot_avatar_upload_button">Choose avatar</button> <button type="button" class="btn edit_bot_avatar_upload_button">Choose avatar</button>
<button type="button" class="btn edit_bot_avatar_clear_button">Clear avatar</button> <button type="button" class="btn edit_bot_avatar_clear_button">Clear avatar</button>
<span class="edit_bot_avatar_file"></span> </div>
<div><label for="edit_bot_avatar_file" generated="true" class="edit_bot_avatar_error text-error"></label></div> <div><label for="edit_bot_avatar_file" generated="true" class="edit_bot_avatar_error text-error"></label></div>
</div>
<div class="control-group">
<br clear="left" /> <div class="controls">
<input type="submit" class="btn btn-primary edit_bot_button" value="Save" /> <input type="submit" class="btn btn-primary edit_bot_button" value="Save" />
<button type="submit" class="btn btn-secondary reset_edit_bot">Cancel</button> <button type="submit" class="btn btn-secondary reset_edit_bot">Cancel</button>
</div>
<div class="edit_bot_spinner"></div> <div class="edit_bot_spinner"></div>
</div>
</div>
</form> </form>
</div> </div>
</li> </li>

107
templates/zerver/settings.html
View File

@ -1,15 +1,14 @@
{# Settings tab of the app. #} {# Settings tab of the app. #}
<h1>Settings</h1> <h1><i class="icon-vector-wrench settings-icon"></i>Settings</h1>
{# One text line worth of space #}
<div>&nbsp;</div>
<div class="alert" id="settings-status"></div> <div class="alert" id="settings-status"></div>
<div id="settings-change-box"> <div id="settings-change-box">
<form action="/json/settings/change" method="post" <form action="/json/settings/change" method="post"
class="form-horizontal">{% csrf_token %} class="form-horizontal">{% csrf_token %}
<div id="account-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-user settings-section-icon"></i>Your Account</div>
<div class="account-settings-form">
<div class="control-group" id="name_change_container"> <div class="control-group" id="name_change_container">
<label for="full_name" class="control-label">Full name</label> <label for="full_name" class="control-label">Full name</label>
<div class="controls"> <div class="controls">
@ -19,6 +18,7 @@
</div> </div>
<div class="control-group" id="pw_change_link"> <div class="control-group" id="pw_change_link">
<label for="change_password_button" class="control-label">Password</label>
<div class="controls"> <div class="controls">
<button class="btn change_password_button" data-dismiss="modal" aria-hidden="true">Change Password</button> <button class="btn change_password_button" data-dismiss="modal" aria-hidden="true">Change Password</button>
</div> </div>
@ -63,7 +63,7 @@
<div class="form-horizontal"> <div class="form-horizontal">
<div class="control-group"> <div class="control-group">
<label class="control-label">Your picture</label> <label class="control-label">Avatar</label>
<div class="controls"> <div class="controls">
<a href="https://en.gravatar.com/emails" target="_blank" class="change_gravatar_button"> <a href="https://en.gravatar.com/emails" target="_blank" class="change_gravatar_button">
<p><img class="img-rounded gravatar-profile user-image-settings" <p><img class="img-rounded gravatar-profile user-image-settings"
@ -80,104 +80,116 @@
value="Save changes" class="btn btn-big btn-primary" /> value="Save changes" class="btn btn-big btn-primary" />
</div> </div>
</div> </div>
</div>
</div>
<hr class="settings_separator">
<h3>Notification settings <i class="tiny icon-vector-question-sign" id="notification-docs"></i></h3>
<div id="notification-settings"> <div id="notification-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-warning-sign settings-section-icon"></i>Notifications <i class="tiny icon-vector-question-sign" id="notification-docs"></i></div>
<div class="notification-settings-form">
<div class="control-group"> <div class="control-group">
<label for="enable_desktop_notifications" class="control-label">
Desktop
notifications </label>
<div class="controls"> <div class="controls">
<input type="checkbox" name="enable_desktop_notifications" id="enable_desktop_notifications" <input type="checkbox" name="enable_desktop_notifications" id="enable_desktop_notifications"
{% if user_profile.enable_desktop_notifications %} {% if user_profile.enable_desktop_notifications %}
checked="yes" checked="yes"
{% endif %} /> {% endif %} />
</div> </div>
<label for="enable_desktop_notifications" class="control-label">
Desktop notifications
</label>
</div> </div>
<p>Change notification settings for individual streams on
your <a href="/#subscriptions">Streams page</a>.</p>
<div class="control-group"> <div class="control-group">
<label for="enable_sounds" class="control-label">
Audible notifications</label>
<div class="controls"> <div class="controls">
<input type="checkbox" name="enable_sounds" id="enable_sounds" <input type="checkbox" name="enable_sounds" id="enable_sounds"
{% if user_profile.enable_sounds %} {% if user_profile.enable_sounds %}
checked="yes" checked="yes"
{% endif %} /> {% endif %} />
</div> </div>
<label for="enable_sounds" class="control-label">
Audible notifications
</label>
</div> </div>
<div class="control-group"> <div class="control-group">
<label for="enable_offline_email_notifications" class="control-label">
Email notifications when offline</label>
<div class="controls"> <div class="controls">
<input type="checkbox" name="enable_offline_email_notifications" id="enable_offline_email_notifications" <input type="checkbox" name="enable_offline_email_notifications" id="enable_offline_email_notifications"
{% if user_profile.enable_offline_email_notifications %} {% if user_profile.enable_offline_email_notifications %}
checked="yes" checked="yes"
{% endif %} /> {% endif %} />
</div> </div>
<label for="enable_offline_email_notifications" class="control-label">
Email notifications when offline
</label>
</div> </div>
<p class="notification-settings-note">Change notification settings for individual streams on your <a href="/#subscriptions">Streams page</a>.</p>
<div class="control-group"> <div class="control-group">
<div class="controls"> <div class="controls notification-submission">
<input type="submit" name="change_settings" value="Save changes" class="btn btn-big btn-primary" /> <input type="submit" name="change_settings" value="Save changes" class="btn btn-big btn-primary" />
</div> </div>
</div> </div>
</div> </div>
</div>
</form> </form>
</div> </div>
<hr class="settings_separator" /> <div id="bot-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-github settings-section-icon"></i>Your Bots</div>
<h3>Your bots</h3> <div class="bot-settings-form">
<p class="bot-settings-note">Looking for our <a href="/integrations" target="_blank">Integrations</a>
<p>Looking for our <a href="/integrations">Integrations</a> or <a href="/api" target="_blank">API</a> documentation?</p>
or <a href="/api">API</a> documentation?</p>
<ol id="bots_list"> <ol id="bots_list">
</ol> </ol>
<form id="create_bot_form" class="form-horizontal">
<div id="bot_table_error" class="alert alert-error hide"></div> <div id="bot_table_error" class="alert alert-error hide"></div>
<h4>Add new bot</h4> <form id="create_bot_form" class="form-horizontal">
<p> <div class="add-new-bot-box">
<div class="settings-section-title new-bot-section-title">Add a New Bot</div>
<div class="new-bot-form">
<div class="control-group">
<label for="create_bot_name" class="control-label">Full name</label> <label for="create_bot_name" class="control-label">Full name</label>
<input type="text" name="bot_name" id="create_bot_name" class="required" <input type="text" name="bot_name" id="create_bot_name" class="required"
maxlength=100 placeholder="Full Bot Name" value="" /> maxlength=100 placeholder="Full Bot Name" value="" />
<div><label for="create_bot_name" generated="true" class="text-error"></label></div> <div><label for="create_bot_name" generated="true" class="text-error"></label></div>
</p> </div>
<p> <div class="control-group">
<label for="bot_short_name" class="control-label">Username</label> <label for="bot_short_name" class="control-label">Username</label>
<input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part" <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part"
placeholder="bot_user_name" value="" />-bot@{{ user_profile.realm.domain }} placeholder="bot_user_name" value="" />-bot@{{ user_profile.realm.domain }}
<div><label for="create_bot_short_name" generated="true" class="text-error"></label></div> <div><label for="create_bot_short_name" generated="true" class="text-error"></label></div>
</p> </div>
<p> <div class="control-group">
<label for="bot_avatar_file_input" class="control-label"></label> <!-- for spacing --> <div class="controls">
<div id="bot_avatar_file"></div>
<input type="file" name="bot_avatar_file_input" class="notdisplayed" id="bot_avatar_file_input" value="Upload avatar" /> <input type="file" name="bot_avatar_file_input" class="notdisplayed" id="bot_avatar_file_input" value="Upload avatar" />
<button class="btn" id="bot_avatar_clear_button">Clear avatar</button> <button class="btn" id="bot_avatar_clear_button">Clear avatar</button>
<button class="btn" id="bot_avatar_upload_button">Customize avatar</button> (Optional) <button class="btn" id="bot_avatar_upload_button">Customize avatar</button> (Optional)
</div>
<span id="bot_avatar_file"></span> </div>
</p> </p>
<p> <p>
<div id="bot_avatar_file_input_error" class="text-error"></div> <div id="bot_avatar_file_input_error" class="text-error"></div>
</p> </p>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary" id="create_bot_button" value="Create Bot" /> <input type="submit" class="btn btn-primary" id="create_bot_button" value="Create Bot" />
</div>
</div>
<div id="create_bot_spinner"></div> <div id="create_bot_spinner"></div>
</div>
</div>
</form> </form>
<hr class="settings_separator" /> <hr class="settings_separator" />
<div class="form-horizontal" id="api_key_button_box"> <div class="form-horizontal" id="api_key_button_box">
<p class="small">For most bots using the API, you'll want to give each bot <p class="api-key-note">For most bots using the API, you'll want to give each bot
its own name and API key using the above section. But if you its own name and API key using the above section. But if you
want to write a bot that can e.g. read your own private want to write a bot that can access your own private
messages, you should use your personal API key.</p> messages, you should use your personal API key.</p>
<div class="controls"> <div class="control-group">
<button class="btn" id="api_key_button">Show/change your API key</button> <button class="btn" id="api_key_button">Show/change your API key</button>
</div> </div>
</div> </div>
@ -187,17 +199,13 @@
<form action="/json/fetch_api_key" method="post" class="form-horizontal">{% csrf_token %} <form action="/json/fetch_api_key" method="post" class="form-horizontal">{% csrf_token %}
<div class="control-group"> <div class="control-group">
<label for="password" class="control-label">Current password</label> <label for="password" class="control-label">Current password</label>
<div class="controls">
<input type="password" autocomplete="off" <input type="password" autocomplete="off"
name="password" id="get_api_key_password" value="" /> name="password" id="get_api_key_password" value="" />
</div> </div>
</div>
<div class="control-group"> <div class="control-group">
<div class="controls">
<input type="submit" name="view_api_key" value="Get API key" <input type="submit" name="view_api_key" value="Get API key"
class="btn btn-primary" /> class="btn btn-primary" />
</div> </div>
</div>
</form> </form>
</div> </div>
<div id="show_api_key_box"> <div id="show_api_key_box">
@ -210,13 +218,12 @@
</div> </div>
</div> </div>
</div>
</div>
<hr class="settings_separator">
<div id='word-alert-area'>
<h3>Custom Word Alerts</h3>
<div id="word-alert-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-book settings-section-icon"></i>Custom Word Alerts</div>
<ul id="word-alerts"> <ul id="word-alerts">
</ul> </ul>
</div> </div>