[CE-71] Add login support for basic theme

Change-Id: Id48e7c8e90afa402217e59482f624e7a251a198b Signed-off-by: Haitao Yue <[email protected]>
hyperledger-cello · Aug 1, 2017 · ab58e72 · ab58e72
1 parent 6795189
commit ab58e72
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 30 deletions.
diff --git a/src/resources/cluster_view.py b/src/resources/cluster_view.py
@@ -15,6 +15,7 @@
     request_debug, NETWORK_TYPES, \
     CONSENSUS_PLUGINS_FABRIC_V1, CONSENSUS_MODES, NETWORK_SIZE_FABRIC_V1
 from modules import cluster_handler, host_handler
+from flask_login import login_required
 
 logger = logging.getLogger(__name__)
 logger.setLevel(LOG_LEVEL)
@@ -27,6 +28,7 @@
 
 # Return a web page with cluster info
 @bp_cluster_view.route('/cluster/<cluster_id>', methods=['GET'])
+@login_required
 def cluster_info_show(cluster_id):
     logger.debug("/ cluster_info/{}?released={} action={}".format(
         cluster_id, r.args.get('released', '0'), r.method))
@@ -44,6 +46,7 @@ def cluster_info_show(cluster_id):
 
 # Return a web page with clusters
 @bp_cluster_view.route('/clusters', methods=['GET'])
+@login_required
 def clusters_show():
     request_debug(r, logger)
     show_type = r.args.get("type", "active")

diff --git a/src/resources/host_view.py b/src/resources/host_view.py
@@ -15,6 +15,7 @@
     WORKER_TYPES, request_debug, \
     CLUSTER_LOG_TYPES, CLUSTER_LOG_LEVEL
 from modules import host_handler
+from flask_login import login_required
 
 logger = logging.getLogger(__name__)
 logger.setLevel(LOG_LEVEL)
@@ -26,6 +27,7 @@
 
 
 @bp_host_view.route('/hosts', methods=['GET'])
+@login_required
 def hosts_show():
     logger.info("/hosts method=" + r.method)
     request_debug(r, logger)
@@ -44,6 +46,7 @@ def hosts_show():
 
 
 @bp_host_view.route('/host/<host_id>', methods=['GET'])
