From 86c5f0d3d33f39935cddc616d7d9c972f205e0ec Mon Sep 17 00:00:00 2001
From: yumaojun03 <719118794@qq.com>
Date: Mon, 19 Dec 2016 00:24:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90cron=E5=92=8Csudo=E7=9A=84lis?=
 =?UTF-8?q?t=E5=92=8Cdetail=E5=9F=BA=E7=A1=80=EF=BC=8Cansible=20Task?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E6=9B=B4=E4=B8=8A=E5=B1=82=E6=8A=BD=E8=B1=A1?=
 =?UTF-8?q?=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/ops/models/ansible.py          |  16 +-
 apps/ops/templates/cron/detail.html | 141 ++------------
 apps/ops/templates/cron/list.html   |   9 +-
 apps/ops/templates/sudo/detail.html | 141 ++------------
 apps/ops/templates/sudo/list.html   |   7 +-
 apps/ops/templates/task/_task.html  |  97 ++++++++++
 apps/ops/templates/task/create.html |  16 ++
 apps/ops/templates/task/detail.html | 282 ++++++++++++++++++++++++++++
 apps/ops/templates/task/list.html   | 226 ++++++++++++++++++++++
 apps/ops/templates/task/update.html |  20 ++
 10 files changed, 689 insertions(+), 266 deletions(-)
 create mode 100644 apps/ops/templates/task/_task.html
 create mode 100644 apps/ops/templates/task/create.html
 create mode 100644 apps/ops/templates/task/detail.html
 create mode 100644 apps/ops/templates/task/list.html
 create mode 100644 apps/ops/templates/task/update.html

diff --git a/apps/ops/models/ansible.py b/apps/ops/models/ansible.py
index 3ebb5d18b..7ebf59476 100644
--- a/apps/ops/models/ansible.py
+++ b/apps/ops/models/ansible.py
@@ -4,10 +4,12 @@ from __future__ import unicode_literals, absolute_import
 import logging
 import json
 
+from assets.models import Asset
+
 from django.db import models
 from django.utils.translation import ugettext_lazy as _
 
-__all__ = ["Tasker", "AnsiblePlay", "AnsibleTask", "AnsibleHostResult"]
+__all__ = ["Task", "Tasker", "AnsiblePlay", "AnsibleTask", "AnsibleHostResult"]
 
 
 logger = logging.getLogger(__name__)
@@ -290,11 +292,9 @@ class AnsibleHostResult(models.Model):
                 print('Error: %s, continue...' % e.message)
                 continue
 
+class Task(models.Model):
+    name = models.CharField(max_length=128, blank=True, verbose_name=_('Name'))
+    asset = models.ForeignKey(Asset, null=True, blank=True, related_name='crontables')
 
-
-
-
-
-
-
-
+    def __unicode__(self):
+        pass
\ No newline at end of file
diff --git a/apps/ops/templates/cron/detail.html b/apps/ops/templates/cron/detail.html
index b87e17a39..8089f917b 100644
--- a/apps/ops/templates/cron/detail.html
+++ b/apps/ops/templates/cron/detail.html
@@ -18,20 +18,20 @@
                     <div class="panel-options">
                         <ul class="nav nav-tabs">
                             <li class="active">
-                                <a href="{% url 'users:user-detail' pk=user_object.id %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'User detail' %} </a>
+                                <a href="{% url 'ops:page-cron-detail' pk=cron.id %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Cron detail' %} </a>
                             </li>
                             <li>
-                                <a href="{% url 'users:user-asset-permission' pk=user_object.id %}" class="text-center"><i class="fa fa-bar-chart-o"></i> {% trans 'Asset permission' %}</a>
+                                <a href="{% url 'ops:page-cron-detail' pk=cron.id %}" class="text-center"><i class="fa fa-bar-chart-o"></i> {% trans 'Asset permission' %}</a>
                             </li>
-                            <li><a href="{% url 'users:user-granted-asset' pk=user_object.id %}" class="text-center"><i class="fa fa-cubes"></i> {% trans 'Asset granted' %}</a></li>
-                            <li><a href="{% url 'users:user-login-history' pk=user_object.id %}" class="text-center"><i class="fa fa-calculator-o"></i> {% trans 'Login history' %}</a></li>
+                            <li><a href="{% url 'ops:page-cron-detail' pk=cron.id %}" class="text-center"><i class="fa fa-cubes"></i> {% trans 'Asset granted' %}</a></li>
+                            <li><a href="{% url 'ops:page-cron-detail' pk=cron.id %}" class="text-center"><i class="fa fa-calculator-o"></i> {% trans 'Login history' %}</a></li>
                         </ul>
                     </div>
                     <div class="tab-content">
                         <div class="col-sm-7" style="padding-left: 0">
                             <div class="ibox float-e-margins">
                                 <div class="ibox-title">
-                                    <span class="label"><b>{{ user_object.name }}</b></span>
+                                    <span class="label"><b>{{ cron.name }}</b></span>
                                     <div class="ibox-tools">
                                         <a class="collapse-link">
                                             <i class="fa fa-chevron-up"></i>
@@ -49,58 +49,9 @@
                                 <div class="ibox-content">
                                     <table class="table">
                                         <tbody>
-                                        <tr class="no-borders-tr">
-                                            <td colspan="2">
-                                                <img src="{{ user_object | user_avatar_url }}" class="img-circle" width="64" height="64">
-                                            </td>
-                                        </tr>
                                         <tr>
                                             <td width="20%">{% trans 'Name' %}:</td>
