feature/login-screen #11

Merged
zyb merged 6 commits from feature/login-screen into master 2025-07-19 08:17:11 +08:00
5 changed files with 127 additions and 62 deletions
Showing only changes of commit ba077c8e9c - Show all commits

View File

@ -1,8 +1,8 @@
import axios from 'axios'; import axios from 'axios';
import { logoutUser } from '../utils/jwt'; // logoutUser会处理清除存储和重定向 import { logoutUser } from '../utils/jwt'; // logoutUser会处理清除存储和重定向
const API_BASE_URL = 'https://api.zybdatasupport.online'; //const API_BASE_URL = 'https://api.zybdatasupport.online';
//const API_BASE_URL = 'http://hk.zybdatasupport.online:8000/'; const API_BASE_URL = 'http://hk.zybdatasupport.online:8000/';
const axiosInstance = axios.create({ const axiosInstance = axios.create({
baseURL: API_BASE_URL, baseURL: API_BASE_URL,

View File

@ -154,12 +154,12 @@ export const changeUserName = async (name) => {
* 用户请求修改密码发送重置请求 * 用户请求修改密码发送重置请求
* 路由: /user/resetpassword * 路由: /user/resetpassword
* 方法: POST * 方法: POST
* 需要登录 * @param {string} uuid - 要修改的用户的uuid
* @returns {Promise<void>} 无返回值成功即为请求成功 * @returns {Promise<void>} 无返回值成功即为请求成功
*/ */
export const requestResetPassword = async () => { export const requestResetPassword = async (uuid) => {
try { try {
await axiosInstance.post('/user/resetpassword'); await axiosInstance.post('/user/resetpassword', null, { params: { uuid } });
} catch (error) { } catch (error) {
throw error; throw error;
} }

View File

@ -26,6 +26,7 @@
<script setup> <script setup>
import { ref, watch, defineProps, defineEmits } from 'vue' import { ref, watch, defineProps, defineEmits } from 'vue'
import { requestResetPassword, resetPassword } from '@/api/login.js' import { requestResetPassword, resetPassword } from '@/api/login.js'
import {getStoredUser} from "@/utils/jwt.js";
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -59,8 +60,10 @@ const handleSubmit = async () => {
loading.value = true loading.value = true
try { try {
const user = getStoredUser()
console.log(user.uuid)
// //
await requestResetPassword() await requestResetPassword(user.uuid)
emit('success', '密码修改请求已发送!') emit('success', '密码修改请求已发送!')
emit('close') emit('close')
} catch (error) { } catch (error) {

View File

@ -1,59 +1,78 @@
<template> <template>
<div class="login-form"> <div class="login-form">
<div>忘记密码</div> <div>忘记密码</div>
<form class="login-form-container" @submit.prevent="handleForgetPassword"> <!-- <form class="login-form-container" @submit.prevent="handleForgetPassword">-->
<!-- <div class="input-container">-->
<!-- <label for="username">QQ号</label>-->
<!-- <input-->
<!-- type="text"-->
<!-- id="username"-->
<!-- v-model="username"-->
<!-- placeholder="请输入QQ号"-->
<!-- :class="{ 'error': usernameError }"-->
<!-- />-->
<!-- <span class="error-message" v-if="usernameError">{{ usernameError }}</span>-->
<!-- </div>-->
<!-- <div class="input-container">-->
<!-- <label for="newPassword">新密码</label>-->
<!-- <input-->
<!-- type="password"-->
<!-- id="newPassword"-->
<!-- v-model="newPassword"-->
<!-- placeholder="请输入新密码"-->
<!-- :class="{ 'error': newPasswordError }"-->
<!-- />-->
<!-- <span class="error-message" v-if="newPasswordError">{{ newPasswordError }}</span>-->
<!-- </div>-->
<!-- <div class="input-container">-->
<!-- <label for="confirmPassword">确认新密码</label>-->
<!-- <input-->
<!-- type="password"-->
<!-- id="confirmPassword"-->
<!-- v-model="confirmPassword"-->
<!-- placeholder="请再次输入新密码"-->
<!-- :class="{ 'error': confirmPasswordError }"-->
<!-- />-->
<!-- <span class="error-message" v-if="confirmPasswordError">{{ confirmPasswordError }}</span>-->
<!-- </div>-->
<!-- <div class="input-container captcha-container">-->
<!-- <label for="captcha">验证码</label>-->
<!-- <div class="captcha-wrapper">-->
<!-- <input-->
<!-- type="text"-->
<!-- id="captcha"-->
<!-- v-model="captcha"-->
<!-- placeholder="请输入验证码"-->
<!-- :class="{ 'error': captchaError }"-->
<!-- />-->
<!-- <img-->
<!-- v-if="captchaImage"-->
<!-- :src="captchaImage"-->
<!-- alt="验证码"-->
<!-- class="captcha-image"-->
<!-- @click="refreshCaptcha"-->
<!-- />-->
<!-- </div>-->
<!-- <span class="error-message" v-if="captchaError">{{ captchaError }}</span>-->
<!-- </div>-->
<!-- <div class="login-button">-->
<!-- <button type="submit" :disabled="isSubmitting">-->
<!-- {{ isSubmitting ? '提交中...' : '重置密码' }}-->
<!-- </button>-->
<!-- </div>-->
<!-- <div class="register-link">-->
<!-- <a @click.prevent="$emit('login')">返回登录</a>-->
<!-- </div>-->
<!-- </form>-->
<form form class="login-form-container" @submit.prevent="uuid_handleForgetPassword">
<div class="input-container"> <div class="input-container">
<label for="username">QQ号</label> <label for="username">UUID</label>
<input <input
type="text"
id="username" id="username"
v-model="username" type="text"
placeholder="请输入QQ号" placeholder="请输入UUID"
:class="{ 'error': usernameError }" v-model="uuid"
/> />
<span class="error-message" v-if="usernameError">{{ usernameError }}</span>
</div>
<div class="input-container">
<label for="newPassword">新密码</label>
<input
type="password"
id="newPassword"
v-model="newPassword"
placeholder="请输入新密码"
:class="{ 'error': newPasswordError }"
/>
<span class="error-message" v-if="newPasswordError">{{ newPasswordError }}</span>
</div>
<div class="input-container">
<label for="confirmPassword">确认新密码</label>
<input
type="password"
id="confirmPassword"
v-model="confirmPassword"
placeholder="请再次输入新密码"
:class="{ 'error': confirmPasswordError }"
/>
<span class="error-message" v-if="confirmPasswordError">{{ confirmPasswordError }}</span>
</div>
<div class="input-container captcha-container">
<label for="captcha">验证码</label>
<div class="captcha-wrapper">
<input
type="text"
id="captcha"
v-model="captcha"
placeholder="请输入验证码"
:class="{ 'error': captchaError }"
/>
<img
v-if="captchaImage"
:src="captchaImage"
alt="验证码"
class="captcha-image"
@click="refreshCaptcha"
/>
</div>
<span class="error-message" v-if="captchaError">{{ captchaError }}</span>
</div> </div>
<div class="login-button"> <div class="login-button">
<button type="submit" :disabled="isSubmitting"> <button type="submit" :disabled="isSubmitting">
@ -81,7 +100,7 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { getCaptcha, forgetPassword } from '../api/login' import {getCaptcha, forgetPassword, requestResetPassword} from '../api/login'
import ErrorDialog from './ErrorDialog.vue' import ErrorDialog from './ErrorDialog.vue'
import SuccessDialog from './SuccessDialog.vue' import SuccessDialog from './SuccessDialog.vue'
@ -91,12 +110,14 @@ const confirmPassword = ref('')
const captcha = ref('') const captcha = ref('')
const captchaImage = ref('') const captchaImage = ref('')
const captchaToken = ref('') const captchaToken = ref('')
const uuid = ref('')
// //
const usernameError = ref('') const usernameError = ref('')
const newPasswordError = ref('') const newPasswordError = ref('')
const confirmPasswordError = ref('') const confirmPasswordError = ref('')
const captchaError = ref('') const captchaError = ref('')
const uuidError = ref('')
// //
const isSubmitting = ref(false) const isSubmitting = ref(false)
@ -181,6 +202,33 @@ const handleForgetPassword = async () => {
} }
} }
const uuid_handleForgetPassword = async () => {
try{
if (!uuid_validateForm()) {
return
}
console.log(uuid.value);
await requestResetPassword(uuid.value)
isSubmitting.value = true
}catch ( error){
showErrorMessage(error.message || '不是正确的uuid')
}finally {
isSubmitting.value = false
}
}
const uuid_validateForm = () =>{
uuidError.value = ''
if (!uuid.value) {
uuidError.value = '请输入uuid'
return false
}
return true
}
const validateForm = () => { const validateForm = () => {
// //
usernameError.value = '' usernameError.value = ''
@ -234,7 +282,8 @@ const validateForm = () => {
const handleSuccessClose = () => { const handleSuccessClose = () => {
showSuccess.value = false showSuccess.value = false
// //
resetForm() // resetForm()
uuid_resetForm()
// //
$emit('login') $emit('login')
} }
@ -252,13 +301,18 @@ const resetForm = () => {
refreshCaptcha() refreshCaptcha()
} }
const uuid_resetForm = () =>{
uuid.value = ''
}
// resetForm // resetForm
defineExpose({ defineExpose({
resetForm // resetForm
uuid_resetForm
}) })
onMounted(() => { onMounted(() => {
refreshCaptcha() // refreshCaptcha()
}) })
</script> </script>

View File

@ -4,6 +4,14 @@ import path from 'path'
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
build: {
terserOptions:{
compress:{
drop_console:true,
drop_debugger:true,
}
}
},
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(__dirname, './src') '@': path.resolve(__dirname, './src')