From aaf294886e1b69cd55a380ced51145c09ae2a107 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@gmail.com>
Date: Sun, 28 Jul 2019 15:34:38 +0800
Subject: [PATCH] updated logo

---
 .../layout/components/Sidebar/index.vue"      |  75 ----
 "frontend\032src/views/login/index.vue"       | 411 ------------------
 .../views/layout/components/Sidebar/index.vue |  27 +-
 frontend/src/views/login/index.vue            |   8 +-
 4 files changed, 31 insertions(+), 490 deletions(-)
 delete mode 100644 "frontend\032src/views/layout/components/Sidebar/index.vue"
 delete mode 100644 "frontend\032src/views/login/index.vue"

diff --git "a/frontend\032src/views/layout/components/Sidebar/index.vue" "b/frontend\032src/views/layout/components/Sidebar/index.vue"
deleted file mode 100644
index 9388680b..00000000
--- "a/frontend\032src/views/layout/components/Sidebar/index.vue"
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
-    <div class="sidebar-logo" :class="isCollapse ? 'collapsed' : ''">
-      <span>C</span><span v-show="!isCollapse">rawlab</span>
-    </div>
-    <el-menu
-      :show-timeout="200"
-      :default-active="routeLevel1"
-      :collapse="isCollapse"
-      :background-color="variables.menuBg"
-      :text-color="variables.menuText"
-      :active-text-color="variables.menuActiveText"
-      mode="vertical"
-    >
-      <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"/>
-    </el-menu>
-  </el-scrollbar>
-</template>
-
-<script>
-import { mapState, mapGetters } from 'vuex'
-import variables from '@/styles/variables.scss'
-import SidebarItem from './SidebarItem'
-
-export default {
-  components: { SidebarItem },
-  computed: {
-    ...mapState('user', [
-      'adminPaths'
-    ]),
-    ...mapGetters([
-      'sidebar'
-    ]),
-    routeLevel1 () {
-      let pathArray = this.$route.path.split('/')
-      return `/${pathArray[1]}`
-    },
-    routes () {
-      return this.$router.options.routes.filter(d => {
-        const role = this.$store.getters['user/userInfo'].role
-        if (role === 'admin') return true
-        return !this.adminPaths.includes(d.path)
-      })
-    },
-    variables () {
-      return variables
-    },
-    isCollapse () {
-      return !this.sidebar.opened
-    }
-  }
-}
-</script>
-
-<style>
-  #app .sidebar-container .el-menu {
-    height: calc(100% - 50px);
-  }
-
-  .sidebar-container .sidebar-logo {
-    height: 50px;
-    display: flex;
-    align-items: center;
-    padding-left: 20px;
-    color: #fff;
-    background: rgb(48, 65, 86);
-    font-size: 28px;
-    font-weight: 600;
-    font-family: "Verdana", serif;
-  }
-
-  .sidebar-container .sidebar-logo.collapsed {
-    padding-left: 7px;
-  }
-</style>
diff --git "a/frontend\032src/views/login/index.vue" "b/frontend\032src/views/login/index.vue"
deleted file mode 100644
index f2150794..00000000
--- "a/frontend\032src/views/login/index.vue"
+++ /dev/null
@@ -1,411 +0,0 @@
-<template>
-  <div class="login-container">
-    <canvas id="canvas"></canvas>
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
-             label-position="left">
-      <h3 class="title">
-        CRAWLAB
-      </h3>
-      <el-form-item prop="username" style="margin-bottom: 28px;">
-        <el-input
-          v-model="loginForm.username"
-          name="username"
-          type="text"
-          auto-complete="on"
-          :placeholder="$t('Username')"
-        />
-      </el-form-item>
-      <el-form-item prop="password" style="margin-bottom: 28px;">
-        <el-input
-          :type="pwdType"
-          v-model="loginForm.password"
-          name="password"
-          auto-complete="on"
-          :placeholder="$t('Password')"
-          @keyup.enter.native="onKeyEnter"/>
-      </el-form-item>
-      <el-form-item v-if="isSignUp" prop="confirmPassword" style="margin-bottom: 28px;">
-        <el-input
-          :type="pwdType"
-          v-model="loginForm.confirmPassword"
-          name="password"
-          auto-complete="on"
-          :placeholder="$t('Confirm Password')"
-          @keyup.enter.native="onKeyEnter"
-        />
-      </el-form-item>
-      <el-form-item style="border: none">
-        <el-button v-if="isSignUp" :loading="loading" type="primary" style="width:100%;"
-                   @click.native.prevent="handleSignup">
-          {{$t('Sign up')}}
-        </el-button>
-        <el-button v-if="!isSignUp" :loading="loading" type="primary" style="width:100%;"
-                   @click.native.prevent="handleLogin">
-          {{$t('Sign in')}}
-        </el-button>
-      </el-form-item>
-      <div class="alternatives">
-        <div class="left">
-          <span v-if="!isSignUp" class="forgot-password">{{$t('Forgot Password')}}</span>
-        </div>
-        <div class="right">
-          <span v-if="isSignUp">{{$t('Has Account')}}, </span>
-          <span v-if="isSignUp" class="sign-in" @click="$router.push('/login')">{{$t('Sign-in')}} ></span>
-          <span v-if="!isSignUp">{{$t('New to Crawlab')}}, </span>
-          <span v-if="!isSignUp" class="sign-up" @click="$router.push('/signup')">{{$t('Sign-up')}} ></span>
-        </div>
-      </div>
-      <div class="tips">
-        <span>{{$t('Initial Username/Password')}}: admin/admin</span>
-        <a href="https://github.com/tikazyq/crawlab" target="_blank" style="float:right">
-          <img src="https://img.shields.io/badge/github-crawlab-blue">
-        </a>
-      </div>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import { isValidUsername } from '../../utils/validate'
-
-export default {
-  name: 'Login',
-  data () {
-    const validateUsername = (rule, value, callback) => {
-      if (!isValidUsername(value)) {
-        callback(new Error(this.$t('Please enter the correct username')))
-      } else {
-        callback()
-      }
-    }
-    const validatePass = (rule, value, callback) => {
-      if (value.length < 5) {
-        callback(new Error(this.$t('Password length should be no shorter than 5')))
-      } else {
-        callback()
-      }
-    }
-    const validateConfirmPass = (rule, value, callback) => {
-      if (!this.isSignUp) return callback()
-      if (value !== this.loginForm.password) {
-        callback(new Error(this.$t('Two passwords must be the same')))
-      } else {
-        callback()
-      }
-    }
-    return {
-      loginForm: {
-        username: '',
-        password: '',
-        confirmPassword: ''
-      },
-      loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePass }],
-        confirmPassword: [{ required: true, trigger: 'blur', validator: validateConfirmPass }]
-      },
-      loading: false,
-      pwdType: 'password'
-    }
-  },
-  computed: {
-    isSignUp () {
-      return this.$route.path === '/signup'
-    },
-    redirect () {
-      return this.$route.query.redirect
-    }
-  },
-  methods: {
-    handleLogin () {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          this.$store.dispatch('user/login', this.loginForm).then(() => {
-            this.loading = false
-            this.$router.push({ path: this.redirect || '/' })
-            this.$store.dispatch('user/getInfo')
-          }).catch(() => {
-            this.$message.error(this.$t('Error when logging in (Please check username and password)'))
-            this.loading = false
-          })
-        }
-      })
-    },
-    handleSignup () {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          this.$store.dispatch('user/register', this.loginForm).then(() => {
-            this.handleLogin()
-            this.loading = false
-          }).catch(err => {
-            this.$message.error(this.$t(err))
-            this.loading = false
-          })
-        }
-      })
-    },
-    onKeyEnter () {
-      const func = this.isSignUp ? this.handleSignup : this.handleLogin
-      func()
-    }
-  },
-  mounted () {
-    initCanvas()
-  }
-}
-
-const initCanvas = () => {
-  var canvas = document.getElementById('canvas')
-  var ctx = canvas.getContext('2d')
-
-  resize()
-  window.onresize = resize
-
-  function resize () {
-    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
-    canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
-  }
-
-  var RAF = (function () {
-    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
-      window.setTimeout(callback, 1000 / 60)
-    }
-  })()
-
-  // 鼠标活动时，获取鼠标坐标
-  var warea = { x: null, y: null, max: 20000 }
-  // window.onmousemove = function (e) {
-  //   e = e || window.event
-  //
-  //   warea.x = e.clientX
-  //   warea.y = e.clientY
-  // }
-  // window.onmouseout = function (e) {
-  //   warea.x = null
-  //   warea.y = null
-  // }
-
-  // 添加粒子
-  // x，y为粒子坐标，xa, ya为粒子xy轴加速度，max为连线的最大距离
-  var dots = []
-  for (var i = 0; i < 300; i++) {
-    var x = Math.random() * canvas.width
-    var y = Math.random() * canvas.height
-    var xa = Math.random() * 2 - 1
-    var ya = Math.random() * 2 - 1
-
-    dots.push({
-      x: x,
-      y: y,
-      xa: xa,
-      ya: ya,
-      max: 6000
-    })
-  }
-
-  // 延迟100秒开始执行动画，如果立即执行有时位置计算会出错
-  setTimeout(function () {
-    animate()
-  }, 100)
-
-  // 每一帧循环的逻辑
-  function animate () {
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-    // 将鼠标坐标添加进去，产生一个用于比对距离的点数组
-    var ndots = [warea].concat(dots)
-
-    dots.forEach(function (dot) {
-      // 粒子位移
-      dot.x += dot.xa
-      dot.y += dot.ya
-
-      // 遇到边界将加速度反向
-      dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1
-      dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1
-
-      // 绘制点
-      ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1)
-
-      // 循环比对粒子间的距离
-      for (var i = 0; i < ndots.length; i++) {
-        var d2 = ndots[i]
-
-        if (dot === d2 || d2.x === null || d2.y === null) continue
-
-        var xc = dot.x - d2.x
-        var yc = dot.y - d2.y
-
-        // 两个粒子之间的距离
-        var dis = xc * xc + yc * yc
-
-        // 距离比
-        var ratio
-
-        // 如果两个粒子之间的距离小于粒子对象的max值，则在两个粒子间画线
-        if (dis < d2.max) {
-          // 如果是鼠标，则让粒子向鼠标的位置移动
-          if (d2 === warea && dis > (d2.max / 2)) {
-            dot.x -= xc * 0.03
-            dot.y -= yc * 0.03
-          }
-
-          // 计算距离比
-          ratio = (d2.max - dis) / d2.max
-
-          // 画线
-          ctx.beginPath()
-          ctx.lineWidth = ratio / 2
-          // 线条颜色
-          ctx.strokeStyle = 'rgba(64,158,255,' + (ratio + 0.1) + ')'
-          ctx.moveTo(dot.x, dot.y)
-          ctx.lineTo(d2.x, d2.y)
-          ctx.stroke()
-        }
-      }
-
-      // 将已经计算过的粒子从数组中删除
-      ndots.splice(ndots.indexOf(dot), 1)
-    })
-
-    RAF(animate)
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss">
-  $bg: #2d3a4b;
-  $light_gray: #eee;
-
-  /* reset element-ui css */
-  .login-container {
-    .el-input {
-      display: inline-block;
-      width: calc(100% - 44px);
-      margin-left: 22px;
-
-      input {
-        background: transparent;
-        border: 0;
-        -webkit-appearance: none;
-        border-radius: 0;
-        padding: 12px 5px 12px 15px;
-        color: #666;
-        height: 44px;
-        line-height: 44px;
-      }
-    }
-
-    .el-form-item {
-      border: 1px solid #ddd;
-      background: #fff;
-      border-radius: 22px;
-      color: #454545;
-      height: 44px;
-      /*margin-bottom: 28px;*/
-
-      .el-form-item__content {
-        line-height: 44px;
-      }
-    }
-
-    .el-button {
-      height: 44px;
-      border-radius: 22px;
-    }
-
-    #canvas {
-      position: fixed;
-      top: 0;
-      left: 0;
-    }
-  }
-</style>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  $bg: transparent;
-  $dark_gray: #889aa4;
-  $light_gray: #aaa;
-  .login-container {
-    position: fixed;
-    height: 100%;
-    width: 100%;
-    background-color: $bg;
-
-    .login-form {
-      background: transparent;
-      position: absolute;
-      left: 0;
-      right: 0;
-      width: 480px;
-      max-width: 100%;
-      padding: 35px 35px 15px 35px;
-      margin: 120px auto;
-    }
-
-    .tips {
-      font-size: 14px;
-      color: #666;
-      margin-bottom: 10px;
-      background: transparent;
-
-      span {
-        &:first-of-type {
-          margin-right: 22px;
-        }
-      }
-    }
-
-    .svg-container {
-      padding: 6px 5px 6px 15px;
-      color: $dark_gray;
-      vertical-align: middle;
-      width: 30px;
-      display: inline-block;
-    }
-
-    .title {
-      font-family: "Verdana", serif;
-      font-style: italic;
-      font-weight: 600;
-      font-size: 32px;
-      /*color: ;*/
-      margin: 0px auto 20px auto;
-      text-align: center;
-    }
-
-    .show-pwd {
-      position: absolute;
-      right: 10px;
-      top: 7px;
-      font-size: 16px;
-      color: $dark_gray;
-      cursor: pointer;
-      user-select: none;
-    }
-
-    .alternatives {
-      border-bottom: 1px solid #ccc;
-      display: flex;
-      justify-content: space-between;
-      font-size: 14px;
-      color: #666;
-      font-weight: 400;
-      margin-bottom: 10px;
-      padding-bottom: 10px;
-
-      .forgot-password {
-        cursor: pointer;
-      }
-
-      .sign-in,
-      .sign-up {
-        cursor: pointer;
-        color: #409EFF;
-        font-weight: 600;
-      }
-    }
-  }
-</style>
diff --git a/frontend/src/views/layout/components/Sidebar/index.vue b/frontend/src/views/layout/components/Sidebar/index.vue
index 951b6430..614e6780 100644
--- a/frontend/src/views/layout/components/Sidebar/index.vue
+++ b/frontend/src/views/layout/components/Sidebar/index.vue
@@ -1,5 +1,8 @@
 <template>
   <el-scrollbar wrap-class="scrollbar-wrapper">
