auth-plugins: updated UI for authentication plugins, and allow unsorted (in order of registration) display of plugins.

rhodecode/authentication/routes.py

@@ -1,150 +1,155 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2012-2018 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 import logging
+import collections
 
 from pyramid.exceptions import ConfigurationError
 
 from rhodecode.lib.utils2 import safe_str
 from rhodecode.model.settings import SettingsModel
 from rhodecode.translation import _
 
 
 log = logging.getLogger(__name__)
 
 
 class AuthnResourceBase(object):
     __name__ = None
     __parent__ = None
 
     def get_root(self):
         current = self
         while current.__parent__ is not None:
             current = current.__parent__
         return current
 
 
 class AuthnPluginResourceBase(AuthnResourceBase):
 
     def __init__(self, plugin):
         self.plugin = plugin
         self.__name__ = plugin.get_url_slug()
         self.display_name = plugin.get_display_name()
 
 
 class AuthnRootResource(AuthnResourceBase):
     """
     This is the root traversal resource object for the authentication settings.
     """
 
     def __init__(self):
-        self._store = {}
+        self._store = collections.OrderedDict()
         self._resource_name_map = {}
         self.display_name = _('Global')
 
     def __getitem__(self, key):
         """
         Customized get item function to return only items (plugins) that are
         activated.
         """
         if self._is_item_active(key):
             return self._store[key]
         else:
             raise KeyError('Authentication plugin "{}" is not active.'.format(
                 key))
 
     def __iter__(self):
         for key in self._store.keys():
             if self._is_item_active(key):
                 yield self._store[key]
 
     def _is_item_active(self, key):
         activated_plugins = SettingsModel().get_auth_plugins()
         plugin_id = self.get_plugin_id(key)
         return plugin_id in activated_plugins
 
     def get_plugin_id(self, resource_name):
         """
         Return the plugin id for the given traversal resource name.
         """
         # TODO: Store this info in the resource element.
         return self._resource_name_map[resource_name]
 
     def get_sorted_list(self):
         """
         Returns a sorted list of sub resources for displaying purposes.
         """
         def sort_key(resource):
             return str.lower(safe_str(resource.display_name))
 
         active = [item for item in self]
         return sorted(active, key=sort_key)
 
-    def get_nav_list(self):
+    def get_nav_list(self, sort=True):
         """
         Returns a sorted list of resources for displaying the navigation.
         """
-        list = self.get_sorted_list()
-        list.insert(0, self)
-        return list
+        if sort:
+            nav_list = self.get_sorted_list()
+        else:
+            nav_list = [item for item in self]
+
+        nav_list.insert(0, self)
+        return nav_list
 
     def add_authn_resource(self, config, plugin_id, resource):
         """
         Register a traversal resource as a sub element to the authentication
         settings. This method is registered as a directive on the pyramid
         configurator object and called by plugins.
         """
 
         def _ensure_unique_name(name, limit=100):
             counter = 1
             current = name
             while current in self._store.keys():
                 current = '{}{}'.format(name, counter)
                 counter += 1
                 if counter > limit:
                     raise ConfigurationError(
                         'Cannot build unique name for traversal resource "%s" '
                         'registered by plugin "%s"', name, plugin_id)
             return current
 
         # Allow plugin resources with identical names by rename duplicates.
         unique_name = _ensure_unique_name(resource.__name__)
         if unique_name != resource.__name__:
             log.warn('Name collision for traversal resource "%s" registered '
                      'by authentication plugin "%s"', resource.__name__,
                      plugin_id)
             resource.__name__ = unique_name
 
         log.debug('Register traversal resource "%s" for plugin "%s"',
                   unique_name, plugin_id)
         self._resource_name_map[unique_name] = plugin_id
         resource.__parent__ = self
         self._store[unique_name] = resource
 
 
 root = AuthnRootResource()
 
 
 def root_factory(request=None):
     """
     Returns the root traversal resource instance used for the authentication
     settings route.
     """
     return root

rhodecode/templates/admin/auth/auth_settings.mako

