webui: better password selection

one/static/script/cloud.js

@@ -241,16 +241,6 @@ $(function() {
         $('#new-group-semester').change(updateSummary);
         $('#new-group-semester').change(updateSummary);
         $('#new-group-members').change(updateSummary);
         $('#new-group-members').change(updateSummary);
     });
     });
-    $('.hidden-password').click(function() {
-        if ($(this).attr('type') == 'password') {
-            $(this).attr('type', 'text');
-            $(this).addClass('shown');
-            this.select();
-        } else if (this.selectionStart - this.selectionEnd == 0) {
-            $(this).attr('type', 'password');
-            $(this).removeClass('shown');
-        }
-    });
     $('.shares li').click(function(e) {
     $('.shares li').click(function(e) {
         e.preventDefault();
         e.preventDefault();
         e.stopPropagation();
         e.stopPropagation();
@@ -302,15 +292,6 @@ $(function() {
                     $(this).parent().next().find('.ipv4host').show();
                     $(this).parent().next().find('.ipv4host').show();
                 }
                 }
             });
             });
-            $('#modal-container .hidden-password').click(function() {
-                if ($(this).attr('type') == 'password') {
-                    $(this).attr('type', 'text');
-                    $(this).addClass('shown');
-                } else {
-                    $(this).attr('type', 'password');
-                    $(this).removeClass('shown');
-                }
-            })
         })
         })
         $('#modal').show();
         $('#modal').show();
     };
     };

one/static/style/base.less

@@ -245,12 +245,12 @@ textarea {
 
 
 .hidden-password {
 .hidden-password {
     padding-right: 25px;
     padding-right: 25px;
-    background-image: url(/static/icons/eye-half.png);
+    background-image: url(/static/icons/eye.png);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     background-position: right center;
     background-position: right center;
     cursor: pointer;
     cursor: pointer;
     &.shown {
     &.shown {
-        background-image: url(/static/icons/eye.png);
+        background-image: url(/static/icons/eye-half.png);
     }
     }
 }
 }
 
 

one/templates/vm-credentials.html

@@ -50,7 +50,22 @@
         </tr>
         </tr>
         <tr>
         <tr>
             <th>{% trans "Password" %}:</th>
             <th>{% trans "Password" %}:</th>
-            <td><input type="password" class="hidden-password" value="{{ i.pw }}" /></td>
+            <td><input id="vm-password" type="password" class="hidden-password" value="{{ i.pw }}" /></td>
         </tr>
         </tr>
     </table>
     </table>
+    <script type="text/javascript">
+        $('#vm-password').click(function(e) {
+            if(e.offsetX > 130) {
+                if ($(this).attr('type') == 'password') {
+                    $(this).attr('type', 'text');
+                    $(this).addClass('shown');
+                    this.select();
+                } else {
+                    $(this).attr('type', 'password');
+                    $(this).removeClass('shown');
+                    this.selectionStart = this.selectionEnd = 0;
+                }
+            }
+        });
+    </script>
 </div>
 </div>