+@login_required
 def host_info(host_id):
     logger.debug("/ host_info/{0} method={1}".format(host_id, r.method))
     return render_template("host_info.html", item=host_handler.get_by_id(

diff --git a/src/resources/index.py b/src/resources/index.py
@@ -30,7 +30,7 @@
 
 @bp_index.route('/', methods=['GET'])
 @bp_index.route('/index', methods=['GET'])
-# @login_required
+@login_required
 def show():
     request_debug(r, logger)
     hosts = list(host_handler.list(filter_data={}))
@@ -48,8 +48,7 @@ def show():
 
     clusters_temp = len(list(cluster_handler.list(filter_data={
         "user_id": "/^__/"}, col_name="active")))
-    # username, is_admin = current_user.username, current_user.isAdmin
-    username, is_admin = 'admin', True
+    username, is_admin = current_user.username, current_user.isAdmin
 
     return render_template("index.html", hosts=hosts,
                            hosts_free=hosts_free,
@@ -74,6 +73,7 @@ def show():
 
 
 @bp_index.route('/about', methods=['GET'])
+@login_required
 def about():
     logger.info("path={}, method={}".format(r.path, r.method))
     return render_template("about.html", author=author, version=version,

diff --git a/src/resources/stat.py b/src/resources/stat.py
@@ -13,6 +13,7 @@
 from common import log_handler, LOG_LEVEL, CODE_OK, request_debug
 from version import version
 from modules import host_handler, stat_handler
+from flask_login import login_required
 
 logger = logging.getLogger(__name__)
 logger.setLevel(LOG_LEVEL)
@@ -54,6 +55,7 @@ def get():
 
 
 @bp_stat_view.route('/stat', methods=['GET'])
+@login_required
 def show():
     logger.info("path={}, method={}".format(r.path, r.method))
     hosts = list(host_handler.list())

diff --git a/src/themes/basic/static/login/login.css b/src/themes/basic/static/login/login.css
@@ -0,0 +1,44 @@
+.form {
+  position: absolute;
+  top: 50%;
+  left: 70%;
+  margin: -160px 0 0 -160px;
+  width: 350px;
+  height: 350px;
+  padding: 36px;
+  box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
+  background-color: rgba(255, 255, 255, 0.7);
+}
+.form button {
+  width: 100%;
+}
+.form p {
+  color: #cccccc;
+  text-align: center;
+  margin-top: 16px;
+}
+.form p span:first-child {
+  margin-right: 16px;
+}
+.logo {
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  margin-bottom: 24px;
+}
+.logo img {
+  width: 60px;
+  margin-right: 8px;
+}
+.logo span {
+  vertical-align: text-bottom;
+  font-size: 16px;
+  text-transform: uppercase;
+  display: inline-block;
+  color: #595f69;
+}
+.ant-spin-container,
+.ant-spin-nested-loading {
+  height: 100%;
+}
diff --git a/src/themes/basic/static/login/login.less b/src/themes/basic/static/login/login.less
@@ -0,0 +1,53 @@
+.form {
+  position: absolute;
+  top: 50%;
+  left: 70%;
+  margin: -160px 0 0 -160px;
+  width: 350px;
+  height: 350px;
+  padding: 36px;
+  box-shadow: 0 0 100px rgba(0,0,0,.08);
+  background-color: rgba(255,255,255,0.7);
+
+  button {
+    width: 100%;
+  }
+
+  p {
+    color: rgb(204, 204, 204);
+    text-align: center;
+    margin-top: 16px;
+
+    span {
+      &:first-child {
+        margin-right: 16px;
+      }
+    }
+  }
+}
+
+.logo {
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  margin-bottom: 24px;
+
+  img {
+    width: 60px;
+    margin-right: 8px;
+  }
+
+  span {
+    vertical-align: text-bottom;
+    font-size: 16px;
+    text-transform: uppercase;
+    display: inline-block;
+    color: #595f69;
+  }
+}
+
+.ant-spin-container,
+.ant-spin-nested-loading {
+  height: 100%;
+}
diff --git a/src/themes/basic/static/login/particles.min.js b/src/themes/basic/static/login/particles.min.js
diff --git a/src/themes/basic/templates/login.html b/src/themes/basic/templates/login.html
@@ -13,7 +13,10 @@
     <meta name="description" content="Block Chain Cloud Service">
     <meta name="author" content="Baohua Yang">
     <link rel="icon" href="../static/img/favicon.ico">
-    <link rel="stylesheet" href="{{ url_for('static', filename='js/dist/login.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='login/login.css') }}">
+    <link rel="stylesheet" href="https://cdn.bootcss.com/antd/2.12.2/antd.min.css" />
+    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
+    <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -85,9 +88,87 @@
 
 <body id="particles-js">
 
-<div id="root"></div>
+<div id="app-5">
+    <div class="form">
+        <div class="logo">
+            <span>
+                CELLO
+            </span>
+        </div>
+        <form class="ant-form ant-form-horizontal login-form">
+            <div class="ant-row ant-form-item">
+                <div class="ant-form-item-control-wrapper">
+                    <div class="ant-form-item-control">
+                       <span class="ant-input-affix-wrapper">
+                           <span class="ant-input-prefix">
+                               <i class="anticon anticon-user"></i>
+                           </span>
+                           <input v-model="username" placeholder="Username" class="ant-input ant-input-lg" type="text" />
+                       </span>
+                    </div>
+                </div>
+            </div>
+            <div class="ant-row ant-form-item">
+                <div class="ant-form-item-control-wrapper">
+                    <div class="ant-form-item-control">
+                       <span class="ant-input-affix-wrapper">
+                           <span class="ant-input-prefix">
+                               <i class="anticon anticon-lock"></i>
+                           </span>
+                           <input v-model="password" placeholder="Password" class="ant-input ant-input-lg" type="password" />
+                       </span>
+                    </div>
+                </div>
+            </div>
+        </form>
+        <div class="ant-row ant-form-item">
+            <div class="ant-form-item-control-wrapper">
+                <div class="ant-form-item-control has-success">
+                    <button v-on:click="login"
+                            v-bind:class="btnClass"
+                            class="ant-btn login-form-button ant-btn-primary ant-btn-lg">
+                        <i v-if="submitting" class="anticon anticon-spin anticon-loading"></i>
+                        <span>Login</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 <script src="{{ url_for('static', filename='login/particles.min.js') }}"></script>
 <script>
+
+    const app5 = new Vue({
+        el: '#app-5',
+        data: {
+            username: '',
+            password: '',
+            submitting: false
+        },
+        computed: {
+            btnClass: function () {
+                return {
+                    'ant-btn-loading': this.submitting
+                }
+            }
+        },
+        methods: {
+            login: function () {
+                this.submitting = true;
+                let formData = new FormData();
+                formData.append('username', this.username);
+                formData.append('password', this.password);
+                axios.post('/api/auth/login', formData).then((response) => {
+                    if (response.data.data.success) {
+                        window.location.href = response.data.data.next;
+                    }
+                    this.submitting = false
+                }).catch((error) => {
+                    this.submitting = false
+                })
+            }
+        }
+    })
     particlesJS("particles-js", {
         "particles": {
             "number": {
@@ -199,32 +280,7 @@
         "retina_detect": true
     });
 
-
-    /* ---- stats.js config ---- */
-
-    var count_particles, stats, update;
-    stats = new Stats;
-    stats.setMode(0);
-    stats.domElement.style.position = 'absolute';
-    stats.domElement.style.left = '0px';
-    stats.domElement.style.top = '0px';
-    document.body.appendChild(stats.domElement);
-    count_particles = document.querySelector('.js-count-particles');
-    update = function() {
-        stats.begin();
-        stats.end();
-        if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
-            count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
-        }
-        requestAnimationFrame(update);
-    };
-    requestAnimationFrame(update);
 </script>
-<script src="//cdn.bootcss.com/react/15.4.2/react.min.js"></script>
-<script src="//cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
-<script src="//cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>
-<script src="//cdn.bootcss.com/validator/7.0.0/validator.min.js"></script>
-<script src="{{ url_for('static', filename='js/dist/login.js') }}"> </script>
 
 </body>
 </html>