chat聊天功能
This commit is contained in:
@@ -58,15 +58,43 @@
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="password_input_block">
|
||||
<div v-show="passwordConditionShow" class="conditionShow">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i v-show="!passwordCondition.length" class="fi fi-br-cross-small"></i>
|
||||
<i v-show="passwordCondition.length" class="fi fi-br-check"></i>
|
||||
</div>
|
||||
<div class="text">At least 8 characters long</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i v-show="!passwordCondition.special" class="fi fi-br-cross-small"></i>
|
||||
<i v-show="passwordCondition.special" class="fi fi-br-check"></i>
|
||||
</div>
|
||||
<div class="text">Must contain special characters</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i v-show="!passwordCondition.group" class="fi fi-br-cross-small"></i>
|
||||
<i v-show="passwordCondition.group" class="fi fi-br-check"></i>
|
||||
</div>
|
||||
<div class="text">Mix of uppercase, lowercase and numbers</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
class="login_form_input"
|
||||
:class="{active:Object.values(passwordCondition).filter(value => value === true).length<3}"
|
||||
:type="passwordType"
|
||||
placeholder="Enter your password"
|
||||
v-model="password"
|
||||
@keydown.enter="submitPerLogin()"
|
||||
@input="passwordInput"
|
||||
@focus="()=>passwordConditionShow = true"
|
||||
@blur="()=>passwordConditionShow = false"
|
||||
/>
|
||||
<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
|
||||
</div>
|
||||
<span style="font-weight: 400;opacity: .7;">You must satisfy ALL password conditions to register.</span>
|
||||
<div class="login_form_title marign_top30">Email</div>
|
||||
<input
|
||||
class="login_form_input"
|
||||
@@ -271,7 +299,13 @@ export default defineComponent({
|
||||
let register = reactive({
|
||||
registerModel:false,
|
||||
registerModelMask:true,
|
||||
pageWidth:'50%'
|
||||
pageWidth:'50%',
|
||||
passwordConditionShow:false,
|
||||
passwordCondition:{
|
||||
length:false,
|
||||
special:false,
|
||||
group:false,
|
||||
},
|
||||
})
|
||||
return{
|
||||
store,
|
||||
@@ -406,7 +440,15 @@ export default defineComponent({
|
||||
checkRobot() {
|
||||
this.isCheckRobot = !this.isCheckRobot;
|
||||
},
|
||||
|
||||
passwordInput(){
|
||||
this.isPassword(this.password)
|
||||
},
|
||||
isPassword(password:any){
|
||||
this.passwordCondition.length = /.{8,}/.test(password)
|
||||
this.passwordCondition.special = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)
|
||||
this.passwordCondition.group = /[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password)
|
||||
return Object.values(this.passwordCondition).filter(value => value === true).length;
|
||||
},
|
||||
//提交账号密码预先登录
|
||||
submitPerLogin() {
|
||||
|
||||
@@ -415,6 +457,9 @@ export default defineComponent({
|
||||
if(this.emailStap>=2){
|
||||
return;
|
||||
}else{
|
||||
if (/aida/i.test(this.username)) {
|
||||
message.info('The name cannot contain "AiDA" or any combination of its uppercase and lowercase forms.');
|
||||
}
|
||||
if (!this.username || !this.password) {
|
||||
message.info("Please enter your account number or password");
|
||||
return;
|
||||
@@ -434,6 +479,11 @@ export default defineComponent({
|
||||
message.info("Agree to all terms, privacy fees and policies");
|
||||
return;
|
||||
}
|
||||
if(this.isPassword(this.password) < 3){
|
||||
message.info("You must satisfy ALL password conditions to register.");
|
||||
return
|
||||
}
|
||||
|
||||
let data = {
|
||||
userPassword: md5(this.password + "abc"),
|
||||
userName: this.username,
|
||||
@@ -670,7 +720,7 @@ export default defineComponent({
|
||||
// width: 80%;
|
||||
background: #FFFFFF;
|
||||
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
|
||||
padding: 3rem 6rem 6.5rem;
|
||||
padding: 2rem 6rem 2rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -766,6 +816,35 @@ export default defineComponent({
|
||||
top:1.7rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
> .conditionShow{
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: translateY(-5rem);
|
||||
background: #404040;
|
||||
color: #FFF;
|
||||
font-size: 1.4rem;
|
||||
padding: 2rem;
|
||||
border-radius: 2rem;
|
||||
> .item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: .5rem;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> .icon{
|
||||
margin-right: 1rem;
|
||||
i{
|
||||
display: flex;
|
||||
// &.fi-br-cross-small{
|
||||
// color: red;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login_form_input {
|
||||
@@ -786,6 +865,9 @@ export default defineComponent({
|
||||
&::placeholder {
|
||||
color: #a5b0c2;
|
||||
}
|
||||
&.active{
|
||||
border: 0.1rem solid red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user