-                                            <td><b>{{ user_object.name }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Username' %}:</td>
-                                            <td><b>{{ user_object.username }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Email' %}:</td>
-                                            <td><b>{{ user_object.email }}</b></td>
-                                        </tr>
-                                        {% if user_object.phone %}
-                                            <tr>
-                                                <td>{% trans 'Phone' %}:</td>
-                                                <td><b>{{ user_object.phone }}</b></td>
-                                            </tr>
-                                        {% endif %}
-                                        {% if user_object.wechat %}
-                                            <tr>
-                                                <td>{% trans 'Wechat' %}:</td>
-                                                <td><b>{{ user_object.wechat }}</b></td>
-                                            </tr>
-                                        {% endif %}
-                                        <tr>
-                                            <td>{% trans 'Role' %}:</td>
-                                            <td><b>{{ user_object.get_role_display }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Date expired' %}:</td>
-                                            <td><b>{{ user_object.date_expired|date:"Y-m-j H:i:s" }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Created by' %}:</td>
-                                            <td><b>{{ user_object.created_by }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Date joined' %}:</td>
-                                            <td><b>{{ user_object.date_joined|date:"Y-m-j H:i:s" }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Last login' %}:</td>
-                                            <td><b>{{ user_object.last_login|date:"Y-m-j H:i:s" }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Comment' %}:</td>
-                                            <td><b>{{ user_object.comment }}</b></td>
+                                            <td><b>{{ cron.name }}</b></td>
                                         </tr>
                                         </tbody>
                                     </table>
@@ -120,7 +71,7 @@
                                             <td><span class="pull-right">
                                                 <div class="switch">
                                                     <div class="onoffswitch">
-                                                        <input type="checkbox" {% if user_object.is_active %} checked {% endif %}  class="onoffswitch-checkbox" id="is_active">
+                                                        <input type="checkbox" {% if cron.is_active %} checked {% endif %}  class="onoffswitch-checkbox" id="is_active">
                                                         <label class="onoffswitch-label" for="is_active">
                                                             <span class="onoffswitch-inner"></span>
                                                             <span class="onoffswitch-switch"></span>
@@ -134,7 +85,7 @@
                                             <td><span class="pull-right">
                                                 <div class="switch">
                                                     <div class="onoffswitch">
-                                                        <input type="checkbox" class="onoffswitch-checkbox" {% if user_object.enable_otp %} checked {% endif %}
+                                                        <input type="checkbox" class="onoffswitch-checkbox" {% if cron.enable_otp %} checked {% endif %}
                                                                id="enable_otp">
                                                         <label class="onoffswitch-label" for="enable_otp">
                                                             <span class="onoffswitch-inner"></span>
@@ -221,11 +172,11 @@
 <script>
 jumpserver.selected_groups = {};
 
-function updateUserGroups(user_groups) {
-    var the_url = "{% url 'users:group-user-edit-api' pk=user_object.id %}";
+function updateCrons(crons) {
+    var the_url = "{% url 'api-ops:crontable-detail' pk=cron.id %}";
     var body = {
         id: {{ user_object.id }},
-        groups: Object.assign([], user_groups)
+        groups: Object.assign([], crons)
     };
     var success = function(data) {
         // remove all the selected groups from select > option and rendered ul element;
@@ -262,7 +213,7 @@ $(document).ready(function() {
             delete jumpserver.selected_groups[data.id]
         })
 }).on('click', '#is_active', function() {
-    var the_url = "{% url 'users:user-patch-api' pk=user_object.id %}";
+    var the_url = "{% url 'api-ops:crontable-detail' pk=cron.id %}";
     var checked = !$(this).prop('checked');
     var body = {
         'is_active': checked
@@ -273,18 +224,6 @@ $(document).ready(function() {
         body: JSON.stringify(body),
         success_message: success
     });
-}).on('click', '#enable_otp', function() {
-    var the_url = "{% url 'users:user-patch-api' pk=user_object.id %}";
-    var checked = !$(this).prop('checked');
-    var body = {
-        'enable_otp': checked
-    };
-    var success = '{% trans "Update Successfully!" %}';
-    APIUpdateAttr({
-        url: the_url,
-        body: JSON.stringify(body),
-        success_message: success
-    });
 }).on('click', '#btn_add_user_group', function() {
     if (Object.keys(jumpserver.selected_groups).length === 0) {
         return false;
@@ -296,7 +235,7 @@ $(document).ready(function() {
         user_groups.push(parseInt(index));
         $('#opt_' + index).remove();
     });
-    updateUserGroups(user_groups)
+    updateCrons(user_groups)
 }).on('click', '.btn_delete_user_group', function() {
     var $this = $(this);
     var $tr = $this.closest('tr');
@@ -310,61 +249,11 @@ $(document).ready(function() {
     var user_groups = $('.bdg_user_group').map(function() {
         return $(this).data('gid');
     }).get();
-    updateUserGroups(user_groups)
-}).on('click', '#btn_reset_password', function() {
-    function doReset() {
-        var the_url = '{% url "users:user-reset-password-api" pk=user_object.id %}';
-        var body = {};
-        var success = function() {
-            var msg = "{% trans 'E-mail sent successfully. An e-mail has been sent to the user\'s mailbox.' %}";
-            swal("{% trans 'Password-Reset' %}", msg, "success");
-        };
-        APIUpdateAttr({
-            url: the_url,
-            body: JSON.stringify(body),
-            success: success
-        });
-    }
-    swal({
-        title: "{% trans 'Are you sure?' %}",
-        text: "{% trans 'This will reset the user\'s password.' %}",
-        type: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#DD6B55",
-        confirmButtonText: "{% trans 'Confirm' %}",
-        closeOnConfirm: false
-    }, function() {
-        doReset();
-    });
-}).on('click', '#btn_reset_pk', function() {
-    function doReset() {
-        var the_url = '{% url "users:user-reset-pk-api" pk=user_object.id %}';
-        var body = {};
-        var success = function() {
-            var msg = "{% trans 'The reset-ssh-public-key E-mail has been sent successfully. Please inform the user to update his new ssh public key.' %}";
-            swal("{% trans 'SSH-Public-Key Reset' %}", msg, "success");
-        };
-        APIUpdateAttr({
-            url: the_url,
-            body: JSON.stringify(body),
-            success: success
-        });
-    }
-    swal({
-        title: "{% trans 'Are you sure?' %}",
-        text: "{% trans 'This will reset the user\'s public key.' %}",
-        type: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#DD6B55",
-        confirmButtonText: "{% trans 'Confirm' %}",
-        closeOnConfirm: false
-    }, function() {
-        doReset();
-    });
+    updateCrons(user_groups)
 }).on('click', '#btn_user_update_pk', function(){
     var $this = $(this);
     var pk = $('#txt_pk').val();
-    var the_url = '{% url "users:user-update-pk-api" pk=user_object.id %}';
+    var the_url = '{% url "api-ops:crontable-detail" pk=cron.id %}';
     var body = {'_public_key': pk};
     var success = function() {
         $('#txt_pk').val('');
diff --git a/apps/ops/templates/cron/list.html b/apps/ops/templates/cron/list.html
index ca7f8404e..d1a2c78bc 100644
--- a/apps/ops/templates/cron/list.html
+++ b/apps/ops/templates/cron/list.html
@@ -13,7 +13,7 @@
                 <input id="" type="checkbox" class="ipt_check_all">
             </th>
             <th class="text-center">{% trans 'Name' %}</th>
-            <th class="text-center">{% trans 'Time' %}</th>
+            <th class="text-center">{% trans 'Time(minute-hour-day-month-weekday)' %}</th>
             <th class="text-center">{% trans 'Job' %}</th>
             <th class="text-center">{% trans 'User' %}</th>
             <th class="text-center">{% trans 'Action' %}</th>
@@ -52,18 +52,19 @@ $(document).ready(function(){
                 $(td).html(detail_btn.replace('99991937', rowData.id));
              }},
             {targets: 2, createdCell: function (td, cellData, rowData) {
-                var cron_time_tmp = "{0} {1} {2} {3} {4} (分　时　日　月　周)";
+                var cron_time_tmp = "{0}-{1}-{2}-{3}-{4}";
                 var cron_time = cron_time_tmp.format(rowData.minute, rowData.hour, rowData.day, rowData.month, rowData.weekday);
                 var innerHtml = '<span>' + cron_time + '</span>';
                 $(td).html(innerHtml.replace('99991937', rowData.id));
              }},
-            {targets: 4, createdCell: function (td, cellData, rowData) {
+            {targets: 5, createdCell: function (td, cellData, rowData) {
+                var job_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-primary m-l-xs">{% trans "Job" %}</a>'.replace('99991937', cellData);
                 var update_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-info">{% trans "Update" %}</a>'.replace('99991937', cellData);
                 var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn_user_delete" data-uid="99991937">{% trans "Delete" %}</a>'.replace('99991937', cellData);
                 if (rowData.id === 1 || rowData.username == "admin") {
                     $(td).html(update_btn)
                 } else {
-                    $(td).html(update_btn + del_btn)
+                    $(td).html(job_btn + update_btn + del_btn)
                 }
              }}],
         ajax_url: '{% url "api-ops:crontable-list" %}',
diff --git a/apps/ops/templates/sudo/detail.html b/apps/ops/templates/sudo/detail.html
index b87e17a39..95faa39e5 100644
--- a/apps/ops/templates/sudo/detail.html
+++ b/apps/ops/templates/sudo/detail.html
@@ -18,20 +18,20 @@
                     <div class="panel-options">
                         <ul class="nav nav-tabs">
                             <li class="active">
-                                <a href="{% url 'users:user-detail' pk=user_object.id %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'User detail' %} </a>
+                                <a href="{% url 'ops:page-sudo-detail' pk=sudo.id %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Cron detail' %} </a>
                             </li>
                             <li>
-                                <a href="{% url 'users:user-asset-permission' pk=user_object.id %}" class="text-center"><i class="fa fa-bar-chart-o"></i> {% trans 'Asset permission' %}</a>
+                                <a href="{% url 'ops:page-sudo-detail' pk=sudo.id %}" class="text-center"><i class="fa fa-bar-chart-o"></i> {% trans 'Asset permission' %}</a>
                             </li>
-                            <li><a href="{% url 'users:user-granted-asset' pk=user_object.id %}" class="text-center"><i class="fa fa-cubes"></i> {% trans 'Asset granted' %}</a></li>
-                            <li><a href="{% url 'users:user-login-history' pk=user_object.id %}" class="text-center"><i class="fa fa-calculator-o"></i> {% trans 'Login history' %}</a></li>
+                            <li><a href="{% url 'ops:page-sudo-detail' pk=sudo.id %}" class="text-center"><i class="fa fa-cubes"></i> {% trans 'Asset granted' %}</a></li>
+                            <li><a href="{% url 'ops:page-sudo-detail' pk=sudo.id %}" class="text-center"><i class="fa fa-calculator-o"></i> {% trans 'Login history' %}</a></li>
                         </ul>
                     </div>
                     <div class="tab-content">
                         <div class="col-sm-7" style="padding-left: 0">
                             <div class="ibox float-e-margins">
                                 <div class="ibox-title">
-                                    <span class="label"><b>{{ user_object.name }}</b></span>
+                                    <span class="label"><b>{{ sudo.name }}</b></span>
                                     <div class="ibox-tools">
                                         <a class="collapse-link">
                                             <i class="fa fa-chevron-up"></i>
@@ -49,58 +49,9 @@
                                 <div class="ibox-content">
                                     <table class="table">
                                         <tbody>
-                                        <tr class="no-borders-tr">
-                                            <td colspan="2">
-                                                <img src="{{ user_object | user_avatar_url }}" class="img-circle" width="64" height="64">
-                                            </td>
-                                        </tr>
                                         <tr>
                                             <td width="20%">{% trans 'Name' %}:</td>
-                                            <td><b>{{ user_object.name }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Username' %}:</td>
-                                            <td><b>{{ user_object.username }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Email' %}:</td>
-                                            <td><b>{{ user_object.email }}</b></td>
-                                        </tr>
-                                        {% if user_object.phone %}
-                                            <tr>
-                                                <td>{% trans 'Phone' %}:</td>
-                                                <td><b>{{ user_object.phone }}</b></td>
-                                            </tr>
-                                        {% endif %}
-                                        {% if user_object.wechat %}
-                                            <tr>
-                                                <td>{% trans 'Wechat' %}:</td>
-                                                <td><b>{{ user_object.wechat }}</b></td>
-                                            </tr>
-                                        {% endif %}
-                                        <tr>
-                                            <td>{% trans 'Role' %}:</td>
-                                            <td><b>{{ user_object.get_role_display }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Date expired' %}:</td>
-                                            <td><b>{{ user_object.date_expired|date:"Y-m-j H:i:s" }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Created by' %}:</td>
-                                            <td><b>{{ user_object.created_by }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Date joined' %}:</td>
-                                            <td><b>{{ user_object.date_joined|date:"Y-m-j H:i:s" }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Last login' %}:</td>
-                                            <td><b>{{ user_object.last_login|date:"Y-m-j H:i:s" }}</b></td>
-                                        </tr>
-                                        <tr>
-                                            <td>{% trans 'Comment' %}:</td>
-                                            <td><b>{{ user_object.comment }}</b></td>
+                                            <td><b>{{ sudo.name }}</b></td>
                                         </tr>
                                         </tbody>
                                     </table>
@@ -120,7 +71,7 @@
                                             <td><span class="pull-right">
                                                 <div class="switch">
                                                     <div class="onoffswitch">
-                                                        <input type="checkbox" {% if user_object.is_active %} checked {% endif %}  class="onoffswitch-checkbox" id="is_active">
+                                                        <input type="checkbox" {% if sudo.is_active %} checked {% endif %}  class="onoffswitch-checkbox" id="is_active">
                                                         <label class="onoffswitch-label" for="is_active">
                                                             <span class="onoffswitch-inner"></span>
                                                             <span class="onoffswitch-switch"></span>
@@ -134,7 +85,7 @@
                                             <td><span class="pull-right">
                                                 <div class="switch">
                                                     <div class="onoffswitch">
-                                                        <input type="checkbox" class="onoffswitch-checkbox" {% if user_object.enable_otp %} checked {% endif %}
+                                                        <input type="checkbox" class="onoffswitch-checkbox" {% if sudo.enable_otp %} checked {% endif %}
                                                                id="enable_otp">
                                                         <label class="onoffswitch-label" for="enable_otp">
                                                             <span class="onoffswitch-inner"></span>
@@ -221,11 +172,11 @@
 <script>
 jumpserver.selected_groups = {};
 
-function updateUserGroups(user_groups) {
-    var the_url = "{% url 'users:group-user-edit-api' pk=user_object.id %}";
+function updateCrons(crons) {
+    var the_url = "{% url 'api-ops:sudo-detail' pk=sudo.id %}";
     var body = {
         id: {{ user_object.id }},
-        groups: Object.assign([], user_groups)
+        groups: Object.assign([], crons)
     };
     var success = function(data) {
         // remove all the selected groups from select > option and rendered ul element;
@@ -262,7 +213,7 @@ $(document).ready(function() {
             delete jumpserver.selected_groups[data.id]
         })
 }).on('click', '#is_active', function() {
-    var the_url = "{% url 'users:user-patch-api' pk=user_object.id %}";
+    var the_url = "{% url 'api-ops:sudo-detail' pk=sudo.id %}";
     var checked = !$(this).prop('checked');
     var body = {
         'is_active': checked
@@ -273,18 +224,6 @@ $(document).ready(function() {
         body: JSON.stringify(body),
         success_message: success
     });
-}).on('click', '#enable_otp', function() {
-    var the_url = "{% url 'users:user-patch-api' pk=user_object.id %}";
-    var checked = !$(this).prop('checked');
-    var body = {
-        'enable_otp': checked
-    };
-    var success = '{% trans "Update Successfully!" %}';
-    APIUpdateAttr({
-        url: the_url,
-        body: JSON.stringify(body),
-        success_message: success
-    });
 }).on('click', '#btn_add_user_group', function() {
     if (Object.keys(jumpserver.selected_groups).length === 0) {
         return false;
@@ -296,7 +235,7 @@ $(document).ready(function() {
         user_groups.push(parseInt(index));
         $('#opt_' + index).remove();
     });
-    updateUserGroups(user_groups)
+    updateCrons(user_groups)
 }).on('click', '.btn_delete_user_group', function() {
     var $this = $(this);
     var $tr = $this.closest('tr');
@@ -310,61 +249,11 @@ $(document).ready(function() {
     var user_groups = $('.bdg_user_group').map(function() {
         return $(this).data('gid');
     }).get();
-    updateUserGroups(user_groups)
-}).on('click', '#btn_reset_password', function() {
-    function doReset() {
-        var the_url = '{% url "users:user-reset-password-api" pk=user_object.id %}';
-        var body = {};
-        var success = function() {
-            var msg = "{% trans 'E-mail sent successfully. An e-mail has been sent to the user\'s mailbox.' %}";
-            swal("{% trans 'Password-Reset' %}", msg, "success");
-        };
-        APIUpdateAttr({
-            url: the_url,
-            body: JSON.stringify(body),
-            success: success
-        });
-    }
-    swal({
-        title: "{% trans 'Are you sure?' %}",
-        text: "{% trans 'This will reset the user\'s password.' %}",
-        type: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#DD6B55",
-        confirmButtonText: "{% trans 'Confirm' %}",
-        closeOnConfirm: false
-    }, function() {
-        doReset();
-    });
-}).on('click', '#btn_reset_pk', function() {
-    function doReset() {
-        var the_url = '{% url "users:user-reset-pk-api" pk=user_object.id %}';
-        var body = {};
-        var success = function() {
-            var msg = "{% trans 'The reset-ssh-public-key E-mail has been sent successfully. Please inform the user to update his new ssh public key.' %}";
-            swal("{% trans 'SSH-Public-Key Reset' %}", msg, "success");
-        };
-        APIUpdateAttr({
-            url: the_url,
-            body: JSON.stringify(body),
-            success: success
-        });
-    }
-    swal({
-        title: "{% trans 'Are you sure?' %}",
-        text: "{% trans 'This will reset the user\'s public key.' %}",
-        type: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#DD6B55",
-        confirmButtonText: "{% trans 'Confirm' %}",
-        closeOnConfirm: false
-    }, function() {
-        doReset();
-    });
+    updateCrons(user_groups)
 }).on('click', '#btn_user_update_pk', function(){
     var $this = $(this);
     var pk = $('#txt_pk').val();
-    var the_url = '{% url "users:user-update-pk-api" pk=user_object.id %}';
+    var the_url = '{% url "api-ops:sudo-detail" pk=sudo.id %}';
     var body = {'_public_key': pk};
     var success = function() {
         $('#txt_pk').val('');
diff --git a/apps/ops/templates/sudo/list.html b/apps/ops/templates/sudo/list.html
index 4bb0c37f2..8da993251 100644
--- a/apps/ops/templates/sudo/list.html
+++ b/apps/ops/templates/sudo/list.html
@@ -51,12 +51,15 @@ $(document).ready(function(){
                 $(td).html(detail_btn.replace('99991937', rowData.id));
              }},
             {targets: 4, createdCell: function (td, cellData, rowData) {
-                var update_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-info">{% trans "Update" %}</a>'.replace('99991937', cellData);
+                var update_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-info m-l-xs">{% trans "Update" %}</a>'.replace('99991937', cellData);
+                var preview_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-info m-l-xs">{% trans "Preview" %}</a>'.replace('99991937', cellData);
+                var job_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-primary m-l-xs">{% trans "Job" %}</a>'.replace('99991937', cellData);
                 var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn_user_delete" data-uid="99991937">{% trans "Delete" %}</a>'.replace('99991937', cellData);
+
                 if (rowData.id === 1 || rowData.username == "admin") {
                     $(td).html(update_btn)
                 } else {
-                    $(td).html(update_btn + del_btn)
+                    $(td).html(preview_btn + job_btn + update_btn + del_btn)
                 }
              }}],
         ajax_url: '{% url "api-ops:sudo-list" %}',
diff --git a/apps/ops/templates/task/_task.html b/apps/ops/templates/task/_task.html
new file mode 100644
index 000000000..59d03e5ee
--- /dev/null
+++ b/apps/ops/templates/task/_task.html
@@ -0,0 +1,97 @@
+{% extends 'base.html' %}
+{% load i18n %}
+{% load static %}
+{% load bootstrap %}
+{% block custom_head_css_js %}
+    <link href="{% static "css/plugins/select2/select2.min.css" %}" rel="stylesheet">
+    <script src="{% static "js/plugins/select2/select2.full.min.js" %}"></script>
+    <link href="{% static "css/plugins/datepicker/datepicker3.css" %}" rel="stylesheet">
+{% endblock %}
+
+{% block content %}
+    <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>{% block user_template_title %}{% trans 'Create user' %}{% endblock %}</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <form method="post" class="form-horizontal" action="" enctype="multipart/form-data">
+                            {% csrf_token %}
+                            <h3>{% trans 'Account' %}</h3>
+                            {% block username %} {% endblock %}
+                            {{ form.email|bootstrap_horizontal }}
+                            {{ form.name|bootstrap_horizontal }}
+                            {{ form.groups|bootstrap_horizontal }}
+
+                            <div class="hr-line-dashed"></div>
+                            {% block password %} {% endblock %}
+
+                            <div class="hr-line-dashed"></div>
+                            <h3>{% trans 'Security and Role' %}</h3>
+                            {{ form.role|bootstrap_horizontal }}
+                            <div class="form-group {% if form.date_expired.errors %} has-error {% endif %}" id="date_5">
+                                <label for="{{ form.date_expired.id_for_label }}" class="col-sm-2 control-label">{{ form.date_expired.label }}</label>
+                                <div class="col-sm-9">
+                                    <div class="input-group date">
+                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+                                        <input id="{{ form.date_expired.id_for_label }}" name="{{ form.date_expired.html_name }}" type="text" class="form-control" value="{{ form.date_expired.value|date:'Y-m-d' }}">
+                                    </div>
+                                    <span class="help-block ">{{ form.date_expired.errors }}</span>
+                                </div>
+                             </div>
+{#                            {{ form.date_expired|bootstrap_horizontal }}#}
+                            <div class="form-group">
+                                <label for="{{ form.enable_otp.id_for_label }}" class="col-sm-2 control-label">{% trans 'Enable OTP' %}</label>
+                                <div class="col-sm-8">
+                                    {{ form.enable_otp }}
+                                </div>
+                            </div>
+                            <div class="hr-line-dashed"></div>
+                            <h3>{% trans 'Profile' %}</h3>
+                            {{ form.phone|bootstrap_horizontal }}
+                            {{ form.wechat|bootstrap_horizontal }}
+                            {{ form.comment|bootstrap_horizontal }}
+                            <div class="hr-line-dashed"></div>
+                            <div class="form-group">
+                                <div class="col-sm-4 col-sm-offset-2">
+                                    <button class="btn btn-white" type="reset">{% trans 'Reset' %}</button>
+                                    <button id="submit_button" class="btn btn-primary" type="submit">{% trans 'Submit' %}</button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block custom_foot_js %}
+    <script src="{% static 'js/plugins/datapicker/bootstrap-datepicker.js' %}"></script>
+    <script>
+        $(document).ready(function () {
+            $('.select2').select2();
+
+            $('.input-group.date').datepicker({
+                format: "yyyy-mm-dd",
+                todayBtn: "linked",
+                keyboardNavigation: false,
+                forceParse: false,
+                calendarWeeks: true,
+                autoclose: true
+            });
+        })
+    </script>
+{% endblock %}
diff --git a/apps/ops/templates/task/create.html b/apps/ops/templates/task/create.html
new file mode 100644
index 000000000..19727e102
--- /dev/null
+++ b/apps/ops/templates/task/create.html
@@ -0,0 +1,16 @@
+{% extends 'sudo/_sudo.html' %}
+{% load i18n %}
+{% load bootstrap %}
+{% block user_template_title %}{% trans "Create user" %}{% endblock %}
+{% block username %}
+    {{ form.username|bootstrap_horizontal }}
+{% endblock %}
+{% block password %}
+    <h3>{% trans 'Password' %}</h3>
+    <div class="form-group">
+        <label class="col-sm-2 control-label">{% trans 'Password' %}</label>
+        <div class="col-sm-8 controls" >
+            {% trans 'Reset link will be generated and sent to the user. ' %}
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/apps/ops/templates/task/detail.html b/apps/ops/templates/task/detail.html
new file mode 100644
index 000000000..95faa39e5
--- /dev/null
+++ b/apps/ops/templates/task/detail.html
@@ -0,0 +1,282 @@
+{% extends 'base.html' %}
+{% load common_tags %}
+{% load users_tags %}
+{% load static %}
+{% load i18n %}
+
+{% block custom_head_css_js %}
+    <link href="{% static "css/plugins/select2/select2.min.css" %}" rel="stylesheet">
+    <link href="{% static "css/plugins/sweetalert/sweetalert.css" %}" rel="stylesheet">
+    <script src="{% static "js/plugins/select2/select2.full.min.js" %}"></script>
+    <script src="{% static "js/plugins/sweetalert/sweetalert.min.js" %}"></script>
+{% endblock %}
+{% block content %}
+    <div class="wrapper wrapper-content animated fadeInRight">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="panel-options">
+                        <ul class="nav nav-tabs">
+                            <li class="active">
+                                <a href="{% url 'ops:page-sudo-detail' pk=sudo.id %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Cron detail' %} </a>
+                            </li>
+                            <li>
+                                <a href="{% url 'ops:page-sudo-detail' pk=sudo.id %}" class="text-center"><i class="fa fa-bar-chart-o"></i> {% trans 'Asset permission' %}</a>
+                            </li>
+                            <li><a href="{% url 'ops:page-sudo-detail' pk=sudo.id %}" class="text-center"><i class="fa fa-cubes"></i> {% trans 'Asset granted' %}</a></li>
+                            <li><a href="{% url 'ops:page-sudo-detail' pk=sudo.id %}" class="text-center"><i class="fa fa-calculator-o"></i> {% trans 'Login history' %}</a></li>
+                        </ul>
+                    </div>
+                    <div class="tab-content">
+                        <div class="col-sm-7" style="padding-left: 0">
+                            <div class="ibox float-e-margins">
+                                <div class="ibox-title">
+                                    <span class="label"><b>{{ sudo.name }}</b></span>
+                                    <div class="ibox-tools">
+                                        <a class="collapse-link">
+                                            <i class="fa fa-chevron-up"></i>
+                                        </a>
+                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                            <i class="fa fa-wrench"></i>
+                                        </a>
+                                        <ul class="dropdown-menu dropdown-user">
+                                        </ul>
+                                        <a class="close-link">
+                                            <i class="fa fa-times"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                                <div class="ibox-content">
+                                    <table class="table">
+                                        <tbody>
+                                        <tr>
+                                            <td width="20%">{% trans 'Name' %}:</td>
+                                            <td><b>{{ sudo.name }}</b></td>
+                                        </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-5" style="padding-left: 0;padding-right: 0">
+                            <div class="panel panel-primary">
+                                <div class="panel-heading">
+                                    <i class="fa fa-info-circle"></i> {% trans 'Quick modify' %}
+                                </div>
+                                <div class="panel-body">
+                                    <table class="table">
+                                        <tbody>
+                                        <tr class="no-borders-tr">
+                                          <td width="50%">{% trans 'Active' %}:</td>
+                                            <td><span class="pull-right">
+                                                <div class="switch">
+                                                    <div class="onoffswitch">
+                                                        <input type="checkbox" {% if sudo.is_active %} checked {% endif %}  class="onoffswitch-checkbox" id="is_active">
+                                                        <label class="onoffswitch-label" for="is_active">
+                                                            <span class="onoffswitch-inner"></span>
+                                                            <span class="onoffswitch-switch"></span>
+                                                        </label>
+                                                    </div>
+                                                </div>
+                                            </span></td>
+                                        </tr>
+                                        <tr>
+                                          <td>{% trans 'Enable OTP' %}:</td>
+                                            <td><span class="pull-right">
+                                                <div class="switch">
+                                                    <div class="onoffswitch">
+                                                        <input type="checkbox" class="onoffswitch-checkbox" {% if sudo.enable_otp %} checked {% endif %}
+                                                               id="enable_otp">
+                                                        <label class="onoffswitch-label" for="enable_otp">
+                                                            <span class="onoffswitch-inner"></span>
+                                                            <span class="onoffswitch-switch"></span>
+                                                        </label>
+                                                    </div>
+                                                </div>
+                                            </span></td>
+                                        </tr>
+                                        <tr>
+                                            <td>{% trans 'Reset password' %}:</td>
+                                            <td>
+                                                <span class="pull-right">
+                                                    <button type="button" class="btn btn-primary btn-xs" id="btn_reset_password" style="width: 54px">{% trans 'Reset' %}</button>
+                                                </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>{% trans 'Reset ssh key' %}:</td>
+                                            <td>
+                                                <span class="pull-right">
+                                                    <button type="button" class="btn btn-primary btn-xs" id="btn_reset_pk" style="width: 54px;">{% trans 'Reset' %}</button>
+                                                </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>{% trans 'Update ssh key' %}:</td>
+                                            <td>
+                                                <span class="pull-right">
+                                                    <button type="button" class="btn btn-primary btn-xs" id="btn_update_pk" style="width: 54px;"  data-toggle="modal" data-target="#user_update_pk_modal">{% trans 'Update' %}</button>
+                                                </span>
+                                            </td>
+                                        </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+
+                            <div class="panel panel-info">
+                                <div class="panel-heading">
+                                    <i class="fa fa-info-circle"></i> {% trans 'User group' %}
+                                </div>
+                                <div class="panel-body">
+                                    <table class="table group_edit">
+                                        <tbody>
+                                        <form>
+                                            <tr>
+                                                <td colspan="2" class="no-borders">
+                                                    <select data-placeholder="{% trans 'Join user groups' %}" id="slct_groups" class="select2" style="width: 100%" multiple="" tabindex="4">
+                                                        {% for group in groups %}
+                                                        <option value="{{ group.id }}" id="opt_{{ group.id }}">{{ group.name }}</option>
+                                                        {% endfor %}
+                                                    </select>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="2" class="no-borders">
+                                                    <button type="button" class="btn btn-info btn-small" id="btn_add_user_group">{% trans 'Join' %}</button>
+                                                </td>
+                                            </tr>
+                                        </form>
+
+                                        {% for group in user_object.groups.all %}
+                                        <tr>
+                                          <td ><b class="bdg_user_group" data-gid={{ group.id }}>{{ group.name }}</b></td>
+                                          <td>
+                                              <button class="btn btn-danger pull-right btn-xs btn_delete_user_group" type="button"><i class="fa fa-minus"></i></button>
+                                          </td>
+                                        </tr>
+                                        {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% include 'users/_user_update_pk_modal.html' %}
+{% endblock %}
+{% block custom_foot_js %}
+<script>
+jumpserver.selected_groups = {};
+
+function updateCrons(crons) {
+    var the_url = "{% url 'api-ops:sudo-detail' pk=sudo.id %}";
+    var body = {
+        id: {{ user_object.id }},
+        groups: Object.assign([], crons)
+    };
+    var success = function(data) {
+        // remove all the selected groups from select > option and rendered ul element;
+        $('.select2-selection__rendered').empty();
+        $('#slct_groups').val('');
+        $.map(jumpserver.selected_groups, function(group_name, index) {
+            $('#opt_' + index).remove();
+            // change tr html of user groups.
+            $('.group_edit tbody').append(
+                '<tr>' +
+                '<td><b class="bdg_user_group" data-gid="' + index + '">' + group_name + '</b></td>' +
+                '<td><button class="btn btn-danger btn-xs pull-right btn_delete_user_group" type="button"><i class="fa fa-minus"></i></button></td>' +
+                '</tr>'
+            )
+        });
+        // clear jumpserver.selected_groups
+        jumpserver.selected_groups = {};
+        toastr.success('{% trans "UserGroup Update Success!" %}')
+    };
+    APIUpdateAttr({
+        url: the_url,
+        body: JSON.stringify(body),
+        success: success,
+        method: 'PUT'
+    });
+}
+$(document).ready(function() {
+    $('.select2').select2()
+        .on('select2:select', function(evt) {
+            var data = evt.params.data;
+            jumpserver.selected_groups[data.id] = data.text;
+        }).on('select2:unselect', function(evt) {
+            var data = evt.params.data;
+            delete jumpserver.selected_groups[data.id]
+        })
+}).on('click', '#is_active', function() {
+    var the_url = "{% url 'api-ops:sudo-detail' pk=sudo.id %}";
+    var checked = !$(this).prop('checked');
+    var body = {
+        'is_active': checked
+    };
+    var success = '{% trans "Update Successfully!" %}';
+    APIUpdateAttr({
+        url: the_url,
+        body: JSON.stringify(body),
+        success_message: success
+    });
+}).on('click', '#btn_add_user_group', function() {
+    if (Object.keys(jumpserver.selected_groups).length === 0) {
+        return false;
+    }
+    var user_groups = $('.bdg_user_group').map(function() {
+        return $(this).data('gid');
+    }).get();
+    $.map(jumpserver.selected_groups, function(value, index) {
+        user_groups.push(parseInt(index));
+        $('#opt_' + index).remove();
+    });
+    updateCrons(user_groups)
+}).on('click', '.btn_delete_user_group', function() {
+    var $this = $(this);
+    var $tr = $this.closest('tr');
+    var $badge = $tr.find('.bdg_user_group');
+    var gid = $badge.data('gid');
+    var group_name = $badge.html() || $badge.text();
+    $('#slct_groups').append(
+        '<option value="' + gid + '" id="opt_' + gid + '">' + group_name + '</option>'
+    );
+    $tr.remove();
+    var user_groups = $('.bdg_user_group').map(function() {
+        return $(this).data('gid');
+    }).get();
+    updateCrons(user_groups)
+}).on('click', '#btn_user_update_pk', function(){
+    var $this = $(this);
+    var pk = $('#txt_pk').val();
+    var the_url = '{% url "api-ops:sudo-detail" pk=sudo.id %}';
+    var body = {'_public_key': pk};
+    var success = function() {
+        $('#txt_pk').val('');
+        $this.closest('.modal').modal('hide');
+        var msg = "{% trans 'Successfully updated the SSH public key.' %}";
+        swal("{% trans 'User SSH Public Key Update' %}", msg, "success");
+    };
+    var fail = function() {
+        var msg = "{% trans 'Failed to update the user\'s SSH public key.' %}";
+        swal({
+            title: "{% trans 'User SSH Public Key Update' %}",
+            text: msg,
+            type: "error",
+            showCancelButton: false,
+            confirmButtonColor: "#DD6B55",
+            confirmButtonText: "{% trans 'Confirm' %}",
+            closeOnConfirm: true
+            }, function () {
+              $('#txt_pk').focus();
+            }
+        );
+    }
+    APIUpdateAttr({ url: the_url, body: JSON.stringify(body), success: success, error: fail});
+});
+</script>
+{% endblock %}
diff --git a/apps/ops/templates/task/list.html b/apps/ops/templates/task/list.html
new file mode 100644
index 000000000..8da993251
--- /dev/null
+++ b/apps/ops/templates/task/list.html
@@ -0,0 +1,226 @@
+{% extends '_base_list.html' %}
+{% load i18n static %}
+{% block table_search %}
+{% endblock %}
+{% block table_container %}
+<div class="uc pull-left m-l-5 m-r-5"><a href="{% url "users:user-create" %}" class="btn btn-sm btn-primary"> {% trans "Create sudo" %} </a></div>
+{#<div class="uc pull-left"><a href="javascript:void(0);" class="btn btnbtn-sm btn-primary" data-toggle="modal" data-target="#user_import_modal"> {% trans "Import user" %} </a></div>#}
+<table class="table table-striped table-bordered table-hover " id="sudo_list_table">
+    <thead>
+        <tr>
+            <th class="text-center">
+                <input id="" type="checkbox" class="ipt_check_all">
+            </th>
+            <th class="text-center">{% trans 'Name' %}</th>
+            <th class="text-center">{% trans 'Privileges' %}</th>
+            <th class="text-center">{% trans 'Extra Lines' %}</th>
+            <th class="text-center">{% trans 'Action' %}</th>
+
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+<div id="actions" class="hide">
+    <div class="input-group">
+        <select class="form-control m-b" style="width: auto" id="slct_bulk_update">
+            <option value="delete">{% trans 'Delete selected' %}</option>
+            <option value="update">{% trans 'Update selected' %}</option>
+            <option value="deactive">{% trans 'Deactive selected' %}</option>
+        </select>
+        <div class="input-group-btn pull-left" style="padding-left: 5px;">
+            <button id='btn_bulk_update' style="height: 32px;"  class="btn btn-sm btn-primary">
+             {% trans 'Submit' %}
+            </button>
+        </div>
+    </div>
+</div>
+{#{% include "users/_user_bulk_update_modal.html" %}#}
+{#{% include "users/_user_import_modal.html" %}#}
+{% endblock %}
+{% block content_bottom_left %}{% endblock %}
+{% block custom_foot_js %}
+<script src="{% static 'js/jquery.form.min.js' %}"></script>
+<script>
+$(document).ready(function(){
+    var options = {
+        ele: $('#sudo_list_table'),
+        columnDefs: [
+            {targets: 1, createdCell: function (td, cellData, rowData) {
+                var detail_btn = '<a href="{% url "ops:page-sudo-detail" pk=99991937 %}">' + cellData + '</a>';
+                $(td).html(detail_btn.replace('99991937', rowData.id));
+             }},
+            {targets: 4, createdCell: function (td, cellData, rowData) {
+                var update_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-info m-l-xs">{% trans "Update" %}</a>'.replace('99991937', cellData);
+                var preview_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-info m-l-xs">{% trans "Preview" %}</a>'.replace('99991937', cellData);
+                var job_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-primary m-l-xs">{% trans "Job" %}</a>'.replace('99991937', cellData);
+                var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn_user_delete" data-uid="99991937">{% trans "Delete" %}</a>'.replace('99991937', cellData);
+
+                if (rowData.id === 1 || rowData.username == "admin") {
+                    $(td).html(update_btn)
+                } else {
+                    $(td).html(preview_btn + job_btn + update_btn + del_btn)
+                }
+             }}],
+        ajax_url: '{% url "api-ops:sudo-list" %}',
+        columns: [{data: "id"}, {data: "name" }, {data: "privilege_items" }, {data: "extra_lines" }, {data: "id" }],
+        op_html: $('#actions').html()
+    };
+    var table = jumpserver.initDataTable(options);
+
+    $('.buttons-pdf').click(function () {
+        var users = [];
+        var rows = table.rows('.selected').data();
+        $.each(rows, function (index, obj) {
+            users.push(obj.id)
+        })
+    });
+
+}).on('click', '#btn_bulk_update', function(){
+    var action = $('#slct_bulk_update').val();
+    var $data_table = $('#sudo_list_table').DataTable();
+    var id_list = [];
+    var plain_id_list = [];
+    $data_table.rows({selected: true}).every(function(){
+        id_list.push({id: this.data().id});
+        plain_id_list.push(this.data().id);
+    });
+    if (id_list === []) {
+        return false;
+    }
+    var the_url = "{% url 'api-users:user-list' %}";
+    function doDeactive() {
+        var body = $.each(id_list, function(index, user_object) {
+            user_object['is_active'] = false;
+        });
+        APIUpdateAttr({url: the_url, method: 'PATCH', body: JSON.stringify(body)});
+        $data_table.ajax.reload();
+        jumpserver.checked = false;
+    }
+    function doDelete() {
+        swal({
+            title: "{% trans 'Are you sure?' %}",
+            text: "{% trans 'This will delete the selected users !!!' %}",
+            type: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#DD6B55",
+            confirmButtonText: "{% trans 'Confirm' %}",
+            closeOnConfirm: false
+        }, function() {
+            var success = function() {
+                var msg = "{% trans 'User Deleted.' %}";
+                swal("{% trans 'User Delete' %}", msg, "success");
+                $('#sudo_list_table').DataTable().ajax.reload();
+            };
+            var fail = function() {
+                var msg = "{% trans 'User Deleting failed.' %}";
+                swal("{% trans 'User Delete' %}", msg, "error");
+            };
+            var url_delete = the_url + '?id__in=' + JSON.stringify(plain_id_list);
+            APIUpdateAttr({url: url_delete, method: 'DELETE', success: success, error: fail});
+            jumpserver.checked = false;
+        });
+    }
+    function doUpdate() {
+        $('#user_bulk_update_modal').modal('show');
+    }
+    switch(action) {
+        case 'deactive':
+            doDeactive();
+            break;
+        case 'delete':
+            doDelete();
+            break;
+        case 'update':
+            doUpdate();
+            break;
+        default:
+            break;
+    }
+}).on('click', '.btn_user_delete', function(){
+    var $this = $(this);
+    function doDelete() {
+        var uid = $this.data('uid');
+        var the_url = '{% url "api-users:user-detail" pk=99991937 %}'.replace('99991937', uid);
+        var body = {};
+        var success = function() {
+            var msg = "{% trans 'User Deleted.' %}";
+            swal("{% trans 'User Delete' %}", msg, "success");
+            $('#sudo_list_table').DataTable().ajax.reload();
+        };
+        var fail = function() {
+            var msg = "{% trans 'User Deleting failed.' %}";
+            swal("{% trans 'User Delete' %}", msg, "error");
+        };
+        APIUpdateAttr({
+            url: the_url,
+            body: JSON.stringify(body),
+            method: 'DELETE',
+            success: success,
+            error: fail
+        });
+    }
+    swal({
+        title: "{% trans 'Are you sure?' %}",
+        text: "{% trans 'This will delete the selected user.' %}",
+        type: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "{% trans 'Confirm' %}",
+        closeOnConfirm: false
+    }, function() {
+        doDelete();
+    });
+}).on('click', '#btn_user_bulk_update', function(){
+    var json_data = $('#fm_user_bulk_update').serializeObject();
+    var body = {};
+    body.enable_otp = (json_data.enable_otp === 'on')? true: false;
+    if (json_data.role != '') {
+        body.role = json_data.role;
+    }
+    if (json_data.groups != undefined) {
+        body.groups = json_data.groups;
+    }
+    if (typeof body.groups === 'string') {
+        body.groups = [parseInt(body.groups)]
+    } else if(typeof body.groups === 'array') {
+        new_groups = body.groups.map(Number);
+        body.groups = new_groups;
+    }
+    var $data_table = $('#sudo_list_table').DataTable()
+    var post_list = [];
+    $data_table.rows({selected: true}).every(function(){
+        var content = Object.assign({id: this.data().id}, body);
+        post_list.push(content);
+    });
+    if (post_list === []) {
+        return false
+    }
+    var the_url = "{% url 'api-users:user-list' %}";
+    var success = function() {
+        var msg = "{% trans 'The selected users has been updated successfully.' %}";
+        swal("{% trans 'User Updated' %}", msg, "success");
+        $('#sudo_list_table').DataTable().ajax.reload();
+        jumpserver.checked = false;
+    };
+    APIUpdateAttr({url: the_url, method: 'PATCH', body: JSON.stringify(post_list), success: success});
+    $('#user_bulk_update_modal').modal('hide');
+}).on('click', '#btn_user_import', function() {
+    var $form = $('#fm_user_import');
+    $form.find('.help-block').remove();
+    function success (data) {
+        if (data.success === false) {
+            var $help = $form.find('.help-block');
+            $('<span />', {class: 'help-block text-danger'}).html(data.msg).insertAfter($('#id_excel'));
+        } else {
+            $('#user_import_modal').modal('hide');
+            var $data_table = $('#sudo_list_table').DataTable();
+            toastr.success("{% trans 'Import User Success.' %}");
+            $data_table.ajax.reload();
+        }
+    }
+    $form.ajaxSubmit({success: success});
+})
+</script>
+{% endblock %}
+
diff --git a/apps/ops/templates/task/update.html b/apps/ops/templates/task/update.html
new file mode 100644
index 000000000..3172d23f4
--- /dev/null
+++ b/apps/ops/templates/task/update.html
@@ -0,0 +1,20 @@
+{% extends 'sudo/_sudo.html' %}
+{% load i18n %}
+{% block user_template_title %}{% trans "Update user" %}{% endblock %}
+{% block username %}
+    <div class="form-group">
+        <label for="{{ form.username.id_for_label }}" class="col-sm-2 control-label">{% trans 'Username' %}</label>
+        <div class="col-sm-9 controls" >
+            <input id="{{ form.username.id_for_label }}" name="{{ form.username.html_name }}" type="text" value="{{ user_object.username }}" readonly class="form-control">
+        </div>
+    </div>
+{% endblock %}
+{% block password %}
+    <h3>{% trans 'Password' %}</h3>
+    <div class="form-group">
+        <label for="password" class="col-sm-2 control-label">{% trans 'Password' %}</label>
+        <div class="col-sm-9 controls" >
+            <input id="password" name="password" type="password" class="form-control">
+        </div>
+    </div>
+{% endblock %}