xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增找回密码功能

Browse Source
This commit is contained in:
橙子
2024-10-04 00:00:44 +08:00
parent d7629763ef
commit 10e1fad7f3
21 changed files with 602 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
Yi.Bbs.Vue3/src/views/home/Index.vue
View File

@@ -4,7 +4,26 @@
<el-col :span="17">
<div class="chat-hub">
<!-- <p @click="onClickToChatHub">点击前往-最新上线<span>《聊天室》 </span>，现已支持<span>Ai助手</span>，希望能帮助大家</p>-->
<p @click="onClickToWeChat">点击关注-最新上线<span>《意.Net官方微信公众号》 </span>，分享有<span>深度</span>的.Net知识，希望能帮助大家</p>
<p v-if="isIcp"
style="font-size: 25px;
color: blue;
background: red;
/* height: 80px; */
font-weight: 900;
text-align: center;
margin: 10px auto;">
本站点为个人内容分享，全部资料免费开源学习，所有数据为假数据
<br/>
不涉及企业、团体、论坛和经营销售等内容，只做简单的成果展示
<br/>
富强、‌民主、文明、‌和谐、‌自由、‌平等
<br/>
公正、‌法治、‌爱国、‌敬业、‌诚信、友善
</p>
<p v-else @click="onClickToWeChat">点击关注-最新上线<span>《意.Net官方微信公众号》 </span>，分享有<span>深度</span>的.Net知识，希望能帮助大家</p>
</div>
<div class="scrollbar">
<ScrollbarInfo/>
@@ -272,7 +291,7 @@ const activeList = [
{name: "开始", path: "/start", icon: "Position"},
{name: "聊天室", path: "/chat", icon: "ChatRound"},
];
const isIcp=import.meta.env.VITE_APP_ICP==="true";
//主题查询参数
const query = reactive({
skipCount: 1,
@@ -622,7 +641,7 @@ const onClickToWeChat=()=>{
display: flex;
align-content: center;
flex-wrap: wrap;
height: 30px;
min-height: 30px;
p {
margin: 0 auto;

11
Yi.Bbs.Vue3/src/views/login/ForgotPassword.vue
View File

@@ -1,11 +0,0 @@
<script setup>
</script>
<template>
</template>
<style scoped lang="scss">
</style>

153
Yi.Bbs.Vue3/src/views/login/forgotPassword.vue Normal file
View File

@@ -0,0 +1,153 @@
<script setup>
// 注册逻辑
import {reactive, ref} from "vue";
import {getCodePhoneForRetrievePassword} from "@/apis/accountApi";
import useAuths from "@/hooks/useAuths";
import { useRouter} from "vue-router";
const { retrievePasswordFun } = useAuths();
const router = useRouter();
const retrievePasswordFormRef = ref();
// 确认密码
const passwordConfirm = ref("");
const registerForm = reactive({
phone: "",
password: "",
uuid: "",
code: ""
});
const registerRules = reactive({
phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
password: [
{ required: true, message: "请输入新的密码", trigger: "blur" },
{ min: 6, message: "密码需大于六位", trigger: "blur" },
],
});
const retrievePassword = async (formEl) => {
if (!formEl) return;
await formEl.validate(async (valid) => {
if (valid) {
try {
if (registerForm.password != passwordConfirm.value) {
ElMessage.error("两次密码输入不一致");
return;
}
await retrievePasswordFun(registerForm);
//注册成功返回登录
handleSignInNow();
} catch (error) {
ElMessage({
message: error.message,
type: "error",
duration: 2000,
});
}
}
});
};
//验证码
const codeInfo = ref("发送短信");
const isDisabledCode = ref(false);
//前往登录
const handleSignInNow=()=>{
router.push("/login");
}
const captcha = async () => {
if (registerForm.phone !== "") {
const { data } = await getCodePhoneForRetrievePassword(registerForm.phone);
registerForm.uuid = data.uuid;
ElMessage({
message: `已向${registerForm.phone}发送验证码，请注意查收`,
type: "success",
});
isDisabledCode.value = true;
let time = 60; //定义剩下的秒数
let timer = setInterval(function () {
if (time == 0) {
//清除定时器和复原按钮
clearInterval(timer);
codeInfo.value = "发送验证码";
time = 60; //这个10是重新开始
} else {
codeInfo.value = "剩余" + time + "秒";
time--;
}
}, 1000);
} else {
ElMessage({
message: `请先输入手机号`,
type: "warning",
});
}
};
</script>
<template>
<div class="container">
<!-- 找回密码 -->
<div class="div-content">
<div class="div-right-register">
<img class="div-img" src="@/assets/login.png"/>
</div>
<div class="div-left-register">
<div class="left-container">
<p class="title register-title">Find Password!</p>
<el-form
class="registerForm"
ref="retrievePasswordFormRef"
:model="registerForm"
:rules="registerRules"
>
<div class="input-content">
<div class="input" style="margin-top: 0">
<p>*电话</p>
<el-form-item prop="phone">
<div class="phone-code">
<input class="phone-code-input" type="text" v-model.trim="registerForm.phone">
<button type="button" class="phone-code-btn" @click="captcha()">{{codeInfo}}</button>
</div>
</el-form-item>
</div>
<div class="input">
<p>*短信验证码</p>
<el-form-item prop="code" >
<input :disabled="!isDisabledCode" type="text" v-model.trim="registerForm.code">
</el-form-item>
</div>
<div class="input">
<p>*新的密码</p>
<el-form-item prop="password">
<input :disabled="!isDisabledCode" type="password" v-model.trim="registerForm.password">
</el-form-item>
</div>
<div class="input">
<p>*确认密码</p>
<el-form-item>
<input :disabled="!isDisabledCode" type="password" v-model.trim="passwordConfirm">
</el-form-item>
</div>
</div>
</el-form>
<div class="left-btn">
<button type="button" class="btn-login" @click="retrievePassword(retrievePasswordFormRef)">确认重置密码</button>
<button type="button" class="btn-reg" @click="handleSignInNow">前往登录</button>
</div>
</div>
</div>
</div>
</div>
</template>
<style src="@/assets/styles/login.css" scoped>
</style>

296
Yi.Bbs.Vue3/src/views/login/index.vue → Yi.Bbs.Vue3/src/views/login/login.vue
View File

@@ -1,145 +1,153 @@
<template>
<div class="container">
<!-- 登录 -->
<div class="div-content">
<div class="div-left">
<div class="left-container">
<p class="title title-1">Hello,<span @click="guestlogin">you can go to homepage >></span></p>
<p class="title title-2">Welcome to Yi!</p>
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="rules"
>
<div class="input-content">
<div class="input">
<p>用户名</p>
<el-form-item prop="userName">
<input type="text" v-model="loginForm.userName">
</el-form-item>
</div>
<div class="input">
<p>密码</p>
<el-form-item prop="password">
<input type="password" v-model="loginForm.password">
</el-form-item>
</div>
<div class="input">
<p>验证码</p>
<el-form-item prop="code">
<div class="code">
<input class="code-input" type="text" v-model.trim="loginForm.code">
<img class="code-img" alt="加载中" @click="handleGetCodeImage" :src="codeImageURL">
</div>
</el-form-item>
</div>
</div>
</el-form>
<div class="left-lable">
<input type="checkbox">
<label>记住我</label>
</div>
<div class="left-btn">
<button type="button" class="btn-login" @click="login(loginFormRef)">登录</button>
<button type="button" class="btn-reg" @click="handleRegister">前往注册</button>
</div>
<div class="bottom-div">
<p>其他方式: <span @click="handleQQLogin"><img src="@/assets/login_images/qq-setting.png" alt="QQ" /></span> <span @click="handleGiteeLogin"><img src="@/assets/login_images/gitee-setting.png" alt="Gitee" /></span></p>
</div>
</div>
</div>
<div class="div-right">
<img class="div-img" src="@/assets/login.png" alt=""/>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import useAuths from "@/hooks/useAuths";
import useUserStore from "@/stores/user";
const { loginFun, loginSuccess } = useAuths();
const router = useRouter();
const route = useRoute();
const loginFormRef = ref();
const rules = reactive({
userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const loginForm = reactive({
userName: "",
password: "",
uuid: "",
code: "",
});
//前往注册
const handleRegister=()=>{
router.push("/register");
}
//直接进入首页
const guestlogin = () => {
const redirect = route.query?.redirect ?? "/index";
router.push(redirect);
};
const codeUUid = computed(() => useUserStore().codeUUid);
const login = async (formEl) => {
if (!formEl) return;
await formEl.validate((valid) => {
if (valid) {
try {
loginForm.uuid = codeUUid.value;
loginFun(loginForm);
} catch (error) {
console.log(error.message, "error.message");
ElMessage({
message: error.message,
type: "error",
duration: 2000,
});
}
}
});
};
// 获取图片验证码
const codeImageURL = computed(() => useUserStore().codeImageURL);
const handleGetCodeImage = () => {
useUserStore().updateCodeImage();
};
onMounted(async () => {
await useUserStore().updateCodeImage();
});
const handleQQLogin = () => {
window.open(
"https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=102087446&redirect_uri=https://ccnetcore.com/auth/qq&state=0&scope=get_user_info",
undefined,
"width=500,height=500,left=50,top=50"
);
};
const handleGiteeLogin = () => {
window.open(
"https://gitee.com/oauth/authorize?client_id=949f3519969adc5cfe82c209b71300e8e0868e8536f3d7f59195c8f1e5b72502&redirect_uri=https%3A%2F%2Fccnetcore.com%2Fauth%2Fgitee&state=0&response_type=code",
undefined,
"width=500,height=500,left=50,top=50"
);
};
window.addEventListener("message", async (e) => {
const { authData, type } = e.data;
console.log(authData, "传到登录页的值");
if (authData) {
await loginSuccess({ data: JSON.parse(authData) });
}
});
</script>
<style src="@/assets/styles/login.css" scoped>
<template>
<div class="container">
<!-- 登录 -->
<div class="div-content">
<div class="div-left">
<div class="left-container">
<p class="title title-1">Hello,<span @click="guestlogin">you can go to homepage >></span></p>
<p class="title title-2">Welcome to Yi!</p>
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="rules"
>
<div class="input-content">
<div class="input">
<p>用户名</p>
<el-form-item prop="userName">
<input type="text" v-model="loginForm.userName">
</el-form-item>
</div>
<div class="input">
<p>密码</p>
<el-form-item prop="password">
<input type="password" v-model="loginForm.password">
</el-form-item>
</div>
<div class="input">
<p>验证码</p>
<el-form-item prop="code">
<div class="code">
<input class="code-input" type="text" v-model.trim="loginForm.code">
<img class="code-img" alt="加载中" @click="handleGetCodeImage" :src="codeImageURL">
</div>
</el-form-item>
</div>
</div>
</el-form>
<div class="left-lable">
<div>
<input type="checkbox">
<label>记住我</label>
</div>
<span class="right-forgot" @click="handleForgotPassword">忘记密码？点击找回</span>
</div>
<div class="left-btn">
<button type="button" class="btn-login" @click="login(loginFormRef)">登录</button>
<button type="button" class="btn-reg" @click="handleRegister">前往注册</button>
</div>
<div class="bottom-div">
<p>其他方式: <span @click="handleQQLogin"><img src="@/assets/login_images/qq-setting.png" alt="QQ" /></span> <span @click="handleGiteeLogin"><img src="@/assets/login_images/gitee-setting.png" alt="Gitee" /></span></p>
</div>
</div>
</div>
<div class="div-right">
<img class="div-img" src="@/assets/login.png" alt=""/>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import useAuths from "@/hooks/useAuths";
import useUserStore from "@/stores/user";
const { loginFun, loginSuccess } = useAuths();
const router = useRouter();
const route = useRoute();
const loginFormRef = ref();
const rules = reactive({
userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const loginForm = reactive({
userName: "",
password: "",
uuid: "",
code: "",
});
//前往注册
const handleRegister=()=>{
router.push("/register");
}
//前往忘记密码
const handleForgotPassword = () => {
router.push("/forgotPassword");
}
//直接进入首页
const guestlogin = () => {
const redirect = route.query?.redirect ?? "/index";
router.push(redirect);
};
const codeUUid = computed(() => useUserStore().codeUUid);
const login = async (formEl) => {
if (!formEl) return;
await formEl.validate((valid) => {
if (valid) {
try {
loginForm.uuid = codeUUid.value;
loginFun(loginForm);
} catch (error) {
console.log(error.message, "error.message");
ElMessage({
message: error.message,
type: "error",
duration: 2000,
});
}
}
});
};
// 获取图片验证码
const codeImageURL = computed(() => useUserStore().codeImageURL);
const handleGetCodeImage = () => {
useUserStore().updateCodeImage();
};
onMounted(async () => {
await useUserStore().updateCodeImage();
});
const handleQQLogin = () => {
window.open(
"https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=102087446&redirect_uri=https://ccnetcore.com/auth/qq&state=0&scope=get_user_info",
undefined,
"width=500,height=500,left=50,top=50"
);
};
const handleGiteeLogin = () => {
window.open(
"https://gitee.com/oauth/authorize?client_id=949f3519969adc5cfe82c209b71300e8e0868e8536f3d7f59195c8f1e5b72502&redirect_uri=https%3A%2F%2Fccnetcore.com%2Fauth%2Fgitee&state=0&response_type=code",
undefined,
"width=500,height=500,left=50,top=50"
);
};
window.addEventListener("message", async (e) => {
const { authData, type } = e.data;
console.log(authData, "传到登录页的值");
if (authData) {
await loginSuccess({ data: JSON.parse(authData) });
}
});
</script>
<style src="@/assets/styles/login.css" scoped>
</style>