@lambo-design/login-form 1.0.0-beta.2 → 1.0.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/login-form",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.21",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -9,9 +9,16 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {
-    "@lambo-design/shared": "1.0.0-beta.10",
-    "@lambo-design/core": "4.7.1-beta.34"
+  "devDependencies": {
+    "@lambo-design/core": "^4.7.1-beta.171",
+    "@lambo-design/shared": "^1.0.0-beta.318"
   },
-  "scripts": {}
+  "scripts": {
+    "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
 }

package/src/login-form.vue

@@ -1,34 +1,62 @@
 <template>
   <Form ref="loginForm" class="lambo-login-form"
-        :model="form" :rules="rules"
+        :model="form" :rules="rules" :label-width="0"
         @keydown.enter.native="handleSubmit">
     <FormItem prop="userName">
-      <Input v-model="form.userName" placeholder="请输入用户名">
+      <Input v-model="form.userName" :placeholder="t('login-form.box.form-user-name')">
         <span slot="prepend">
           <Icon :size="16" type="ios-person"></Icon>
         </span>
       </Input>
     </FormItem>
     <FormItem prop="password">
-      <Input v-model="form.password" placeholder="请输入密码" type="password">
+      <Input v-model="form.password" :placeholder="t('login-form.box.form-user-pas')" type="password">
         <span slot="prepend">
           <Icon :size="14" type="md-lock"></Icon>
         </span>
       </Input>
     </FormItem>
-    <FormItem prop="validCode">
-      <Input v-model="form.validCode" class="captcha" placeholder="请输入验证码">
+    <FormItem prop="validCode" class="captcha-container" >
+      <Input v-model="form.validCode" class="captcha" :placeholder="t('login-form.box.form-user-valid-code')">
         <template slot="prepend">
-          <img class="prefix" src="./styles/images/captcha.svg">
+          <img class="prefix" src="@/assets/images/captcha.svg">
         </template>
       </Input>
       <div class="Imgbox"><img :src="captchaUrl" class="captchaImg" @click="getCaptcha"></div>
     </FormItem>
+    <FormItem prop="validCode" v-if="captchaMethod === t('login-form.other.captcha-method-sms')">
+      <Input
+          search
+          :enter-button="ValidNumText"
+          :placeholder="t('login-form.box.form-user-sms-code')"
+          v-model="form.validCode"
+          @on-search="getVaildCode">
+        <template slot="prepend">
+          <img class="prefix" src="@/assets/images/captcha.svg">
+        </template>
+      </Input>
+    </FormItem>
+    <FormItem prop="validCode" v-if="captchaMethod === t('login-form.other.captcha-method-mail')">
+      <Input
+          search
+          :enter-button="ValidNumText"
+          :placeholder="t('login-form.box.form-user-mail-code')"
+          v-model="form.validCode"
+          @on-search="getVaildCode">
+        <template slot="prepend">
+          <img class="prefix" src="@/assets/images/captcha.svg">
+        </template>
+      </Input>
+    </FormItem>
+    <FormItem v-if="captchaMethod === t('login-form.other.captcha-method-slide-image')">
+      <Button long :disabled="isDisabled" @click="showSlideVerify">{{ buttonText }}</Button>
+    </FormItem>
     <FormItem>
-      <Checkbox v-model="rememberMe"><span class="remember">记住用户名</span></Checkbox>
+      <Checkbox v-if="showRememberMe === '1'" v-model="rememberMe"><span class="remember">{{ t('login-form.box.form-remember') }}</span></Checkbox>
+      <label v-if="showForgetPassword === '1'" style="float: right;"><router-link to="/forgetPasswordForget">{{ t('login-form.box.form-forget') }}</router-link></label>
     </FormItem>
     <FormItem>
-      <Button :loading="loading" long type="primary" @click="handleSubmit">登录</Button>
+      <Button :loading="loading" long type="primary" @click="handleSubmit">{{ t('login-form.box.form-login') }}</Button>
     </FormItem>
   </Form>
 </template>
@@ -37,31 +65,36 @@ import config from "@lambo-design/shared/config/config";
 import {getLocalStorage, removeLocalStorage, setLocalStorage} from "@lambo-design/shared/utils/platform";
 import {guid} from "@lambo-design/shared/utils/number";
 import crypto from "@lambo-design/shared/utils/crypto"
+import ajax from "@lambo-design/shared/utils/ajax";
+import Locale from "@lambo-design/core/src/mixins/locale";
 
 export default {
   name: 'LoginForm',
+  mixins: [Locale],
+  components:{
+  },
   props: {
     userNameRules: {
       type: Array,
-      default: () => {
+      default: function() {
         return [
-          {required: true, message: '账号不能为空', trigger: 'blur'}
+          {required: true, message: this.$t('login-form.box.form-rule-user-name'), trigger: 'blur'}
         ]
       }
     },
     passwordRules: {
       type: Array,
-      default: () => {
+      default: function() {
         return [
-          {required: true, message: '密码不能为空', trigger: 'blur'}
+          {required: true, message: this.$t('login-form.box.form-rule-user-pas'), trigger: 'blur'}
         ]
       }
     },
     validCodeRules: {
       type: Array,
-      default: () => {
+      default: function() {
         return [
-          {required: true, message: '验证码不能为空', trigger: 'blur'}
+          {required: true, message: this.$t('login-form.box.form-rule-valid-code'), trigger: 'blur'}
         ]
       }
     },
@@ -76,17 +109,33 @@ export default {
     pasCryptor: {
       type: String,
       default: 'sm3'
-    }
+    },
+    captchaMethod:{type: String},
+    showForgetPassword:{type: String},
+    showRememberMe:{
+      type: String,
+      default: '1'
+    },
+    passwordRetrievalMethod:{type: Array},
+    smConfigId:{type: String},
+    templateId:{type: String},
+    mailConfigId:{type: String},
+    isSlideVerify:{type: Boolean},
+    buttonText: {type:String}, // 初始按钮文本
+    isDisabled: {type:Boolean},
   },
   data() {
     return {
+      ValidNumText: this.t('login-form.other.get-valid-code'),
       form: {
         userName: '',
         password: '',
         validCode: ''
       },
       rememberMe: false,
-      validCodeId: ''
+      validCodeId: '',
+      countDown: 60,
+      countDownNum: 60,
     }
   },
   computed: {
@@ -119,9 +168,99 @@ export default {
           false
       )
     },
+    getVaildCode() {
+      let self = this;
+      if (self.ValidNumText == self.t('login-form.other.get-valid-code')) {
+        self.ValidNumText = self.countDown + self.t('login-form.other.get-valid-code-later');
+        self.clock = window.setInterval(() => {
+          self.countDown--;
+          self.ValidNumText = self.countDown + self.t('login-form.other.get-valid-code-later');
+          if (self.countDown <= 0) {
+            window.clearInterval(self.clock);
+            self.ValidNumText = self.t('login-form.other.get-valid-code');
+            self.countDown = self.countDownNum;
+          }
+        }, 1000);
+        let param
+        let url
+        if(self.captchaMethod === self.t('login-form.other.captcha-method-mail')){
+          url = config.upmsServerContext + "/anon/user/sendMailForLogin"
+          param = {
+            userId: self.form.userName,
+            //mailAddress: self.form.mailAddress
+            validCodeId: self.validCodeId,
+            mailConfigId: self.mailConfigId
+          };
+        }
+        if(self.captchaMethod === self.t('login-form.other.captcha-method-sms')){
+          url = config.upmsServerContext + "/anon/user/sendSmsForLogin"
+          param = {
+            userId: self.form.userName,
+            //phoneNumber: self.form.phoneNumber
+            validCodeId: self.validCodeId,
+            smConfigId: self.smConfigId,
+            templateId: self.templateId
+          }
+        }
+        if (self.form.userName && self.form.userName.trim().length > 0){
+          ajax
+              .post(url, param)
+              .then(function(resp) {
+                    if (resp.data.code == 200) {
+                      self.$Message.success({
+                        content: self.t('login-form.other.send-success'),})
+                    } else {
+                      self.$Message.error(resp.data.data);
+                      window.clearInterval(self.clock);
+                      self.ValidNumText = self.t('login-form.other.get-valid-code');
+                      self.countDown = self.countDownNum;
+                    }
+                  }
+              );
+        }else{
+          self.$Message.error(self.t('login-form.box.form-user-name'));
+          window.clearInterval(self.clock);
+          self.ValidNumText = self.t('login-form.other.get-valid-code');
+          self.countDown = self.countDownNum;
+        }
+      }
+    },
+    showSlideVerify(){
+      if (this.form.userName && this.form.userName.trim().length > 0){
+        let params = {
+          userName: this.form.userName,
+          password: this.form.password,
+          validCodeInput: this.form.validCode,
+          validCodeId: this.validCodeId
+        }
+        if (this.pasCryptor) {
+          params.pasCryptor = this.pasCryptor;
+          params.pasEncode = this.getCryptorPassword(this.form.password,this.form.validCode,this.pasCryptor);
+        } else {
+          params.pasMd5 = this.getCryptorPassword(this.form.password,this.form.validCode,'md5');
+          params.pasSm3 = this.getCryptorPassword(this.form.password,this.form.validCode,'sm3');
+        }
+        this.$emit('show-slide-verify', true,params)
+
+        this.setLocalUserId(this.form.userName)
+        if (this.rememberMe == true) {
+          this.setLocalStorage(this.form.userName)
+        }
+        if (this.rememberMe == false) {
+          this.clearLocalStorage();
+        }
+      }else{
+        this.$Message.error(this.t('login-form.box.form-user-name'));
+      }
+    },
     handleSubmit() {
       this.$refs.loginForm.validate((valid) => {
-        if (valid) {
+        if(valid && this.captchaMethod == this.t('login-form.other.captcha-method-slide-image')
+            && !this.isSlideVerify){
+          this.$Message.error(this.t('login-form.box.form-rule-click-login'));
+        }
+        if (valid && ((this.captchaMethod == this.t('login-form.other.captcha-method-slide-image')
+            && this.isSlideVerify) || this.captchaMethod != this.t('login-form.other.captcha-method-slide-image'))) {
           let params = {
             userName: this.form.userName,
             password: this.form.password,
@@ -136,6 +275,7 @@ export default {
             params.pasSm3 = this.getCryptorPassword(this.form.password,this.form.validCode,'sm3');
           }
           this.$emit('on-success-valid', params)
+          this.setLocalUserId(this.form.userName)
           if (this.rememberMe == true) {
             this.setLocalStorage(this.form.userName)
           }
@@ -154,6 +294,9 @@ export default {
     setLocalStorage(name) {
       setLocalStorage("username", name);
     },
+    setLocalUserId(name){
+      setLocalStorage('userId',name)
+    },
     clearLocalStorage() {
       removeLocalStorage("username");
     }
@@ -165,5 +308,5 @@ export default {
 }
 </script>
 <style lang="less">
-@import 'styles/css/login-form';
+ @import 'styles/css/login-form';
 </style>

package/src/login-page.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="lambo-login" :style="backGroundStyle">
     <div class="lambo-login-con" :style="formStyle">
-      <Card :bordered="false" icon="log-in" title="欢迎登录">
+      <Card :bordered="false" icon="log-in" :title="t('login-page.box.welcome-login')">
         <div class="lambo-form-con">
           <LamboLoginForm ref="login" :loading="formLoading"
                           :captcha-img-url="formCaptchaImgUrl"
@@ -15,9 +15,11 @@
 
 <script>
 import LamboLoginForm from './login-form'
+import Locale from "@lambo-design/core/src/mixins/locale";
 
 export default {
   name: 'LamboLoginPage',
+  mixins: [Locale],
   components: {
     LamboLoginForm
   },

package/src/styles/css/login-form.less

@@ -5,15 +5,23 @@
       height: 13px;
     }
   }
+  .captcha-container {
+    .ivu-form-item-content {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      align-items: center;
+    }
+  }
   .captcha {
     width: calc(100% - 100px);
   }
   .Imgbox {
     width: 90px;
-    height: 33px;
-    float: right;
-    padding: 2px;
-    margin-top: -33px;
+    height: var(--input-height-base, 33px);
+    //float: right;
+    padding: 1px;
+    //margin-top: -33px;
     background-color: #f8f8f9;
     .captchaImg {
       width: 100%;