refactor: user reset password ui

ui/src/api/type/user.ts

@@ -82,7 +82,7 @@ interface ResetCurrentUserPasswordRequest {
   /**
    * 验证码
    */
-  code: string
+  code?: string
   /**
    *密码
    */

ui/src/api/user/user-manage.ts

@@ -78,11 +78,25 @@ const resetPassword: (
   return post('/user/re_password', request, undefined, loading)
 }
 
+/**
+ * 重置密码
+ * @param request 重置密码请求参数
+ * @param loading 接口加载器
+ * @returns
+ */
+const resetCurrentPassword: (
+  request: ResetPasswordRequest,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (request, loading) => {
+  return post('/user/current/reset_password', request, undefined, loading)
+}
+
 export default {
   getUserManage,
   putUserManage,
   delUserManage,
   postUserManage,
   putUserManagePassword,
-  resetPassword
+  resetPassword,
+  resetCurrentPassword
 }

ui/src/layout/layout-header/avatar/ResetPassword.vue

@@ -27,51 +27,51 @@
           type="password"
           class="input-item"
           v-model="resetPasswordForm.re_password"
-          :placeholder="$t('views.user.userForm.form.re_password.placeholder')"
+          :placeholder="$t('views.login.enterPassword')"
           show-password
         >
         </el-input>
       </el-form-item>
     </el-form>
-    <el-form
-      class="reset-password-form mb-24"
-      ref="resetPasswordFormRef2"
-      :model="resetPasswordForm"
-      :rules="rules2"
-    >
-      <p class="mb-8 lighter">{{ $t('views.login.useEmail') }}</p>
-      <el-form-item style="margin-bottom: 8px">
-        <el-input
-          class="input-item"
-          :disabled="true"
-          v-bind:modelValue="user.userInfo?.email"
-          :placeholder="t('views.user.userForm.form.email.placeholder')"
-        >
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code">
-        <div class="flex-between w-full">
-          <el-input
-            class="code-input"
-            v-model="resetPasswordForm.code"
-            :placeholder="$t('views.login.verificationCode.placeholder')"
-          >
-          </el-input>
-          <el-button
-            :disabled="isDisabled"
-            class="send-email-button ml-8"
-            @click="sendEmail"
-            :loading="loading"
-          >
-            {{
-              isDisabled
-                ? `${$t('views.login.verificationCode.resend')}（${time}s）`
-                : $t('views.login.verificationCode.getVerificationCode')
-            }}
-          </el-button>
-        </div>
-      </el-form-item>
-    </el-form>
+    <!--    <el-form-->
+    <!--      class="reset-password-form mb-24"-->
+    <!--      ref="resetPasswordFormRef2"-->
+    <!--      :model="resetPasswordForm"-->
+    <!--      :rules="rules2"-->
+    <!--    >-->
+    <!--      <p class="mb-8 lighter">{{ $t('views.login.useEmail') }}</p>-->
+    <!--      <el-form-item style="margin-bottom: 8px">-->
+    <!--        <el-input-->
+    <!--          class="input-item"-->
+    <!--          :disabled="true"-->
+    <!--          v-bind:modelValue="user.userInfo?.email"-->
+    <!--          :placeholder="t('views.user.userForm.form.email.placeholder')"-->
+    <!--        >-->
+    <!--        </el-input>-->
+    <!--      </el-form-item>-->
+    <!--      <el-form-item prop="code">-->
+    <!--        <div class="flex-between w-full">-->
+    <!--          <el-input-->
+    <!--            class="code-input"-->
+    <!--            v-model="resetPasswordForm.code"-->
+    <!--            :placeholder="$t('views.login.verificationCode.placeholder')"-->
+    <!--          >-->
+    <!--          </el-input>-->
+    <!--          <el-button-->
+    <!--            :disabled="isDisabled"-->
+    <!--            class="send-email-button ml-8"-->
+    <!--            @click="sendEmail"-->
+    <!--            :loading="loading"-->
+    <!--          >-->
+    <!--            {{-->
+    <!--              isDisabled-->
+    <!--                ? `${$t('views.login.verificationCode.resend')}（${time}s）`-->
+    <!--                : $t('views.login.verificationCode.getVerificationCode')-->
+    <!--            }}-->
+    <!--          </el-button>-->
+    <!--        </div>-->
+    <!--      </el-form-item>-->
+    <!--    </el-form>-->
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="resetPasswordDialog = false">{{ $t('common.cancel') }}</el-button>
@@ -83,16 +83,16 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
-import type { FormInstance, FormRules } from 'element-plus'
-import { MsgSuccess } from '@/utils/message'
-import UserApi from '@/api/user/user'
+import {ref} from 'vue'
+import type {ResetCurrentUserPasswordRequest} from '@/api/type/user'
+import type {FormInstance, FormRules} from 'element-plus'
+import UserApi from '@/api/user/user-manage'
 import useStore from '@/stores'
-import { useRouter } from 'vue-router'
-import { t } from '@/locales'
+import {useRouter} from 'vue-router'
+import {t} from '@/locales'
+
 const router = useRouter()
-const { user } = useStore()
+const {user} = useStore()
 
 const resetPasswordDialog = ref<boolean>(false)
 
@@ -147,28 +147,28 @@ const rules1 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
     }
   ]
 })
