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

[Aline Manera]

I don't think a new tab is needed for it.
 From my view, we can add just one new input box on "General" tab and 
label it as "Console password" (as it works for VNC and Spice)

On 08/11/2014 12:38 PM, shaohef at linux.vnet.ibm.com wrote:
> 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>