block-identity-auth/ui/src/pages/register.vue

<template>
	<div class="module">
		<div class="module_mian">
			<div class="module_title">注册帐户</div>
			<div class="module_desc">输入用户名 & 密码</div>
			<div class="module_m">
				<div class="module_text">用户昵称</div>
				<input class="module_input" type="text" placeholder="输入昵称" v-model="register.nickName" />
			</div>
			<div class="module_m">
				<div class="module_text">用户名</div>
				<input class="module_input" type="text" placeholder="输入用户名" v-model="register.username" />
			</div>
			<div class="module_m">
				<div class="module_text">密码</div>
				<input class="module_input" type="password"  placeholder="输入密码" v-model="register.password" />
			</div>
			<div class="module_m">
				<div class="module_text">确认密码</div>
				<div class="module_code">
					<input class="module_input" type="password"  placeholder="再次输入密码" v-model="register.confirmPassword" />
				</div>
			</div>
			<div class="forgetpwd" @click="router.push('/login')">有账号？</div>
			<button class="module_button" @click="onRegister">注册</button>
		</div>

		<!-- 注册成功弹窗 -->
		<el-dialog
			v-model="showKeyDialog"
			title="注册成功"
			width="50%"
		>
				<el-form label-width="auto" style="max-width: 600px">
					<el-form-item label="账户地址">
						<el-input v-model="state.getUserInfo.hex" />
					</el-form-item>
					<el-form-item label="公钥">
						<el-input    type="password"  show-password v-model="state.getUserInfo.publicKey" />
					</el-form-item>
					<el-form-item label="私钥">
						<el-input v-model="state.getUserInfo.privateKey" />
					</el-form-item>
				</el-form>
			<template #footer>
				<el-button @click="showKeyDialog = false">关闭</el-button>
			</template>
		</el-dialog>


	</div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const register = reactive({
	username: '',
	password: '',
	confirmPassword: '',
})
const showKeyDialog = ref(false)
const state = reactive({
	getUserInfo:{
		"hex": "1893836584118175698",
		"nickName": "12345678",
		"publicKey": "MIIBIjANBgkqhkiG9w0BAQ",
		"privateKey": "MBAAECggE",
		"username": "12345678"
	}
})

/**
 * 注册成功
 */
const onRegister = () => {
	if (register.username == 'admin') {
		ElMessage.warning("不能创建账号Admin")
		return
	}
	frontRequest.post("/api/user/register", register).then(res =>{
		ElMessage.success("注册成功~")
		state.getUserInfo = res.data
		showKeyDialog.value = true
		// router.push("/login")
	})
}


/**
 * 复制所有密钥信息
 */
const copyAllKeys = () => {
	const text = `账号地址: ${state.getUserInfo.hex}\n公钥: ${state.getUserInfo.publicKey}\n私钥: ${state.getUserInfo.privateKey}`

	navigator.clipboard.writeText(text).then(() => {
		ElMessage.success('已复制到剪贴板')
	}).catch(err => {
		ElMessage.error('复制失败: ' + err)
	})
}
</script>
<style scoped>
.module{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: url("/508d288b-cd6e-4814-a99f-53a3999c4261.jpg");
	background-size: 100% 100%;
	.module_mian{
		width: 26%;
		background: #FFFFFF;
		height: auto;
		border-radius: 8px;
		overflow: hidden;
		padding-top: 40px;
		padding-bottom: 40px;
		.module_title{
			font-size: 18px;
			font-weight: 500;
			text-align: center;
			color:#333333;
		}
		.module_desc{
			font-size: 12px;
			text-align: center;
			color:#a7a7a7;
			margin-bottom: 20px;
		}
		.module_m{
			margin: 0 auto;
			width: 80%;
			height: auto;
			margin-top: 10px;
			.module_text{
				font-size: 14px;
				color: #333333;
				margin-bottom: 5px;
			}
			.module_input{
				width: 96%;
				height: 40px;
				padding-left: 2%;
				padding-right: 2%;
				border:1px solid #eee;
				border-radius: 5px;
				font-size: 12px;
			}
			.module_code{
				width: 96%;
				display: flex;
				align-items: center;
				.module_code_input{
					width: 60%;
					height: 40px;
					border-radius: 5px;
					border:1px solid #eee;
					font-size: 12px;
					padding-left: 2%;
					padding-right: 2%;
				}
				.module_code_img{
					width: 130px;
					height: 40px;
					border-radius: 5px;
					margin-left: 10px;
				}
			}
		}
		.module_radio{
			margin: 0 auto;
			width: 80%;
			font-size: 14px;
			color: #333333;
			display: flex;
			align-items: center;
			margin-top: 10px;
		}
		.module_radio input{
			margin-right: 5px;
		}
		.forgetpwd{
			cursor: pointer;
			margin: 0 auto;
			width: 80%;
			font-size: 14px;
			color: #328d86;
			margin-top: 10px;
		}
		.module_button{
			margin: 0 auto;
			display: block;
			width: 80%;
			background:#328d86;
			color: #FFFFFF;
			height: 40px;
			margin-top: 20px;
			border-radius: 5px;
			font-weight: 500;
		}
		.module_button:active{
			opacity: 0.4;
		}
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>