-const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
-  // @ts-ignore
-  code: [
-    {
-      required: true,
-      message: t('views.login.verificationCode.placeholder'),
-      trigger: 'blur'
-    }
-  ]
-})
-/**
- * 发送验证码
- */
-const sendEmail = () => {
-  resetPasswordFormRef1.value?.validate().then(() => {
-    UserApi.sendEmailToCurrent(loading).then(() => {
-      MsgSuccess(t('views.login.verificationCode.successMessage'))
-      isDisabled.value = true
-      handleTimeChange()
-    })
-  })
-}
+// const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
+//   // @ts-ignore
+//   code: [
+//     {
+//       required: true,
+//       message: t('views.login.verificationCode.placeholder'),
+//       trigger: 'blur'
+//     }
+//   ]
+// })
+// /**
+//  * 发送验证码
+//  */
+// const sendEmail = () => {
+//   resetPasswordFormRef1.value?.validate().then(() => {
+//     UserApi.sendEmailToCurrent(loading).then(() => {
+//       MsgSuccess(t('views.login.verificationCode.successMessage'))
+//       isDisabled.value = true
+//       handleTimeChange()
+//     })
+//   })
+// }
 
 const handleTimeChange = () => {
   if (time.value <= 0) {
@@ -184,7 +184,7 @@ const handleTimeChange = () => {
 
 const open = () => {
   resetPasswordForm.value = {
-    code: '',
+    //code: '',
     password: '',
     re_password: ''
   }
@@ -194,16 +194,10 @@ const open = () => {
 }
 const resetPassword = () => {
   resetPasswordFormRef1.value?.validate().then(() => {
-    resetPasswordFormRef2.value
-      ?.validate()
+    return UserApi.resetCurrentPassword(resetPasswordForm.value)
       .then(() => {
-        return UserApi.resetCurrentUserPassword(resetPasswordForm.value)
-      })
-      .then(() => {
-        return user.logout()
-      })
-      .then(() => {
-        router.push({ name: 'login' })
+        user.logout()
+        router.push({name: 'login'})
       })
   })
 }
@@ -211,6 +205,6 @@ const close = () => {
   resetPasswordDialog.value = false
 }
 
-defineExpose({ open, close })
+defineExpose({open, close})
 </script>
 <style lang="scss" scope></style>

ui/src/layout/layout-header/avatar/index.vue

@@ -2,11 +2,11 @@
   <el-dropdown trigger="click" type="primary">
     <div class="flex-center cursor">
       <el-avatar :size="30">
-        <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+        <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
       </el-avatar>
       <span class="ml-8 color-text-primary">{{ user.userInfo?.username }}</span>
       <el-icon class="el-icon--right">
-        <CaretBottom />
+        <CaretBottom/>
       </el-icon>
     </div>
 
@@ -15,7 +15,7 @@
         <div class="userInfo flex align-center">
           <div class="mr-12 flex align-center">
             <el-avatar :size="30">
-              <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+              <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
             </el-avatar>
           </div>
           <div style="width: 90%">
@@ -25,7 +25,8 @@
             >
               <el-tag size="small" class="default-tag">{{ user.userInfo?.role[0] }}</el-tag>
               <el-tag size="small" class="default-tag ml-4" v-if="user.userInfo?.role?.length > 1"
-                >+{{ user.userInfo?.role?.length - 1 }}</el-tag
+              >+{{ user.userInfo?.role?.length - 1 }}
+              </el-tag
               >
             </template>
           </div>
@@ -42,7 +43,9 @@
           <el-dropdown class="w-full" trigger="hover" placement="left-start">
             <div class="flex-between w-full" style="line-height: 22px; padding: 12px 11px">
               <span> {{ $t('layout.language') }}</span>
-              <el-icon><ArrowRight /></el-icon>
+              <el-icon>
+                <ArrowRight/>
+              </el-icon>
             </div>
 
             <template #dropdown>
@@ -55,14 +58,14 @@
                   class="flex-between"
                 >
                   <span :class="lang.value === user.userInfo?.language ? 'primary' : ''">{{
-                    lang.label
-                  }}</span>
+                      lang.label
+                    }}</span>
 
                   <el-icon
                     :class="lang.value === user.userInfo?.language ? 'primary' : ''"
                     v-if="lang.value === user.userInfo?.language"
                   >
-                    <Check />
+                    <Check/>
                   </el-icon>
                 </el-dropdown-item>
               </el-dropdown-menu>
@@ -86,25 +89,24 @@
       </el-dropdown-menu>
     </template>
   </el-dropdown>
-  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef" />
-  <!-- <ResetPassword ref="resetPasswordRef"></ResetPassword> -->
+  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef"/>
+  <ResetPassword ref="resetPasswordRef"></ResetPassword>
   <!-- <AboutDialog ref="AboutDialogRef"></AboutDialog>
   -->
   <!-- <UserPwdDialog ref="UserPwdDialogRef" /> -->
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import {ref, onMounted} from 'vue'
 import useStore from '@/stores'
-import { useRouter } from 'vue-router'
-// import ResetPassword from './ResetPassword.vue'
+import {useRouter} from 'vue-router'
+import ResetPassword from './ResetPassword.vue'
 // import AboutDialog from './AboutDialog.vue'
 // import UserPwdDialog from '@/views/user-manage/component/UserPwdDialog.vue'
 import APIKeyDialog from './APIKeyDialog.vue'
-import { ComplexPermission } from '@/utils/permission/type'
-import { langList } from '@/locales/index'
-import { useLocale } from '@/locales/useLocale'
-import type ResetPassword from "@/layout/layout-header/avatar/ResetPassword.vue";
-const { user } = useStore()
+import {ComplexPermission} from '@/utils/permission/type'
+import {langList} from '@/locales/index'
+
+const {user} = useStore()
 const router = useRouter()
 
 const AboutDialogRef = ref()
@@ -130,7 +132,7 @@ const openResetPassword = () => {
 
 const logout = () => {
   user.logout().then(() => {
-    router.push({ name: 'login' })
+    router.push({name: 'login'})
   })
 }
 
@@ -150,6 +152,7 @@ onMounted(() => {
 
   :deep(.el-dropdown-menu__item) {
     padding: 12px 11px;
+
     &:hover {
       background: var(--app-text-color-light-1);
     }