Code refactoring

Flow first look
This commit is contained in:
RainLoop Team 2016-09-10 01:38:16 +03:00
parent 2f841524cb
commit e6e0b02849
71 changed files with 2092 additions and 1836 deletions

View file

@ -1,64 +1,64 @@
<div class="popups">
<div class="modal hide b-filter-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h3>
<span class="i18n" data-i18n="POPUPS_FILTER/TITLE_CREATE_FILTER" data-bind="visible: isNew"></span>
<span class="i18n" data-i18n="POPUPS_FILTER/TITLE_EDIT_FILTER" data-bind="visible: !isNew()"></span>
</h3>
</div>
<div class="modal-body">
<div class="row filter" data-bind="with: filter, i18nInit: filter">
<div class="span9" data-bind="i18nInit: true">
<div class="control-group" data-bind="css: {'error': name.error}">
<div class="controls">
<input type="text" class="i18n span5"
data-bind="value: name, hasFocus: name.focused"
autocorrect="off" autocapitalize="off" spellcheck="false"
data-i18n="[placeholder]POPUPS_FILTER/FILTER_NAME"
/>
</div>
</div>
<div class="legend i18n" data-i18n="POPUPS_FILTER/LEGEND_CONDITIONS"></div>
<div>
<div data-bind="visible: 1 < conditions().length">
<select class="span4" data-bind="value: conditionsType">
<option value="Any" class="i18n"
data-i18n="POPUPS_FILTER/SELECT_MATCH_ANY"></option>
<option value="All" class="i18n"
data-i18n="POPUPS_FILTER/SELECT_MATCH_ALL"></option>
</select>
</div>
<div data-bind="visible: 0 < conditions().length, foreach: conditions">
<div data-bind="template: {'name': template(), 'data': $data}"></div>
</div>
<div data-bind="visible: 0 === conditions().length">
<span class="i18n" data-i18n="POPUPS_FILTER/ALL_INCOMING_MESSAGES_DESC"></span>
</div>
<br />
<a class="btn" data-bind="click: addCondition, i18nInit: true">
<i class="icon-plus"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_FILTER/BUTTON_ADD_CONDITION"></span>
</a>
</div>
<br />
<div class="legend i18n" data-i18n="POPUPS_FILTER/LEGEND_ACTIONS"></div>
<select class="span3" data-bind="options: $root.actionTypeOptions, value: actionType, optionsText: 'name', optionsValue: 'id'"></select>
<div data-bind="template: {'name': actionTemplate()}, i18nUpdate: actionTemplate"></div>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn buttonSave" data-bind="command: saveFilter">
<i class="icon-ok"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_FILTER/BUTTON_DONE"></span>
</a>
</div>
</div>
</div>
</div>
<div class="popups">
<div class="modal hide b-filter-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h3>
<span class="i18n" data-i18n="POPUPS_FILTER/TITLE_CREATE_FILTER" data-bind="visible: isNew"></span>
<span class="i18n" data-i18n="POPUPS_FILTER/TITLE_EDIT_FILTER" data-bind="visible: !isNew()"></span>
</h3>
</div>
<div class="modal-body">
<div class="row filter" data-bind="with: filter, i18nInit: filter">
<div class="span9" data-bind="i18nInit: true">
<div class="control-group" data-bind="css: {'error': name.error}">
<div class="controls">
<input type="text" class="i18n span5"
data-bind="value: name, hasFocus: name.focused"
autocorrect="off" autocapitalize="off" spellcheck="false"
data-i18n="[placeholder]POPUPS_FILTER/FILTER_NAME"
/>
</div>
</div>
<div class="legend i18n" data-i18n="POPUPS_FILTER/LEGEND_CONDITIONS"></div>
<div>
<div data-bind="visible: 1 < conditions().length">
<select class="span4" data-bind="value: conditionsType">
<option value="Any" class="i18n"
data-i18n="POPUPS_FILTER/SELECT_MATCH_ANY"></option>
<option value="All" class="i18n"
data-i18n="POPUPS_FILTER/SELECT_MATCH_ALL"></option>
</select>
</div>
<div data-bind="visible: 0 < conditions().length, foreach: conditions">
<div data-bind="template: {'name': template(), 'data': $data}"></div>
</div>
<div data-bind="visible: 0 === conditions().length">
<span class="i18n" data-i18n="POPUPS_FILTER/ALL_INCOMING_MESSAGES_DESC"></span>
</div>
<br />
<a class="btn" data-bind="click: addCondition, i18nInit: true">
<i class="icon-plus"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_FILTER/BUTTON_ADD_CONDITION"></span>
</a>
</div>
<br />
<div class="legend i18n" data-i18n="POPUPS_FILTER/LEGEND_ACTIONS"></div>
<select class="span3" data-bind="options: $root.actionTypeOptions, value: actionType, optionsText: 'name', optionsValue: 'id'"></select>
<div data-bind="template: {'name': actionTemplate()}, i18nUpdate: actionTemplate"></div>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn buttonSave" data-bind="command: saveFilterCommand">
<i class="icon-ok"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_FILTER/BUTTON_DONE"></span>
</a>
</div>
</div>
</div>
</div>

