89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { getPasswordLevel } from '@/utils/validate'
|
||
|
||
interface Props {
|
||
password: string
|
||
}
|
||
|
||
const props = defineProps<Props>()
|
||
|
||
const level = computed(() => getPasswordLevel(props.password))
|
||
|
||
const levelText = computed(() => {
|
||
if (!props.password) return ''
|
||
return level.value === 'strong' ? '强' : level.value === 'medium' ? '中' : '弱'
|
||
})
|
||
|
||
const levelIndex = computed(() => (level.value === 'strong' ? 3 : level.value === 'medium' ? 2 : 1))
|
||
</script>
|
||
|
||
<template>
|
||
<div class="pwd-strength">
|
||
<div class="pwd-strength__bars">
|
||
<span
|
||
v-for="i in 3"
|
||
:key="i"
|
||
class="pwd-strength__bar"
|
||
:class="{ 'is-on': password && i <= levelIndex, [`is-${level}`]: password && i <= levelIndex }"
|
||
/>
|
||
</div>
|
||
<span class="pwd-strength__label" :class="`is-${level}`">{{ password ? `密码强度：${levelText}` : '' }}</span>
|
||
<p v-if="password && level === 'weak'" class="pwd-strength__tip">
|
||
密码等级过低，请重新输入（建议字母+数字+符号组合）
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.pwd-strength {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
grid-template-rows: 15px auto;
|
||
column-gap: @spacing-sm;
|
||
row-gap: 3px;
|
||
align-items: center;
|
||
min-height: 33px;
|
||
box-sizing: border-box;
|
||
|
||
&__bars {
|
||
.flex(row, center);
|
||
gap: 8px;
|
||
}
|
||
|
||
&__bar {
|
||
flex: 1;
|
||
height: 5px;
|
||
border-radius: 2px;
|
||
background: @auth-track;
|
||
|
||
&.is-on.is-weak {
|
||
background: @danger-color;
|
||
}
|
||
|
||
&.is-on.is-medium {
|
||
background: @warning-color;
|
||
}
|
||
|
||
&.is-on.is-strong {
|
||
background: @success-color;
|
||
}
|
||
}
|
||
|
||
&__label {
|
||
justify-self: end;
|
||
font-size: 11px;
|
||
line-height: 15px;
|
||
color: @text-color-disabled;
|
||
}
|
||
|
||
&__tip {
|
||
grid-column: 1 / -1;
|
||
margin: 0;
|
||
font-size: 11px;
|
||
line-height: 15px;
|
||
color: @danger-color;
|
||
}
|
||
}
|
||
</style>
|