[Feature][UI Next] Add password function. (#7802)

dolphinscheduler-ui-next/src/service/service.ts

@@ -15,7 +15,12 @@
  * limitations under the License.
  */
 
-import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
+import axios, {
+  AxiosRequestConfig,
+  AxiosResponse,
+  AxiosError,
+  AxiosRequestHeaders,
+} from 'axios'
 import qs from 'qs'
 import { useUserStore } from '@/store/user/user'
 
@@ -30,9 +35,6 @@ const baseRequestConfig: AxiosRequestConfig = {
   paramsSerializer: (params) => {
     return qs.stringify(params, { arrayFormat: 'repeat' })
   },
-  headers: {
-    sessionId: userStore.getSessionId,
-  },
 }
 
 const service = axios.create(baseRequestConfig)
@@ -43,6 +45,9 @@ const err = (err: AxiosError): Promise<AxiosError> => {
 
 service.interceptors.request.use((config: AxiosRequestConfig<any>) => {
   console.log('config', config)
+
+  config.headers && (config.headers.sessionId = userStore.getSessionId)
+
   return config
 }, err)
 

dolphinscheduler-ui-next/src/views/login/use-login.ts

@@ -31,9 +31,9 @@ export function useLogin(state: any) {
     state.loginFormRef.validate(async (valid: any) => {
       if (!valid) {
         const loginRes: SessionIdRes = await login({ ...state.loginForm })
-        const userInfoRes: UserInfoRes = await getUserInfo()
-
         await userStore.setSessionId(loginRes.sessionId)
+
+        const userInfoRes: UserInfoRes = await getUserInfo()
         await userStore.setUserInfo(userInfoRes)
 
         router.push({ path: 'home' })

dolphinscheduler-ui-next/src/views/password/index.tsx

@@ -18,51 +18,53 @@
 import { defineComponent, toRefs } from 'vue'
 import { NForm, NFormItem, NButton, NInput } from 'naive-ui'
 import { useForm } from './use-form'
+import { useUpdate } from './use-update'
 import Card from '@/components/card'
 
 const password = defineComponent({
   name: 'password',
   setup() {
     const { state, t } = useForm()
+    const { handleUpdate } = useUpdate(state)
 
-    return { ...toRefs(state), t }
+    return { ...toRefs(state), t, handleUpdate }
   },
   render() {
-    const { rules, passwordForm, t, handlePasswordInput } = this
+    const { t } = this
 
     return (
       <Card title={t('password.edit_password')}>
         {{
           default: () => (
             <div>
-              <NForm rules={rules} ref='passwordFormRef'>
+              <NForm rules={this.rules} ref='passwordFormRef'>
                 <NFormItem label={t('password.password')} path='password'>
                   <NInput
                     type='password'
                     placeholder={t('password.password_tips')}
-                    v-model={[passwordForm.password, 'value']}
-                    onInput={handlePasswordInput}
+                    v-model={[this.passwordForm.password, 'value']}
                   />
                 </NFormItem>
                 <NFormItem
                   label={t('password.confirm_password')}
                   path='confirmPassword'
-                  ref='confirmPasswordItemFormRef'
                 >
                   <NInput
                     type='password'
                     placeholder={t('password.confirm_password_tips')}
-                    v-model={[passwordForm.confirmPassword, 'value']}
+                    v-model={[this.passwordForm.confirmPassword, 'value']}
                   />
                 </NFormItem>
               </NForm>
               <NButton
                 disabled={
-                  !passwordForm.password ||
-                  !passwordForm.confirmPassword ||
-                  passwordForm.password !== passwordForm.confirmPassword
+                  !this.passwordForm.password ||
+                  !this.passwordForm.confirmPassword ||
+                  this.passwordForm.password !==
+                    this.passwordForm.confirmPassword
                 }
                 type='info'
+                onClick={this.handleUpdate}
               >
                 {t('password.submit')}
               </NButton>

dolphinscheduler-ui-next/src/views/password/use-form.ts

@@ -24,49 +24,28 @@ export function useForm() {
 
   const state = reactive({
     passwordFormRef: ref(),
-    confirmPasswordItemFormRef: ref(),
     passwordForm: {
       password: '',
       confirmPassword: '',
     },
     rules: {
       password: {
-        required: true,
-        message: t('password.password_tips'),
-      },
-      confirmPassword: [
-        {
-          required: true,
-          message: t('password.confirm_password_tips'),
-        },
-        {
-          trigger: ['input'],
-          message: t('password.two_password_entries_are_inconsistent'),
-          validator: (rule: any, value: string): any => {
-            return (
-              state.passwordForm.password &&
-              state.passwordForm.password.startsWith(value) &&
-              state.passwordForm.password.length >= value.length
-            )
-          },
+        trigger: ['input', 'blur'],
+        validator() {
+          if (state.passwordForm.password === '') {
+            return new Error(t('password.password_tips'))
+          }
         },
-        {
-          trigger: ['blur', 'password-input'],
-          message: t('password.two_password_entries_are_inconsistent'),
-          validator: (rule: any, value: string): any => {
-            return state.passwordForm.password === value
-          },
+      },
+      confirmPassword: {
+        trigger: ['input', 'blur'],
+        validator() {
+          if (state.passwordForm.confirmPassword === '') {
+            return new Error(t('password.confirm_password_tips'))
+          }
         },
-      ],
+      },
     } as FormRules,
-
-    handlePasswordInput: () => {
-      if (state.passwordForm.confirmPassword) {
-        state.confirmPasswordItemFormRef.value.validate({
-          trigger: 'password-input',
-        })
-      }
-    },
   })
 
   return { state, t }

dolphinscheduler-ui-next/src/views/password/use-update.ts

@@ -0,0 +1,52 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useRouter } from 'vue-router'
+import { updateUser } from '@/service/modules/users'
+import { useUserStore } from '@/store/user/user'
+import type { Router } from 'vue-router'
+import type { UserInfoRes } from '@/service/modules/users/types'
+
+export function useUpdate(state: any) {
+  const router: Router = useRouter()
+  const userStore = useUserStore()
+  const userInfo = userStore.userInfo as UserInfoRes
+
+  const handleUpdate = () => {
+    state.passwordFormRef.validate(async (valid: any) => {
+      if (!valid) {
+        await updateUser({
+          userPassword: state.passwordForm.password,
+          id: userInfo.id,
+          userName: userInfo.userName,
+          tenantId: userInfo.tenantId,
+          email: userInfo.email,
+          phone: userInfo.phone,
+          state: userInfo.state,
+        })
+
+        await userStore.setSessionId('')
+        await userStore.setUserInfo({})
+        await router.push({ path: 'login' })
+      }
+    })
+  }
+
+  return {
+    handleUpdate,
+  }
+}