View file

@ -1,42 +1,42 @@
<div class="popups">
<div class="modal hide b-folder-create-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h3>
<span class="i18n" data-i18n="POPUPS_CREATE_FOLDER/TITLE_CREATE_FOLDER"></span>
</h3>
</div>
<div class="modal-body">
<div class="form-horizontal">
<br />
<div class="control-group">
<label class="control-label">
<span class="i18n" data-i18n="POPUPS_CREATE_FOLDER/LABEL_NAME"></span>
</label>
<div class="controls">
<input type="text" class="uiInput inputName" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: folderName, hasfocus: folderName.focused, onEnter: createFolder" />
</div>
</div>
<div class="control-group">
<label class="control-label">
<span class="i18n" data-i18n="POPUPS_CREATE_FOLDER/LABEL_PARENT"></span>
</label>
<div class="controls">
<select data-bind="options: parentFolderSelectList, value: selectedParentValue,
optionsText: 'name', optionsValue: 'id', optionsAfterRender: defautOptionsAfterRender"></select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn buttonCreate" data-bind="command: createFolder">
<i class="icon-folder-add"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_CREATE_FOLDER/BUTTON_CREATE"></span>
</a>
</div>
</div>
</div>
</div>
<div class="popups">
<div class="modal hide b-folder-create-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h3>
<span class="i18n" data-i18n="POPUPS_CREATE_FOLDER/TITLE_CREATE_FOLDER"></span>
</h3>
</div>
<div class="modal-body">
<div class="form-horizontal">
<br />
<div class="control-group">
<label class="control-label">
<span class="i18n" data-i18n="POPUPS_CREATE_FOLDER/LABEL_NAME"></span>
</label>
<div class="controls">
<input type="text" class="uiInput inputName" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: folderName, hasfocus: folderName.focused, onEnter: createFolderCommand" />
</div>
</div>
<div class="control-group">
<label class="control-label">
<span class="i18n" data-i18n="POPUPS_CREATE_FOLDER/LABEL_PARENT"></span>
</label>
<div class="controls">
<select data-bind="options: parentFolderSelectList, value: selectedParentValue,
optionsText: 'name', optionsValue: 'id', optionsAfterRender: defautOptionsAfterRender"></select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn buttonCreate" data-bind="command: createFolderCommand">
<i class="icon-folder-add"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_CREATE_FOLDER/BUTTON_CREATE"></span>
</a>
</div>
</div>
</div>
</div>

View file

@ -1,34 +1,34 @@
<div class="popups">
<div class="modal hide b-two-factor-test-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h3>
<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_TEST/TITLE_TEST_CODE"></span>
</h3>
</div>
<div class="modal-body">
<div class="form-horizontal">
<br />
<div class="control-group">
<label class="control-label">
<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_TEST/LABEL_CODE"></span>
</label>
<div class="controls">
<input type="text" class="uiInput inputName"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: code, hasfocus: code.focused, onEnter: testCode" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn" data-bind="command: testCode, css: { 'btn-success': true === code.status(), 'btn-danger': false === code.status() }">
<i data-bind="css: {'icon-ok': !testing(), 'icon-spinner animated': testing(), 'icon-white': true === code.status() || false === code.status() }"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_TEST/BUTTON_TEST"></span>
</a>
</div>
</div>
</div>
</div>
<div class="popups">
<div class="modal hide b-two-factor-test-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h3>
<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_TEST/TITLE_TEST_CODE"></span>
</h3>
</div>
<div class="modal-body">
<div class="form-horizontal">
<br />
<div class="control-group">
<label class="control-label">
<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_TEST/LABEL_CODE"></span>
</label>
<div class="controls">
<input type="text" class="uiInput inputName"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: code, hasfocus: code.focused, onEnter: testCodeCommand" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn" data-bind="command: testCodeCommand, css: { 'btn-success': true === code.status(), 'btn-danger': false === code.status() }">
<i data-bind="css: {'icon-ok': !testing(), 'icon-spinner animated': testing(), 'icon-white': true === code.status() || false === code.status() }"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_TEST/BUTTON_TEST"></span>
</a>
</div>
</div>
</div>
</div>

