Merge branch '6.0'

Conflicts:
	media/js/base.js
	seahub/api2/views.py
	seahub/views/ajax.py
	tests/api/test_repo_user_folder_perm.py

static/scripts/app/views/dir.js

@@ -199,8 +199,6 @@ define([
                 Common.updateSortIconByMode({'context': this.$el});
                 this.sortDirents();
 
-                this.updateMagnificPopupOptions();
-
                 this.dir.last_start = 0;
                 this.dir.limit = 100;
                 this.render_dirents_slice(this.dir.last_start, this.dir.limit);
@@ -817,6 +815,8 @@ define([
                 }
 
                 this.dir.sort();
+
+                this.updateMagnificPopupOptions();
             },
 
             sortByName: function() {
@@ -871,8 +871,8 @@ define([
 
             download: function () {
                 var dirents = this.dir;
-                var parent_dir = dirents.path;
                 var selected_dirents = dirents.where({'selected':true});
+                var selected_names = [];
 
                 // select 1 item, and it is a file
                 if (selected_dirents.length == 1 &&
@@ -880,57 +880,11 @@ define([
                     location.href = selected_dirents[0].getDownloadUrl();
                     return;
                 }
-
-                var selected_names = [];
-                var interval;
-                var zip_token;
-                var packagingTip = gettext("Packaging...");
-                var $tip = $('<p></p>');
-                var queryZipProgress = function() {
-                    $.ajax({
-                        url: Common.getUrl({name: 'query_zip_progress'}) + '?token=' + zip_token,
-                        dataType: 'json',
-                        cache: false,
-                        success: function(data) {
-                            var progress = data.total == 0 ? '100%' : (data.zipped/data.total*100).toFixed(0) + '%';
-                            $tip.html(packagingTip + ' ' + progress);
-                            if (data['total'] == data['zipped']) {
-                                setTimeout(function() { $.modal.close(); }, 500);
-                                clearInterval(interval);
-                                location.href = Common.getUrl({
-                                    name: 'download_dir_zip_url',
-                                    zip_token: zip_token
-                                });
-                            }
-                        },
-                        error: function(xhr) {
-                            Common.ajaxErrorHandler(xhr);
-                            clearInterval(interval);
-                        }
-                    });
-                };
                 $(selected_dirents).each(function() {
                     selected_names.push(this.get('obj_name'));
                 });
-                $.ajax({
-                    url: Common.getUrl({name: 'zip_task', repo_id: dirents.repo_id}),
-                    data: {
-                        'parent_dir': parent_dir,
-                        'dirents': selected_names
-                    },
-                    traditional: true,
-                    dataType: 'json',
-                    success: function(data) {
-                        zip_token = data['zip_token'];
-                        $tip.html(packagingTip).modal();
-                        $('#simplemodal-container').css({'width':'auto'});
-                        queryZipProgress();
-                        interval = setInterval(queryZipProgress, 1000);
-                    },
-                    error: function(xhr) {
-                        Common.ajaxErrorHandler(xhr);
-                    }
-                });
+
+                Common.zipDownload(dirents.repo_id, dirents.path, selected_names);
             },
 
             del: function () {
@@ -1250,12 +1204,27 @@ define([
                                     req_progress();
                                 }
                             }; // 'after_op_success' ends
-                            Common.ajaxPost({
-                                'form': form,
-                                'post_url': post_url,
-                                'post_data': post_data,
-                                'after_op_success': after_op_success,
-                                'form_id': form.attr('id')
+                            $.ajax({
+                                url: post_url,
+                                type: 'POST',
+                                dataType: 'json',
+                                beforeSend: Common.prepareCSRFToken,
+                                data: post_data,
+                                success: after_op_success,
+                                error: function(xhr) {
+                                    var err;
+                                    if (xhr.responseText) {
+                                        err = $.parseJSON(xhr.responseText).error;
+                                    } else {
+                                        err = gettext("Failed. Please check the network.");
+                                    }
+                                    if (form.is(':visible')) {
+                                        $('.error', form).html(err).show();
+                                    } else {
+                                        cancel_btn.after('<p class="error">' + err + '</p>');
+                                        cancel_btn.hide();
+                                    }
+                                }
                             });
                         }; // 'mvcpDirent' ends
                         var endOrContinue = function () {

static/scripts/app/views/dirent-grid.js

@@ -107,7 +107,6 @@ define([
             var op = template({
                 dirent: this.model.attributes,
                 dirent_path: this.model.getPath(),
-                download_url: this.model.getDownloadUrl(),
                 category: dir.category,
                 repo_id: dir.repo_id,
                 is_repo_owner: dir.is_repo_owner,
@@ -127,6 +126,7 @@ define([
 
             // Using _.bind(function, object) to make that whenever the function is
             // called, the value of this will be the object.
+            this.$('.download').on('click', _.bind(this.download, this));
             this.$('.delete').on('click', _.bind(this.del, this));
             this.$('.share').on('click', _.bind(this.share, this));
             this.$('.mv').on('click', _.bind(this.mvcp, this));
@@ -151,6 +151,14 @@ define([
             this.$('.grid-item-op').remove();
         },
 
+        download: function() {
+            this.closeMenu();
+            var dir = this.dir;
+            var obj_name = this.model.get('obj_name');
+            Common.zipDownload(dir.repo_id, dir.path, obj_name);
+            return false;
+        },
+
         del: function(event) {
             this.closeMenu();
             var dirent_name = this.model.get('obj_name');

static/scripts/app/views/dirent.js

@@ -243,56 +243,7 @@ define([
         downloadDir: function() {
             var dir = this.dirView.dir;
             var obj_name = this.model.get('obj_name');
-            var interval;
-            var zip_token;
-            var packagingTip = gettext("Packaging...");
-            var $tip = $('<p></p>');
-            var queryZipProgress = function() {
-                $.ajax({
-                    url: Common.getUrl({name: 'query_zip_progress'}) + '?token=' + zip_token,
-                    dataType: 'json',
-                    cache: false,
-                    success: function(data) {
-                        var progress = data.total == 0 ? '100%' : (data.zipped/data.total*100).toFixed(0) + '%';
-                        $tip.html(packagingTip + ' ' + progress);
-                        if (data['total'] == data['zipped']) {
-                            setTimeout(function() { $.modal.close(); }, 500);
-                            clearInterval(interval);
-                            location.href = Common.getUrl({
-                                name: 'download_dir_zip_url',
-                                zip_token: zip_token
-                            });
-                        }
-                    },
-                    error: function(xhr) {
-                        Common.ajaxErrorHandler(xhr);
-                        clearInterval(interval);
-                    }
-                });
-            };
-
-            $.ajax({
-                url: Common.getUrl({
-                    name: 'zip_task',
-                    repo_id: dir.repo_id
-                }),
-                data: {
-                    'parent_dir': dir.path,
-                    'dirents': obj_name 
-                },
-                dataType: 'json',
-                success: function(data) {
-                    zip_token = data['zip_token'];
-                    $tip.html(packagingTip).modal();
-                    $('#simplemodal-container').css({'width':'auto'});
-                    queryZipProgress();
-                    interval = setInterval(queryZipProgress, 1000);
-                },
-                error: function(xhr) {
-                    Common.ajaxErrorHandler(xhr);
-                }
-            });
-
+            Common.zipDownload(dir.repo_id, dir.path, obj_name);
             return false;
         },
 

static/scripts/app/views/group-manage-members.js

@@ -167,7 +167,7 @@ define([
                         var err_str = '';
                         if (data.failed.length > 0) {
                             $(data.failed).each(function(index, item) {
-                                err_str += item.email + ': ' + item.error_msg + '<br />';
+                                err_str += Common.HTMLescape(item.email) + ': ' + Common.HTMLescape(item.error_msg) + '<br />';
                             });
                             _this.$error.html(err_str).show();
                         }

static/scripts/app/views/group-settings.js

@@ -270,7 +270,7 @@ define([
                         if (data.failed.length > 0) {
                             var err_msg = '';
                             $(data.failed).each(function(index, item) {
-                                err_msg += item.email + ': ' + item.error_msg + '<br />';
+                                err_msg += Common.HTMLescape(item.email) + ': ' + Common.HTMLescape(item.error_msg) + '<br />';
                             });
                             $error.html(err_msg).removeClass('hide');
                             Common.enableButton($submitBtn);

static/scripts/common.js

@@ -170,6 +170,10 @@ define([
                 case 'admin-library-dirents': return siteRoot + 'api/v2.1/admin/libraries/' + options.repo_id + '/dirents/';
                 case 'admin-groups': return siteRoot + 'api/v2.1/admin/groups/';
                 case 'admin-group': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/';
+                case 'admin-group-libraries': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/libraries/';
+                case 'admin-group-library': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/libraries/' + options.repo_id + '/';
+                case 'admin-group-members': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/members/';
+                case 'admin-group-member': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/members/' + options.email+ '/';
                 case 'admin-system-library': return siteRoot + 'api/v2.1/admin/system-library/';
                 case 'admin-trash-libraries': return siteRoot + 'api/v2.1/admin/trash-libraries/';
                 case 'admin-trash-library': return siteRoot + 'api/v2.1/admin/trash-libraries/' + options.repo_id + '/';
@@ -277,6 +281,16 @@ define([
             }
         },
 
+        getLibIconTitle: function(is_encrypted, is_readonly) {
+            if (is_encrypted) {
+                return gettext("Encrypted library");
+            } else if (is_readonly) {
+                return gettext("Read-Only library");
+            } else {
+                return gettext("Read-Write library");
+            }
+        },
+
         isHiDPI: function() {
             var pixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
             if (pixelRatio > 1) {
@@ -894,6 +908,34 @@ define([
             }
         },
 
+        quotaSizeFormat: function(bytes, precision) {
+            var kilobyte = 1000;
+            var megabyte = kilobyte * 1000;
+            var gigabyte = megabyte * 1000;
+            var terabyte = gigabyte * 1000;
+
+            var precision = precision || 0;
+
+            if ((bytes >= 0) && (bytes < kilobyte)) {
+                return bytes + ' B';
+
+            } else if ((bytes >= kilobyte) && (bytes < megabyte)) {
+                return (bytes / kilobyte).toFixed(precision) + ' KB';
+
+            } else if ((bytes >= megabyte) && (bytes < gigabyte)) {
+                return (bytes / megabyte).toFixed(precision) + ' MB';
+
+            } else if ((bytes >= gigabyte) && (bytes < terabyte)) {
+                return (bytes / gigabyte).toFixed(precision) + ' GB';
+
+            } else if (bytes >= terabyte) {
+                return (bytes / terabyte).toFixed(precision) + ' TB';
+
+            } else {
+                return bytes + ' B';
+            }
+        },
+
         groupId2Name: function(group_id) {
             var group_name;
             var groups = app.pageOptions.groups;
@@ -915,7 +957,62 @@ define([
             } else {
                 return input.setSelectionRange(pos, pos);
             }
-        }
+        },
 
+        // for 'dir view': download multi dirents; dir download
+        zipDownload:function(repo_id, parent_dir, dirents) {
+            var _this = this;
+
+            var interval;
+            var zip_token;
+            var packagingTip = gettext("Packaging...");
+            var $tip = $('<p></p>');
+            var queryZipProgress = function() {
+                $.ajax({
+                    url: _this.getUrl({name: 'query_zip_progress'}) + '?token=' + zip_token,
+                    dataType: 'json',
+                    cache: false,
+                    success: function(data) {
+                        var progress = data.total == 0 ? '100%' : (data.zipped/data.total*100).toFixed(0) + '%';
+                        $tip.html(packagingTip + ' ' + progress);
+                        if (data['total'] == data['zipped']) {
+                            setTimeout(function() { $.modal.close(); }, 500);
+                            clearInterval(interval);
+                            location.href = _this.getUrl({
+                                name: 'download_dir_zip_url',
+                                zip_token: zip_token
+                            });
+                        }
+                    },
+                    error: function(xhr) {
+                        _this.ajaxErrorHandler(xhr);
+                        clearInterval(interval);
+                    }
+                });
+            };
+
+            $.ajax({
+                url: _this.getUrl({
+                    name: 'zip_task',
+                    repo_id: repo_id
+                }),
+                data: {
+                    'parent_dir': parent_dir,
+                    'dirents': dirents
+                },
+                traditional: true,
+                dataType: 'json',
+                success: function(data) {
+                    zip_token = data['zip_token'];
+                    $tip.html(packagingTip).modal();
+                    $('#simplemodal-container').css({'width':'auto'});
+                    queryZipProgress();
+                    interval = setInterval(queryZipProgress, 1000);
+                },
+                error: function(xhr) {
+                    _this.ajaxErrorHandler(xhr);
+                }
+            });
+        }
     }
 });

static/scripts/i18n/fi/djangojs.js

@@ -0,0 +1,268 @@
+
+
+(function (globals) {
+
+  var django = globals.django || (globals.django = {});
+
+  
+  django.pluralidx = function (n) {
+    var v=(n != 1);
+    if (typeof(v) == 'boolean') {
+      return v ? 1 : 0;
+    } else {
+      return v;
+    }
+  };
+  
+
+  
+  /* gettext library */
+
+  django.catalog = {
+    "%curr% of %total%": "%curr% kokonaism\u00e4\u00e4r\u00e4st\u00e4 %total%", 
+    "<a href=\"%url%\" target=\"_blank\">The image</a> could not be loaded.": " href=\"%url%\" target=\"_blank\">Kuvaa</a> ei voitu ladata.", 
+    "Are you sure you want to delete these selected items?": "Oletko varma, ett\u00e4 haluat poistaa n\u00e4m\u00e4 kohteet?", 
+    "Are you sure you want to quit this group?": "Oletko varma, ett\u00e4 haluat lopettaa t\u00e4m\u00e4n ryhm\u00e4n?", 
+    "Cancel": "Peruuta", 
+    "Canceled.": "Peruutettu.", 
+    "Change Password of Library {placeholder}": "Vaihda kirjaston {placeholder} salasana", 
+    "Close (Esc)": "Sulje (Esc)", 
+    "Copy selected item(s) to:": "Kopioi valitut kohteet:", 
+    "Copy {placeholder} to:": "Kopioi {placeholder} kohteeseen:", 
+    "Copying %(name)s": "Kopioidaan %(name)s", 
+    "Copying file %(index)s of %(total)s": "Kopioidaan tiedostoa %(index)s kokonaism\u00e4\u00e4r\u00e4st\u00e4 %(total)s", 
+    "Delete": "Poista", 
+    "Delete Items": "Poista kohteita", 
+    "Delete failed": "Poisto ep\u00e4onnistui", 
+    "Deleted directories": "Poistetut hakemistot", 
+    "Deleted files": "Poistetut tiedostot", 
+    "Dismiss Group": "Poistu ryhm\u00e4st\u00e4", 
+    "Edit failed": "Muokkaus ep\u00e4onnistui", 
+    "Empty file upload result": "Tiedoston l\u00e4hetys oli tulokseton", 
+    "Encrypted library": "Salattu kirjasto", 
+    "Error": "Virhe", 
+    "Expired": "Vanhentunut", 
+    "Failed to copy %(name)s": "%(name)s kopiointi ep\u00e4onnistui.", 
+    "Failed to delete %(name)s and %(amount)s other items.": "Ep\u00e4onnistuttiin poistamaan %(name)s ja %(amount)s muuta kohdetta.", 
+    "Failed to delete %(name)s and 1 other item.": "Ep\u00e4onnistuttiin poistamaan %(name)s ja 1 muu kohde.", 
+    "Failed to delete %(name)s.": "%(name)s poistaminen ep\u00e4onnistui.", 
+    "Failed to get update url": "P\u00e4ivityslinkin haku ep\u00e4onnistui", 
+    "Failed to get upload url": "L\u00e4hetyslinkin haku ep\u00e4onnistui", 
+    "Failed to move %(name)s": "%(name)s siirt\u00e4minen ep\u00e4onnistui", 
+    "Failed to send to {placeholder}": "L\u00e4hett\u00e4minen kohteeseen {placeholder} ep\u00e4onnistui", 
+    "Failed.": "Ep\u00e4onnistui.", 
+    "Failed. Please check the network.": "Ep\u00e4onnistui. Ole hyv\u00e4 ja tarkista verkkoyhteys.", 
+    "File Upload canceled": "Tiedoston l\u00e4hetys peruutettu", 
+    "File Upload complete": "Tiedoston l\u00e4hetys valmistui", 
+    "File Upload failed": "Tiedoston l\u00e4hetys ep\u00e4onnistui", 
+    "File Uploading...": "Tiedostoa l\u00e4hetet\u00e4\u00e4n...", 
+    "File is locked": "Tiedosto on lukittu", 
+    "File is too big": "Tiedosto on liian suuri", 
+    "File is too small": "Tiedosto on liian pieni", 
+    "Filetype not allowed": "Tiedostotyyppi ei ole sallittu", 
+    "Hide": "Piiloita", 
+    "Internal error. Failed to copy %(name)s and %(amount)s other item(s).": "Sis\u00e4inen virhe. Ep\u00e4onnistuttiin kopioimaan %(name)s ja %(amount)s muuta kohdetta.", 
+    "Internal error. Failed to copy %(name)s.": "Sis\u00e4inen virhe. %(name)s kopiointi ep\u00e4onnistui.", 
+    "Internal error. Failed to move %(name)s and %(amount)s other item(s).": "Sis\u00e4inen virhe. Ep\u00e4onnistuttiin siirt\u00e4m\u00e4\u00e4n %(name)s ja %(amount)s muuta kohdetta.", 
+    "Internal error. Failed to move %(name)s.": "Sis\u00e4inen virhe. %(name)s siirt\u00e4minen ep\u00e4onnistui.", 
+    "Invalid destination path": "Virheellinen kohdepolku", 
+    "It is required.": "Vaaditaan", 
+    "Just now": "Juuri nyt", 
+    "Loading failed": "Lataus ep\u00e4onnistui", 
+    "Loading...": "Ladataan...", 
+    "Max number of files exceeded": "Tiedostojen maksim\u00e4\u00e4r\u00e4 on ylitetty", 
+    "Modified files": "Muokatut tiedostot", 
+    "Move selected item(s) to:": "Siirr\u00e4 valitut kohteet:", 
+    "Move {placeholder} to:": "Siirr\u00e4 {placeholder} kohteeseen:", 
+    "Moving %(name)s": "Siirret\u00e4\u00e4n %(name)s", 
+    "Moving file %(index)s of %(total)s": "Siirret\u00e4\u00e4n tiedostoa %(index)s kokonaism\u00e4\u00e4r\u00e4st\u00e4 %(total)s", 
+    "Name is required": "Nimi vaaditaan", 
+    "New directories": "Uudet hakemistot", 
+    "New files": "Uudet tiedostot", 
+    "New password is too short": "Uusi salasana on liian lyhyt", 
+    "New passwords don't match": "Uudet salasanat eiv\u00e4t t\u00e4sm\u00e4\u00e4", 
+    "Next (Right arrow key)": "Seuraava (Oikea nuolin\u00e4pp\u00e4in)", 
+    "No matches": "Ei osumia", 
+    "Only an extension there, please input a name.": "Ainoastaan p\u00e4\u00e4tteet t\u00e4h\u00e4n, ole hyv\u00e4 ja anna nimi.", 
+    "Open in New Tab": "Avaa uudessa v\u00e4lilehdess\u00e4", 
+    "Password is required.": "Salasana vaaditaan", 
+    "Password is too short": "Salasana on liian lyhyt", 
+    "Passwords don't match": "Salasanat eiv\u00e4t t\u00e4sm\u00e4\u00e4", 
+    "Permission error": "Virhe oikeuksissa", 
+    "Please check the network.": "Ole hyv\u00e4 ja tarkista verkko.", 
+    "Please choose a CSV file": "Ole hyv\u00e4 ja valitse CSV-tiedosto", 
+    "Please click and choose a directory.": "Ole hyv\u00e4 ja valitse hakemisto.", 
+    "Please enter 1 or more character": "Ole hyv\u00e4 ja sy\u00f6t\u00e4 1 tai useampi merkki", 
+    "Please enter a new password": "Ole hyv\u00e4 ja anna uusi salasana", 
+    "Please enter days.": "Ole hyv\u00e4 ja sy\u00f6t\u00e4 p\u00e4iv\u00e4t.", 
+    "Please enter password": "Ole hyv\u00e4 ja sy\u00f6t\u00e4 salasana", 
+    "Please enter the new password again": "Ole hyv\u00e4 ja anna uusi salasana uudelleen", 
+    "Please enter the old password": "Ole hyv\u00e4 ja anna vanha salasana", 
+    "Please enter the password again": "Ole hyv\u00e4 ja sy\u00f6t\u00e4 salasana uudelleen", 
+    "Please enter valid days": "Ole hyv\u00e4 ja sy\u00f6t\u00e4 validit p\u00e4iv\u00e4t", 
+    "Please input at least an email.": "Ole hyv\u00e4 ja sy\u00f6t\u00e4 ainakin s\u00e4hk\u00f6posti.", 
+    "Previous (Left arrow key)": "Edellinen (Vasen nuolin\u00e4pp\u00e4in)", 
+    "Processing...": "K\u00e4sitell\u00e4\u00e4n...", 
+    "Quit Group": "Lopeta ryhm\u00e4", 
+    "Read-Only library": "Vain luku kirjasto", 
+    "Read-Write library": "Luku-kirjoitus kirjasto", 
+    "Really want to dismiss this group?": "Haluatko varmasti poistua ryhm\u00e4st\u00e4?", 
+    "Rename File": "Nime\u00e4 tiedosto uudelleen", 
+    "Rename Folder": "Nime\u00e4 kansio uudelleen", 
+    "Renamed or Moved files": "Uudelleen nimetyt tai siirretyt tiedostot", 
+    "Replace file {filename}?": "Korvaa tiedosto {filename}?", 
+    "Saving...": "Tallennetaan...", 
+    "Search user or enter email and press Enter": "Etsi k\u00e4ytt\u00e4j\u00e4 tai sy\u00f6t\u00e4 s\u00e4hk\u00f6posti ja paina Enter", 
+    "Search users or enter emails and press Enter": "Etsi k\u00e4ytt\u00e4ji\u00e4 tai sy\u00f6t\u00e4 s\u00e4hk\u00f6postit ja paina Enter", 
+    "Searching...": "Etsit\u00e4\u00e4n...", 
+    "Select a group": "Valitse ryhm\u00e4", 
+    "Select groups": "Valitse ryhm\u00e4t", 
+    "Set {placeholder}'s permission": "Aseta oikeudet kohteelle {placeholder} ", 
+    "Share {placeholder}": "Jaa {placeholder}", 
+    "Show": "N\u00e4yt\u00e4", 
+    "Start": "Aloita", 
+    "Success": "Onnistui", 
+    "Successfully changed library password.": "Kirjaston salasana vaihdettu onnistuneesti.", 
+    "Successfully clean all errors.": "Kaikki virheet on poistettu onnistuneesti.", 
+    "Successfully copied %(name)s": "Kohde %(name)s kopioitu onnistuneesti", 
+    "Successfully copied %(name)s and %(amount)s other items.": "Kopioitiin onnistuneesti %(name)s ja %(amount)s muuta kohdetta.", 
+    "Successfully copied %(name)s and 1 other item.": "Kopioitiin onnistuneesti %(name)s ja 1 muu kohde.", 
+    "Successfully copied %(name)s.": "%(name)s kopioitiin onnistuneesti.", 
+    "Successfully deleted %(name)s": "%(name)s poistettu onnistuneesti", 
+    "Successfully deleted %(name)s and %(amount)s other items.": "Poistettu onnistuneesti %(name)s ja %(amount)s muuta kohdetta.", 
+    "Successfully deleted %(name)s and 1 other item.": "Poistettu onnistuneesti %(name)s ja 1 muu kohde.", 
+    "Successfully deleted %(name)s.": "Poistettu onnistuneesti %(name)s", 
+    "Successfully imported.": "Tuonti onnistui.", 
+    "Successfully moved %(name)s": "Kohde %(name)s siirretty onnistuneesti", 
+    "Successfully moved %(name)s and %(amount)s other items.": "Siirrettiin onnistuneesti %(name)s ja %(amount)s muuta kohdetta.", 
+    "Successfully moved %(name)s and 1 other item.": "Siirrettiin onnistuneesti %(name)s ja 1 muu kohde.", 
+    "Successfully moved %(name)s.": "%(name)s siirretty onnistuneesti.", 
+    "Successfully sent to {placeholder}": "L\u00e4hetetty onnistuneesti kohteeseen {placeholder}", 
+    "Successfully set library history.": "Kirjaston historia asetettu onnistuneesti.", 
+    "Successfully transferred the group. You are now a normal member of the group.": "Ryhm\u00e4n vaihto onnistui. Olet nyt ryhm\u00e4n perusk\u00e4ytt\u00e4j\u00e4.", 
+    "Successfully transferred the library.": "Kirjasto siirretty onnistuneesti.", 
+    "Successfully unlink %(name)s.": "Kohteen %(name)s linkki poistettu onnistuneesti", 
+    "Successfully unstared {placeholder}": "Suosikki {placeholder} poistettu onnistuneesti", 
+    "Transfer Library {library_name} To": "Siirr\u00e4 kirjasto {library_name} kohteeseen", 
+    "Uploaded bytes exceed file size": "L\u00e4htetyt tavut ylitt\u00e4v\u00e4t tiedoston koon", 
+    "You can only select 1 item": "Voit valita vain yhden kohteen", 
+    "You cannot select any more choices": "Et voi tehd\u00e4 enemp\u00e4\u00e4 valintoja", 
+    "canceled": "peruutettu", 
+    "locked by {placeholder}": "lukittu {placeholder} toimesta", 
+    "uploaded": "l\u00e4hetetty", 
+    "{placeholder} Folder Permission": "{placeholder} Kansion oikeus", 
+    "{placeholder} History Setting": "{placeholder} Historia-asetukset", 
+    "{placeholder} Members": "{placeholder} J\u00e4senet", 
+    "{placeholder} Share Links": "{placeholder} Jakolinkit"
+  };
+
+  django.gettext = function (msgid) {
+    var value = django.catalog[msgid];
+    if (typeof(value) == 'undefined') {
+      return msgid;
+    } else {
+      return (typeof(value) == 'string') ? value : value[0];
+    }
+  };
+
+  django.ngettext = function (singular, plural, count) {
+    var value = django.catalog[singular];
+    if (typeof(value) == 'undefined') {
+      return (count == 1) ? singular : plural;
+    } else {
+      return value[django.pluralidx(count)];
+    }
+  };
+
+  django.gettext_noop = function (msgid) { return msgid; };
+
+  django.pgettext = function (context, msgid) {
+    var value = django.gettext(context + '\x04' + msgid);
+    if (value.indexOf('\x04') != -1) {
+      value = msgid;
+    }
+    return value;
+  };
+
+  django.npgettext = function (context, singular, plural, count) {
+    var value = django.ngettext(context + '\x04' + singular, context + '\x04' + plural, count);
+    if (value.indexOf('\x04') != -1) {
+      value = django.ngettext(singular, plural, count);
+    }
+    return value;
+  };
+  
+
+  django.interpolate = function (fmt, obj, named) {
+    if (named) {
+      return fmt.replace(/%\(\w+\)s/g, function(match){return String(obj[match.slice(2,-2)])});
+    } else {
+      return fmt.replace(/%s/g, function(match){return String(obj.shift())});
+    }
+  };
+
+
+  /* formatting library */
+
+  django.formats = {
+    "DATETIME_FORMAT": "j. E Y \\k\\e\\l\\l\\o G.i", 
+    "DATETIME_INPUT_FORMATS": [
+      "%d.%m.%Y %H.%M.%S", 
+      "%d.%m.%Y %H.%M.%S.%f", 
+      "%d.%m.%Y %H.%M", 
+      "%d.%m.%Y", 
+      "%d.%m.%y %H.%M.%S", 
+      "%d.%m.%y %H.%M.%S.%f", 
+      "%d.%m.%y %H.%M", 
+      "%d.%m.%y", 
+      "%Y-%m-%d %H:%M:%S", 
+      "%Y-%m-%d %H:%M:%S.%f", 
+      "%Y-%m-%d %H:%M", 
+      "%Y-%m-%d"
+    ], 
+    "DATE_FORMAT": "j. E Y", 
+    "DATE_INPUT_FORMATS": [
+      "%d.%m.%Y", 
+      "%d.%m.%y", 
+      "%Y-%m-%d"
+    ], 
+    "DECIMAL_SEPARATOR": ",", 
+    "FIRST_DAY_OF_WEEK": "1", 
+    "MONTH_DAY_FORMAT": "j. F", 
+    "NUMBER_GROUPING": "3", 
+    "SHORT_DATETIME_FORMAT": "j.n.Y G.i", 
+    "SHORT_DATE_FORMAT": "j.n.Y", 
+    "THOUSAND_SEPARATOR": "\u00a0", 
+    "TIME_FORMAT": "G.i", 
+    "TIME_INPUT_FORMATS": [
+      "%H.%M.%S", 
+      "%H.%M.%S.%f", 
+      "%H.%M", 
+      "%H:%M:%S", 
+      "%H:%M:%S.%f", 
+      "%H:%M"
+    ], 
+    "YEAR_MONTH_FORMAT": "F Y"
+  };
+
+  django.get_format = function (format_type) {
+    var value = django.formats[format_type];
+    if (typeof(value) == 'undefined') {
+      return format_type;
+    } else {
+      return value;
+    }
+  };
+
+  /* add to global namespace */
+  globals.pluralidx = django.pluralidx;
+  globals.gettext = django.gettext;
+  globals.ngettext = django.ngettext;
+  globals.gettext_noop = django.gettext_noop;
+  globals.pgettext = django.pgettext;
+  globals.npgettext = django.npgettext;
+  globals.interpolate = django.interpolate;
+  globals.get_format = django.get_format;
+
+}(this));
+

static/scripts/sysadmin-app/collection/group-members.js

@@ -0,0 +1,29 @@
+define([
+    'underscore',
+    'backbone',
+    'common',
+    'sysadmin-app/models/group-member'
+], function(_, Backbone, Common, GroupMemberModel) {
+
+    'use strict';
+
+    var GroupMemberCollection = Backbone.Collection.extend({
+
+        model: GroupMemberModel,
+
+        setGroupId: function(group_id) {
+            this.group_id = group_id;
+        },
+
+        parse: function (data) {
+            this.group_name= data.group_name;
+            return data.members; // return the array
+        },
+
+        url: function () {
+            return Common.getUrl({name: 'admin-group-members', group_id: this.group_id});
+        }
+    });
+
+    return GroupMemberCollection;
+});

static/scripts/sysadmin-app/collection/group-repos.js

@@ -0,0 +1,29 @@
+define([
+    'underscore',
+    'backbone',
+    'common',
+    'sysadmin-app/models/group-repo'
+], function(_, Backbone, Common, GroupRepoModel) {
+
+    'use strict';
+
+    var GroupRepoCollection = Backbone.Collection.extend({
+
+        model: GroupRepoModel,
+
+        setGroupId: function(group_id) {
+            this.group_id = group_id;
+        },
+
+        parse: function (data) {
+            this.group_name= data.group_name;
+            return data.libraries; // return the array
+        },
+
+        url: function () {
+            return Common.getUrl({name: 'admin-group-libraries', group_id: this.group_id});
+        }
+    });
+
+    return GroupRepoCollection;
+});

static/scripts/sysadmin-app/collection/search-groups.js

@@ -0,0 +1,24 @@
+define([
+    'underscore',
+    'backbone',
+    'common',
+    'sysadmin-app/models/group'
+], function(_, Backbone, Common, GroupModel) {
+    'use strict';
+
+    var GroupCollection = Backbone.Collection.extend({
+
+        model: GroupModel,
+
+        url: function () {
+            return Common.getUrl({name: 'admin-groups'});
+        },
+
+        parse: function(data) {
+            this.search_name = data.name;
+            return data.groups;
+        }
+    });
+
+    return GroupCollection;
+});

static/scripts/sysadmin-app/models/group-member.js

@@ -0,0 +1,12 @@
+define([
+    'underscore',
+    'backbone',
+    'common'
+], function(_, Backbone, Common) {
+
+    'use strict';
+
+    var GroupMember = Backbone.Model.extend({});
+
+    return GroupMember;
+});

static/scripts/sysadmin-app/models/group-repo.js

@@ -0,0 +1,25 @@
+define([
+    'underscore',
+    'backbone',
+    'common'
+], function(_, Backbone, Common) {
+
+    'use strict';
+
+    var GroupRepo = Backbone.Model.extend({
+
+        getIconUrl: function(size) {
+            var is_encrypted = this.get('encrypted');
+            var is_readonly = this.get('permission') == "r" ? true : false;
+            return Common.getLibIconUrl(is_encrypted, is_readonly, size);
+        },
+
+        getIconTitle: function() {
+            var is_encrypted = this.get('encrypted');
+            var is_readonly = this.get('permission') == "r" ? true : false;
+            return Common.getLibIconTitle(is_encrypted, is_readonly);
+        }
+    });
+
+    return GroupRepo;
+});

static/scripts/sysadmin-app/models/repo.js

@@ -12,14 +12,8 @@ define([
         },
 
         getIconTitle: function() {
-            var icon_title = '';
-            if (this.get('encrypted')) {
-                icon_title = gettext("Encrypted library");
-            } else {
-                icon_title = gettext("Read-Write library");
-            }
-
-            return icon_title;
+            var is_encrypted = this.get('encrypted');
+            return Common.getLibIconTitle(is_encrypted, false);
         }
     });
 

static/scripts/sysadmin-app/router.js

@@ -15,11 +15,15 @@ define([
     'sysadmin-app/views/search-trash-repos',
     'sysadmin-app/views/dir',
     'sysadmin-app/views/groups',
+    'sysadmin-app/views/search-groups',
+    'sysadmin-app/views/group-repos',
+    'sysadmin-app/views/group-members',
     'app/views/account'
 ], function($, Backbone, Common, SideNavView, DashboardView,
     DesktopDevicesView, MobileDevicesView, DeviceErrorsView,
     ReposView, SearchReposView, SystemReposView, TrashReposView,
-    SearchTrashReposView, DirView, GroupsView, AccountView) {
+    SearchTrashReposView, DirView, GroupsView, SearchGroupsView,
+    GroupReposView, GroupMembersView, AccountView) {
 
     "use strict";
 
@@ -37,6 +41,9 @@ define([
             'search-trash-libs/': 'showSearchTrashLibraries',
             'libs/:repo_id(/*path)': 'showLibraryDir',
             'groups/': 'showGroups',
+            'search-groups/': 'showSearchGroups',
+            'groups/:group_id/libs/': 'showGroupLibraries',
+            'groups/:group_id/members/': 'showGroupMembers',
             // Default
             '*actions': 'showDashboard'
         },
@@ -65,6 +72,9 @@ define([
             this.dirView = new DirView();
 
             this.groupsView = new GroupsView();
+            this.searchGroupsView = new SearchGroupsView();
+            this.groupReposView = new GroupReposView();
+            this.groupMembersView = new GroupMembersView();
 
             app.ui.accountView = this.accountView = new AccountView();
 
@@ -189,6 +199,30 @@ define([
             this.switchCurrentView(this.groupsView);
             this.sideNavView.setCurTab('groups');
             this.groupsView.show({'page': page});
+        },
+
+        showSearchGroups: function() {
+            // url_match: null or an array
+            var url_match = location.href.match(/.*?name=(.*)/); // search by group_name
+            var group_name = url_match ? url_match[1] : '';
+
+            this.switchCurrentView(this.searchGroupsView);
+            this.sideNavView.setCurTab('groups', {'option': 'search'});
+            this.searchGroupsView.show({
+                'name': decodeURIComponent(group_name)
+            });
+        },
+
+        showGroupLibraries: function(group_id) {
+            this.switchCurrentView(this.groupReposView);
+            this.sideNavView.setCurTab('groups');
+            this.groupReposView.show(group_id);
+        },
+
+        showGroupMembers: function(group_id) {
+            this.switchCurrentView(this.groupMembersView);
+            this.sideNavView.setCurTab('groups');
+            this.groupMembersView.show(group_id);
         }
 
     });

static/scripts/sysadmin-app/views/dashboard.js

@@ -61,7 +61,9 @@ define([
 
         reset: function() {
             this.$loadingTip.hide();
-            this.$sysinfo.html(this.template(this.sysinfo.toJSON()));
+            var json_data = this.sysinfo.toJSON();
+            json_data['formatted_storage'] = Common.quotaSizeFormat(json_data['total_storage'], 1)
+            this.$sysinfo.html(this.template(json_data));
         }
 
     });

static/scripts/sysadmin-app/views/group-member.js

@@ -0,0 +1,118 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'app/views/widgets/hl-item-view'
+], function($, _, Backbone, Common, HLItemView) {
+
+    'use strict';
+
+    var GroupMemberView = HLItemView.extend({
+
+        tagName: 'tr',
+
+        template: _.template($('#group-member-item-tmpl').html()),
+
+        events: {
+            'click .user-role-edit-icon': 'showEdit',
+            'change .user-role-select': 'editRole',
+            'click .member-delete-btn': 'deleteGroupMember'
+        },
+
+        initialize: function() {
+            HLItemView.prototype.initialize.call(this);
+            this.listenTo(this.model, 'change', this.render);
+
+            var _this = this;
+            $(document).on('click', function(e) {
+                var target = e.target || event.srcElement;
+                if (!_this.$('.user-role-edit-icon, .user-role-select').is(target)) {
+                    _this.$('.cur-role, .user-role-edit-icon').show();
+                    _this.$('.user-role-select').hide();
+                }
+            });
+        },
+
+        showEdit: function() {
+            this.$('.cur-role, .user-role-edit-icon').hide();
+            this.$('.user-role-select').show();
+        },
+
+        editRole: function() {
+            var _this = this;
+
+            // '0': member, '1': admin
+            var val = this.$('[name="role"]').val();
+            var is_admin = val == 1 ? true : false;
+            $.ajax({
+                url: Common.getUrl({
+                    'name': 'admin-group-member',
+                    'group_id': _this.model.get('group_id'),
+                    'email': _this.model.get('email')
+                }),
+                type: 'put',
+                dataType: 'json',
+                beforeSend: Common.prepareCSRFToken,
+                data: {
+                    'is_admin': is_admin
+                },
+                success: function(data) {
+                    _this.model.set({
+                        'is_admin': data['is_admin'],
+                        'role': data['role']
+                    });
+                },
+                error: function(xhr) {
+                    var err_msg;
+                    if (xhr.responseText) {
+                        err_msg = $.parseJSON(xhr.responseText).error_msg;
+                    } else {
+                        err_msg = gettext("Failed. Please check the network.");
+                    }
+                    Common.feedback(err_msg, 'error');
+                }
+            });
+        },
+
+        deleteGroupMember: function() {
+            var _this = this;
+            var email = this.model.get('email');
+            var popupTitle = gettext("Delete Member");
+            var popupContent = gettext("Are you sure you want to delete %s ?").replace('%s', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(email) + '">' + Common.HTMLescape(email) + '</span>');
+            var yesCallback = function() {
+                $.ajax({
+                    url: Common.getUrl({
+                        'name': 'admin-group-member',
+                        'group_id': _this.model.get('group_id'),
+                        'email': email
+                    }),
+                    type: 'DELETE',
+                    beforeSend: Common.prepareCSRFToken,
+                    dataType: 'json',
+                    success: function() {
+                        _this.$el.remove();
+                        var msg = gettext("Successfully deleted member {placeholder}").replace('{placeholder}', email);
+                        Common.feedback(msg, 'success');
+                    },
+                    error: function(xhr, textStatus, errorThrown) {
+                        Common.ajaxErrorHandler(xhr, textStatus, errorThrown);
+                    },
+                    complete: function() {
+                        $.modal.close();
+                    }
+                });
+            };
+            Common.showConfirm(popupTitle, popupContent, yesCallback);
+            return false;
+        },
+
+        render: function() {
+            this.$el.html(this.template(this.model.toJSON()));
+            return this;
+        }
+
+    });
+
+    return GroupMemberView;
+});

static/scripts/sysadmin-app/views/group-members.js

@@ -0,0 +1,187 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'sysadmin-app/views/group-member',
+    'sysadmin-app/collection/group-members'
+], function($, _, Backbone, Common, GroupMemberView, GroupMemberCollection) {
+
+    'use strict';
+
+    var GroupMembersView = Backbone.View.extend({
+
+        id: 'admin-groups',
+
+        tabNavTemplate: _.template($("#groups-tabnav-tmpl").html()),
+        template: _.template($("#group-members-tmpl").html()),
+        addMemberFormTemplate: _.template($('#add-group-member-form-tmpl').html()),
+
+        initialize: function() {
+            this.groupMemberCollection = new GroupMemberCollection();
+            this.listenTo(this.groupMemberCollection, 'add', this.addOne);
+            this.listenTo(this.groupMemberCollection, 'reset', this.reset);
+        },
+
+        events: {
+            'click #js-add-group-member': 'addGroupMember'
+        },
+
+        addGroupMember: function () {
+            var $form = $(this.addMemberFormTemplate()),
+                _this = this;
+
+            $form.modal();
+            $('#simplemodal-container').css({'height':'auto', 'width':'auto'});
+
+            $('[name="email"]', $form).select2($.extend(
+                Common.contactInputOptionsForSelect2(), {
+                width: '275px',
+                containerCss: {'margin-bottom': '5px'},
+                placeholder: gettext("Search user or enter email and press Enter")
+            }));
+
+            $form.submit(function() {
+                var group_id = _this.groupMemberCollection.group_id;
+                var emails = $.trim($('[name="email"]', $form).val());
+                var $error = $('.error', $form);
+                var $submitBtn = $('[type="submit"]', $form);
+
+                if (!emails) {
+                    $error.html(gettext("Email is required.")).show();
+                    return false;
+                }
+
+                var input_emails = [];
+                var emails_list = emails.split(',');
+                for (var i = 0; i < emails_list.length; i++) {
+                    input_emails.push(emails_list[i]);
+                }
+
+                $error.hide();
+                Common.disableButton($submitBtn);
+
+                $.ajax({
+                    url: Common.getUrl({
+                        'name': 'admin-group-members',
+                        'group_id': group_id
+                    }),
+                    type: 'POST',
+                    dataType: 'json',
+                    beforeSend: Common.prepareCSRFToken,
+                    traditional: true,
+                    data: {'email': input_emails},
+                    success: function(data) {
+                        if (data.success.length > 0) {
+                            _this.groupMemberCollection.add(data.success, {prepend: true});
+                        }
+
+                        var err_str = '';
+                        if (data.failed.length > 0) {
+                            $(data.failed).each(function(index, item) {
+                                err_str += Common.HTMLescape(item.email) + ': ' + Common.HTMLescape(item.error_msg) + '<br />';
+                            });
+                            $error.html(err_str).show();
+                            Common.enableButton($submitBtn);
+                        } else {
+                            Common.closeModal();
+                        }
+
+                    },
+                    error: function(jqXHR, textStatus, errorThrown){
+                        var err_msg;
+                        if (jqXHR.responseText) {
+                            err_msg = jqXHR.responseJSON.error_msg;
+                        } else {
+                            err_msg = gettext('Please check the network.');
+                        }
+                        $error.html(err_msg).show();
+                        Common.enableButton($submitBtn);
+                    }
+                });
+                return false;
+            });
+            return false;
+        },
+
+        render: function() {
+            var group_id = this.groupMemberCollection.group_id;
+            this.$el.html(this.tabNavTemplate({'cur_tab': 'members', 'group_id': group_id}) + this.template());
+
+            this.$table = this.$('table');
+            this.$tableBody = $('tbody', this.$table);
+            this.$loadingTip = this.$('.loading-tip');
+            this.$emptyTip = this.$('.empty-tips');
+        },
+
+        initPage: function() {
+            this.$table.hide();
+            this.$tableBody.empty();
+            this.$loadingTip.show();
+            this.$emptyTip.hide();
+        },
+
+        hide: function() {
+            this.$el.detach();
+            this.attached = false;
+        },
+
+        show: function(group_id) {
+            if (!this.attached) {
+                this.attached = true;
+                $("#right-panel").html(this.$el);
+            }
+
+            // init collection
+            this.groupMemberCollection.setGroupId(group_id);
+            this.render();
+            this.showGroupMembers();
+        },
+
+        showGroupMembers: function() {
+            this.initPage();
+            var _this = this;
+
+            this.groupMemberCollection.fetch({
+                cache: false,
+                reset: true,
+                error: function(collection, response, opts) {
+                    var err_msg;
+                    if (response.responseText) {
+                        if (response['status'] == 401 || response['status'] == 403) {
+                            err_msg = gettext("Permission error");
+                        } else {
+                            err_msg = $.parseJSON(response.responseText).error_msg;
+                        }
+                    } else {
+                        err_msg = gettext("Failed. Please check the network.");
+                    }
+                    Common.feedback(err_msg, 'error');
+                }
+            });
+        },
+
+        reset: function() {
+            this.$loadingTip.hide();
+            if (this.groupMemberCollection.length > 0) {
+                this.groupMemberCollection.each(this.addOne, this);
+                this.$table.show();
+            } else {
+                this.$emptyTip.show();
+            }
+            this.$('.path-bar').append(this.groupMemberCollection.group_name);
+        },
+
+        addOne: function(item, collection, options) {
+            var view = new GroupMemberView({model: item});
+            if (options.prepend) {
+                this.$tableBody.prepend(view.render().el);
+            } else {
+                this.$tableBody.append(view.render().el);
+            }
+        }
+    });
+
+    return GroupMembersView;
+
+});

static/scripts/sysadmin-app/views/group-repo.js

@@ -0,0 +1,75 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'app/views/widgets/hl-item-view'
+], function($, _, Backbone, Common, HLItemView) {
+
+    'use strict';
+
+    var GroupRepoView = HLItemView.extend({
+
+        tagName: 'tr',
+
+        template: _.template($('#group-library-item-tmpl').html()),
+
+        events: {
+            'click .repo-unshare-btn': 'unshareGroupLibrary'
+        },
+
+        initialize: function() {
+            HLItemView.prototype.initialize.call(this);
+        },
+
+        unshareGroupLibrary: function() {
+            var _this = this;
+            var repo_name = this.model.get('name');
+            var popupTitle = gettext("Unshare Library");
+            var popupContent = gettext("Are you sure you want to unshare %s ?").replace('%s', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(repo_name) + '">' + Common.HTMLescape(repo_name) + '</span>');
+            var yesCallback = function() {
+                $.ajax({
+                    url: Common.getUrl({
+                        'name': 'admin-group-library',
+                        'group_id': _this.model.get('group_id'),
+                        'repo_id': _this.model.get('repo_id')
+                    }),
+                    type: 'DELETE',
+                    beforeSend: Common.prepareCSRFToken,
+                    dataType: 'json',
+                    success: function() {
+                        _this.$el.remove();
+                        var msg = gettext("Successfully unshared library {placeholder}").replace('{placeholder}', repo_name);
+                        Common.feedback(msg, 'success');
+                    },
+                    error: function(xhr, textStatus, errorThrown) {
+                        Common.ajaxErrorHandler(xhr, textStatus, errorThrown);
+                    },
+                    complete: function() {
+                        $.modal.close();
+                    }
+                });
+            };
+            Common.showConfirm(popupTitle, popupContent, yesCallback);
+            return false;
+        },
+
+        render: function() {
+            var data = this.model.toJSON(),
+                icon_size = Common.isHiDPI() ? 96 : 24,
+                icon_url = this.model.getIconUrl(icon_size);
+
+            data['icon_url'] = icon_url;
+            data['icon_title'] = this.model.getIconTitle();
+            data['formatted_size'] = Common.fileSizeFormat(data['size'], 1),
+            data['enable_sys_admin_view_repo'] = app.pageOptions.enable_sys_admin_view_repo;
+            data['is_pro'] = app.pageOptions.is_pro;
+            this.$el.html(this.template(data));
+
+            return this;
+        }
+
+    });
+
+    return GroupRepoView;
+});

static/scripts/sysadmin-app/views/group-repos.js

@@ -0,0 +1,102 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'sysadmin-app/views/group-repo',
+    'sysadmin-app/collection/group-repos'
+], function($, _, Backbone, Common, GroupRepoView, GroupRepoCollection) {
+
+    'use strict';
+
+    var GroupReposView = Backbone.View.extend({
+
+        id: 'admin-groups',
+
+        tabNavTemplate: _.template($("#groups-tabnav-tmpl").html()),
+        template: _.template($("#group-libraries-tmpl").html()),
+
+        initialize: function() {
+            this.groupRepoCollection = new GroupRepoCollection();
+            this.listenTo(this.groupRepoCollection, 'add', this.addOne);
+            this.listenTo(this.groupRepoCollection, 'reset', this.reset);
+        },
+
+        render: function() {
+            var group_id = this.groupRepoCollection.group_id;
+            this.$el.html(this.tabNavTemplate({'cur_tab': 'libs', 'group_id': group_id}) + this.template());
+
+            this.$table = this.$('table');
+            this.$tableBody = $('tbody', this.$table);
+            this.$loadingTip = this.$('.loading-tip');
+            this.$emptyTip = this.$('.empty-tips');
+        },
+
+        initPage: function() {
+            this.$table.hide();
+            this.$tableBody.empty();
+            this.$loadingTip.show();
+            this.$emptyTip.hide();
+        },
+
+        hide: function() {
+            this.$el.detach();
+            this.attached = false;
+        },
+
+        show: function(group_id) {
+            if (!this.attached) {
+                this.attached = true;
+                $("#right-panel").html(this.$el);
+            }
+
+            // init collection
+            this.groupRepoCollection.setGroupId(group_id);
+            this.render();
+            this.showGroupLibraries();
+        },
+
+        showGroupLibraries: function() {
+            this.initPage();
+            var _this = this;
+
+            this.groupRepoCollection.fetch({
+                cache: false,
+                reset: true,
+                error: function(collection, response, opts) {
+                    var err_msg;
+                    if (response.responseText) {
+                        if (response['status'] == 401 || response['status'] == 403) {
+                            err_msg = gettext("Permission error");
+                        } else {
+                            err_msg = $.parseJSON(response.responseText).error_msg;
+                        }
+                    } else {
+                        err_msg = gettext("Failed. Please check the network.");
+                    }
+                    Common.feedback(err_msg, 'error');
+                }
+            });
+        },
+
+        reset: function() {
+            this.$loadingTip.hide();
+            if (this.groupRepoCollection.length > 0) {
+                this.groupRepoCollection.each(this.addOne, this);
+                this.$table.show();
+            } else {
+                this.$emptyTip.show();
+            }
+
+            this.$('.path-bar').append(this.groupRepoCollection.group_name);
+        },
+
+        addOne: function(library) {
+            var view = new GroupRepoView({model: library});
+            this.$tableBody.append(view.render().el);
+        }
+    });
+
+    return GroupReposView;
+
+});

static/scripts/sysadmin-app/views/search-groups.js

@@ -0,0 +1,119 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'sysadmin-app/views/group',
+    'sysadmin-app/collection/search-groups'
+], function($, _, Backbone, Common, GroupView, GroupCollection) {
+    'use strict';
+
+    var GroupsView = Backbone.View.extend({
+
+        id: 'search-groups',
+
+        template: _.template($("#search-groups-tmpl").html()),
+
+        initialize: function() {
+            this.groupCollection = new GroupCollection();
+            this.listenTo(this.groupCollection, 'add', this.addOne);
+            this.listenTo(this.groupCollection, 'reset', this.reset);
+            this.render();
+        },
+
+        render: function() {
+            this.$el.append(this.template());
+
+            this.$form = this.$('#search-group-form');
+            this.$name = $('[name="name"]', this.$form);
+
+            this.$table = this.$('table');
+            this.$tableBody = $('tbody', this.$table);
+            this.$loadingTip = this.$('.loading-tip');
+            this.$emptyTip = this.$('.empty-tips');
+        },
+
+        events: {
+            'submit #search-group-form': 'formSubmit'
+        },
+
+        initPage: function() {
+            this.$table.hide();
+            this.$tableBody.empty();
+            this.$loadingTip.show();
+            this.$emptyTip.hide();
+        },
+
+        hide: function() {
+            this.$el.detach();
+            this.attached = false;
+        },
+
+        show: function(option) {
+            if (!this.attached) {
+                this.attached = true;
+                $("#right-panel").html(this.$el);
+            }
+            this.getContent(option);
+        },
+
+        getContent: function(obj) {
+            this.initPage();
+            var _this = this;
+            this.groupCollection.fetch({
+                data: obj,
+                cache: false,
+                reset: true,
+                error: function(collection, response, opts) {
+                    var err_msg;
+                    if (response.responseText) {
+                        if (response['status'] == 401 || response['status'] == 403) {
+                            err_msg = gettext("Permission error");
+                        } else {
+                            err_msg = $.parseJSON(response.responseText).error_msg;
+                        }
+                    } else {
+                        err_msg = gettext("Failed. Please check the network.");
+                    }
+                    Common.feedback(err_msg, 'error');
+                },
+                complete:function() {
+                    _this.$loadingTip.hide();
+                }
+            });
+        },
+
+        reset: function() {
+            var name = this.groupCollection.search_name;
+            app.router.navigate('#search-groups/?name=' + encodeURIComponent(name));
+            this.$name.val(name);
+
+            this.$loadingTip.hide();
+            if (this.groupCollection.length > 0) {
+                this.groupCollection.each(this.addOne, this);
+                this.$table.show();
+            } else {
+                this.$emptyTip.show();
+            }
+        },
+
+        addOne: function(group) {
+            var view = new GroupView({model: group});
+            this.$tableBody.append(view.render().el);
+        },
+
+        formSubmit: function() {
+            var name = $.trim(this.$name.val());
+
+            if (!name) {
+                return false;
+            }
+
+            this.getContent({'name': name});
+            return false;
+        }
+    });
+
+    return GroupsView;
+
+});

static/scripts/sysadmin-app/views/side-nav.js

@@ -35,13 +35,14 @@ define([
 
         events: {
             'submit #libs-search-form': 'searchLibs', // for 'all' libs
-            'submit #trash-libs-search-form': 'searchTrashLibs'
+            'submit #trash-libs-search-form': 'searchTrashLibs',
+            'submit #groups-search-form': 'searchGroups'
         },
 
         // search libs by repo_name
         searchLibs: function() {
             var $form = this.$('#libs-search-form');
-            var name = $.trim($('[name="name"]', $form).val()); 
+            var name = $.trim($('[name="name"]', $form).val());
             if (!name) {
                 return false;
             }
@@ -54,7 +55,7 @@ define([
         // search trash libs by owner
         searchTrashLibs: function() {
             var $form = this.$('#trash-libs-search-form');
-            var owner = $.trim($('[name="name"]', $form).val()); 
+            var owner = $.trim($('[name="name"]', $form).val());
             if (!owner) {
                 return false;
             }
@@ -62,6 +63,18 @@ define([
             var url = $form.attr('action') + '?name=' + encodeURIComponent(owner);
             location.href = url;
             return false; // necessary
+        },
+
+        searchGroups: function() {
+            var $form = this.$('#groups-search-form');
+            var name = $.trim($('[name="name"]', $form).val());
+            if (!name) {
+                return false;
+            }
+
+            var url = $form.attr('action') + '?name=' + encodeURIComponent(name);
+            location.href = url;
+            return false; // necessary
         }
 
     });