Merge pull request #10968 from owncloud/admin-groupsselect2

Use select2 for the groups excluded from sharing in admin page

68 files changed, 153 insertions, 113 deletions

diff --git a/apps/files_external/settings.php b/apps/files_external/settings.php
index 4c87360486a..e49eba06731 100644
--- a/apps/files_external/settings.php
+++ b/apps/files_external/settings.php
@@ -25,8 +25,8 @@ OC_Util::checkAdminUser();
 OCP\Util::addScript('files_external', 'settings');
 OCP\Util::addStyle('files_external', 'settings');
 
-OCP\Util::addScript('files_external', '../3rdparty/select2/select2');
-OCP\Util::addStyle('files_external', '../3rdparty/select2/select2');
+OCP\Util::addScript('core', 'select2/select2');
+OCP\Util::addStyle('core', 'select2/select2');
 
 $backends = OC_Mount_Config::getBackends();
 $personal_backends = array();
diff --git a/apps/files_external/3rdparty/select2/select2-spinner.gif b/core/css/select2/select2-spinner.gif
index 5b33f7e54f4..5b33f7e54f4 100644
--- a/apps/files_external/3rdparty/select2/select2-spinner.gif
+++ b/core/css/select2/select2-spinner.gif
diff --git a/apps/files_external/3rdparty/select2/select2.css b/core/css/select2/select2.css
index 1eb4d229f6d..1eb4d229f6d 100644
--- a/apps/files_external/3rdparty/select2/select2.css
+++ b/core/css/select2/select2.css
diff --git a/apps/files_external/3rdparty/select2/select2.png b/core/css/select2/select2.png
index 1d804ffb996..1d804ffb996 100644
--- a/apps/files_external/3rdparty/select2/select2.png
+++ b/core/css/select2/select2.png
diff --git a/apps/files_external/3rdparty/select2/select2x2.png b/core/css/select2/select2x2.png
index 4bdd5c961d4..4bdd5c961d4 100644
--- a/apps/files_external/3rdparty/select2/select2x2.png
+++ b/core/css/select2/select2x2.png
diff --git a/core/css/styles.css b/core/css/styles.css
index e8c58cff249..2c4aa76e98c 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -140,6 +140,18 @@ input[type="time"] {
 	-moz-box-sizing: border-box; box-sizing: border-box;
 }
 
