Adding extra information page for the User Preferences

client/galaxy/scripts/mvc/user/extra-information.js

@@ -0,0 +1,50 @@
+/** Get extra information */
+define([], function() {
+
+var ExtraInformation = Backbone.View.extend({
+
+    initialize: function ( data ) {
+        this.render( data );
+    },
+
+    /** renders the markup of extra information */
+    render: function( data ) {
+        var template = "",
+            self = this;
+        $( '.user-pref' ).css( 'display', 'none' );
+        template = template + '<div class="extra-information-section"> <h2>Extra Information</h2>';
+        template = template + '<ul class="manage-table-actions"> <li>' +
+                              '<a class="action-button back-user-pref" target="galaxy_main">User preferences</a>' +
+                       '</li></ul>';
+
+        template = template + '<div class="toolForm">' +
+                   '<form name="extra_information" id="extra_information">' +
+                       '<div class="toolFormTitle">Extra Information</div>';
+        for( var item in data["preferences"] ) {
+            var item_object = data["preferences"][item];
+            template = template + '<div class="form-row">';
+            template = template + "<label>" + item_object["description"] + ":</label>";
+            for( var i = 0; i < item_object["inputs"].length; i++ ) {
+                var input_object = item_object["inputs"][i];
+                template = template + '<div class="form-row">';
+                template = template + '<input type="'+ (input_object.type === "string" ? "text" : input_object.type) +
+                           '" name="'+ input_object.name +'" value="" '+ (input_object.required ? 'required': '') + '/>';
+                template = template + '</div>';
+            }
+            template = template + '</div>';
+        }
+        template = template + '</div></form></div></div>';
+        $('.user-preferences-all').append( template );
+        $('.back-user-pref').on( 'click', function( e ) {
+             $('.extra-information-section').remove();
+             $( '.user-pref' ).show();
+        });
+    }
+});
+
+return {
+    ExtraInformation: ExtraInformation
+};
+
+});
+

client/galaxy/scripts/mvc/user/user-preferences.js

@@ -1,5 +1,8 @@
 /** User Preferences view */
-define(['mvc/user/manage-user-information', 'mvc/user/change-password'], function( Manage, Password ) {
+define(['mvc/user/manage-user-information',
+        'mvc/user/change-password',
+        'mvc/user/extra-information'], 
+function( Manage, Password, ExtraInformation ) {
 var UserPreferences = Backbone.View.extend({
 
     initialize: function ( ) {
@@ -22,11 +25,19 @@ var UserPreferences = Backbone.View.extend({
         $( '.user-pref' ).css( 'display', 'none' );
         var url = Galaxy.root + 'api/user_preferences/change_password';
         $.getJSON( url, function( data ) {
-            console.log( data );
             changePassword = new Password.ChangePassword( data );     
         });
     },
 
+    /** redirects to change password view */
+    callExtraInformation: function( e ) {
+        $( '.user-pref' ).css( 'display', 'none' );
+        var url = Galaxy.root + 'api/user_preferences/get_extra_preferences';
+        $.getJSON( url, function( data ) {
+            extraInformation = new ExtraInformation.ExtraInformation( data );     
+        });
+    },
+
     /** fetch data for user preferences */
     getUserPreferencesData: function() {
         var url = Galaxy.root + 'api/user_preferences',
@@ -49,7 +60,8 @@ var UserPreferences = Backbone.View.extend({
                 if( !data["remote_user"] ) {
                        template = template +
                        "<li><a target='galaxy_main' class='manage-userinfo'>Manage your information</a> (email, address, etc.) </li>" + 
-                       "<li><a target='galaxy_main' class='change-password'>Change your password</a> </li>";
+                       "<li><a target='galaxy_main' class='change-password'>Change your password</a> </li>" + 
+                       "<li><a target='galaxy_main' class='extra-information'>Extra information</a> </li>";
                 }
                 template = template + 
                            "<li><a target='galaxy_main' class='change-permissions'>Change default permissions</a> for new histories </li>" + 
@@ -69,6 +81,7 @@ var UserPreferences = Backbone.View.extend({
                            "<li><a target='galaxy_main' class='change-password'> Change your password </a> </li>" + 
                            "<li><a target='galaxy_main' class='manage-api-keys'> Manage your API keys </a> </li>" + 
                            "<li><a target='galaxy_main' class='manage-email-alert'> Manage your email alerts </a> </li>" + 
+                           "<li><a target='galaxy_main' class='extra-information'>Extra information</a> </li>" +
                            "<li><a target='galaxy_main' class='logout-user'> Logout </a> of all user sessions </li>";
             }
             template = template + "</ul>";
@@ -98,6 +111,7 @@ var UserPreferences = Backbone.View.extend({
         $( "#center-panel" ).html(template);
         $( ".manage-userinfo" ).on( "click", self.callManageInfo );
         $( ".change-password" ).on( "click", self.callChangePassword );
+        $( ".extra-information" ).on( "click", self.callExtraInformation );
     }
 });
 

client/galaxy/style/less/base.less

@@ -1723,7 +1723,8 @@ div.toolTitleNoSection
 // for user preferences javascript files
 .manage-userinfo, 
 .link-filter, 
-.change-password {
+.change-password,
+.extra-information {
     cursor: pointer;
 }