You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
bililive_webapp/src/components/Password.vue

70 lines
2.2 KiB

<!--修改密码-->
<template>
<el-row type="flex" justify="center">
<el-col :span="8">
<span>密码必须包含数字字母6-10</span>
<el-input v-model="password" show-password>
<template v-slot:prepend>新密码</template>
</el-input>
<span v-if="password!==''&&!checkPwd">新密码不合法</span>
</el-col>
</el-row>
<el-row type="flex" justify="center" class="mt-1">
<el-col :span="8">
<el-input v-model="newPassword" show-password>
<template v-slot:prepend>确认新密码</template>
</el-input>
<span v-if="password!==''&&newPassword!==''&&password!==newPassword">两次密码输入不一致!</span>
</el-col>
</el-row>
<el-row type="flex" justify="center" class="mt-1">
<el-col :span="2">
<el-button type="primary" class="btn-block" :disabled="!(password!==''&&password===newPassword)"
@click="requestChangePwd">修改密码
</el-button>
</el-col>
<el-col :span="2"/>
<el-col :span="2">
<el-button type="info" class="btn-block" @click="$router.replace('/config')">返回</el-button>
</el-col>
</el-row>
</template>
<script lang="ts">
import {computed, defineComponent, ref} from "vue"
import {updateRoute} from "../router";
import {changePwd, JSONResponse, message} from "../request";
import {useRoute, useRouter} from "vue-router";
import {passwordRegexp} from "../validate";
// @ts-ignore
import crumbs from 'crumbsjs';
import {email_cookie_key} from "../global";
export default defineComponent({
name: "Password",
setup(props) {
const password = ref<string>('')
const newPassword = ref<string>('')
const route = useRoute()
const router = useRouter()
const checkPwd = computed<boolean>(() => passwordRegexp.test(password.value))
const requestChangePwd = () => changePwd(crumbs.get(email_cookie_key), password.value).then(res => res.json())
.then((res: JSONResponse) => {
message(res)
if (res.result === 'OK') {
router.replace('/config')
}
})
updateRoute()
return {password, newPassword, checkPwd, requestChangePwd}
}
})
</script>
<style scoped>
</style>