feat: 新增找回密码功能

2024-10-04 00:00:44 +08:00
parent d7629763ef
commit 10e1fad7f3
21 changed files with 602 additions and 297 deletions
--- a/Yi.Bbs.Vue3/src/apis/accountApi.js
+++ b/Yi.Bbs.Vue3/src/apis/accountApi.js
@@ -18,6 +18,24 @@ export function login(username, password, code, uuid) {
  });
 }

+
+//找回密码
+export function retrievePassword(password, phone, code, uuid) {
+  const data = {
+    password,
+    phone,
+    code,
+    uuid,
+  };
+  return request({
+    url: "/account/retrieve-password",
+    headers: {
+      isToken: false,
+    },
+    method: "post",
+    data: data,
+  });
+}
 // 注册方法
 export function register(userName, password, phone, code, uuid) {
  const data = {
@@ -76,3 +94,15 @@ export function getCodePhone(phone) {
    data: { phone },
  });
 }
+// 获取短信验证码-为了重置密码
+export function getCodePhoneForRetrievePassword(phone) {
+  return request({
+    url: "/account/captcha-phone/repassword",
+    headers: {
+      isToken: false,
+    },
+    method: "post",
+    timeout: 20000,
+    data: { phone },
+  });
+}
--- a/Yi.Bbs.Vue3/src/apis/auth.js
+++ b/Yi.Bbs.Vue3/src/apis/auth.js
@@ -1,5 +1,4 @@
 import request from "@/config/axios/service";
-
 /**
 *  用户登录
 * @param {*} data 账号密码
@@ -23,6 +22,17 @@ export function userRegister(data) {
    data,
  });
 }
+/**
+ *  用户找回密码
+ * @param {*} data 账号密码
+ */
+export function userRetrievePassword(data) {
+  return request({
+    url: `/account/retrieve-password`,
+    method: "post",
+    data,
+  });
+}

 /**
 *  获取用户详细信息
@@ -44,15 +54,6 @@ export function userLogout() {
  });
 }

-/**
- *  获取验证码
- */
-export function getCodeImg() {
-  return request({
-    url: `/account/captcha-image`,
-    method: "get",
-  });
-}
 /**
 *  获取短信验证码
 */
--- a/Yi.Bbs.Vue3/src/assets/styles/login.css
+++ b/Yi.Bbs.Vue3/src/assets/styles/login.css
@@ -103,13 +103,18 @@ height: 25px;
 .left-lable
 {
    display: flex;
-    align-items: center;
+    justify-content: space-between;
    font-size: 12px;
 }
 .left-lable label{
    margin-left: 5px;
 }
-
+.right-forgot{
+    cursor: pointer;
+}
+.right-forgot:hover{
+    color: #7f438c;
+}
 .bottom-div
 {
    font-size: 12px;
--- a/Yi.Bbs.Vue3/src/assets/wechat/share.png
+++ b/Yi.Bbs.Vue3/src/assets/wechat/share.png
--- a/Yi.Bbs.Vue3/src/hooks/useAuths.js
+++ b/Yi.Bbs.Vue3/src/hooks/useAuths.js
@@ -7,7 +7,7 @@ import {
  userLogin,
  getUserDetailInfo,
  userLogout,
-  userRegister,
+  userRegister, userRetrievePassword,
 } from "@/apis/auth";
 const TokenKey = "AccessToken";
 export const AUTH_MENUS = "AUTH_MENUS";
@@ -182,6 +182,20 @@ const currentUserInfo=computed(()=>{
    // }
  };

+  // 找回密码
+  const retrievePasswordFun = async (params) => {
+    // try {
+   const {data}=await userRetrievePassword(params);
+    ElMessage({
+      message: `恭喜！账号：${data}，找回成功！密码已重置，请登录！`,
+      type: "success",
+      duration: 8000
+    });
+    // } catch (error) {
+    //   console.log(error);
+    // }
+  };
+  
  return {
    getToken,
    setToken,
@@ -189,6 +203,7 @@ const currentUserInfo=computed(()=>{
    loginFun,
    getUserInfo,
    logoutFun,
+    retrievePasswordFun,
    clearStorage,
    registerFun,
    loginSuccess,
--- a/Yi.Bbs.Vue3/src/layout/AppHeader.vue
+++ b/Yi.Bbs.Vue3/src/layout/AppHeader.vue
@@ -4,7 +4,8 @@
      <div class="image">
        <img class="img-icon" src="@/assets/common/icons/logo.ico" />
      </div>
-      <div class="text">{{ configStore.name }}</div>
+      
+      <div class="text">{{ isIcp===true?"个人成果展示":configStore.name }}</div>
    </div>
    <div class="tab">
      <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" @select="handleSelect">
@@ -152,6 +153,8 @@ const searchText = ref("");
 const noticeForNoReadCount = computed(() => {
  return noticeList.value.filter(x => x.isRead == false).length;
 })
+
+const isIcp=import.meta.env.VITE_APP_ICP==="true";
 //加载初始化离线消息
 onMounted(async () => {
  //登录了才去判断消息通知
--- a/Yi.Bbs.Vue3/src/router/index.js
+++ b/Yi.Bbs.Vue3/src/router/index.js
@@ -26,13 +26,18 @@ const router = createRouter({
          name: "login",
          path: "/login",
          // component: () => import("../views/Login.vue"),
-          component: () => import("../views/login/index.vue"),
+          component: () => import("../views/login/login.vue"),
        },
        {
          name: "register",
          path: "/register",
          component: () => import("../views/login/register.vue"),
        },
+        {
+          name: "forgotPassword",
+          path: "/forgotPassword",
+          component: () => import("../views/login/forgotPassword.vue"),
+        },
        {
          name: "auth",
          path: "/auth/:type",
--- a/Yi.Bbs.Vue3/src/stores/user.js
+++ b/Yi.Bbs.Vue3/src/stores/user.js
@@ -1,4 +1,4 @@
-import { login, logout, register } from "@/apis/accountApi";
+import { login, logout, register,retrievePassword } from "@/apis/accountApi";
 import { getUserDetailInfo, getLoginCode } from "@/apis/auth";
 import useAuths from "@/hooks/useAuths";
 import { defineStore } from "pinia";
@@ -122,6 +122,23 @@ const useUserStore = defineStore("user", {
          });
      });
    },
+      //找回密码
+      retrievePassword(userInfo)
+      {
+          const password = userInfo.password.trim();
+          const phone = userInfo.phone;
+          const uuid = userInfo.uuid;
+          const code = userInfo.code;
+          return new Promise((resolve, reject) => {
+              retrievePassword(password, phone, code, uuid)
+                  .then((response) => {
+                      resolve(response);
+                  })
+                  .catch((error) => {
+                      reject(error);
+                  });
+          });
+      },
    // 重置用户信息
    resetInfo() {
      this.roles = [];
--- a/Yi.Bbs.Vue3/src/views/home/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/Index.vue
@@ -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;
--- a/Yi.Bbs.Vue3/src/views/login/ForgotPassword.vue
+++ b/Yi.Bbs.Vue3/src/views/login/ForgotPassword.vue
@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped lang="scss">
-
-</style>
--- a/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue
+++ b/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue
@@ -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>
--- a/Yi.Bbs.Vue3/src/views/login/login.vue
+++ b/Yi.Bbs.Vue3/src/views/login/login.vue
@@ -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>