refactor: Refactor Login to better match the composition API implementation (#7519)

dolphinscheduler-ui-next/src/router/routes.ts

@@ -21,7 +21,7 @@ import utils from '@/utils'
 
 // All TSX files under the views folder automatically generate mapping relationship
 const modules = import.meta.glob('/src/views/**/**.tsx')
-const components: { [key: string]: Component } = utils.classification(modules)
+const components: { [key: string]: Component } = utils.mapping(modules)
 
 /**
  * Basic page

dolphinscheduler-ui-next/src/utils/index.ts

@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 
-import classification from './classification'
+import mapping from './mapping'
 
 const utils = {
-  classification,
+  mapping
 }
 
 export default utils

dolphinscheduler-ui-next/src/utils/mapping.ts

@@ -17,7 +17,7 @@
 
 import type { Component } from 'vue'
 
-const classification = (modules: any) => {
+const mapping = (modules: any) => {
   const components: { [key: string]: Component } = {}
   // All TSX files under the views folder automatically generate mapping relationship
   Object.keys(modules).forEach((key: string) => {
@@ -39,4 +39,4 @@ const classification = (modules: any) => {
   return components
 }
 
-export default classification
+export default mapping

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

@@ -15,63 +15,23 @@
  * limitations under the License.
  */
 
-import { defineComponent, reactive, ref, toRefs, withKeys } from 'vue'
+import { defineComponent, toRefs, withKeys } from 'vue'
 import styles from './index.module.scss'
-import { useI18n } from 'vue-i18n'
-import { NInput, NButton, NSwitch, NForm, NFormItem, FormRules } from 'naive-ui'
-import { useRouter } from 'vue-router'
-import type { Router } from 'vue-router'
-import { queryLog } from '@/service/modules/login'
+import { NInput, NButton, NSwitch, NForm, NFormItem } from 'naive-ui'
+import { useValidate } from './use-validate'
+import { useTranslate } from './use-translate'
+import { useLogin } from './use-login'
 
 const login = defineComponent({
   name: 'login',
   setup() {
-    const { t, locale } = useI18n()
-    const state = reactive({
-      loginFormRef: ref(),
-      loginForm: {
-        userName: '',
-        userPassword: '',
-      },
-      rules: {
-        userName: {
-          trigger: ['input', 'blur'],
-          validator() {
-            if (state.loginForm.userName === '') {
-              return new Error(`${t('login.userName_tips')}`)
-            }
-          },
-        },
-        userPassword: {
-          trigger: ['input', 'blur'],
-          validator() {
-            if (state.loginForm.userPassword === '') {
-              return new Error(`${t('login.userPassword_tips')}`)
-            }
-          },
-        },
-      } as FormRules,
-    })
+    const { state, t, locale } = useValidate()
 
-    const handleChange = (value: string) => {
-      locale.value = value
-    }
+    const { handleChange } = useTranslate(locale)
 
-    const router: Router = useRouter()
-    const handleLogin = () => {
-      state.loginFormRef.validate((valid: any) => {
-        if (!valid) {
-          queryLog({ ...state.loginForm }).then((res: Response) => {
-            console.log('res', res)
-            router.push({ path: 'home' })
-          })
-        } else {
-          console.log('Invalid')
-        }
-      })
-    }
+    const { handleLogin } = useLogin(state)
 
-    return { t, locale, handleChange, handleLogin, ...toRefs(state) }
+    return { t, handleChange, handleLogin, ...toRefs(state) }
   },
   render() {
     return (

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

@@ -0,0 +1,39 @@
+/*
+ * 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 type { Router } from 'vue-router'
+import { queryLog } from '@/service/modules/login'
+
+export function useLogin (state) {
+  const router: Router = useRouter()
+  const handleLogin = () => {
+    state.loginFormRef.validate((valid: any) => {
+      if (!valid) {
+        queryLog({...state.loginForm}).then((res: Response) => {
+          console.log('res', res)
+          router.push({ path: 'home' })
+        })
+      } else {
+        console.log('Invalid')
+      }
+    })
+  }
+  return {
+    handleLogin
+  }
+}

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

@@ -0,0 +1,27 @@
+/*
+ * 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 { WritableComputedRef } from "vue"
+
+export function useTranslate (locale: WritableComputedRef<string>) {
+  const handleChange = (value: string) => {
+    locale.value = value
+  }
+  return {
+    handleChange
+  }
+}

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

@@ -0,0 +1,53 @@
+/*
+ * 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 { reactive, ref } from 'vue'
+import { FormRules } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+export function useValidate () {
+  const { t, locale } = useI18n()
+  const state = reactive({
+    loginFormRef: ref(),
+    loginForm: {
+      userName: '',
+      userPassword: '',
+    },
+    rules: {
+      userName: {
+        trigger: ['input', 'blur'],
+        validator() {
+          if (state.loginForm.userName === '') {
+            return new Error(`${t('login.userName_tips')}`)
+          }
+        },
+      },
+      userPassword: {
+        trigger: ['input', 'blur'],
+        validator() {
+          if (state.loginForm.userPassword === '') {
+            return new Error(`${t('login.userPassword_tips')}`)
+          }
+        },
+      },
+    } as FormRules,
+  })
+
+  return {
+    state, t, locale
+  }
+}