+    <div class="sidebar-logo" :class="isCollapse ? 'collapsed' : ''">
+      <span>C</span><span v-show="!isCollapse">rawlab</span>
+    </div>
     <el-menu
       :show-timeout="200"
       :default-active="routeLevel1"
@@ -36,7 +39,6 @@ export default {
       return this.$router.options.routes.filter(d => {
         const role = this.$store.getters['user/userInfo'].role
         if (role === 'admin') return true
-        console.log(role)
         return !this.adminPaths.includes(d.path)
       })
     },
@@ -49,3 +51,26 @@ export default {
   }
 }
 </script>
+
+<style>
+  #app .sidebar-container .el-menu {
+    height: calc(100% - 50px);
+  }
+
+  .sidebar-container .sidebar-logo {
+    height: 50px;
+    display: flex;
+    /*justify-content: center;*/
+    align-items: center;
+    padding-left: 20px;
+    color: #fff;
+    background: rgb(48, 65, 86);
+    font-size: 24px;
+    font-weight: 600;
+    font-family: "Verdana", serif;
+  }
+
+  .sidebar-container .sidebar-logo.collapsed {
+    padding-left: 8px;
+  }
+</style>
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 83fee9d8..f2150794 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -4,7 +4,7 @@
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
              label-position="left">
       <h3 class="title">
-        Crawlab
+        CRAWLAB
       </h3>
       <el-form-item prop="username" style="margin-bottom: 28px;">
         <el-input
@@ -367,11 +367,13 @@ const initCanvas = () => {
     }
 
     .title {
+      font-family: "Verdana", serif;
+      font-style: italic;
+      font-weight: 600;
       font-size: 32px;
-      color: #666;
+      /*color: ;*/
       margin: 0px auto 20px auto;
       text-align: center;
-      font-weight: bolder;
     }
 
     .show-pwd {