[lib decrypt] modified form UI & used popup

media/css/seahub.css

@@ -3496,3 +3496,20 @@ textarea:-moz-placeholder {/* for FF */
 #dir-private-share .submit {
     margin-top:18px;
 }
+.lib-decrypt-form {
+    padding:25px 40px 30px;
+}
+.lib-decrypt-form .intro {
+    font-size:19px;
+    color:#464646;
+}
+.lib-decrypt-form .input {
+    height:30px;
+    width:194px;
+    margin-top:10px;
+}
+.lib-decrypt-form .submit {
+    width:202px;
+    height:36px;
+    margin:21px 0 10px;
+}

media/scripts/app/views/dir.js

@@ -101,16 +101,24 @@ define([
                         var $el_con = _this.$('.repo-file-list-topbar, .repo-file-list').hide();
                         var $error = _this.$('.error');
                         var err_msg;
+                        var decrypt_lib = false;
                         if (response.responseText) {
+                            if (response.responseJSON.lib_need_decrypt) {
+                                decrypt_lib = true;
+                            } else {
                                 err_msg = response.responseJSON.error;
+                            }
                         } else {
                             err_msg = gettext('Please check the network.');
                         }
+                        if (err_msg) {
                             $error.html(err_msg).show();
+                        }
 
-                        if (response.responseJSON.lib_need_decrypt) {
+                        if (decrypt_lib) {
                             var form = $($('#repo-decrypt-form-template').html());
-                            _this.$el.append(form);
+                            form.modal({containerCss: {'padding': '1px'}});
+                            $('#simplemodal-container').css({'height':'auto'});
                             form.submit(function() {
                                 var passwd = $.trim($('[name="password"]', form).val());
                                 if (!passwd) {
@@ -127,8 +135,7 @@ define([
                                         username: app.pageOptions.username
                                     },
                                     after_op_success: function() {
-                                        form.remove();
+                                        $.modal.close();
-                                        $error.html('').hide();
                                         $el_con.show();
                                         _this.showDir(category, repo_id, path);
                                     }

seahub/templates/js/lib-op-popups.html

@@ -104,12 +104,13 @@
     <!--/script-->
 
     <script type="text/template" id="repo-decrypt-form-template">
-    <form id="repo-decrypt-form" action="">
+    <form id="repo-decrypt-form" action="" class="alc lib-decrypt-form">
-        <label>{% trans 'Password：' %}</label><br />
+        <img src="{{MEDIA_URL}}img/lock.png" alt="" />
-        <input type="password" name="password" class="input" />
+        <p class="intro">{% trans "This library is password protected" %}</p>
-        <p class="tip">{% trans 'The password will be kept in the server for only 1 hour.' %}</p>
         <p class="error hide"></p>
+        <input type="password" name="password" class="input" placeholder="{% trans "Password" %}" /><br />
         <button type="submit" class="submit">{% trans "Submit" %}</button>
+        <p class="tip">{% trans '*The password will be kept in the server for only 1 hour.' %}</p>
     </form>
     </script>