+.select2-choices {
+	border: 1px solid #ddd;
+	border-radius: 3px;
+	color: #333;
+	background-image: none;
+}
+.select2-dropdown-open .select2-choices {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	border: 1px solid #3875d7;
+}
+
 /* correctly align images inside of buttons */
 input img, button img, .button img {
 	vertical-align: text-bottom;
diff --git a/apps/files_external/3rdparty/select2/LICENSE b/core/js/select2/LICENSE
index 0247cc76273..0247cc76273 100644
--- a/apps/files_external/3rdparty/select2/LICENSE
+++ b/core/js/select2/LICENSE
diff --git a/apps/files_external/3rdparty/select2/README.md b/core/js/select2/README.md
index 406fe79dc95..406fe79dc95 100644
--- a/apps/files_external/3rdparty/select2/README.md
+++ b/core/js/select2/README.md
diff --git a/apps/files_external/3rdparty/select2/bower.json b/core/js/select2/bower.json
index 80e8596e806..80e8596e806 100644
--- a/apps/files_external/3rdparty/select2/bower.json
+++ b/core/js/select2/bower.json
diff --git a/apps/files_external/3rdparty/select2/component.json b/core/js/select2/component.json
index ad7abf9d9fa..ad7abf9d9fa 100644
--- a/apps/files_external/3rdparty/select2/component.json
+++ b/core/js/select2/component.json
diff --git a/apps/files_external/3rdparty/select2/composer.json b/core/js/select2/composer.json
index c50fadba855..c50fadba855 100644
--- a/apps/files_external/3rdparty/select2/composer.json
+++ b/core/js/select2/composer.json
diff --git a/apps/files_external/3rdparty/select2/package.json b/core/js/select2/package.json
index 75ad84acaf8..75ad84acaf8 100644
--- a/apps/files_external/3rdparty/select2/package.json
+++ b/core/js/select2/package.json
diff --git a/apps/files_external/3rdparty/select2/release.sh b/core/js/select2/release.sh
index 0d2e279ead4..0d2e279ead4 100755
--- a/apps/files_external/3rdparty/select2/release.sh
+++ b/core/js/select2/release.sh
diff --git a/apps/files_external/3rdparty/select2/select2-bootstrap.css b/core/js/select2/select2-bootstrap.css
index 3b83f0a2297..3b83f0a2297 100644
--- a/apps/files_external/3rdparty/select2/select2-bootstrap.css
+++ b/core/js/select2/select2-bootstrap.css
diff --git a/apps/files_external/3rdparty/select2/select2.jquery.json b/core/js/select2/select2.jquery.json
index e9119279f11..e9119279f11 100644
--- a/apps/files_external/3rdparty/select2/select2.jquery.json
+++ b/core/js/select2/select2.jquery.json
diff --git a/apps/files_external/3rdparty/select2/select2.js b/core/js/select2/select2.js
index 2969da5d1f7..2969da5d1f7 100644
--- a/apps/files_external/3rdparty/select2/select2.js
+++ b/core/js/select2/select2.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_ar.js b/core/js/select2/select2_locale_ar.js
index acb33a2f6ad..acb33a2f6ad 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_ar.js
+++ b/core/js/select2/select2_locale_ar.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_bg.js b/core/js/select2/select2_locale_bg.js
index 585d28a2b0b..585d28a2b0b 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_bg.js
+++ b/core/js/select2/select2_locale_bg.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_ca.js b/core/js/select2/select2_locale_ca.js
index 7e19d3ce966..7e19d3ce966 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_ca.js
+++ b/core/js/select2/select2_locale_ca.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_cs.js b/core/js/select2/select2_locale_cs.js
index 376b54a1352..376b54a1352 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_cs.js
+++ b/core/js/select2/select2_locale_cs.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_da.js b/core/js/select2/select2_locale_da.js
index dbce3e1748d..dbce3e1748d 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_da.js
+++ b/core/js/select2/select2_locale_da.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_de.js b/core/js/select2/select2_locale_de.js
index 93b18e81f85..93b18e81f85 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_de.js
+++ b/core/js/select2/select2_locale_de.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_el.js b/core/js/select2/select2_locale_el.js
index e94b02cbc5f..e94b02cbc5f 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_el.js
+++ b/core/js/select2/select2_locale_el.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_en.js.template b/core/js/select2/select2_locale_en.js.template
index f66bcc844db..f66bcc844db 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_en.js.template
+++ b/core/js/select2/select2_locale_en.js.template
diff --git a/apps/files_external/3rdparty/select2/select2_locale_es.js b/core/js/select2/select2_locale_es.js
index f2b581791eb..f2b581791eb 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_es.js
+++ b/core/js/select2/select2_locale_es.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_et.js b/core/js/select2/select2_locale_et.js
index a4045d22df7..a4045d22df7 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_et.js
+++ b/core/js/select2/select2_locale_et.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_eu.js b/core/js/select2/select2_locale_eu.js
index 1da1a709481..1da1a709481 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_eu.js
+++ b/core/js/select2/select2_locale_eu.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_fa.js b/core/js/select2/select2_locale_fa.js
index a9e95af4dba..a9e95af4dba 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_fa.js
+++ b/core/js/select2/select2_locale_fa.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_fi.js b/core/js/select2/select2_locale_fi.js
index 9bed310f717..9bed310f717 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_fi.js
+++ b/core/js/select2/select2_locale_fi.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_fr.js b/core/js/select2/select2_locale_fr.js
index 9afda2abdcd..9afda2abdcd 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_fr.js
+++ b/core/js/select2/select2_locale_fr.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_gl.js b/core/js/select2/select2_locale_gl.js
index 80326320bf0..80326320bf0 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_gl.js
+++ b/core/js/select2/select2_locale_gl.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_he.js b/core/js/select2/select2_locale_he.js
index 00385410804..00385410804 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_he.js
+++ b/core/js/select2/select2_locale_he.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_hr.js b/core/js/select2/select2_locale_hr.js
index c29372524b6..c29372524b6 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_hr.js
+++ b/core/js/select2/select2_locale_hr.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_hu.js b/core/js/select2/select2_locale_hu.js
index a8c30881928..a8c30881928 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_hu.js
+++ b/core/js/select2/select2_locale_hu.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_id.js b/core/js/select2/select2_locale_id.js
index 547454079ba..547454079ba 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_id.js
+++ b/core/js/select2/select2_locale_id.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_is.js b/core/js/select2/select2_locale_is.js
index aecc6cd7194..aecc6cd7194 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_is.js
+++ b/core/js/select2/select2_locale_is.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_it.js b/core/js/select2/select2_locale_it.js
index d4e24de7000..d4e24de7000 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_it.js
+++ b/core/js/select2/select2_locale_it.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_ja.js b/core/js/select2/select2_locale_ja.js
index 81106e78a80..81106e78a80 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_ja.js
+++ b/core/js/select2/select2_locale_ja.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_ka.js b/core/js/select2/select2_locale_ka.js
index 366cc2d9c4d..366cc2d9c4d 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_ka.js
+++ b/core/js/select2/select2_locale_ka.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_ko.js b/core/js/select2/select2_locale_ko.js
index 1a84d21eae6..1a84d21eae6 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_ko.js
+++ b/core/js/select2/select2_locale_ko.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_lt.js b/core/js/select2/select2_locale_lt.js
index 2e2f950b00d..2e2f950b00d 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_lt.js
+++ b/core/js/select2/select2_locale_lt.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_lv.js b/core/js/select2/select2_locale_lv.js
index b300ec770f4..b300ec770f4 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_lv.js
+++ b/core/js/select2/select2_locale_lv.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_mk.js b/core/js/select2/select2_locale_mk.js
index 513562c51bf..513562c51bf 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_mk.js
+++ b/core/js/select2/select2_locale_mk.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_ms.js b/core/js/select2/select2_locale_ms.js
index 262042aab15..262042aab15 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_ms.js
+++ b/core/js/select2/select2_locale_ms.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_nl.js b/core/js/select2/select2_locale_nl.js
index 5b5c4156ce1..5b5c4156ce1 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_nl.js
+++ b/core/js/select2/select2_locale_nl.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_no.js b/core/js/select2/select2_locale_no.js
index ab61c082a02..ab61c082a02 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_no.js
+++ b/core/js/select2/select2_locale_no.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_pl.js b/core/js/select2/select2_locale_pl.js
index 75054e76578..75054e76578 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_pl.js
+++ b/core/js/select2/select2_locale_pl.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_pt-BR.js b/core/js/select2/select2_locale_pt-BR.js
index ac4969acfbb..ac4969acfbb 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_pt-BR.js
+++ b/core/js/select2/select2_locale_pt-BR.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_pt-PT.js b/core/js/select2/select2_locale_pt-PT.js
index cced7cf3ec1..cced7cf3ec1 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_pt-PT.js
+++ b/core/js/select2/select2_locale_pt-PT.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_ro.js b/core/js/select2/select2_locale_ro.js
index 87eca4cf740..87eca4cf740 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_ro.js
+++ b/core/js/select2/select2_locale_ro.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_rs.js b/core/js/select2/select2_locale_rs.js
index 300c01bc5e5..300c01bc5e5 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_rs.js
+++ b/core/js/select2/select2_locale_rs.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_ru.js b/core/js/select2/select2_locale_ru.js
index 0f45ce0dddf..0f45ce0dddf 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_ru.js
+++ b/core/js/select2/select2_locale_ru.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_sk.js b/core/js/select2/select2_locale_sk.js
index 772f304aca9..772f304aca9 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_sk.js
+++ b/core/js/select2/select2_locale_sk.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_sv.js b/core/js/select2/select2_locale_sv.js
index d611189a593..d611189a593 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_sv.js
+++ b/core/js/select2/select2_locale_sv.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_th.js b/core/js/select2/select2_locale_th.js
index df59bdac36d..df59bdac36d 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_th.js
+++ b/core/js/select2/select2_locale_th.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_tr.js b/core/js/select2/select2_locale_tr.js
index f834dad2b89..f834dad2b89 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_tr.js
+++ b/core/js/select2/select2_locale_tr.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_uk.js b/core/js/select2/select2_locale_uk.js
index 8d31a056080..8d31a056080 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_uk.js
+++ b/core/js/select2/select2_locale_uk.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_vi.js b/core/js/select2/select2_locale_vi.js
index 5dbc275361f..5dbc275361f 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_vi.js
+++ b/core/js/select2/select2_locale_vi.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_zh-CN.js b/core/js/select2/select2_locale_zh-CN.js
index 6add3c52518..6add3c52518 100644
--- a/apps/files_external/3rdparty/select2/select2_locale_zh-CN.js
+++ b/core/js/select2/select2_locale_zh-CN.js
diff --git a/apps/files_external/3rdparty/select2/select2_locale_zh-TW.js b/core/js/select2/select2_locale_zh-TW.js
index f072381faae..f072381faae 100755
--- a/apps/files_external/3rdparty/select2/select2_locale_zh-TW.js
+++ b/core/js/select2/select2_locale_zh-TW.js
diff --git a/settings/admin.php b/settings/admin.php
index 65deed6b883..6b93e6e3f03 100755
--- a/settings/admin.php
+++ b/settings/admin.php
@@ -7,10 +7,13 @@
 
 OC_Util::checkAdminUser();
 
-OC_Util::addStyle( "settings", "settings" );
+OCP\Util::addStyle('settings', 'settings');
+OCP\Util::addScript('settings', 'settings');
 OC_Util::addScript( "settings", "admin" );
 OC_Util::addScript( "settings", "log" );
 OC_Util::addScript( 'core', 'multiselect' );
+OCP\Util::addScript('core', 'select2/select2');
+OCP\Util::addStyle('core', 'select2/select2');
 OC_App::setActiveNavigationEntry( "admin" );
 
 $tmpl = new OC_Template( 'settings', 'admin', 'user');
@@ -54,22 +57,9 @@ $tmpl->assign('shareExpireAfterNDays', OC_Appconfig::getValue('core', 'shareapi_
 $tmpl->assign('shareEnforceExpireDate', OC_Appconfig::getValue('core', 'shareapi_enforce_expire_date', 'no'));
 $excludeGroups = OC_Appconfig::getValue('core', 'shareapi_exclude_groups', 'no') === 'yes' ? true : false;
 $tmpl->assign('shareExcludeGroups', $excludeGroups);
-$allGroups =  OC_Group::getGroups();
 $excludedGroupsList = OC_Appconfig::getValue('core', 'shareapi_exclude_groups_list', '');
-$excludedGroups = $excludedGroupsList !== '' ? explode(',', $excludedGroupsList) : array();
-$groups = array();
-foreach ($allGroups as $group) {
-	if (in_array($group, $excludedGroups)) {
-		$groups[$group] = array('gid' => $group,
-			'excluded' => true);
-	} else {
-		$groups[$group] = array('gid' => $group,
-			'excluded' => false);
-	}
-}
-ksort($groups);
-$tmpl->assign('groups', $groups);
-
+$excludedGroupsList = explode(',', $excludedGroupsList); // FIXME: this should be JSON!
+$tmpl->assign('shareExcludedGroupsList', implode('|', $excludedGroupsList));
 
 // Check if connected using HTTPS
 $tmpl->assign('isConnectedViaHTTPS', OC_Request::serverProtocol() === 'https');
diff --git a/settings/ajax/excludegroups.php b/settings/ajax/excludegroups.php
deleted file mode 100644
index c3488c5bae7..00000000000
--- a/settings/ajax/excludegroups.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php
-OC_JSON::checkAdminUser();
-OCP\JSON::callCheck();
-
-$selectedGroups = isset($_POST["selectedGroups"]) ? json_decode($_POST["selectedGroups"]) : array();
-$changedGroup = isset($_POST["changedGroup"]) ? $_POST["changedGroup"] : '';
-
-if ($changedGroup !== '') {
-	if(($key = array_search($changedGroup, $selectedGroups)) !== false) {
-		unset($selectedGroups[$key]);
-	} else {
-		$selectedGroups[] = $changedGroup;
-	}
-} else {
-	\OCP\Util::writeLog('core', 'Can not update list of excluded groups from sharing, parameter missing', \OCP\Util::WARN);
-}
-
-\OC_Appconfig::setValue('core', 'shareapi_exclude_groups_list', implode(',', $selectedGroups));
diff --git a/settings/apps.php b/settings/apps.php
index 7573c8b573f..6021574cbb3 100644
--- a/settings/apps.php
+++ b/settings/apps.php
@@ -24,17 +24,17 @@
 OC_Util::checkAdminUser();
 
 // Load the files we need
-OC_Util::addStyle( "settings", "settings" );
-OC_Util::addScript("core", "multiselect");
+OCP\Util::addStyle('settings', 'settings' );
+OCP\Util::addScript('settings', 'settings');
+OCP\Util::addScript('core', 'select2/select2');
+OCP\Util::addStyle('core', 'select2/select2');
 OC_App::setActiveNavigationEntry( "core_apps" );
 
 $combinedApps = OC_App::listAllApps();
-$groups = \OC_Group::getGroups();
 
 $tmpl = new OC_Template( "settings", "apps", "user" );
 
 $tmpl->assign('apps', $combinedApps);
-$tmpl->assign('groups', $groups);
 
 $appid = (isset($_GET['appid'])?strip_tags($_GET['appid']):'');
 
diff --git a/settings/js/admin.js b/settings/js/admin.js
index 56dc1b98716..95be13d2288 100644
--- a/settings/js/admin.js
+++ b/settings/js/admin.js
@@ -1,42 +1,3 @@
-var SharingGroupList = {
-	applyMultipleSelect: function(element) {
-		var checked = [];
-		if ($(element).hasClass('groupsselect')) {
-			if (element.data('userGroups')) {
-				checked = element.data('userGroups');
-			}
-			var checkHandeler = function(group) {
-					$.post(OC.filePath('settings', 'ajax', 'excludegroups.php'),
-						{changedGroup: group, selectedGroups: JSON.stringify(checked)},
-						function() {});
-				};
-
-
-			var addGroup = function(select, group) {
-				$(this).each(function(index, element) {
-					if ($(element).find('option[value="' + group + '"]').length === 0 &&
-							select.data('msid') !== $(element).data('msid')) {
-						$(element).append('<option value="' + escapeHTML(group) + '">' +
-								escapeHTML(group) + '</option>');
-					}
-				});
-			};
-
-			var label = null;
-			element.multiSelect({
-				createCallback: addGroup,
-				createText: label,
-				selectedFirst: true,
-				checked: checked,
-				oncheck: checkHandeler,
-				onuncheck: checkHandeler,
-				minWidth: 100
-			});
-
-		}
-	}
-};
-
 $(document).ready(function(){
 	var params = OC.Util.History.parseUrlQuery();
 
@@ -57,8 +18,17 @@ $(document).ready(function(){
 	}
 
 
-	$('select#excludedGroups[multiple]').each(function (index, element) {
-		SharingGroupList.applyMultipleSelect($(element));
+	$('#excludedGroups').each(function (index, element) {
+		OC.Settings.setupGroupsSelect($(element));
+		$(element).change(function(ev) {
+			var groups = ev.val || [];
+			if (groups.length > 0) {
+				groups = ev.val.join(','); // FIXME: make this JSON
+			} else {
+				groups = '';
+			}
+			OC.AppConfig.setValue('core', $(this).attr('name'), groups);
+		});
 	});
 
 
@@ -81,7 +51,7 @@ $(document).ready(function(){
 		$('#shareAPI p:not(#enable)').toggleClass('hidden', !this.checked);
 	});
 
-	$('#shareAPI input').change(function() {
+	$('#shareAPI input:not(#excludedGroups)').change(function() {
 		if ($(this).attr('type') === 'checkbox') {
 			if (this.checked) {
 				var value = 'yes';
diff --git a/settings/js/apps.js b/settings/js/apps.js
index e808e51e936..22bac1eaf3e 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -7,6 +7,11 @@
 
 OC.Settings = OC.Settings || {};
 OC.Settings.Apps = OC.Settings.Apps || {
+	setupGroupsSelect: function() {
+		OC.Settings.setupGroupsSelect($('#group_select'), {
+			placeholder: t('core', 'All')
+		});
+	},
 	loadApp:function(app) {
 		var page = $('#app-content');
 		page.find('p.license').show();
@@ -112,23 +117,16 @@ OC.Settings.Apps = OC.Settings.Apps || {
 			page.find(".warning").hide();
 		}
 
-		page.find("div.multiselect").parent().remove();
 		if(OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') ||
 			OC.Settings.Apps.isType(app, 'authentication') || OC.Settings.Apps.isType(app, 'logging')) {
 			page.find("#groups_enable").hide();
 			page.find("label[for='groups_enable']").hide();
 			page.find("#groups_enable").attr('checked', null);
 		} else {
-			$('#group_select > option').each(function (i, el) {
-				if (app.groups.length === 0 || app.groups.indexOf(el.value) >= 0) {
-					$(el).attr('selected', 'selected');
-				} else {
-					$(el).attr('selected', null);
-				}
-			});
 			if (app.active) {
 				if (app.groups.length) {
-					$('#group_select').multiSelect();
+					OC.Settings.Apps.setupGroupsSelect();
+					$('#group_select').select2('val', app.groups || []);
 					page.find("#groups_enable").attr('checked','checked');
 				} else {
 					page.find("#groups_enable").attr('checked', null);
@@ -380,9 +378,10 @@ $(document).ready(function(){
 		}
 	});
 
-	$('#group_select').change(function() {
+	$('#group_select').change(function(ev) {
 		var element = $('#app-content input.enable');
-		var groups = $(this).val();
+		// getting an array of values from select2
+		var groups = ev.val || [];
 		var appid = element.data('appid');
 		if (appid) {
 			OC.Settings.Apps.enableApp(appid, false, element, groups);
@@ -404,14 +403,14 @@ $(document).ready(function(){
 	}
 
 	$("#groups_enable").change(function() {
+		var $select = $('#group_select');
+		$select.val('');
 		if (this.checked) {
-			$("div.multiselect").parent().remove();
-			$('#group_select').multiSelect();
-		} else {
-			$('#group_select').hide().val(null);
-			$("div.multiselect").parent().remove();
+			OC.Settings.Apps.setupGroupsSelect();
 		}
-
-		$('#group_select').change();
+		else {
+			$select.select2('destroy');
+		}
+		$select.change();
 	});
 });
diff --git a/settings/js/settings.js b/settings/js/settings.js
new file mode 100644
index 00000000000..13c56a8f53a
--- /dev/null
+++ b/settings/js/settings.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2014, Vincent Petry <pvince81@owncloud.com>
+ * This file is licensed under the Affero General Public License version 3 or later.
+ * See the COPYING-README file.
+ */
+OC.Settings = OC.Settings || {};
+OC.Settings = _.extend(OC.Settings, {
+
+	_cachedGroups: null,
+
+	/**
+	 * Setup selection box for group selection.
+	 *
+	 * Values need to be separated by a pipe "|" character.
+	 * (mostly because a comma is more likely to be used
+	 * for groups)
+	 *
+	 * @param $elements jQuery element (hidden input) to setup select2 on
+	 * @param [extraOptions] extra options hash to pass to select2
+	 */
+	setupGroupsSelect: function($elements, extraOptions) {
+		var self = this;
+		if ($elements.length > 0) {
+			// note: settings are saved through a "change" event registered
+			// on all input fields
+			$elements.select2(_.extend({
+				placeholder: t('core', 'Groups'),
+				allowClear: true,
+				multiple: true,
+				separator: '|',
+				query: _.debounce(function(query) {
+					var queryData = {};
+					if (self._cachedGroups && query.term === '') {
+						query.callback({results: self._cachedGroups});
+						return;
+					}
+					if (query.term !== '') {
+						queryData = {
+							pattern: query.term,
+							filterGroups: 1
+						};
+					}
+					$.ajax({
+						url: OC.generateUrl('/settings/ajax/grouplist'),
+						data: queryData,
+						dataType: 'json',
+						success: function(data) {
+							if (data.status === "success") {
+								var results = [];
+
+								// add groups
+								$.each(data.data.adminGroups, function(i, group) {
+									results.push({id:group.id, displayname:group.name});
+								});
+								$.each(data.data.groups, function(i, group) {
+									results.push({id:group.id, displayname:group.name});
+								});
+
+								if (query.term === '') {
+									// cache full list
+									self._cachedGroups = results;
+								}
+								query.callback({results: results});
+							} else {
+								//FIXME add error handling
+							}
+						}
+					});
+				}, 100, true),
+				id: function(element) {
+					return element.id;
+				},
+				initSelection: function(element, callback) {
+					var selection =
+						_.map(($(element).val() || []).split('|').sort(),
+							function(groupName) {
+						return {
+							id: groupName,
+							displayname: groupName
+						};
+					});
+					callback(selection);
+				},
+				formatResult: function (element) {
+					return escapeHTML(element.displayname);
+				},
+				formatSelection: function (element) {
+					return escapeHTML(element.displayname);
+				},
+				escapeMarkup: function(m) {
+					// prevent double markup escape
+					return m;
+				}
+			}, extraOptions || {}));
+		}
+	}
+});
+
diff --git a/settings/templates/admin.php b/settings/templates/admin.php
index 0e6cb14bcef..9ceebad4ee1 100644
--- a/settings/templates/admin.php
+++ b/settings/templates/admin.php
@@ -317,14 +317,7 @@ if ($_['suggestedOverwriteWebroot']) {
 			<label for="shareapiExcludeGroups"><?php p($l->t('Exclude groups from sharing'));?></label><br/>
 		</p>
 			<p id="selectExcludedGroups" class="indent <?php if (!$_['shareExcludeGroups'] || $_['shareAPIEnabled'] === 'no') p('hidden'); ?>">
-				<select
-					class="groupsselect"
-					id="excludedGroups" data-placeholder="groups"
-					title="<?php p($l->t('Groups'))?>" multiple="multiple">
-					<?php foreach($_["groups"] as $group): ?>
-						<option value="<?php p($group['gid'])?>" <?php if($group['excluded']) { p('selected="selected"'); }?>><?php p($group['gid']);?></option>
-					<?php endforeach;?>
-				</select>
+				<input name="shareapi_exclude_groups_list" type="hidden" id="excludedGroups" value="<?php p($_['shareExcludedGroupsList']) ?>" style="width: 400px"/>
 				<br />
 				<em><?php p($l->t('These groups will still be able to receive shares, but not to initiate them.')); ?></em>
 			</p>
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index 29fda0ed243..5199d3fd7c7 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -58,11 +58,7 @@
 	<input class="hidden" type="checkbox" id="groups_enable"/>
 	<label class="hidden" for="groups_enable"><?php p($l->t('Enable only for specific groups')); ?></label>
 	<br />
-	<select class="hidden" id="group_select" multiple="multiple" title="<?php p($l->t('All')); ?>">
-		<?php foreach($_['groups'] as $group):?>
-			<option value="<?php p($group);?>"><?php p($group); ?></option>
-		<?php endforeach;?>
-	</select>
+	<input type="hidden" id="group_select" title="<?php p($l->t('All')); ?>" style="width: 200px">
 
 	<div class="warning hidden"></div>
 	</div>