NEZ-607 fix: login逻辑、样式调整

nezha-fronted/src/assets/stylus/main.scss

@@ -362,7 +362,7 @@ li{
 .nz-btn-disabled {
   background-image: none;
   opacity: .6;
-  cursor: default;
+  cursor: default !important;
 }
 .nz-btn-group {
   border-radius: 2px;

nezha-fronted/src/components/common/login.vue

@@ -14,7 +14,7 @@
         <input v-model="loginData.pin" type="password" name="password" autocomplete="on" :placeholder="$t('login.pin')"></input>
       </div>
       <div class="login-foot">
-        <button @click="login" class="login-btn" id="login" v-loading="loading" :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed':!license.valid}">{{$t("login.login")}}</button>
+        <button id="login" v-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="login">{{$t("login.login")}}</button>
         <div class="login-foot-lang" @click.stop="langListShow = !langListShow">
           <i v-if="lang == 'en'" class="nz-icon nz-icon-lang-en"></i>
           <i v-else-if="lang == 'cn'" class="nz-icon nz-icon-lang-zh"></i>
@@ -27,7 +27,7 @@
       </div>
       <div class="login-license">
         <div class="license-warn" v-if="license.warnInfo">{{license.warnInfo}}</div>
-        <div class="license-info" v-if="!license.valid">INSTALLATION ID:{{license.token}}</div>
+        <div v-if="!license.valid" class="license-info">INSTALLATION ID:&nbsp;{{license.token}}</div>
         <div class="license-upload" v-if="!license.valid">
           <el-upload
             ref="upload"
@@ -50,7 +50,6 @@
 
 <script>
 import { mapActions } from 'vuex'
-import moment from 'moment-timezone'
 export default {
   name: 'login',
   data () {
@@ -75,7 +74,7 @@ export default {
   methods: {
     ...mapActions(['loginSuccess']),
     login () {
-      if (this.loading) {
+      if (this.loading || !this.license.valid) {
         return
       }
       // if (this.license.valid && this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
@@ -112,9 +111,12 @@ export default {
         return true
       }
     },
-    licenseStat: function () {
+    licenseStat () {
+      /*this.license.valid = false
+      this.license.warnInfo = 'hehehe'
+      this.license.token = 'dRqrWja/PzI8FrWVJeGqLw=='*/
       this.$get('/sys/license/state').then(response => {
-        if (response.code === 200) {
+        if (response.code && response.code === 200) {
           this.license.warnInfo = ''
           this.license.valid = true
         } else {
@@ -124,7 +126,7 @@ export default {
         this.license.token = response.token
       })
     },
-    handleChange: function (file, fileList) {
+    handleChange (file, fileList) {
       if (fileList.length > 0) {
         this.uploadFileList = [fileList[fileList.length - 1]]
       }
@@ -144,7 +146,7 @@ export default {
     }
   },
   watch: {
-    /* 'loginData.username': function(n, o) {
+    /* 'loginData.username'(n, o) {
       let lang = localStorage.getItem('nz-language-' + n);
       if (lang) {
         this.lang = lang;
@@ -168,9 +170,13 @@ export default {
 
 <style scoped lang="scss">
 .login {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
   background-image: url("../../assets/img/login-background.png");
   background-size: cover;
-  position: relative;
 }
 .model {
   height: 100%;
@@ -183,24 +189,17 @@ export default {
 }
 
 .logo {
-  position: absolute;
-  top: 25%;
-  left: 50%;
-  transform: translateX(-50%);
   z-index: 2;
+  width: 460px;
 }
 
 .login-box {
-  width: 460px;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 50%;
   z-index: 2;
+  width: 460px;
 }
 
 .login-box .login-input {
-  padding: 20px 0;
+  padding: 12px 0;
   height: 60px;
   position: relative;
 }
@@ -233,15 +232,18 @@ export default {
 
 .login-btn {
   color: white;
-  border-radius: 3px;
-  background-image: $btn-normal-background-color;
+  border-radius: $--button-border-radius;
+  background-color: var(--theme-color-light-20);
   border: none;
   outline: none;
   height: 44px;
   width: 320px;
   cursor: pointer;
   font-size: 14px;
-  box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.30);
+  transition: all linear .2s;
+}
+.login-btn:not(.nz-btn-disabled):hover {
+  background-color: var(--theme-color-light-30);
 }
 
 .login-foot-lang {
@@ -288,7 +290,8 @@ export default {
   position: absolute;
   bottom: 20px;
   z-index: 100;
-  left: calc(50% - 90px);
+  left: 50%;
+  transform: translateX(-50%);
   a{
     font-size: 14px;
     color: #eee;
@@ -309,23 +312,21 @@ export default {
   text-align: center;
   line-height: 30px;
   .license-warn{
-    color: #EF7458;
+    color: #d92926;
+    text-shadow: 1px 1px 3px #ddd;
   }
-  .license-info{
+  .license-info {
+    margin-bottom: 10px;
+    color: white;
+    text-shadow: 1px 1px 3px #333;
     white-space: nowrap;
   }
   .login-btn{
-    height: 30px;
-    width: 120px;
+    height: 40px;
+    width: auto;
+    padding: 0 20px;
   }
 }
-.login-btn.nz-btn-disabled{
-  background-image: none;
-  color: #e5e5e5;
-  background-color: #ffffff;
-  border-color: #e5e5e5 ;
-  cursor: default;
-}
 </style>
 <style>
   .license-upload .el-upload-list{

nezha-fronted/src/permission.js

@@ -1,6 +1,6 @@
 import router from './router'
 import store from './store'
-import { post } from './http'
+import { get, post } from './http'
 import ElementUI from 'element-ui'
 import Vue from 'vue'
 import i18n from './components/common/i18n'
@@ -8,19 +8,32 @@ import VueResource from 'vue-resource'
 
 Vue.use(VueResource)
 
-const loginWhiteList = ['/login', '/setup', '/sys/license/upload', '/sys/license/state'] // 免登陆白名单
+const loginWhiteList = ['/setup', '/sys/license/upload', '/sys/license/state'] // 免登陆白名单
 const permissionWhiteList = ['/menu', ...loginWhiteList] // 权限白名单
 
 router.beforeEach((to, from, next) => {
-  if (sessionStorage.getItem('nz-token')) {
+  if (to.path === '/login') { // 拦截登录页面，系统初始化检查
+    const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
+    Vue.http.get(configUrl).then(config => {
+      get(config.body.baseUrl + 'setup/inited').then(res => {
+        if (res.code === 200) {
+          if (res.inited === 0) {
+            next({ path: '/setup' })
+          } else {
+            next()
+          }
+        }
+      })
+    })
+  } else if (sessionStorage.getItem('nz-token')) {
     if (permissionWhiteList.indexOf(to.path) !== -1) {
       next()
     } else {
       new Promise(resolve => {
         if (store.getters.menuList.length === 0) {
           const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
-          Vue.http.get(configUrl).then(res => {
-            post(res.body.baseUrl + 'sys/user/permissions', { token: sessionStorage.getItem('nz-token') }).then(res => {
+          Vue.http.get(configUrl).then(config => {
+            post(config.body.baseUrl + 'sys/user/permissions', { token: sessionStorage.getItem('nz-token') }).then(res => {
               store.commit('setMenuList', sortByOrderNum(res.data.menus))
               store.commit('setButtonList', res.data.buttons)
               store.commit('setRoleList', res.data.roles)