feat: reset password function is ready

web/src/components/ResetPass.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="reset-pass">
+    <el-dialog
+        v-model="showDialog"
+        :close-on-click-modal="true"
+        width="540px"
+        :before-close="close"
+        :title="title"
+    >
+      <div class="form">
+
+        <el-form :model="form" label-width="120px" label-position="left">
+          <el-form-item label="手机号码">
+            <el-input v-model="form.mobile"/>
+          </el-form-item>
+          <el-form-item label="手机验证码">
+            <el-row :gutter="20">
+              <el-col :span="16">
+                <el-input v-model="form.code" maxlength="6"/>
+              </el-col>
+              <el-col :span="8">
+                <send-msg size="" :mobile="form.mobile"/>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-form-item label="新密码">
+            <el-input v-model="form.password" type="password"/>
+          </el-form-item>
+          <el-form-item label="重复密码">
+            <el-input v-model="form.repass" type="password"/>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="save" round>
+            重置密码
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {computed, ref} from "vue";
+import SendMsg from "@/components/SendMsg.vue";
+import {ElMessage} from "element-plus";
+import {httpPost} from "@/utils/http";
+import {validateMobile} from "@/utils/validate";
+
+const props = defineProps({
+  show: Boolean,
+  mobile: String
+});
+
+const showDialog = computed(() => {
+  return props.show
+})
+
+const title = ref('重置密码')
+const form = ref({
+  mobile: '',
+  code: '',
+  password: '',
+  repass: ''
+})
+
+const emits = defineEmits(['hide']);
+
+const save = () => {
+  if (!validateMobile(form.value.mobile)) {
+    return ElMessage.error("请输入正确的手机号码");
+  }
+  if (form.value.code === '') {
+    return ElMessage.error("请输入短信验证码");
+  }
+  if (form.value.repass !== form.value.password) {
+    return ElMessage.error("两次输入密码不一致");
+  }
+
+  httpPost('/api/user/resetPass', form.value).then(() => {
+    ElMessage.success({
+      message: '重置密码成功', duration: 1000, onClose: () => emits('hide', false)
+    })
+  }).catch(e => {
+    ElMessage.error("重置密码失败：" + e.message);
+  })
+}
+
+const close = function () {
+  emits('hide', false);
+}
+</script>
+
+<style lang="stylus">
+.reset-pass {
+  .form {
+    padding 10px 40px
+  }
+
+  .el-dialog__footer {
+    text-align center
+  }
+}
+
+</style>

web/src/store/session.js

@@ -27,7 +27,7 @@ export function setSessionId(sessionId) {
 }
 
 export function getUserToken() {
-    return Storage.get(UserTokenKey)
+    return Storage.get(UserTokenKey) ?? ""
 }
 
 export function setUserToken(token) {

web/src/views/Login.vue

@@ -32,13 +32,15 @@
             <el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
           </el-row>
 
-          <el-row class="text-line">
-            还没有账号？
-            <el-link type="primary" @click="router.push('/register')">注册新账号</el-link>
+          <el-row class="text-line" gutter="20">
+            <el-button type="primary" @click="router.push('/register')" size="small" plain>注册新账号</el-button>
+            <el-button type="success" @click="showResetPass = true" size="small" plain>重置密码</el-button>
           </el-row>
         </div>
       </div>
 
+      <reset-pass @hide="showResetPass = false" :show="showResetPass"/>
+
       <footer class="footer">
         <footer-bar/>
       </footer>
@@ -59,11 +61,13 @@ import {checkSession} from "@/action/session";
 import {setUserToken} from "@/store/session";
 import {validateMobile} from "@/utils/validate";
 import {prevRoute} from "@/router";
+import ResetPass from "@/components/ResetPass.vue";
 
 const router = useRouter();
 const title = ref('ChatGPT-PLUS 用户登录');
 const username = ref(process.env.VUE_APP_USER);
 const password = ref(process.env.VUE_APP_PASS);
+const showResetPass = ref(false)
 
 checkSession().then(() => {
   if (isMobile()) {