system-phone 3.1.93 → 3.1.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "system-phone",
-  "version": "3.1.93",
+  "version": "3.1.95",
   "description": "手机模块 前端组件",
   "author": "何宁社 <524395609@qq.com>",
   "license": "ISC",

package/src/components/LoginApp.vue

@@ -106,6 +106,7 @@
 import Vue from 'vue'
 import * as Util from '../Util'
 import cryptJS from './EncryptUtil'
+import { validateStrongPasswordPhone } from '../plugins/validateStrongPasswordPhone.js'
 //获取json配置文件
 let asyncReady = async function (self, url) {
   // 获取配置信息
@@ -481,10 +482,13 @@ export default {
       console.log('获取参数结束')
       this.loaderShow = false
       // 弱口令验证
-      if (this.weakPassword && !(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?])(?!.*(123|321|abc|cba))[a-zA-Z\d!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{8,16}$/.test(this.password))) {
-        await this.$showMessage('登录系统: 此账户的密码过于简单，请修改密码后重新登陆！！！', ['confirm'])
-        this.modifyPassword = true
-        return
+      if (this.weakPassword) {
+        const pwdResult = validateStrongPasswordPhone(this.password)
+        if (!pwdResult.isValid) {
+          await this.$showMessage('登录系统: 此账户的密码过于简单，' + (pwdResult.errors[0] || '请修改密码后重新登陆！！！'), ['confirm'])
+          this.modifyPassword = true
+          return
+        }
       }
       this.$goto('nav-bottom')
     },

package/src/components/ModifyPassWord.vue

@@ -1,220 +1,279 @@
-<template>
-  <!--<div class="app-botton" @click="back()">-->
-  <!--<span class="glyphicon glyphicon-menu-left">返回</span>-->
-  <!--</div>-->
-  <div class="auto">
-    <div class="row app-row">
-      <div class="col-xs-4">
-        <img src="../assets/姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
-        <span class="text-left font">账号</span>
-      </div>
-      <div class="col-xs-8 input-font">
-        <input type="text" class="search_input input-font" v-model="model.ename" readonly/>
-      </div>
-    </div>
-    <div class="row app-row">
-      <div class="col-xs-4" style="margin-top: 8px">
-        <img src="../assets/原始密码.png" style="width: 20px;margin-bottom: 5px" alt="">
-        <span class="text-left font">原始密码</span>
-      </div>
-      <div class="col-xs-8">
-        <input type="password" id="oldpassword" class="search_input input-font" v-model="model.oldpassword"
-               placeholder="请输入原始密码"/>
-      </div>
-    </div>
-    <div class="row app-row">
-      <div class="col-xs-4" style="margin-top: 8px">
-        <img src="../assets/密码.png" style="width: 20px;margin-bottom: 5px">
-        <span class="text-left font">新密码</span>
-      </div>
-      <div class="col-xs-8">
-        <input type="password" id="newpassword1" class="search_input input-font" v-model="model.password"
-               :placeholder="weakPassword?'需要包含大小写字母符号数字的12-18位密码':'请输入新密码'"/>
-      </div>
-    </div>
-    <div class="row app-row">
-      <div class="col-xs-4" style="margin-top: 8px">
-        <img src="../assets/密码.png" style="width: 20px;margin-bottom: 5px" alt="">
-        <span class="text-left font">确认密码</span>
-      </div>
-      <div class="col-xs-8">
-        <input type="password" id="newpassword2" class="search_input input-font" v-model="model.newpassword"
-               placeholder="请重新输入新密码"/>
-      </div>
-    </div>
-    <div class="row app-row">
-      <div class="col-xs-4" style="margin-top: 8px">
-        <img src="../assets/选中.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="showpass" @click="showoff()">
-        <img src="../assets/未选.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="!showpass" @click="showon()">
-        <span class="text-left font">显示密码</span>
-      </div>
-    </div>
-    <div class="row app-row text-center">
-      <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="save()">提交</button>
-    </div>
-  </div>
-</template>
-<script>
-import Vue from 'vue'
-
-let asyncCheck = async function (self, url) {
-  try {
-    let that = self
-    let user = {
-      ename: that.model.ename,
-      newpassword: that.model.password,
-      affirmpassword: that.model.newpassword,
-      password: that.model.oldpassword
-    }
-    let res = await Vue.resetpost(`${url}/${Vue.isv4 ?'api/af-system':'rs'}/user/modifypwd`, {data: user}, {resolveMsg: null, rejectMsg: null})
-    console.log("手机端验证登陆原始密码")
-    console.log(res.data)
-    if ((JSON.stringify(res.data).startsWith("{") || JSON.stringify(res.data).startsWith("[")) && res.data.code && res.data.msg) {
-      if (res.data.code === 200) {
-        that.$showMessage('修改密码成功！')
-        if (that.sourse == 'login') {
-          that.$emit('success', that.model.password)
-          return
-        }
-        that.$back()
-      } else {
-        that.$showMessage('修改密码失败，请重新输入！' + res.data.msg)
-        console.log(res.data)
-        return
-      }
-    } else {
-      if(res.data){
-        that.$showMessage('修改密码成功！')
-        if(that.sourse == 'login'){
-          that.$emit('success',that.model.password)
-          return
-        }
-        that.$back()
-      }else {
-        that.$showMessage('修改密码失败，请重新输入！')
-        console.log(res.data)
-        return
-      }
-    }
-  } catch (error) {
-    if (error.status == 500) {
-      that.$showMessage('网络异常，请检查手机网络！')
-    } else {
-      throw error
-    }
-  }
-}
-import { validateStrongPasswordPhone } from '../plugins/validateStrongPasswordPhone.js'
-export default {
-  title: '修改密码',
-  data() {
-    return {
-      model: {
-        user: Vue.user.name,
-        userid: Vue.user.id,
-        ename: Vue.user.ename,
-        oldpassword: '',
-        password: '',
-        newpassword: ''
-      },
-      showpass: false
-    }
-  },
-  props: {
-    sourse: '',
-    weakPassword: false
-  },
-  ready() {
-
-  },
-  methods: {
-    back() {
-      let _this = this
-      this.$showMessage('所填写内容将不可恢复！', ['confirm', 'cancel']).then((res) => {
-        if (res === 'confirm') {
-          _this.$back()
-        }
-      })
-    },
-    // showpass(){
-    //   console.log('1')
-    //   document.getElementById("oldpassword").type = "text"
-    // },
-    showon() {
-      this.showpass = true
-      document.getElementById("oldpassword").type = "text"
-      document.getElementById("newpassword1").type = "text"
-      document.getElementById("newpassword2").type = "text"
-    },
-    showoff() {
-      this.showpass = false
-      document.getElementById("oldpassword").type = "password"
-      document.getElementById("newpassword1").type = "password"
-      document.getElementById("newpassword2").type = "password"
-    },
-    save() {
-      // 先对新密码和确认密码是否一致
-      if (this.model.password != this.model.newpassword) {
-        this.$showMessage('两次输入密码不一致！')
-        return
-      }
-      // 弱口令验证
-      if (this.weakPassword) {
-        const pwdResult = validateStrongPasswordPhone(this.model.password)
-        if (!pwdResult.isValid) {
-          this.$showMessage('密码过于简单，' + (pwdResult.errors[0] || '请按照要求修改密码！！！'))
-          return
-        }
-      }
-      // 检验原始密码是否符合 并修改密码
-      asyncCheck(this, this.$androidUtil.getProxyUrl())
-    }
-  }
-}
-</script>
-<style>
-.search_input {
-  border: 0;
-  outline: none;
-}
-
-.app-row {
-  background-color: white;
-  padding: 10px 10px 0 10px;
-  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
-}
-
-.font {
-  font: 15px PingFang-SC-Medium;
-}
-
-.btn-font {
-  font: 600 16px PingFang-SC-Bold;
-  color: #499EDF;
-}
-
-.btn-color {
-  background-color: #FFFFFF;
-  border-radius: 10px;
-  border: 1px solid #499EDF;
-}
-
-.input-font {
-  font: 15px PingFang-SC-Medium;
-  color: #333333;
-}
-
-.app-botton {
-  position: fixed;
-  background: #87b2dd;
-  color: #FFF;
-  padding: 8px;
-  text-align: center;
-  font-size: 1.2em;
-  z-index: 10;
-  opacity: 0.5;
-  bottom: 50px;
-  margin-top: -10px;
-  height: 40px;
-}
-</style>
+<template>
+  <!--<div class="app-botton" @click="back()">-->
+  <!--<span class="glyphicon glyphicon-menu-left">返回</span>-->
+  <!--</div>-->
+  <div class="auto">
+    <div v-if="weakPassword" class="password-alert">
+      {{ passwordRuleHint }}
+    </div>
+    <div class="row app-row">
+      <div class="col-xs-4">
+        <img src="../assets/姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
+        <span class="text-left font">账号</span>
+      </div>
+      <div class="col-xs-8 input-font">
+        <input type="text" class="search_input input-font" v-model="model.ename" readonly/>
+      </div>
+    </div>
+    <div class="row app-row">
+      <div class="col-xs-4" style="margin-top: 8px">
+        <img src="../assets/原始密码.png" style="width: 20px;margin-bottom: 5px" alt="">
+        <span class="text-left font">原始密码</span>
+      </div>
+      <div class="col-xs-8">
+        <input type="password" id="oldpassword" class="search_input input-font" v-model="model.oldpassword"
+               placeholder="请输入原始密码"/>
+      </div>
+    </div>
+    <div class="row app-row">
+      <div class="col-xs-4" style="margin-top: 8px">
+        <img src="../assets/密码.png" style="width: 20px;margin-bottom: 5px">
+        <span class="text-left font">新密码</span>
+      </div>
+      <div class="col-xs-8">
+        <input type="password" id="newpassword1" class="search_input input-font" v-model="model.password"
+               placeholder="请输入新密码"/>
+        <div v-if="weakPassword && passwordStrength.visible" class="password-strength">
+          <span class="strength-label">密码强度</span>
+          <span class="strength-tag" :class="passwordStrength.type">{{ passwordStrength.label }}</span>
+          <span class="strength-desc">{{ passwordStrength.desc }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="row app-row">
+      <div class="col-xs-4" style="margin-top: 8px">
+        <img src="../assets/密码.png" style="width: 20px;margin-bottom: 5px" alt="">
+        <span class="text-left font">确认密码</span>
+      </div>
+      <div class="col-xs-8">
+        <input type="password" id="newpassword2" class="search_input input-font" v-model="model.newpassword"
+               placeholder="请重新输入新密码"/>
+      </div>
+    </div>
+    <div class="row app-row">
+      <div class="col-xs-4" style="margin-top: 8px">
+        <img src="../assets/选中.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="showpass" @click="showoff()">
+        <img src="../assets/未选.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="!showpass" @click="showon()">
+        <span class="text-left font">显示密码</span>
+      </div>
+    </div>
+    <div class="row app-row text-center">
+      <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="save()">提交</button>
+    </div>
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+
+let asyncCheck = async function (self, url) {
+  try {
+    let that = self
+    let user = {
+      ename: that.model.ename,
+      newpassword: that.model.password,
+      affirmpassword: that.model.newpassword,
+      password: that.model.oldpassword
+    }
+    let res = await Vue.resetpost(`${url}/${Vue.isv4 ?'api/af-system':'rs'}/user/modifypwd`, {data: user}, {resolveMsg: null, rejectMsg: null})
+    console.log("手机端验证登陆原始密码")
+    console.log(res.data)
+    if ((JSON.stringify(res.data).startsWith("{") || JSON.stringify(res.data).startsWith("[")) && res.data.code && res.data.msg) {
+      if (res.data.code === 200) {
+        that.$showMessage('修改密码成功！')
+        if (that.sourse == 'login') {
+          that.$emit('success', that.model.password)
+          return
+        }
+        that.$back()
+      } else {
+        that.$showMessage('修改密码失败，请重新输入！' + res.data.msg)
+        console.log(res.data)
+        return
+      }
+    } else {
+      if(res.data){
+        that.$showMessage('修改密码成功！')
+        if(that.sourse == 'login'){
+          that.$emit('success',that.model.password)
+          return
+        }
+        that.$back()
+      }else {
+        that.$showMessage('修改密码失败，请重新输入！')
+        console.log(res.data)
+        return
+      }
+    }
+  } catch (error) {
+    if (error.status == 500) {
+      that.$showMessage('网络异常，请检查手机网络！')
+    } else {
+      throw error
+    }
+  }
+}
+import { validateStrongPasswordPhone, getPasswordStrength, PASSWORD_RULE_HINT } from '../plugins/validateStrongPasswordPhone.js'
+export default {
+  title: '修改密码',
+  data() {
+    return {
+      model: {
+        user: Vue.user.name,
+        userid: Vue.user.id,
+        ename: Vue.user.ename,
+        oldpassword: '',
+        password: '',
+        newpassword: ''
+      },
+      showpass: false,
+      passwordRuleHint: PASSWORD_RULE_HINT
+    }
+  },
+  computed: {
+    passwordStrength () {
+      return getPasswordStrength(this.model.password)
+    }
+  },
+  props: {
+    sourse: '',
+    weakPassword: false
+  },
+  ready() {
+
+  },
+  methods: {
+    back() {
+      let _this = this
+      this.$showMessage('所填写内容将不可恢复！', ['confirm', 'cancel']).then((res) => {
+        if (res === 'confirm') {
+          _this.$back()
+        }
+      })
+    },
+    // showpass(){
+    //   console.log('1')
+    //   document.getElementById("oldpassword").type = "text"
+    // },
+    showon() {
+      this.showpass = true
+      document.getElementById("oldpassword").type = "text"
+      document.getElementById("newpassword1").type = "text"
+      document.getElementById("newpassword2").type = "text"
+    },
+    showoff() {
+      this.showpass = false
+      document.getElementById("oldpassword").type = "password"
+      document.getElementById("newpassword1").type = "password"
+      document.getElementById("newpassword2").type = "password"
+    },
+    save() {
+      // 先对新密码和确认密码是否一致
+      if (this.model.password != this.model.newpassword) {
+        this.$showMessage('两次输入密码不一致！')
+        return
+      }
+      // 弱口令验证
+      if (this.weakPassword) {
+        const pwdResult = validateStrongPasswordPhone(this.model.password)
+        if (!pwdResult.isValid) {
+          this.$showMessage('密码过于简单，' + (pwdResult.errors[0] || '请按照要求修改密码！！！'))
+          return
+        }
+      }
+      // 检验原始密码是否符合 并修改密码
+      asyncCheck(this, this.$androidUtil.getProxyUrl())
+    }
+  }
+}
+</script>
+<style>
+.search_input {
+  border: 0;
+  outline: none;
+}
+
+.app-row {
+  background-color: white;
+  padding: 10px 10px 0 10px;
+  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
+}
+
+.font {
+  font: 15px PingFang-SC-Medium;
+}
+
+.btn-font {
+  font: 600 16px PingFang-SC-Bold;
+  color: #499EDF;
+}
+
+.btn-color {
+  background-color: #FFFFFF;
+  border-radius: 10px;
+  border: 1px solid #499EDF;
+}
+
+.input-font {
+  font: 15px PingFang-SC-Medium;
+  color: #333333;
+}
+
+.password-alert {
+  margin: 10px 10px 0;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  color: #606266;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.password-strength {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #606266;
+}
+
+.password-strength .strength-label {
+  margin-right: 6px;
+  color: #909399;
+}
+
+.password-strength .strength-tag {
+  display: inline-block;
+  margin-right: 8px;
+  padding: 1px 8px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.password-strength .strength-tag.success {
+  color: #2e7d32;
+  background: #e8f5e9;
+}
+
+.password-strength .strength-tag.error {
+  color: #c62828;
+  background: #ffebee;
+}
+
+.password-strength .strength-desc {
+  color: #606266;
+}
+
+.app-botton {
+  position: fixed;
+  background: #87b2dd;
+  color: #FFF;
+  padding: 8px;
+  text-align: center;
+  font-size: 1.2em;
+  z-index: 10;
+  opacity: 0.5;
+  bottom: 50px;
+  margin-top: -10px;
+  height: 40px;
+}
+</style>