登录

src/views/login/register.vue

@@ -0,0 +1,85 @@
+<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>