View file

@ -1,106 +1,106 @@
<div class="b-settings-filters g-ui-user-select-none">
<div class="form-horizontal">
<div class="legend">
<span class="i18n" data-i18n="SETTINGS_FILTERS/LEGEND_FILTERS"></span>
&nbsp;&nbsp;&nbsp;
<i class="icon-spinner animated" style="margin-top: 5px" data-bind="visible: filters.loading"></i>
</div>
</div>
<div class="row" data-bind="visible: inited() && !serverError()">
<div class="span5 width100-on-mobile">
<a class="btn" data-bind="click: addFilter">
<i class="icon-plus"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_ADD_FILTER"></span>
</a>
&nbsp;&nbsp;
<a class="btn" data-tooltip-join="top" data-bind="visible: filterRaw.allow, click: function () { filterRaw.active(!filterRaw.active()) },
css: {'active': filterRaw.active }, tooltip: 'SETTINGS_FILTERS/BUTTON_RAW_SCRIPT'">
<i class="icon-file-code"></i>
</a>
&nbsp;&nbsp;
<a class="btn hide-on-disabled-command" data-placement="bottom" data-join="top"
data-bind="command: saveChanges, tooltipErrorTip: saveErrorText, css: {'btn-danger': '' !== saveErrorText()}">
<i data-bind="css: {'icon-floppy': !filters.saving(), 'icon-spinner animated': filters.saving()}"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_SAVE"></span>
</a>
</div>
</div>
<div class="row" data-bind="visible: haveChanges">
<div class="span8 width100-on-mobile">
<br />
<div class="alert g-ui-user-select-none" style="margin-bottom: 0">
<i class="icon-warning"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/CHACHES_NEED_TO_BE_SAVED_DESC"></span>
</div>
</div>
</div>
<div class="row" data-bind="visible: serverError">
<div class="span8 width100-on-mobile">
<div class="alert alert-error g-ui-user-select-none" style="margin-bottom: 0">
<i class="icon-warning"></i>
&nbsp;&nbsp;
<span data-bind="text: serverErrorDesc"></span>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="span8 width100-on-mobile">
<div class="control-group" data-bind="css: {'error': filterRaw.error}, visible: inited() && filterRaw.allow() && filterRaw.active()">
<div class="controls">
<pre style="word-break: break-word;" data-bind="visible: '' !== filterRaw.capa()">
<b class="i18n" data-i18n="SETTINGS_FILTERS/CAPABILITY_LABEL"></b>:
<span data-bind="text: filterRaw.capa"></span>
</pre>
<textarea class="span8" style="height: 300px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"
data-bind="value: filterRaw, valueUpdate: 'afterkeydown'"></textarea>
</div>
</div>
<div class="filters-list-wrp">
<div class="filters-list-top-padding"></div>
<table class="table table-hover list-table filters-list g-ui-user-select-none"
data-bind="visible: inited() && (!filterRaw.active() || !filterRaw.active()), i18nUpdate: filters">
<colgroup>
<col style="width: 30px" />
<col style="width: 16px" />
<col />
<col style="width: 140px" />
<col style="width: 1%" />
</colgroup>
<tbody data-bind="sortable: {data: filters, options: scrollableOptions('.filters-list-wrp')}" style="width: 600px">
<tr class="filter-item">
<td>
<span class="disabled-filter" data-bind="click: function () { $root.haveChanges(true); enabled(!enabled()); }">
<i data-bind="css: {'icon-checkbox-checked': enabled, 'icon-checkbox-unchecked': !enabled()}"></i>
</span>
</td>
<td class="drag-wrapper">
<i class="icon-braille drag-handle"></i>
</td>
<td class="e-action">
<span class="filter-name" data-bind="text: name()"></span>
&nbsp;&nbsp;
<span class="filter-sub-name" data-bind="text: nameSub()"></span>
</td>
<td>
<a class="btn btn-small btn-small-small btn-danger pull-right button-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oFilter) { $root.deleteFilter(oFilter); }">
<span class="i18n" data-i18n="SETTINGS_FILTERS/DELETING_ASK"></span>
</a>
</td>
<td>
<span class="delete-filter" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oFilter) { $root.filterForDeletion(oFilter); }">
<i class="icon-trash"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="b-settings-filters g-ui-user-select-none">
<div class="form-horizontal">
<div class="legend">
<span class="i18n" data-i18n="SETTINGS_FILTERS/LEGEND_FILTERS"></span>
&nbsp;&nbsp;&nbsp;
<i class="icon-spinner animated" style="margin-top: 5px" data-bind="visible: filters.loading"></i>
</div>
</div>
<div class="row" data-bind="visible: inited() && !serverError()">
<div class="span5 width100-on-mobile">
<a class="btn" data-bind="click: addFilter">
<i class="icon-plus"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_ADD_FILTER"></span>
</a>
&nbsp;&nbsp;
<a class="btn" data-tooltip-join="top" data-bind="visible: filterRaw.allow, click: function () { filterRaw.active(!filterRaw.active()) },
css: {'active': filterRaw.active }, tooltip: 'SETTINGS_FILTERS/BUTTON_RAW_SCRIPT'">
<i class="icon-file-code"></i>
</a>
&nbsp;&nbsp;
<a class="btn hide-on-disabled-command" data-placement="bottom" data-join="top"
data-bind="command: saveChangesCommand, tooltipErrorTip: saveErrorText, css: {'btn-danger': '' !== saveErrorText()}">
<i data-bind="css: {'icon-floppy': !filters.saving(), 'icon-spinner animated': filters.saving()}"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_SAVE"></span>
</a>
</div>
</div>
<div class="row" data-bind="visible: haveChanges">
<div class="span8 width100-on-mobile">
<br />
<div class="alert g-ui-user-select-none" style="margin-bottom: 0">
<i class="icon-warning"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/CHACHES_NEED_TO_BE_SAVED_DESC"></span>
</div>
</div>
</div>
<div class="row" data-bind="visible: serverError">
<div class="span8 width100-on-mobile">
<div class="alert alert-error g-ui-user-select-none" style="margin-bottom: 0">
<i class="icon-warning"></i>
&nbsp;&nbsp;
<span data-bind="text: serverErrorDesc"></span>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="span8 width100-on-mobile">
<div class="control-group" data-bind="css: {'error': filterRaw.error}, visible: inited() && filterRaw.allow() && filterRaw.active()">
<div class="controls">
<pre style="word-break: break-word;" data-bind="visible: '' !== filterRaw.capa()">
<b class="i18n" data-i18n="SETTINGS_FILTERS/CAPABILITY_LABEL"></b>:
<span data-bind="text: filterRaw.capa"></span>
</pre>
<textarea class="span8" style="height: 300px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"
data-bind="value: filterRaw, valueUpdate: 'afterkeydown'"></textarea>
</div>
</div>
<div class="filters-list-wrp">
<div class="filters-list-top-padding"></div>
<table class="table table-hover list-table filters-list g-ui-user-select-none"
data-bind="visible: inited() && (!filterRaw.active() || !filterRaw.active()), i18nUpdate: filters">
<colgroup>
<col style="width: 30px" />
<col style="width: 16px" />
<col />
<col style="width: 140px" />
<col style="width: 1%" />
</colgroup>
<tbody data-bind="sortable: {data: filters, options: scrollableOptions('.filters-list-wrp')}" style="width: 600px">
<tr class="filter-item">
<td>
<span class="disabled-filter" data-bind="click: function () { $root.haveChanges(true); enabled(!enabled()); }">
<i data-bind="css: {'icon-checkbox-checked': enabled, 'icon-checkbox-unchecked': !enabled()}"></i>
</span>
</td>
<td class="drag-wrapper">
<i class="icon-braille drag-handle"></i>
</td>
<td class="e-action">
<span class="filter-name" data-bind="text: name()"></span>
&nbsp;&nbsp;
<span class="filter-sub-name" data-bind="text: nameSub()"></span>
</td>
<td>
<a class="btn btn-small btn-small-small btn-danger pull-right button-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oFilter) { $root.deleteFilter(oFilter); }">
<span class="i18n" data-i18n="SETTINGS_FILTERS/DELETING_ASK"></span>
</a>
</td>
<td>
<span class="delete-filter" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oFilter) { $root.filterForDeletion(oFilter); }">
<i class="icon-trash"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