@@ -1,118 +1,124 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('Authentication Settings')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${h.link_to(_('Admin'),h.route_path('admin_home'))}
     &raquo;
     ${_('Authentication Plugins')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
 <%def name="main()">
 
 <div class="box">
   <div class="title">
     ${self.breadcrumbs()}
   </div>
 
   <div class='sidebar-col-wrapper'>
 
     <div class="sidebar">
         <ul class="nav nav-pills nav-stacked">
-          % for item in resource.get_root().get_nav_list():
+          % for item in resource.get_root().get_nav_list(sort=False):
             <li ${'class=active' if item == resource else ''}>
               <a href="${request.resource_path(item, route_name='auth_home')}">${item.display_name}</a>
             </li>
           % endfor
         </ul>
     </div>
 
     <div class="main-content-full-width">
       ${h.secure_form(request.resource_path(resource, route_name='auth_home'), request=request)}
-      <div class="form">
-
         <div class="panel panel-default">
 
           <div class="panel-heading">
             <h3 class="panel-title">${_("Enabled and Available Plugins")}</h3>
           </div>
 
-          <div class="fields panel-body">
+          <div class="panel-body">
 
-            <div class="field">
-              <div class="label">${_("Enabled Plugins")}</div>
+
+              <div class="label">${_("Ordered Enabled Plugins")}</div>
               <div class="textarea text-area editor">
-                  ${h.textarea('auth_plugins',cols=23,rows=5,class_="medium")}
+                  ${h.textarea('auth_plugins',cols=120,rows=20,class_="medium")}
               </div>
-              <p class="help-block pre-formatting">${_('List of plugins, separated by commas.'
+              <div class="field">
+                <p class="help-block pre-formatting">${_('List of plugins, separated by commas.'
                   '\nThe order of the plugins is also the order in which '
-                  'RhodeCode Enterprise will try to authenticate a user.')}</p>
-            </div>
+                  'RhodeCode Enterprise will try to authenticate a user.')}
+                </p>
+              </div>
 
-            <div class="field">
-              <div class="label">${_('Available Built-in Plugins')}</div>
-              <ul class="auth_plugins">
-              %for plugin in available_plugins:
-                  <li>
-                    <div class="auth_buttons">
-                        <span plugin_id="${plugin.get_id()}" class="toggle-plugin btn ${'btn-success' if plugin.get_id() in enabled_plugins else ''}">
-                          ${_('enabled') if plugin.get_id() in enabled_plugins else _('disabled')}
-                        </span>
-                        ${plugin.get_display_name()} (${plugin.get_id()})
-                    </div>
-                  </li>
-              %endfor
-              </ul>
-            </div>
+              <table class="rctable">
+                  <th>${_('Activate')}</th>
+                  <th>${_('Plugin Name')}</th>
+                  <th>${_('Documentation')}</th>
+                  <th>${_('Plugin ID')}</th>
+                  %for plugin in available_plugins:
+                      <tr>
+                          <td>
+                            <span plugin_id="${plugin.get_id()}" class="toggle-plugin btn ${'btn-success' if plugin.get_id() in enabled_plugins else ''}">
+                              ${_('enabled') if plugin.get_id() in enabled_plugins else _('disabled')}
+                            </span>
+                          </td>
+                          <td>${plugin.get_display_name()}</td>
+                          <td>
+                              % if plugin.docs():
+                                <a href="${plugin.docs()}">docs</a>
+                              % endif
+                          </td>
+                          <td>${plugin.get_id()}</td>
+                      </tr>
+                  %endfor
+              </table>
 
             <div class="buttons">
               ${h.submit('save',_('Save'),class_="btn")}
             </div>
           </div>
         </div>
-      </div>
       ${h.end_form()}
     </div>
   </div>
 </div>
 
 <script>
   $('.toggle-plugin').click(function(e){
     var auth_plugins_input = $('#auth_plugins');
     var elems = [];
 
     $.each(auth_plugins_input.val().split(',') , function (index, element) {
         if (element !== "") {
             elems.push(element.strip())
         }
     });
 
     var cur_button = e.currentTarget;
     var plugin_id = $(cur_button).attr('plugin_id');
     if($(cur_button).hasClass('btn-success')){
       elems.splice(elems.indexOf(plugin_id), 1);
       auth_plugins_input.val(elems.join(',\n'));
       $(cur_button).removeClass('btn-success');
       cur_button.innerHTML = _gettext('disabled');
     }
     else{
       if(elems.indexOf(plugin_id) == -1){
         elems.push(plugin_id);
       }
       auth_plugins_input.val(elems.join(',\n'));
       $(cur_button).addClass('btn-success');
       cur_button.innerHTML = _gettext('enabled');
     }
   });
 </script>
 </%def>

rhodecode/templates/admin/settings/settings_global.mako

@@ -1,323 +1,323 b''
 ${h.secure_form(h.route_path('admin_settings_global_update'), request=request)}
 
 <div class="panel panel-default">
     <div class="panel-heading" id="branding-options">
         <h3 class="panel-title">${_('Branding')} <a class="permalink" href="#branding-options"> ¶</a></h3>
     </div>
     <div class="panel-body">
         <div class="label">
             <label for="rhodecode_title">${_('Title')}</label>
         </div>
         <div class="field input">
             ${h.text('rhodecode_title',size=60)}
         </div>
         <div class="field">
             <span class="help-block">
                 ${_('Set a custom title for your RhodeCode instance (limited to 40 characters).')}
             </span>
         </div>
         <div class="label">
             <label for="rhodecode_realm">${_('HTTP[S] authentication realm')}</label>
         </div>
         <div class="field input">
             ${h.text('rhodecode_realm',size=60)}
         </div>
         <div class="field">
             <span class="help-block">
                 ${_('Set a custom text that is shown as authentication message to clients trying to connect.')}
             </span>
         </div>
     </div>
 </div>
 
 
 <div class="panel panel-default">
     <div class="panel-heading" id="personal-group-options">
         <h3 class="panel-title">${_('Personal Repository Group')} <a class="permalink" href="#personal-group-options"> ¶</a></h3>
     </div>
     <div class="panel-body">
         <div class="checkbox">
             ${h.checkbox('rhodecode_create_personal_repo_group','True')}
             <label for="rhodecode_create_personal_repo_group">${_('Create Personal Repository Group')}</label>
         </div>
         <span class="help-block">
             ${_('Always create Personal Repository Groups for new users.')} <br/>
             ${_('When creating new users from add user form or API you can still turn this off via a checkbox or flag')}
         </span>
 
         <div class="label">
             <label for="rhodecode_personal_repo_group_pattern">${_('Personal Repo Group Pattern')}</label>
         </div>
         <div class="field input">
             ${h.text('rhodecode_personal_repo_group_pattern',size=60, placeholder=c.personal_repo_group_default_pattern)}
         </div>
         <span class="help-block">
             ${_('Pattern used to create Personal Repository Groups. Prefix can be other existing repository group path[s], eg. /u/${username}')} <br/>
             ${_('Available variables are currently ${username} and ${user_id}')}
         </span>
     </div>
 </div>
 
 
 <div class="panel panel-default">
     <div class="panel-heading" id="captcha-options">
         <h3 class="panel-title">${_('Registration Captcha')} <a class="permalink" href="#captcha-options"> ¶</a></h3>
     </div>
     <div class="panel-body">
         <div class="label">
             <label for="rhodecode_captcha_public_key">${_('Google reCaptcha v2 site key.')}</label>
         </div>
         <div class="field input">
             ${h.text('rhodecode_captcha_public_key',size=60)}
         </div>
         <div class="field">
             <span class="help-block">
                 ${_('Site key for reCaptcha v2 system.')}
             </span>
         </div>
 
         <div class="label">
             <label for="rhodecode_captcha_private_key">${_('Google reCaptcha v2 secret key.')}</label>
         </div>
         <div class="field input">
             ${h.text('rhodecode_captcha_private_key',size=60)}
         </div>
         <div class="field">
             <span class="help-block">
                 ${_('Secret key for reCaptcha v2 system. Setting this value will enable captcha on registration and password reset forms.')}
             </span>
         </div>
     </div>
 </div>
 
 <div class="panel panel-default">
     <div class="panel-heading" id="header-code-options">
         <h3 class="panel-title">${_('Custom Header Code')} <a class="permalink" href="#header-code-options"> ¶</a></h3>
     </div>
     <div class="panel-body">
         <div class="select">
             <select id="pre_template" >
                 <option value="#">${_('Templates...')}</option>
                 <option value="ga">Google Analytics</option>
                 <option value="clicky">Clicky</option>
                 <option value="server_announce">${_('Server Announcement')}</option>
                 <option value="flash_filtering">${_('Flash message filtering')}</option>
                 <option value="custom_logo">${_('Custom logos')}</option>
             </select>
         </div>
         <div style="padding: 10px 0px"></div>
         <div class="textarea text-area">
             ${h.textarea('rhodecode_pre_code',cols=23,rows=5,class_="medium")}
             <span class="help-block">${_('Custom js/css code added at the end of the <header/> tag.')}
                          ${_('Use <script/> or <css/> tags to define custom styling or scripting')}</span>
         </div>
     </div>
 </div>
 
 <div class="panel panel-default">
     <div class="panel-heading" id="footer-code-options">
         <h3 class="panel-title">${_('Custom Footer Code')} <a class="permalink" href="#footer-code-options"> ¶</a></h3>
     </div>
     <div class="panel-body">
         <div class="select">
             <select id="post_template" >
                 <option value="#">${_('Templates...')}</option>
                 <option value="ga">Google Analytics</option>
                 <option value="clicky">Clicky</option>
                 <option value="server_announce">${_('Server Announcement')}</option>
             </select>
         </div>
         <div style="padding: 10px 0px"></div>
         <div class="textarea text-area">
             ${h.textarea('rhodecode_post_code',cols=23,rows=5, class_="medium")}
             <span class="help-block">${_('Custom js/css code added at the end of the <body> tag.')}
                         ${_('Use <script> or <css> tags to define custom styling or scripting')}</span>
         </div>
     </div>
 </div>
 
 <div class="buttons">
     ${h.submit('save',_('Save settings'),class_="btn")}
     ${h.reset('reset',_('Reset'),class_="btn")}
 </div>
 ${h.end_form()}
 
 
 
 ## TEMPLATES ##
 ###############
 
 <script id="ga_tmpl" type="text/x-template">
 <%text filter="h">
 <script>
  // Google Analytics
  // Put your Google Analytics code instead of _GACODE_
  var _gaq_code = '_GACODE_';
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', _gaq_code]);
  _gaq.push(['_trackPageview']);
 
  (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
  rhodecode_statechange_callback = function(url, data){
   // ANALYTICS callback on html5 history state changed
   // triggered by file browser, url is the new url,
   // data is extra info passed from the State object
   if (typeof window._gaq !== 'undefined') {
     _gaq.push(['_trackPageview', url]);
   }
  };
 </script>
 </%text>
 </script>
 
 
 
 <script id="clicky_tmpl" type="text/x-template">
 <%text filter="h">
 <script src="//static.getclicky.com/js" type="text/javascript"></script>
 <script type="text/javascript">
  // Clicky Analytics - should be used in the footer code section.
  // Put your Clicky code instead of _CLICKYCODE_ here,
  // and below in the <img> tag.
  var _cl_code = _CLICKYCODE_;
  try{clicky.init(_cl_code);}catch(e){}
 
  rhodecode_statechange_callback = function(url, data){
   // ANALYTICS callback on html5 history state changed
   // triggered by file browser, url is the new url,
   // data is extra info passed from the State object
   if (typeof window.clicky !== 'undefined') {
    clicky.log(url);
   }
 }
 </script>
 <noscript>
 // Put your clicky code in the src file.
 <p><img alt="Clicky" width="1" height="1"
         src="//in.getclicky.com/_CLICKYCODE_ns.gif" /></p>
 </noscript>
 </%text>
 </script>
 
 
 
 <script id="server_announce_tmpl" type='text/x-template'>
 <%text filter="h">
 <script>
 // Server announcement displayed on the top of the page.
 // This can be used to send a global maintenance messages or other
 // important messages to all users of the RhodeCode Enterprise system.
 
 $(document).ready(function(e) {
 
  // EDIT - put your message below
  var message = "TYPE YOUR MESSAGE HERE";
 
  // EDIT - choose "info"/"warning"/"error"/"success"/"neutral" as appropriate
  var alert_level = "info";
 
  $("#body").prepend(
   ("<div id='server-announcement' class='"+alert_level+"'>_MSG_"+"</div>").replace("_MSG_", message)
  )
 })
 </script>
 </%text>
 </script>
 
 <script id="flash_filtering_tmpl" type='text/x-template'>
 <%text filter="h">
 <script>
     // This filters out some flash messages before they are presented to user
     // based on their contents. Could be used to filter out warnings/errors
     // of license messages
 
     var filteredMessages = [];
     for(var i =0; i< alertMessagePayloads.length; i++){
         if (typeof alertMessagePayloads[i].message.subdata.subtype !== 'undefined' &&
                 alertMessagePayloads[i].message.subdata.subtype.indexOf('rc_license') !== -1){
             continue
         }
         filteredMessages.push(alertMessagePayloads[i]);
     }
     alertMessagePayloads = filteredMessages;
 </script>
 </%text>
 </script>
 
 
 <script id="custom_logo_tmpl" type='text/x-template'>
 <%text filter="h">
 <script>
 
 $(document).ready(function(e) {
     // 1) Set custom logo on login/register pages.
 
     // external URL, custom company logo
     //$('.sign-in-image').attr("src", "http://server.com/logo_path/custom_logo.png");
 
     // Alternative logo from static folder
     $('.sign-in-image').attr("src", "/_static/rhodecode/images/RhodeCode_Logo_Black.png");
 
-    // set width/height
+    // option to set width/height, adjust if required to make your image look good.
     $('.sign-in-image').css({"width": "300px", "height": "345px"});
 
     // 2) Header logo on top bar
     $('.logo-wrapper').find('img').attr('src', 'http://server.com/logo_path/custom_header_logo.png')
 
 });
 </script>
 </%text>
 </script>
 
 
 <script>
 var pre_cm = initCodeMirror('rhodecode_pre_code', '', false);
 var pre_old = pre_cm.getValue();
 
 var post_cm = initCodeMirror('rhodecode_post_code', '', false);
 var post_old = post_cm.getValue();
 
 var get_data = function(type, old) {
     var get_tmpl = function(tmpl_name){
         // unescape some stuff
         return htmlEnDeCode.htmlDecode($('#'+tmpl_name+'_tmpl').html());
     };
     return {
         '#': old,
         'ga': get_tmpl('ga'),
         'clicky': get_tmpl('clicky'),
         'server_announce': get_tmpl('server_announce'),
         'flash_filtering': get_tmpl('flash_filtering'),
         'custom_logo': get_tmpl('custom_logo')
     }[type]
 };
 
 $('#pre_template').select2({
     containerCssClass: 'drop-menu',
     dropdownCssClass: 'drop-menu-dropdown',
     dropdownAutoWidth: true,
     minimumResultsForSearch: -1
 });
 
 $('#post_template').select2({
     containerCssClass: 'drop-menu',
     dropdownCssClass: 'drop-menu-dropdown',
     dropdownAutoWidth: true,
     minimumResultsForSearch: -1
 });
 
 $('#post_template').on('change', function(e){
     var sel = this.value;
     post_cm.setValue(get_data(sel, post_old))
 });
 
 $('#pre_template').on('change', function(e){
     var sel = this.value;
     pre_cm.setValue(get_data(sel, pre_old))
 })
 </script>