[Kimchi-devel] [PATCH] UI: set ticket password

[shaohef at linux.vnet.ibm.com]

From: ShaoHe Feng <shaohef at linux.vnet.ibm.com>

After set the password, only the one knows the password can access
the vm graphic.

Signed-off-by: ShaoHe Feng <shaohef at linux.vnet.ibm.com>
Signed-off-by: Simon Jin <simonjin at linux.vnet.ibm.com>
---
 ui/css/theme-default/guest-edit.css | 36 +++++++++++++++++++++++++++++++++++-
 ui/js/src/kimchi.guest_edit_main.js | 32 +++++++++++++++++++++++++++++++-
 ui/pages/guest-edit.html.tmpl       | 15 +++++++++++++++
 3 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css
index 74c2237..eeea1cd 100644
--- a/ui/css/theme-default/guest-edit.css
+++ b/ui/css/theme-default/guest-edit.css
@@ -29,7 +29,8 @@
 }
 
 #form-guest-edit-general,
-#form-guest-edit-storage {
+#form-guest-edit-storage,
+#form-guest-edit-password {
     padding: 1em;
 }
 
@@ -67,6 +68,39 @@
     width: 486px;
 }
 
+#form-guest-edit-password .guest-edit-wrapper-controls {
+    width: 486px;
+    margin: auto;
+    text-align: center;
+}
+
+.div-guest-edit-password {
+    margin: auto;
+    text-align: center;
+    padding-bottom: 5px;
+    padding-top: 7px;
+}
+
+.guest-edit-wrapper-controls input[type="password"] {
+    font-size: 16px;
+    height: 38px;
+    background: #fff;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    box-shadow: 2px 2px 2px #eee inset;
+    border-top: 1px solid #bbb;
+    border-left: 1px solid #bbb;
+    padding-left: 10px;
+    width: 220px;
+    margin: auto;
+    text-align: left;
+}
+
+.err-mess {
+    color: #C85305;
+    text-align: center;
+}
+
 .guest-edit-wrapper-controls input[type="text"] {
     font-size: 16px;
     height: 38px;
diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
index 7d24b44..482fb7a 100644
--- a/ui/js/src/kimchi.guest_edit_main.js
+++ b/ui/js/src/kimchi.guest_edit_main.js
@@ -17,6 +17,8 @@
  */
 kimchi.guest_edit_main = function() {
     var buttonContainer = $('#action-button-container');
+    var password1 = $("#form-guest-edit-password input[name='pw1']");
+    var password2 = $("#form-guest-edit-password input[name='pw2']");
     $('#guest-edit-tabs').tabs({
         beforeActivate: function(event, ui) {
             var display_list = ['form-guest-edit-general', 'form-guest-edit-permission']
@@ -25,12 +27,24 @@ kimchi.guest_edit_main = function() {
             if(display_list.indexOf($(deactivated).attr('id')) >= 0) {
                 $(buttonContainer).removeClass('hidden');
             }
+            if($(deactivated).attr('id') === 'form-guest-edit-password'){
+                password2.val().length && $(buttonContainer).removeClass('hidden');
+            }
         }
     });
 
     var guestEditForm = $('#form-guest-edit-general');
     var saveButton = $('#guest-edit-button-save');
 
+    password1.on("keyup", function(event) {
+        $("#div-guest-edit-password-mess").hide();
+    });
+
+    password2.on("keyup", function(event) {
+        $("#div-guest-edit-password-mess").hide();
+        $(buttonContainer).removeClass('hidden');
+    });
+
     var refreshCDROMs = function() {
         kimchi.listVMStorages({
             vm: kimchi.selectedGuest
@@ -398,6 +412,22 @@ kimchi.guest_edit_main = function() {
         });
     }
 
+    var passwordSubmit = function(event) {
+        if (password1.val() != password2.val()){
+            $("#div-guest-edit-password-mess").show();
+        }
+        else {
+            var data = {'ticket': {'passwd': password1.val()}};
+            kimchi.updateVM(kimchi.selectedGuest, data, function() {
+                kimchi.listVmsAuto();
+                kimchi.window.close();
+            }, function(err) {
+                kimchi.message.error(err.responseJSON.reason);
+                $(saveButton).prop('disabled', false);
+            });
+        }
+    }
+
     var permissionSubmit = function(event) {
         var content = { users: [], groups: [] };
         $("#permission-sel-users").children().each(function(){
@@ -412,7 +442,7 @@ kimchi.guest_edit_main = function() {
     }
 
     // tap map, "general": 0, "storage": 1, "interface": 2, "permission": 3, "password": 4
-    var submit_map = {0: generalSubmit, 3:permissionSubmit};
+    var submit_map = {0: generalSubmit, 3:permissionSubmit, 4: passwordSubmit};
     var submitForm = function(event) {
         var current = $('#guest-edit-tabs').tabs( "option", "active" );
         var submitFun = submit_map[current];
diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
index f24f7de..22b5207 100644
--- a/ui/pages/guest-edit.html.tmpl
+++ b/ui/pages/guest-edit.html.tmpl
@@ -41,6 +41,9 @@
                 <li>
                     <a href="#form-guest-edit-permission">$_("Permission")</a>
                 </li>
+                <li>
+                    <a href="#form-guest-edit-password">$_("Password")</a>
+                </li>
             </ul>
             <form id="form-guest-edit-general">
                 <fieldset class="guest-edit-fieldset">
@@ -142,6 +145,18 @@
                         </div>
                     </div>
             </form>
+            <form id="form-guest-edit-password" class="guest-edit-password">
+                <div class="guest-edit-wrapper-controls">
+                    <div class="div-guest-edit-password"> $_("Password:")</div>
+                    <input type="password" name="pw1" autofocus>
+                    <div class="div-guest-edit-password"> $_("Confirm Password:")</div>
+                    <input type="password" name="pw2">
+                </div>
+                <div id="div-guest-edit-password-mess" class="err-mess" style="display: none;">
+                    $_("The above two passwords are not same, please re-enter them!")
+                </div>
+                <div class="body"></div>
+            </form>
         </div>
     </div>
     <footer>
-- 
1.9.3