View file

@ -1,101 +1,101 @@
<div class="b-settings-social g-ui-user-select-none">
<div class="form-horizontal" data-bind="visible: googleEnable() && googleEnableAuth()">
<div class="legend">
<span class="i18n" data-i18n="SETTINGS_SOCIAL/LEGEND_GOOGLE"></span>
</div>
<div class="control-group" data-bind="visible: !googleLoggined()">
<button class="btn" data-bind="command: connectGoogle">
<i class="icon-google" data-bind="visible: !googleActions()"></i>
<i class="icon-spinner animated" data-bind="visible: googleActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_GOOGLE_CONNECT"></span>
</button>
<br />
<br />
<blockquote>
<p class="i18n muted" style="width: 500px" data-i18n="SETTINGS_SOCIAL/MAIN_GOOGLE_DESC"></p>
</blockquote>
</div>
<div class="control-group" data-bind="visible: googleLoggined">
<strong>
<i class="icon-google"></i>
&nbsp;&nbsp;
<span data-bind="text: googleUserName"></span>
</strong>
<br />
<br />
<button class="btn" data-bind="command: disconnectGoogle">
<i class="icon-remove" data-bind="visible: !googleActions()"></i>
<i class="icon-spinner animated" data-bind="visible: googleActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_GOOGLE_DISCONNECT"></span>
</button>
</div>
</div>
<div class="form-horizontal" data-bind="visible: facebookEnable">
<div class="legend">
<span class="i18n" data-i18n="SETTINGS_SOCIAL/LEGEND_FACEBOOK"></span>
</div>
<div class="control-group" data-bind="visible: !facebookLoggined()">
<button class="btn" data-bind="command: connectFacebook">
<i class="icon-facebook" data-bind="visible: !facebookActions()"></i>
<i class="icon-spinner animated" data-bind="visible: facebookActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_FACEBOOK_CONNECT"></span>
</button>
<br />
<br />
<blockquote>
<p class="i18n muted" style="width: 500px" data-i18n="SETTINGS_SOCIAL/MAIN_FACEBOOK_DESC"></p>
</blockquote>
</div>
<div class="control-group" data-bind="visible: facebookLoggined">
<strong>
<i class="icon-facebook"></i>
&nbsp;&nbsp;
<span data-bind="text: facebookUserName"></span>
</strong>
<br />
<br />
<button class="btn" data-bind="command: disconnectFacebook">
<i class="icon-remove" data-bind="visible: !facebookActions()"></i>
<i class="icon-spinner animated" data-bind="visible: facebookActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_FACEBOOK_DISCONNECT"></span>
</button>
</div>
</div>
<div class="form-horizontal" data-bind="visible: twitterEnable">
<div class="legend">
<span class="i18n" data-i18n="SETTINGS_SOCIAL/LEGEND_TWITTER"></span>
</div>
<div class="control-group" data-bind="visible: !twitterLoggined()">
<button class="btn" data-bind="command: connectTwitter">
<i class="icon-twitter" data-bind="visible: !twitterActions()"></i>
<i class="icon-spinner animated" data-bind="visible: twitterActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_TWITTER_CONNECT"></span>
</button>
<br />
<br />
<blockquote>
<p class="i18n muted" style="width: 500px" data-i18n="SETTINGS_SOCIAL/MAIN_TWITTER_DESC"></p>
</blockquote>
</div>
<div class="control-group" data-bind="visible: twitterLoggined">
<strong>
<i class="icon-twitter"></i>
&nbsp;&nbsp;
<span data-bind="text: twitterUserName"></span>
</strong>
<br />
<br />
<button class="btn" data-bind="command: disconnectTwitter">
<i class="icon-remove" data-bind="visible: !twitterActions()"></i>
<i class="icon-spinner animated" data-bind="visible: twitterActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_TWITTER_DISCONNECT"></span>
</button>
</div>
</div>
<div class="b-settings-social g-ui-user-select-none">
<div class="form-horizontal" data-bind="visible: googleEnable() && googleEnableAuth()">
<div class="legend">
<span class="i18n" data-i18n="SETTINGS_SOCIAL/LEGEND_GOOGLE"></span>
</div>
<div class="control-group" data-bind="visible: !googleLoggined()">
<button class="btn" data-bind="command: connectGoogleCommand">
<i class="icon-google" data-bind="visible: !googleActions()"></i>
<i class="icon-spinner animated" data-bind="visible: googleActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_GOOGLE_CONNECT"></span>
</button>
<br />
<br />
<blockquote>
<p class="i18n muted" style="width: 500px" data-i18n="SETTINGS_SOCIAL/MAIN_GOOGLE_DESC"></p>
</blockquote>
</div>
<div class="control-group" data-bind="visible: googleLoggined">
<strong>
<i class="icon-google"></i>
&nbsp;&nbsp;
<span data-bind="text: googleUserName"></span>
</strong>
<br />
<br />
<button class="btn" data-bind="command: disconnectGoogleCommand">
<i class="icon-remove" data-bind="visible: !googleActions()"></i>
<i class="icon-spinner animated" data-bind="visible: googleActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_GOOGLE_DISCONNECT"></span>
</button>
</div>
</div>
<div class="form-horizontal" data-bind="visible: facebookEnable">
<div class="legend">
<span class="i18n" data-i18n="SETTINGS_SOCIAL/LEGEND_FACEBOOK"></span>
</div>
<div class="control-group" data-bind="visible: !facebookLoggined()">
<button class="btn" data-bind="command: connectFacebookCommand">
<i class="icon-facebook" data-bind="visible: !facebookActions()"></i>
<i class="icon-spinner animated" data-bind="visible: facebookActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_FACEBOOK_CONNECT"></span>
</button>
<br />
<br />
<blockquote>
<p class="i18n muted" style="width: 500px" data-i18n="SETTINGS_SOCIAL/MAIN_FACEBOOK_DESC"></p>
</blockquote>
</div>
<div class="control-group" data-bind="visible: facebookLoggined">
<strong>
<i class="icon-facebook"></i>
&nbsp;&nbsp;
<span data-bind="text: facebookUserName"></span>
</strong>
<br />
<br />
<button class="btn" data-bind="command: disconnectFacebookCommand">
<i class="icon-remove" data-bind="visible: !facebookActions()"></i>
<i class="icon-spinner animated" data-bind="visible: facebookActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_FACEBOOK_DISCONNECT"></span>
</button>
</div>
</div>
<div class="form-horizontal" data-bind="visible: twitterEnable">
<div class="legend">
<span class="i18n" data-i18n="SETTINGS_SOCIAL/LEGEND_TWITTER"></span>
</div>
<div class="control-group" data-bind="visible: !twitterLoggined()">
<button class="btn" data-bind="command: connectTwitterCommand">
<i class="icon-twitter" data-bind="visible: !twitterActions()"></i>
<i class="icon-spinner animated" data-bind="visible: twitterActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_TWITTER_CONNECT"></span>
</button>
<br />
<br />
<blockquote>
<p class="i18n muted" style="width: 500px" data-i18n="SETTINGS_SOCIAL/MAIN_TWITTER_DESC"></p>
</blockquote>
</div>
<div class="control-group" data-bind="visible: twitterLoggined">
<strong>
<i class="icon-twitter"></i>
&nbsp;&nbsp;
<span data-bind="text: twitterUserName"></span>
</strong>
<br />
<br />
<button class="btn" data-bind="command: disconnectTwitterCommand">
<i class="icon-remove" data-bind="visible: !twitterActions()"></i>
<i class="icon-spinner animated" data-bind="visible: twitterActions()"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_SOCIAL/BUTTON_TWITTER_DISCONNECT"></span>
</button>
</div>
</div>
</div>