feat: Added login pages and functions

dolphinscheduler-ui-next/package.json

@@ -37,6 +37,7 @@
     "sass": "^1.44.0",
     "sass-loader": "^12.4.0",
     "typescript": "^4.4.4",
+    "typescript-plugin-css-modules": "^3.4.0",
     "vite": "^2.7.0",
     "vite-plugin-compression": "^0.3.6",
     "vue-tsc": "^0.28.10"

dolphinscheduler-ui-next/src/env.d.ts

@@ -22,11 +22,6 @@ declare module '*.vue' {
   export default component
 }
 
-declare module '*.scss' {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}
-
 declare module '*.png'
 declare module '*.jpg'
 declare module '*.jpeg'

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -17,6 +17,11 @@
 
 const login = {
   test: 'Test',
+  username: 'Username',
+  username_tips: 'Please enter your username',
+  password: 'Password',
+  password_tips: 'Please enter your password',
+  signin: 'Sign In'
 }
 
 export default {

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -17,6 +17,11 @@
 
 const login = {
   test: '测试',
+  username: '用户名',
+  username_tips: '请输入用户名',
+  password: '密码',
+  password_tips: '请输入密码',
+  signin: '登录'
 }
 
 export default {

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

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

dolphinscheduler-ui-next/src/views/login/index.module.scss

@@ -21,4 +21,35 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
+  background: #0098e1;
+
+  .language-switch {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+  }
+
+  .login-model {
+    width: 400px;
+    min-height: 260px;
+    background: #fff;
+    border-radius: 3px;
+    box-shadow: 0 2px 25px 0 rgb(0 0 0 / 30%);
+
+    .logo {
+      padding-top: 30px;
+
+      .logo-img {
+        width: 280px;
+        height: 60px;
+        display: block;
+        background: url('../../assets/images/logo.svg') no-repeat 23px;
+        margin: 0 auto;
+      }
+    }
+
+    .form-model {
+      padding: 30px 20px;
+    }
+  }
+}

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

@@ -15,37 +15,105 @@
  * limitations under the License.
  */
 
-import { defineComponent } from 'vue'
+import { defineComponent, reactive, ref, toRefs, withKeys } from 'vue'
 import styles from './index.module.scss'
 import { useI18n } from 'vue-i18n'
-import { NButton } from 'naive-ui'
-import { useThemeStore } from '@/store/theme/theme'
+import { NInput, NButton, NSwitch, NForm, NFormItem, FormRules } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import type { Router } from 'vue-router'
 
 const Login = defineComponent({
   name: 'login',
   setup() {
     const { t, locale } = useI18n()
-    const themeStore = useThemeStore()
+    const state = reactive({
+      loginFormRef: ref(),
+      loginForm: {
+        username: '',
+        password: '',
+      },
+      rules: {
+        username: {
+          trigger: ['input', 'blur'],
+          validator () {
+            if (state.loginForm.username === '') {
+              return new Error(`${t('login.username_tips')}`)
+            }
+          }
+        },
+        password: {
+          trigger: ['input', 'blur'],
+          validator () {
+            if (state.loginForm.password === '') {
+              return new Error(`${t('login.password_tips')}`)
+            }
+          }
+        }
+      } as FormRules
+    })
 
-    const setTheme = (): void => {
-      themeStore.setDarkTheme()
+    const handleChange = (value: string) => {
+      locale.value = value
     }
 
-    return { t, locale, setTheme }
+    const router: Router = useRouter()
+    const handleLogin = () => {
+      state.loginFormRef.validate((valid: any) => {
+        if (!valid) {
+          router.push({ path: 'home' })
+        } else {
+          console.log('Invalid')
+        }
+      })
+    }
+
+    return { t, locale, handleChange, handleLogin, ...toRefs(state)}
   },
   render() {
     return (
       <div class={styles.container}>
-        <NButton type='error' onClick={this.setTheme}>
-          {this.t('login.test')} + 切换主题
-        </NButton>
-        <select v-model={this.locale}>
-          <option value='en_US'>en_US</option>
-          <option value='zh_CN'>zh_CN</option>
-        </select>
+        <div class={styles['language-switch']}>
+          <NSwitch onUpdateValue={this.handleChange} checked-value="en_US" unchecked-value="zh_CN">
+            {{
+              checked: () => 'en_US', 
+              unchecked: () =>'zh_CN'
+            }}
+          </NSwitch>
+        </div>
+        <div class={styles['login-model']}>
+          <div class={styles.logo}>
+            <div class={styles['logo-img']}></div>
+          </div>
+          <div class={styles['form-model']}>
+            <NForm rules={this.rules} ref="loginFormRef">
+              <NFormItem label={this.t('login.username')} label-style={{color:'black'}} path="username">
+                <NInput
+                  type="text"
+                  size="large"
+                  v-model={[this.loginForm.username, 'value']}
+                  placeholder={this.t('login.username_tips')}
+                  autofocus
+                  onKeydown={withKeys(this.handleLogin, ['enter'])}
+                />
+              </NFormItem>
+              <NFormItem label={this.t('login.password')} label-style={{color:'black'}} path="password">
+                <NInput
+                  type="password"
+                  size="large"
+                  v-model={[this.loginForm.password, 'value']}
+                  placeholder={this.t('login.password_tips')}
+                  onKeydown={withKeys(this.handleLogin, ['enter'])}
+                />
+              </NFormItem>
+            </NForm>
+            <NButton round type="primary" onClick={this.handleLogin}>
+              {this.t('login.signin')}
+            </NButton>
+          </div>
+        </div>
       </div>
     )
   },
 })
 
-export default Login
+export default Login

dolphinscheduler-ui-next/tsconfig.json

@@ -13,7 +13,8 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "types": ["vite/client"]
+    "types": ["vite/client"],
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }