完成第一个设置页面
This commit is contained in:
parent
2947365a99
commit
c93e3d25e9
@ -4,6 +4,7 @@ import com.example.entity.RestBean;
|
||||
import com.example.entity.dto.Account;
|
||||
import com.example.entity.dto.AccountDetails;
|
||||
import com.example.entity.vo.request.DetailsSaveVO;
|
||||
import com.example.entity.vo.request.ModifyEmailVO;
|
||||
import com.example.entity.vo.response.AccountDetailsVO;
|
||||
import com.example.entity.vo.response.AccountVO;
|
||||
import com.example.service.AccountDetailsService;
|
||||
@ -45,4 +46,11 @@ public class AccountController {
|
||||
boolean success = detailsService.saveAccountDetails(id, vo);
|
||||
return success ? RestBean.success() : RestBean.failure(400, "此用户名已被其他用户使用，请重新更换！");
|
||||
}
|
||||
|
||||
@PostMapping("/modify-email")
|
||||
public RestBean<Void> modifyEmail(@RequestAttribute(Const.ATTR_USER_ID) int id,
|
||||
@RequestBody @Valid ModifyEmailVO vo){
|
||||
String result = service.modifyEmail(id, vo);
|
||||
return result == null ? RestBean.success() : RestBean.failure(400, result);
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@ public class AuthorizeController {
|
||||
@GetMapping("/ask-code")
|
||||
@Operation(summary = "请求邮件验证码")
|
||||
public RestBean<Void> askVerifyCode(@RequestParam @Email String email,
|
||||
@RequestParam @Pattern(regexp = "(register|reset)") String type,
|
||||
@RequestParam @Pattern(regexp = "(register|reset|modify)") String type,
|
||||
HttpServletRequest request){
|
||||
return this.messageHandle(() ->
|
||||
accountService.registerEmailVerifyCode(type, String.valueOf(email), request.getRemoteAddr()));
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
package com.example.entity.vo.request;
|
||||
|
||||
import jakarta.validation.constraints.Email;
|
||||
import lombok.Data;
|
||||
import org.hibernate.validator.constraints.Length;
|
||||
|
||||
@Data
|
||||
public class ModifyEmailVO {
|
||||
@Email
|
||||
String email;
|
||||
@Length(max = 6, min = 6)
|
||||
String code;
|
||||
}
|
||||
@ -40,6 +40,10 @@ public class MailQueueListener {
|
||||
createMessage("您的密码重置邮件",
|
||||
"你好，您正在执行重置密码操作，验证码: "+code+"，有效时间3分钟，如非本人操作，请无视。",
|
||||
email);
|
||||
case "modify" ->
|
||||
createMessage("您的邮件修改验证邮件",
|
||||
"您好，您正在绑定新的电子邮件地址，验证码: "+code+"，有效时间3分钟，如非本人操作，请无视。",
|
||||
email);
|
||||
default -> null;
|
||||
};
|
||||
if(message == null) return;
|
||||
|
||||
@ -5,6 +5,7 @@ import com.example.entity.dto.Account;
|
||||
import com.example.entity.vo.request.ConfirmResetVO;
|
||||
import com.example.entity.vo.request.EmailRegisterVO;
|
||||
import com.example.entity.vo.request.EmailResetVO;
|
||||
import com.example.entity.vo.request.ModifyEmailVO;
|
||||
import org.springframework.security.core.userdetails.UserDetailsService;
|
||||
|
||||
public interface AccountService extends IService<Account>, UserDetailsService {
|
||||
@ -14,4 +15,5 @@ public interface AccountService extends IService<Account>, UserDetailsService {
|
||||
String registerEmailAccount(EmailRegisterVO info);
|
||||
String resetEmailAccountPassword(EmailResetVO info);
|
||||
String resetConfirm(ConfirmResetVO info);
|
||||
String modifyEmail(int id, ModifyEmailVO vo);
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import com.example.entity.dto.Account;
|
||||
import com.example.entity.vo.request.ConfirmResetVO;
|
||||
import com.example.entity.vo.request.EmailRegisterVO;
|
||||
import com.example.entity.vo.request.EmailResetVO;
|
||||
import com.example.entity.vo.request.ModifyEmailVO;
|
||||
import com.example.mapper.AccountMapper;
|
||||
import com.example.service.AccountService;
|
||||
import com.example.utils.Const;
|
||||
@ -143,6 +144,23 @@ public class AccountServiceImpl extends ServiceImpl<AccountMapper, Account> impl
|
||||
return null;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String modifyEmail(int id, ModifyEmailVO vo) {
|
||||
String email = vo.getEmail();
|
||||
String code = getEmailVerifyCode(email);
|
||||
if(code == null) return "请先获取验证码！";
|
||||
if(!code.equals(vo.getCode())) return "验证码错误，请重新输入";
|
||||
this.deleteEmailVerifyCode(email);
|
||||
Account account = this.findAccountByNameOrEmail(email);
|
||||
if(account != null && account.getId() != id)
|
||||
return "该电子邮件已经被其他账号绑定，无法完成此操作！";
|
||||
this.update()
|
||||
.set("email", email)
|
||||
.eq("id", id)
|
||||
.update();
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除Redis中存储的邮件验证码
|
||||
* @param email 电邮
|
||||
|
||||
@ -42,8 +42,6 @@ const rules = {
|
||||
], email: [
|
||||
{ required: true, message: '请输入邮件地址', trigger: 'blur' },
|
||||
{type: 'email', message: '请输入合法的电子邮件地址', trigger: ['blur', 'change']}
|
||||
], code: [
|
||||
{ required: true, message: '请输入获取的验证码', trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
|
||||
@ -68,7 +66,6 @@ function saveDetails() {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
get('/api/user/details', data => {
|
||||
baseForm.username = store.user.username
|
||||
baseForm.gender = data.gender
|
||||
@ -76,8 +73,42 @@ get('/api/user/details', data => {
|
||||
baseForm.wx = data.wx
|
||||
baseForm.qq = data.qq
|
||||
baseForm.desc = desc.value = data.desc
|
||||
emailForm.email = store.user.email
|
||||
loading.form = false
|
||||
})
|
||||
|
||||
const coldTime = ref(0)
|
||||
const isEmailValid = ref(true)
|
||||
const onValidate = (prop, isValid) => {
|
||||
if(prop === 'email')
|
||||
isEmailValid.value = isValid
|
||||
}
|
||||
function sendEmailCode() {
|
||||
emailFormRef.value.validate(isValid => {
|
||||
coldTime.value = 60
|
||||
get(`/api/auth/ask-code?email=${emailForm.email}&type=modify`, () => {
|
||||
ElMessage.success(`验证码已成功发送到邮箱：${emailForm.email}，请注意查收`)
|
||||
const handle = setInterval(() => {
|
||||
coldTime.value--
|
||||
if(coldTime.value === 0) {
|
||||
clearInterval(handle)
|
||||
}
|
||||
}, 1000)
|
||||
}, (message) => {
|
||||
ElMessage.warning(message)
|
||||
coldTime.value = 0
|
||||
})
|
||||
})
|
||||
}
|
||||
function modifyEmail() {
|
||||
emailFormRef.value.validate(isValid => {
|
||||
post('/api/user/modify-email', emailForm, () => {
|
||||
ElMessage.success('邮件修改成功')
|
||||
store.user.email = emailForm.email
|
||||
emailForm.code = ''
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -114,7 +145,7 @@ get('/api/user/details', data => {
|
||||
</el-form>
|
||||
</card>
|
||||
<card style="margin-top: 10px" :icon="Message" title="电子邮件设置" desc="您可以在这里修改默认绑定的电子邮件地址">
|
||||
<el-form :rules="rules" :model="emailForm" ref="emailForm" label-position="top" style="margin: 0 10px 10px 10px">
|
||||
<el-form :rules="rules" @validate="onValidate" :model="emailForm" ref="emailFormRef" label-position="top" style="margin: 0 10px 10px 10px">
|
||||
<el-form-item label="电子邮件" prop="email">
|
||||
<el-input v-model="emailForm.email"/>
|
||||
</el-form-item>
|
||||
@ -124,12 +155,15 @@ get('/api/user/details', data => {
|
||||
<el-input placeholder="请获取验证码" v-model="emailForm.code"/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="success" style="width: 100%" plain>获取验证码</el-button>
|
||||
<el-button type="success" style="width: 100%" :disabled="!isEmailValid || coldTime > 0"
|
||||
@click="sendEmailCode" plain>
|
||||
{{ coldTime > 0 ? `请稍后 ${coldTime} 秒` : '获取验证码'}}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-button :icon="Refresh" type="success">更新电子邮件</el-button>
|
||||
<el-button :icon="Refresh" type="success" @click="modifyEmail">更新电子邮件</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</card>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div style="margin-top: 50px">
|
||||
<el-form :model="form" :rules="rules" ref="formRef">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="form.username" maxlength="10" type="text" placeholder="用户名/邮箱">
|
||||
<el-input v-model="form.username" maxlength="20" type="text" placeholder="用户名/邮箱">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<User/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user