Family-Tree/gateway/templates/register.html
jdysya 0e248830a9 feat(gateway): 实现用户注册功能并优化登录流程
- 新增用户模型和数据库迁移
- 实现用户注册页面和处理逻辑
- 更新登录页面,使用手机号作为用户名
- 添加密码加密存储
- 优化错误处理和用户提示
2025-02-15 16:09:41 +08:00

86 lines
3.0 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册 - 余氏族谱</title>
<style>
/* 复用登录页样式,新增部分样式 */
.login-container {
max-width: 500px;
}
.form-group-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.login-link {
text-align: center;
margin-top: 1.5rem;
}
.login-link a {
color: var(--accent-color);
text-decoration: none;
}
.form-select {
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
background: white url("data:image/svg+xml,%3csvg...") no-repeat right 0.75rem center/8px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-select:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}
</style>
</head>
<body>
<div class="login-container">
<h1>新用户注册</h1>
<form action="/register" method="post">
<div class="form-group">
<label for="fullname">真实姓名</label>
<input type="text" id="fullname" name="fullname" required
placeholder="请输入真实姓名">
</div>
<div class="form-group-row">
<div class="form-group">
<label for="mobile">手机号码</label>
<input type="tel" id="mobile" name="mobile" required
pattern="[0-9]{11}"
placeholder="请输入11位手机号">
</div>
<div class="form-group">
<label for="password">登录密码</label>
<input type="password" id="password" name="password" required
minlength="6"
placeholder="至少6位密码">
</div>
</div>
<div class="form-group">
<label for="region">所在地区</label>
<select name="region" class="form-control">
<option value="">请选择所在地区</option>
{{ range .regions }}
<option value="{{ .ID }}" {{ if eq .ID $.form.region }}selected{{ end }}>{{ .Name }}</option>
{{ end }}
</select>
</div>
<button type="submit">立即注册</button>
<div class="login-link">
已有账号?<a href="/login">立即登录</a>
</div>
</form>
{{ if .error }}
<p class="error-message">{{ .error }}</p>
{{ end }}
</div>
</body>
</html>