feat(settings): 用户名校验强化、个性签名编辑、字符计数器及提示优化
- 用户名校验改用白名单正则（中英文/数字/下划线/连字符），字符数计法统一 - 简介→个性签名，新增 textarea 可编辑，上限 128 字符 - 用户名+签名各增加实时字符计数器（x/16、x/128） - API 合并为 PUT /api/settings/profile，一次提交两字段，按变更写入 - Toast 移至 NAV 下方，独立样式，5 秒自动消失 - 移除用户 ID 灰色底色，提示改为「个人资料已更新」 - 纯文本存储 + Go 模板自动转义防 XSS
This commit is contained in:
@ -6,10 +6,13 @@ import "errors"
|
||||
var (
|
||||
ErrEmailExists = errors.New("该邮箱已注册")
|
||||
ErrUsernameTaken = errors.New("该用户名已被占用")
|
||||
ErrUsernameInvalid = errors.New("用户名格式无效（支持中英文、数字、下划线、连字符，1-16个字符）")
|
||||
ErrBioTooLong = errors.New("个性签名不能超过 128 个字符")
|
||||
ErrInvalidCred = errors.New("邮箱或密码错误")
|
||||
ErrUserNotFound = errors.New("用户不存在")
|
||||
ErrUserBanned = errors.New("该账号已被封禁")
|
||||
ErrUserDeleted = errors.New("该账号已申请注销，登录即自动恢复")
|
||||
// 统一返回，避免泄露用户存在性、软删除状态等内部信息
|
||||
ErrUserLocked = errors.New("邮箱或密码错误")
|
||||
ErrWeakPassword = errors.New("密码需至少 8 位，且包含字母和数字")
|
||||
ErrTokenExpired = errors.New("登录已过期，请重新登录")
|
||||
|
||||
@ -9,9 +9,10 @@ import (
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
// profileProvider SettingsController 对 Service 层的最小依赖（ISP：1 个方法）
|
||||
// profileProvider SettingsController 对 Service 层的最小依赖（ISP：2 个方法）
|
||||
type profileProvider interface {
|
||||
GetProfile(userID uint) (*model.User, error)
|
||||
UpdateProfile(userID uint, username, bio string) error
|
||||
}
|
||||
|
||||
// SettingsController 个人设置控制器
|
||||
@ -55,3 +56,42 @@ func (sc *SettingsController) SettingsPage(c *gin.Context) {
|
||||
"StatusName": model.StatusDisplayNames[user.Status],
|
||||
}))
|
||||
}
|
||||
|
||||
// UpdateProfile 修改个人资料（用户名 + 个性签名，需登录）
|
||||
func (sc *SettingsController) UpdateProfile(c *gin.Context) {
|
||||
uid, exists := c.Get("uid")
|
||||
if !exists {
|
||||
common.Error(c, http.StatusUnauthorized, "请先登录")
|
||||
return
|
||||
}
|
||||
|
||||
var req struct {
|
||||
Username string `json:"username"`
|
||||
Bio string `json:"bio"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
common.Error(c, http.StatusBadRequest, "参数错误")
|
||||
return
|
||||
}
|
||||
|
||||
if err := sc.authService.UpdateProfile(uid.(uint), req.Username, req.Bio); err != nil {
|
||||
handleSettingsError(c, err)
|
||||
return
|
||||
}
|
||||
|
||||
common.OkMessage(c, "个人资料已更新")
|
||||
}
|
||||
|
||||
// handleSettingsError 统一处理 settings 接口的 service 层错误
|
||||
func handleSettingsError(c *gin.Context, err error) {
|
||||
switch err {
|
||||
case common.ErrUsernameTaken:
|
||||
common.Error(c, http.StatusConflict, err.Error())
|
||||
case common.ErrUsernameInvalid:
|
||||
common.Error(c, http.StatusBadRequest, err.Error())
|
||||
case common.ErrBioTooLong:
|
||||
common.Error(c, http.StatusBadRequest, err.Error())
|
||||
default:
|
||||
common.Error(c, http.StatusInternalServerError, "操作失败")
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,6 +72,14 @@ func Setup(r *gin.Engine, db *gorm.DB, cfg *config.Config) {
|
||||
authPages.GET("/login", authCtrl.LoginPage)
|
||||
}
|
||||
|
||||
// --- 设置页 API（需登录） ---
|
||||
settingsAPI := r.Group("/api/settings")
|
||||
settingsAPI.Use(authMdw.Required())
|
||||
settingsAPI.Use(middleware.CSRF(cfg))
|
||||
{
|
||||
settingsAPI.PUT("/profile", settingsCtrl.UpdateProfile)
|
||||
}
|
||||
|
||||
// --- 管理后台 SSR 页面（认证失败 302 跳首页） ---
|
||||
adminPages := r.Group("/admin")
|
||||
adminPages.Use(authMdw.AdminAuth())
|
||||
|
||||
@ -2,6 +2,7 @@ package service
|
||||
|
||||
import (
|
||||
"regexp"
|
||||
"unicode/utf8"
|
||||
|
||||
"metazone.cc/metalab/internal/common"
|
||||
"metazone.cc/metalab/internal/config"
|
||||
@ -41,6 +42,9 @@ var (
|
||||
var pwLetter = regexp.MustCompile(`[a-zA-Z]`)
|
||||
var pwDigit = regexp.MustCompile(`\d`)
|
||||
|
||||
// usernamePattern 用户名合法字符：中文、英文大小写、数字、下划线、连字符
|
||||
var usernamePattern = regexp.MustCompile(`^[\p{Han}a-zA-Z0-9_-]+$`)
|
||||
|
||||
// dummyHash 防时序攻击：当用户不存在时，仍对虚拟哈希执行完整的 bcrypt 比对
|
||||
// 在 init() 中按当前 bcrypt 成本生成，确保时序与真实校验一致
|
||||
var dummyHash []byte
|
||||
@ -184,3 +188,52 @@ func (s *AuthService) GetProfile(userID uint) (*model.User, error) {
|
||||
func (s *AuthService) InvalidateSessions(userID uint) error {
|
||||
return s.userRepo.IncrementTokenVersion(userID)
|
||||
}
|
||||
|
||||
// UpdateProfile 修改个人资料（用户名 + 个性签名）
|
||||
// 用户名校验：非空、1-16 字符、白名单、去重
|
||||
// 个性签名校验：0-128 字符纯文本，Go 模板自动 HTML 转义防 XSS
|
||||
// 任一字段无变更时跳过该字段的写库操作
|
||||
func (s *AuthService) UpdateProfile(userID uint, username, bio string) error {
|
||||
// 查当前用户
|
||||
user, err := s.userRepo.FindByID(userID)
|
||||
if err != nil {
|
||||
return common.ErrUserNotFound
|
||||
}
|
||||
|
||||
needsUpdate := false
|
||||
|
||||
// 用户名：校验 + 更新
|
||||
if n := utf8.RuneCountInString(username); n == 0 {
|
||||
return common.ErrUsernameInvalid
|
||||
} else if n > 16 {
|
||||
return common.ErrUsernameInvalid
|
||||
}
|
||||
if !usernamePattern.MatchString(username) {
|
||||
return common.ErrUsernameInvalid
|
||||
}
|
||||
if username != user.Username {
|
||||
exists, err := s.userRepo.ExistsByUsername(username)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
if exists {
|
||||
return common.ErrUsernameTaken
|
||||
}
|
||||
user.Username = username
|
||||
needsUpdate = true
|
||||
}
|
||||
|
||||
// 个性签名：长度校验 + 更新
|
||||
if utf8.RuneCountInString(bio) > 128 {
|
||||
return common.ErrBioTooLong
|
||||
}
|
||||
if bio != user.Bio {
|
||||
user.Bio = bio
|
||||
needsUpdate = true
|
||||
}
|
||||
|
||||
if !needsUpdate {
|
||||
return nil
|
||||
}
|
||||
return s.userRepo.Update(user)
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
|
||||
{{template "layout/nav.html" .}}
|
||||
|
||||
<div class="settings-toast" id="settingsToast"></div>
|
||||
|
||||
<div class="settings-layout">
|
||||
<aside class="settings-sidebar">
|
||||
<nav class="settings-nav">
|
||||
@ -36,7 +38,10 @@
|
||||
<div class="settings-card-body">
|
||||
<div class="info-row">
|
||||
<span class="info-label">用户名</span>
|
||||
<span class="info-value">{{.User.Username}}</span>
|
||||
<span class="info-value">
|
||||
<input type="text" id="usernameInput" class="settings-text-input" value="{{.User.Username}}" maxlength="16" autocomplete="off">
|
||||
<span class="char-counter" id="usernameCounter"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">头像</span>
|
||||
@ -49,9 +54,10 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">简介</span>
|
||||
<span class="info-value{{if not .User.Bio}} info-muted{{end}}">
|
||||
{{if .User.Bio}}{{.User.Bio}}{{else}}未填写{{end}}
|
||||
<span class="info-label">个性签名</span>
|
||||
<span class="info-value">
|
||||
<textarea id="bioInput" class="settings-textarea" maxlength="128" placeholder="写一句话介绍自己...">{{.User.Bio}}</textarea>
|
||||
<div class="char-counter" id="bioCounter"></div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
@ -60,6 +66,9 @@
|
||||
<span class="role-tag role-{{.User.Role}}">{{.RoleName}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="settings-card-footer">
|
||||
<button id="saveProfileBtn" class="settings-save-btn">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
@ -72,7 +81,7 @@
|
||||
<div class="settings-card-body">
|
||||
<div class="info-row">
|
||||
<span class="info-label">用户 ID</span>
|
||||
<span class="info-value info-mono">{{.User.ID}}</span>
|
||||
<span class="info-value">{{.User.ID}}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">邮箱</span>
|
||||
@ -101,5 +110,111 @@
|
||||
{{template "layout/footer.html" .}}
|
||||
|
||||
<script src="/static/js/common.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var usernameInput = document.getElementById('usernameInput');
|
||||
var bioInput = document.getElementById('bioInput');
|
||||
var btn = document.getElementById('saveProfileBtn');
|
||||
if (!usernameInput || !bioInput || !btn) return;
|
||||
|
||||
var toastEl = document.getElementById('settingsToast');
|
||||
var toastTimer = null;
|
||||
|
||||
function showSettingsToast(msg, isError) {
|
||||
if (!toastEl) return;
|
||||
clearTimeout(toastTimer);
|
||||
toastEl.textContent = msg;
|
||||
toastEl.className = 'settings-toast' + (isError ? ' error' : '');
|
||||
void toastEl.offsetWidth;
|
||||
toastEl.classList.add('show');
|
||||
toastTimer = setTimeout(function () {
|
||||
toastEl.classList.remove('show');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// ---- 字符计数器 ----
|
||||
var usernameCounter = document.getElementById('usernameCounter');
|
||||
var bioCounterEl = document.getElementById('bioCounter');
|
||||
|
||||
function updateCounters() {
|
||||
if (usernameCounter) {
|
||||
usernameCounter.textContent = usernameInput.value.length + '/16';
|
||||
}
|
||||
if (bioCounterEl) {
|
||||
bioCounterEl.textContent = bioInput.value.length + '/128';
|
||||
}
|
||||
}
|
||||
|
||||
usernameInput.addEventListener('input', updateCounters);
|
||||
bioInput.addEventListener('input', updateCounters);
|
||||
updateCounters();
|
||||
|
||||
// ---- 原始值（用于判断是否变更） ----
|
||||
var origUsername = usernameInput.value.trim();
|
||||
var origBio = bioInput.value;
|
||||
|
||||
// 与后端一致的合法字符集：中文、英文大小写、数字、下划线、连字符
|
||||
var usernameRe = /^[\u4e00-\u9fffa-zA-Z0-9_-]+$/;
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
var username = usernameInput.value.trim();
|
||||
var bio = bioInput.value;
|
||||
|
||||
// 用户名校验
|
||||
if (!username) {
|
||||
showSettingsToast('用户名不能为空', true);
|
||||
return;
|
||||
}
|
||||
if (username.length > 16) {
|
||||
showSettingsToast('用户名不能超过 16 个字符', true);
|
||||
return;
|
||||
}
|
||||
if (!usernameRe.test(username)) {
|
||||
showSettingsToast('用户名仅支持中英文、数字、下划线、连字符', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 个性签名校验
|
||||
if (bio.length > 128) {
|
||||
showSettingsToast('个性签名不能超过 128 个字符', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 无变更判断
|
||||
if (username === origUsername && bio === origBio) {
|
||||
showSettingsToast('内容未变更，无需保存');
|
||||
return;
|
||||
}
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = '保存中...';
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('PUT', '/api/settings/profile', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState !== 4) return;
|
||||
btn.disabled = false;
|
||||
btn.textContent = '保存';
|
||||
|
||||
try {
|
||||
var res = JSON.parse(xhr.responseText);
|
||||
if (res.success) {
|
||||
showSettingsToast(res.message || '个人资料已更新');
|
||||
origUsername = username;
|
||||
origBio = bio;
|
||||
} else {
|
||||
showSettingsToast(res.message || '保存失败', true);
|
||||
}
|
||||
} catch (e) {
|
||||
showSettingsToast('保存失败', true);
|
||||
}
|
||||
};
|
||||
xhr.send(JSON.stringify({ username: username, bio: bio }));
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,6 +10,37 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ---------- Toast Notification ---------- */
|
||||
.settings-toast {
|
||||
position: fixed;
|
||||
top: 55px; /* 紧贴导航栏下方 */
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-20px);
|
||||
padding: .6rem 1.5rem;
|
||||
font-size: .88rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background: #2ecc71;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .25s ease, transform .25s ease;
|
||||
max-width: calc(100% - 40px);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.settings-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.settings-toast.error {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
/* ---------- Layout ---------- */
|
||||
.settings-layout {
|
||||
display: flex;
|
||||
@ -104,6 +135,91 @@ body {
|
||||
padding: 1.25rem 2rem 1.5rem;
|
||||
}
|
||||
|
||||
/* ---------- Input Field ---------- */
|
||||
.settings-text-input {
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
padding: .45rem .7rem;
|
||||
font-size: .92rem;
|
||||
font-family: inherit;
|
||||
color: var(--color-text);
|
||||
background: #f9fafb;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
transition: border-color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
|
||||
.settings-text-input:focus {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 3px rgba(52, 152, 219, .15);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* ---------- Textarea Field ---------- */
|
||||
.settings-textarea {
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
height: 80px;
|
||||
padding: .5rem .7rem;
|
||||
font-size: .92rem;
|
||||
font-family: inherit;
|
||||
color: var(--color-text);
|
||||
background: #f9fafb;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
transition: border-color .15s ease, box-shadow .15s ease;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.settings-textarea:focus {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 3px rgba(52, 152, 219, .15);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* ---------- Character Counter ---------- */
|
||||
.char-counter {
|
||||
font-size: .78rem;
|
||||
color: #aaa;
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ---------- Save Button ---------- */
|
||||
.settings-card-footer {
|
||||
padding: 1rem 2rem 1.5rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.settings-save-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: .55rem 1.5rem;
|
||||
font-size: .88rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
color: #fff;
|
||||
background: var(--color-accent);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background .15s ease, opacity .15s ease;
|
||||
}
|
||||
|
||||
.settings-save-btn:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.settings-save-btn:disabled {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ---------- Info Rows ---------- */
|
||||
.info-row {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user