86 lines
2.7 KiB
Vue
86 lines
2.7 KiB
Vue
<template>
|
|
<div class="register">
|
|
<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
|
|
<el-form-item :label="$t('Login.name')" prop="name">
|
|
<el-input name="name" v-model="formData.name" :placeholder="$t('Login.enterName')" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('Login.password')" prop="password">
|
|
<password-tip :value="formData.password" v-show="showPasswordTip" />
|
|
<el-input
|
|
name="password"
|
|
v-model="formData.password"
|
|
:placeholder="$t('Login.enterPassword')"
|
|
type="password"
|
|
show-password
|
|
@blur="showPasswordTip = false"
|
|
@focus="showPasswordTip = true"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<div class="password-warning">
|
|
<span class="icon"><svg-icon name="warning" size="12" /></span>
|
|
<span class="label">You must satisfy ALL password conditions to register.</span>
|
|
</div>
|
|
<el-form-item :label="$t('Login.email')" prop="email">
|
|
<el-input name="email" v-model="formData.email" :placeholder="$t('Login.enterEmail')" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<button type="submit" class="submit" custom="black" @click.prevent="onSubmit">
|
|
{{ $t('Login.register') }}
|
|
</button>
|
|
</el-form-item>
|
|
<el-form-item prop="privacy" class="privacy">
|
|
<el-checkbox v-model="formData.privacy">
|
|
<div v-html="$t('Login.agreeTermsPolicy')"></div>
|
|
</el-checkbox>
|
|
</el-form-item>
|
|
</el-form>
|
|
<other-login />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, reactive, ref } from 'vue'
|
|
import { validateName, validateEmail, validatePass, validatePrivacy } from './tools'
|
|
import OtherLogin from './other-login.vue'
|
|
import PasswordTip from './password-tip.vue'
|
|
const emit = defineEmits(['register'])
|
|
const props = defineProps({
|
|
name: { type: String, default: '' },
|
|
email: { type: String, default: '' },
|
|
password: { type: String, default: '' }
|
|
})
|
|
const ruleForm = reactive({
|
|
name: [{ validator: validateName, trigger: 'change' }],
|
|
email: [{ validator: validateEmail, trigger: 'change' }],
|
|
password: [{ validator: validatePass, trigger: 'change' }],
|
|
privacy: [{ validator: validatePrivacy, trigger: 'change' }]
|
|
})
|
|
const showPasswordTip = ref(false)
|
|
const formData = reactive({
|
|
name: props.name,
|
|
email: props.email,
|
|
password: props.password,
|
|
privacy: false
|
|
})
|
|
const formRef = ref(null)
|
|
const onSubmit = () => {
|
|
formRef.value?.validate?.((valid) => {
|
|
if (valid) {
|
|
// console.log('submit!')
|
|
emit('register', {
|
|
name: formData.name,
|
|
email: formData.email,
|
|
password: formData.password
|
|
})
|
|
} else {
|
|
console.warn('error submit!')
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import './less/style.less';
|
|
</style>
|