repos, repo groups, user groups: visually show what user is an owner, and if

potentially he is disabled in the system.

rhodecode/public/css/forms.less

@@ -1,293 +1,320 b''
 // forms.less
 // For use in RhodeCode applications;
 // see style guide documentation for guidelines.
 
 form.rcform {
 
     // reset for ie
     // using :not(#ie) prevents older browsers from applying these rules
     input[type="radio"],
     input[type="checkbox"] {
         padding: 0;
         border: none;
     }
     label { display: inline; border:none; padding:none; }
     .label { display: none; }
 
     max-width: 940px;
     line-height: normal;
     white-space: normal;
     font-size: @basefontsize;
     font-family: @text-light;
     color: @form-textcolor;
 
     fieldset,
     .buttons {
         clear: both;
         position: relative;
         display:block;
         width: 100%;
         min-height: 3em;
         margin-bottom: @form-vertical-margin;
         line-height: 1.2em;
 
         &:after { //clearfix
             content: "";
             clear: both;
             width: 100%;
             height: 1em;
         }
 
         .label:not(#ie) {
             display: inline;
             margin: 0 1em 0 .5em;
             line-height: 1em;
         }
     }
 
     legend {
         float: left;
         display: block;
         width: @legend-width;
         margin: 0;
         padding: 0 @padding 0 0;
     }
 
     .fields {
         float: left;
         display: block;
         width: 100%;
         max-width: 500px;
         margin: 0 0 @padding -@legend-width;
         padding: 0 0 0 @legend-width;
         
         .btn {
             display: inline-block;
             margin: 0 1em @padding 0;
         }
     }
     
     input,
     textarea {
         float: left;
         .box-sizing(content-box);
         padding: @input-padding;
         border: @border-thickness-inputs solid @grey4;
     }
 
     input {
         float: left;
         margin: 0 @input-padding 0 0;
         line-height: 1em;
     }
 
     input[type="text"],
     input[type="password"],
     textarea {
         float: left;
         min-width: 200px;
         margin: 0 1em @padding 0;
         color: @form-textcolor;
     }
 
     input[type="text"],
     input[type="password"] {
         height: 1em;
     }
 
     textarea {
         width: 100%;
         margin-top: -1em; //so it lines up with legend
         overflow: auto;
     }
 
     label:not(#ie) {
       cursor: pointer;
       display: inline-block;
       position: relative;
       background: white;
       border-radius: 4px;
       box-shadow: none;
 
       &:hover::after {
         opacity: 0.5;
       }
     }
  
     input[type="radio"]:not(#ie),
     input[type="checkbox"]:not(#ie) {
         // Hide the input, but have it still be clickable
         opacity: 0;
         float: left;
         height: 0;
         width: 0;
         margin: 0;
         padding: 0;
     }
     input[type='radio'] + label:not(#ie),
     input[type='checkbox'] + label:not(#ie) {
         margin: 0;
         clear: none;
     }
 
     input[type='radio'] + label:not(#ie) {
         .circle (@form-radio-width,white);
         float: left;
         display: inline-block;
         height: @form-radio-width;
         width: @form-radio-width;
         margin: 2px 6px 2px 0;
         border: 1px solid @grey4;
         background-color: white;
         box-shadow: none;
         text-indent: -9999px;
         transition: none;
 
         & + .label {
           float: left;
           margin-top: 7px
         }
     }
 
     input[type='radio']:checked + label:not(#ie) {
         margin: 0 4px 0 -2px;
         padding: 3px;
         border-style: double;
         border-color: white;
         border-width: thick;
         background-color: @rcblue;
         box-shadow: none;
     }
 
     input[type='checkbox'] + label:not(#ie) {
         float: left;
         width: @form-check-width;
         height: @form-check-width;
         margin: 0 5px 1em 0;
         border: 1px solid @grey3;
         .border-radius(@border-radius);
         background-color: white;
         box-shadow: none;
         text-indent: -9999px;
         transition: none;
 
         &:after {
             content: '';
             width: 9px;
             height: 5px;
             position: absolute;
             top: 4px;
             left: 4px;
             border: 3px solid @grey3;
             border-top: none;
             border-right: none;
             background: transparent;
             opacity: 0;
             transform: rotate(-45deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
 
             -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */        }
     
         & + .label {
           float: left;
           margin-top: 5px
         }
     }
     
     input[type=checkbox]:not(#ie) {
       visibility: hidden;
       &:checked + label:after {
         opacity: 1;
       }
     }
 
     // center checkbox and label on a drop-down
     .drop-menu + select + input[type='checkbox'] + label:not(#ie) {
       margin-top:10px;
 
       & + .label {
         margin-top: 15px;
       }
     }
 
     .formlist {
         position: relative;
         float: left;
         margin:  0;
         padding: 0;
 
         li {
             list-style-type: none;
 
             &:before { content:none; }
             &:after {
                 content: "";
                 float: left;
                 display: block;
                 height: @padding;
                 width: 100%;
             }
         }
     }
 
     .drop-menu {
         float: left;
         margin: 0 @input-padding 0 0;
     }
 
     .help-block,
     .error-message {
         display: block;
         clear: both;
         margin: @textmargin 0;
     }
 
     .error-message {
         margin-top: 5px;
     }
   
     input[type=submit] {
         &:extend(.btn-primary);
 
         &:hover {
             &:extend(.btn-primary:hover);
         }
     }
 
     input[type=reset] {
         &:extend(.btn-default);
 
         &:hover {
             &:extend(.btn-default:hover);
         }
     }
 
     select,
     option:checked {
         background-color: @rclightblue;
     }
 
 }
 
+.badged-field {
+    .user-badge {
+        line-height: 25px;
+        padding: 10px 5px;
+        border-radius: @border-radius;
+        border-top: 1px solid @rclightblue;
+        border-left: 1px solid @rclightblue;
+        border-bottom: 1px solid @rclightblue;
+        font-size: 14px;
+        font-style: normal;
+        color: @text-light;
+        display: inline-block;
+        vertical-align: top;
+        cursor: default;
+        margin-right: -2px;
+    }
+    .badge-input-container {
+        display: flex;
+        position: relative;
+    }
+    .user-disabled {
+        text-decoration: line-through;
+    }
+    .badge-input-wrap {
+        display: inline-block;
+    }
+}
 
 // for situations where we wish to display the form value but not the form input
 input.input-valuedisplay {
     border: none;
 }
 
 // for forms which only display information
 .infoform {
     .fields {
         .field {
             label,
             .label,
             input,
             .input {
                 margin-top: 0;
                 margin-bottom: 0;
                 padding-top: 0;
                 padding-bottom: 0;
             }
         }
     }
 }

rhodecode/templates/admin/repo_groups/repo_group_edit_settings.html

@@ -1,72 +1,84 b''
 ## -*- coding: utf-8 -*-
+<%namespace name="base" file="/base/base.html"/>
+
 <div class="panel panel-default">
     <div class="panel-heading">
         <h3 class="panel-title">${_('Settings for Repository Group: %s') % c.repo_group.name}</h3>
     </div>
     <div class="panel-body">
         ${h.secure_form(url('update_repo_group',group_name=c.repo_group.group_name),method='put')}
         <div class="form">
             <!-- fields -->
             <div class="fields">
                 <div class="field">
                     <div class="label">
                         <label for="group_name">${_('Group Name')}:</label>
                     </div>
                     <div class="input">
                         ${h.text('group_name',class_='medium')}
                     </div>
                 </div>
-                <div class="field">
+
+                <div class="field badged-field">
                     <div class="label">
                         <label for="user">${_('Owner')}:</label>
                     </div>
                     <div class="input">
+                        <div class="badge-input-container">
+                            <div class="user-badge">
+                                ${base.gravatar_with_user(c.repo_group.user.email, show_disabled=not c.repo_group.user.active)}
+                            </div>
+                            <div class="badge-input-wrap">
                            ${h.text('user', class_="medium", autocomplete="off")}
-                           <span class="help-block">${_('Change Repository Group Owner.')}</span>
                     </div>
                 </div>
+                        <form:error name="user"/>
+                        <p class="help-block">${_('Change owner of this repository group.')}</p>
+                    </div>
+                </div>
+
                 <div class="field">
                     <div class="label label-textarea">
                         <label for="group_description">${_('Description')}:</label>
                     </div>
                     <div class="textarea text-area editor">
                         ${h.textarea('group_description',cols=23,rows=5,class_="medium")}
                     </div>
                 </div>
 
                 <div class="field">
                     <div class="label">
                         <label for="group_parent_id">${_('Group parent')}:</label>
                     </div>
                     <div class="select">
                         ${h.select('group_parent_id','',c.repo_groups,class_="medium")}
                     </div>
                 </div>
                 <div class="field">
                     <div class="label label-checkbox">
                         <label for="enable_locking">${_('Enable Repository Locking')}:</label>
                     </div>
                     <div class="checkboxes">
                         ${h.checkbox('enable_locking',value="True")}
                         <span class="help-block">${_('Repository locking will be enabled on all subgroups and repositories inside this repository group. Pulling from a repository locks it, and it is unlocked by pushing back by the same user.')}</span>
                     </div>
                 </div>
                 <div class="buttons">
                   ${h.submit('save',_('Save'),class_="btn")}
                   ${h.reset('reset',_('Reset'),class_="btn")}
                 </div>
             </div>
         </div>
         ${h.end_form()}
     </div>
 </div>
 <script>
     $(document).ready(function(){
         $("#group_parent_id").select2({
             'containerCssClass': "drop-menu",
             'dropdownCssClass': "drop-menu-dropdown",
             'dropdownAutoWidth': true
         });
         UsersAutoComplete('user', '${c.rhodecode_user.user_id}');
     })
 </script>

rhodecode/templates/admin/repos/repo_edit_settings.html

@@ -1,225 +1,238 b''
+## -*- coding: utf-8 -*-
+<%namespace name="base" file="/base/base.html"/>
+
 <div class="panel panel-default">
     <div class="panel-heading">
         <h3 class="panel-title">${_('Settings for Repository: %s') % c.repo_info.repo_name}</h3>
     </div>
     <div class="panel-body">
     ${h.secure_form(url('repo', repo_name=c.repo_info.repo_name),method='put')}
     <div class="form">
         <!-- fields -->
         <div class="fields">
             <div class="field">
                 <div class="label">
                     <label for="repo_name">${_('Name')}:</label>
                 </div>
                 <div class="input">
                     ${h.text('repo_name',class_="medium")}
                     <p class="help-block">${_('Non-changeable id')}: `_${c.repo_info.repo_id}` <span><a id="show_more_clone_id" href="#">${_('what is that ?')}</a></span></p>
                     <p id="clone_id" style="display:none;">
                         ${_('URL by id')}: `${c.repo_info.clone_url(with_id=True)}` </br>
                         ${_('''In case this repository is renamed or moved into another group the repository url changes.
                                Using above url guarantees that this repository will always be accessible under such url.
                                Useful for CI systems, or any other cases that you need to hardcode the url into 3rd party service.''')}</p>
                 </div>
            </div>
            % if c.repo_info.repo_type != 'svn':
            <div class="field">
                <div class="label">
                    <label for="clone_uri">${_('Remote uri')}:</label>
                </div>
                <div class="input">
                    %if c.repo_info.clone_uri:
                     <div id="clone_uri_hidden" class='text-as-placeholder'>
                         <span id="clone_uri_hidden_value">${c.repo_info.clone_uri_hidden}</span>
                         <span class="link" id="edit_clone_uri"><i class="icon-edit"></i>${_('edit')}</span>
                     </div>
                     <div id="alter_clone_uri" style="display: none">
                         ${h.text('clone_uri',class_="medium",  placeholder=_('new value, leave empty to remove'))}
                         ${h.hidden('clone_uri_change', 'OLD')}
                         <span class="link" id="cancel_edit_clone_uri">${_('cancel')}</span>
                     </div>
                    %else:
                     ## not set yet, display form to set it
                     ${h.text('clone_uri',class_="medium")}
                     ${h.hidden('clone_uri_change', 'NEW')}
                    %endif
                  <p id="alter_clone_uri_help_block" class="help-block">${_('http[s] url where from repository was imported, also used for doing remote pulls.')}</p>
                </div>
             </div>
             % else:
               ${h.hidden('clone_uri', '')}
             % endif
             <div class="field">
                 <div class="label">
                     <label for="repo_group">${_('Repository group')}:</label>
                 </div>
                 <div class="select">
                     ${h.select('repo_group','',c.repo_groups,class_="medium")}
                      %if c.personal_repo_group:
                          <a style="padding: 4px" href="#" id="select_my_group" data-personal-group-id="${c.personal_repo_group.group_id}">${_('Select my personal group (%(repo_group_name)s)') % {'repo_group_name': c.personal_repo_group.group_name}}</a>
                      %endif
                     <p class="help-block">${_('Optional select a group to put this repository into.')}</p>
                 </div>
             </div>
             <div class="field">
                 <div class="label">
                     <label for="repo_landing_rev">${_('Landing commit')}:</label>
                 </div>
                 <div class="select">
                     ${h.select('repo_landing_rev','',c.landing_revs,class_="medium")}
                     <p class="help-block">${_('Default commit for files page, downloads, whoosh and readme')}</p>
                 </div>
             </div>
-            <div class="field">
+
+            <div class="field badged-field">
                 <div class="label">
                     <label for="user">${_('Owner')}:</label>
                 </div>
                 <div class="input">
+                    <div class="badge-input-container">
+                        <div class="user-badge">
+                            ${base.gravatar_with_user(c.repo_info.user.email, show_disabled=not c.repo_info.user.active)}
+                        </div>
+                        <div class="badge-input-wrap">
                        ${h.text('user', class_="medium", autocomplete="off")}
+                        </div>
+                    </div>
+                    <form:error name="user"/>
                        <p class="help-block">${_('Change owner of this repository.')}</p>
                 </div>
              </div>
+
             <div class="field">
                 <div class="label label-textarea">
                     <label for="repo_description">${_('Description')}:</label>
                 </div>
                 <div class="textarea text-area editor">
                     ${h.textarea('repo_description', )}
                     <p class="help-block">${_('Keep it short and to the point. Use a README file for longer descriptions.')}</p>
                 </div>
             </div>
 
             <div class="field">
                 <div class="label label-checkbox">
                     <label for="repo_private">${_('Private repository')}:</label>
                 </div>
                 <div class="checkboxes">
                     ${h.checkbox('repo_private',value="True")}
                     <span class="help-block">${_('Private repositories are only visible to people explicitly added as collaborators.')}</span>
                 </div>
             </div>
             <div class="field">
                 <div class="label label-checkbox">
                     <label for="repo_enable_statistics">${_('Enable statistics')}:</label>
                 </div>
                 <div class="checkboxes">
                     ${h.checkbox('repo_enable_statistics',value="True")}
                     <span class="help-block">${_('Enable statistics window on summary page.')}</span>
                 </div>
             </div>
             <div class="field">
                 <div class="label label-checkbox">
                     <label for="repo_enable_downloads">${_('Enable downloads')}:</label>
                 </div>
                 <div class="checkboxes">
                     ${h.checkbox('repo_enable_downloads',value="True")}
                     <span class="help-block">${_('Enable download menu on summary page.')}</span>
                 </div>
             </div>
             <div class="field">
                 <div class="label label-checkbox">
                     <label for="repo_enable_locking">${_('Enable automatic locking')}:</label>
                 </div>
                 <div class="checkboxes">
                     ${h.checkbox('repo_enable_locking',value="True")}
                     <span class="help-block">${_('Enable automatic locking on repository. Pulling from this repository creates a lock that can be released by pushing back by the same user')}</span>
                 </div>
             </div>
 
             %if c.visual.repository_fields:
               ## EXTRA FIELDS
               %for field in c.repo_fields:
                 <div class="field">
                     <div class="label">
                         <label for="${field.field_key_prefixed}">${field.field_label} (${field.field_key}):</label>
                     </div>
                     <div class="input input-medium">
                         ${h.text(field.field_key_prefixed, field.field_value, class_='medium')}
                         %if field.field_desc:
                           <span class="help-block">${field.field_desc}</span>
                         %endif
                     </div>
                  </div>
               %endfor
             %endif
             <div class="buttons">
               ${h.submit('save',_('Save'),class_="btn")}
               ${h.reset('reset',_('Reset'),class_="btn")}
             </div>
         </div>
     </div>
     ${h.end_form()}
   </div>
 </div>
 
 <script>
     $(document).ready(function(){
         var select2Options = {
           'containerCssClass': "drop-menu",
           'dropdownCssClass': "drop-menu-dropdown",
           'dropdownAutoWidth': true
         };
 
         var cloneUrl = function() {
           var alterButton = $('#alter_clone_uri');
           var editButton = $('#edit_clone_uri');
           var cancelEditButton = $('#cancel_edit_clone_uri');
           var hiddenUrl = $('#clone_uri_hidden');
           var hiddenUrlValue = $('#clone_uri_hidden_value');
           var input = $('#clone_uri');
           var helpBlock = $('#alter_clone_uri_help_block');
           var changedFlag = $('#clone_uri_change');
           var originalText = helpBlock.html();
           var obfuscatedUrl = hiddenUrlValue.html();
 
           var edit = function(e) {
             alterButton.show();
             editButton.hide();
             hiddenUrl.hide();
 
             //add the old value next to input for verification
             helpBlock.html("(" + obfuscatedUrl + ")" + "<br\>" + originalText);
             changedFlag.val('MOD');
           };
 
           var cancelEdit = function(e) {
             alterButton.hide();
             editButton.show();
             hiddenUrl.show();
 
             helpBlock.html(originalText);
             changedFlag.val('OLD');
             input.val('');
           };
 
           var initEvents = function() {
             editButton.on('click', edit);
             cancelEditButton.on('click', cancelEdit);
           };
 
           var setInitialState = function() {
             if (input.hasClass('error')) {
               alterButton.show();
               editButton.hide();
               hiddenUrl.hide();
             }
           };
 
           setInitialState();
           initEvents();
         }();
 
         $('#show_more_clone_id').on('click', function(e){
             $('#clone_id').show();
             e.preventDefault();
         });
 
         $('#repo_landing_rev').select2(select2Options);
         $('#repo_group').select2(select2Options);
 
         UsersAutoComplete('user', '${c.rhodecode_user.user_id}');
         $('#select_my_group').on('click', function(e){
             e.preventDefault();
             $("#repo_group").val($(this).data('personalGroupId')).trigger("change");
         });
     });
 </script>

rhodecode/templates/admin/user_groups/user_group_edit_settings.html

@@ -1,131 +1,144 b''
+## -*- coding: utf-8 -*-
+<%namespace name="base" file="/base/base.html"/>
+
 <div class="panel panel-default">
     <div class="panel-heading">
         <h3 class="panel-title">${_('User Group: %s') % c.user_group.users_group_name}</h3>
     </div>
     <div class="panel-body">
     ${h.secure_form(url('update_users_group', user_group_id=c.user_group.users_group_id),method='put', id='edit_users_group')}
         <div class="form">
             <!-- fields -->
                 <div class="fields">
                      <div class="field">
                         <div class="label">
                             <label for="users_group_name">${_('Group name')}:</label>
                         </div>
                         <div class="input">
                             ${h.text('users_group_name',class_='medium')}
                         </div>
                      </div>
-                     <div class="field">
+
+                    <div class="field badged-field">
                         <div class="label">
                             <label for="user">${_('Owner')}:</label>
                         </div>
                         <div class="input">
+                            <div class="badge-input-container">
+                                <div class="user-badge">
+                                    ${base.gravatar_with_user(c.user_group.user.email, show_disabled=not c.user_group.user.active)}
+                                </div>
+                                <div class="badge-input-wrap">
                                ${h.text('user', class_="medium", autocomplete="off")}
-                               <span class="help-block">${_('Change owner of this user group.')}</span>
                         </div>
                      </div>
+                            <form:error name="user"/>
+                            <p class="help-block">${_('Change owner of this user group.')}</p>
+                        </div>
+                    </div>
+
                      <div class="field">
                         <div class="label label-textarea">
                             <label for="user_group_description">${_('Description')}:</label>
                         </div>
                         <div class="textarea textarea-small editor">
                             ${h.textarea('user_group_description',cols=23,rows=5,class_="medium")}
                             <span class="help-block">${_('Short, optional description for this user group.')}</span>
                         </div>
                      </div>
                      <div class="field">
                         <div class="label label-checkbox">
                             <label for="users_group_active">${_('Active')}:</label>
                         </div>
                         <div class="checkboxes">
                             ${h.checkbox('users_group_active',value=True)}
                         </div>
                      </div>
                     <div class="field">
                         <div class="label">
                             <label for="users_group_active">${_('Search')}:</label>
                                ${h.text('from_user_group',
                                         placeholder="user/usergroup",
                                         class_="medium")}
                         </div>
                         <div class="select side-by-side-selector">
                             <div class="left-group">
                                 <label class="text"><strong>${_('Chosen group members')}</strong></label>
                                 ${h.select('users_group_members',[x[0] for x in c.group_members],c.group_members,multiple=True,size=8,)}
                                <div class="btn" id="remove_all_elements" >
                                    ${_('Remove all elements')}
                                    <i  class="icon-chevron-right"></i>
                                </div>
                             </div>
                             <div class="middle-group">
                                 <i  id="add_element" class="icon-chevron-left"></i>
                                 <br />
                                 <i  id="remove_element" class="icon-chevron-right"></i>
                             </div>
                             <div class="right-group">
                                  <label class="text" >${_('Available users')}
                                  </label>
                                  ${h.select('available_members',[],c.available_members,multiple=True,size=8,)}
                                  <div  class="btn" id="add_all_elements" >
                                      <i  class="icon-chevron-left"></i>${_('Add all elements')}
                                  </div>
                             </div>
                         </div>
                     </div>
                     <div class="buttons">
                       ${h.submit('Save',_('Save'),class_="btn")}
                     </div>
                 </div>
         </div>
     ${h.end_form()}
     </div>
 </div>
 <script>
     $(document).ready(function(){
         MultiSelectWidget('users_group_members','available_members','edit_users_group');
 
         $("#group_parent_id").select2({
             'containerCssClass': "drop-menu",
             'dropdownCssClass': "drop-menu-dropdown",
             'dropdownAutoWidth': true
         });
 
         $('#from_user_group').autocomplete({
             serviceUrl: pyroutes.url('user_autocomplete_data'),
             minChars:2,
             maxHeight:400,
             width:300,
             deferRequestBy: 300, //miliseconds
             showNoSuggestionNotice: true,
             params: { user_groups:true },
             formatResult: autocompleteFormatResult,
             lookupFilter: autocompleteFilterResult,
             onSelect: function(element, suggestion){
 
                 function preSelectUserIds(uids) {
                     $('#available_members').val(uids);
                     $('#users_group_members').val(uids);
                 }
 
                 if (suggestion.value_type == 'user_group') {
                     $.getJSON(
                         pyroutes.url('edit_user_group_members',
                                     {'user_group_id': suggestion.id}),
                         function(data) {
                             var uids = [];
                             $.each(data.members, function(idx, user) {
                                 var userid = user[0],
                                     username = user[1];
                                 uids.push(userid.toString());
                             });
                             preSelectUserIds(uids)
                         }
                     );
                 } else if (suggestion.value_type == 'user') {
                     preSelectUserIds([suggestion.id.toString()]);
                 }
             }
         });
         UsersAutoComplete('user', '${c.rhodecode_user.user_id}');
     })
 </script>