You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@seatunnel.apache.org by ki...@apache.org on 2022/07/16 02:19:29 UTC
[incubator-seatunnel] branch dev updated: [Feat][UI] Add login page. (#2183)
This is an automated email from the ASF dual-hosted git repository.
kirs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel.git
The following commit(s) were added to refs/heads/dev by this push:
new def69581d [Feat][UI] Add login page. (#2183)
def69581d is described below
commit def69581d52fab64afbda114cc310ec5e5498aa0
Author: songjianet <17...@qq.com>
AuthorDate: Sat Jul 16 10:19:25 2022 +0800
[Feat][UI] Add login page. (#2183)
---
.../{utils/index.ts => assets/styles/default.scss} | 20 +++++--
seatunnel-ui/src/locales/en_US/index.ts | 6 +-
.../src/locales/en_US/{index.ts => login.ts} | 11 ++--
seatunnel-ui/src/locales/zh_CN/index.ts | 8 +--
seatunnel-ui/src/main.ts | 3 +
seatunnel-ui/src/utils/index.ts | 4 +-
.../src/{locales/en_US/index.ts => utils/trim.ts} | 8 +--
seatunnel-ui/src/views/login/index.tsx | 65 ++++++++++++++++++++--
.../src/views/login/{index.tsx => use-form.ts} | 47 +++++++++++-----
9 files changed, 129 insertions(+), 43 deletions(-)
diff --git a/seatunnel-ui/src/utils/index.ts b/seatunnel-ui/src/assets/styles/default.scss
similarity index 87%
copy from seatunnel-ui/src/utils/index.ts
copy to seatunnel-ui/src/assets/styles/default.scss
index f76fbc629..54c9b7806 100644
--- a/seatunnel-ui/src/utils/index.ts
+++ b/seatunnel-ui/src/assets/styles/default.scss
@@ -15,10 +15,22 @@
* limitations under the License.
*/
-import mapping from './mapping'
+* {
+ outline: 0;
+}
-const utils = {
- mapping
+html,
+body {
+ width: 100%;
+ height: 100%;
}
-export default utils
\ No newline at end of file
+html,
+body,
+p,
+dl,
+dd,
+dt {
+ margin: 0;
+ padding: 0;
+}
\ No newline at end of file
diff --git a/seatunnel-ui/src/locales/en_US/index.ts b/seatunnel-ui/src/locales/en_US/index.ts
index 1e7d2e414..13c76a074 100644
--- a/seatunnel-ui/src/locales/en_US/index.ts
+++ b/seatunnel-ui/src/locales/en_US/index.ts
@@ -15,10 +15,8 @@
* limitations under the License.
*/
-const test = {
- 'test': 'test'
-}
+import login from '@/locales/en_US/login'
export default {
- test
+ login
}
\ No newline at end of file
diff --git a/seatunnel-ui/src/locales/en_US/index.ts b/seatunnel-ui/src/locales/en_US/login.ts
similarity index 80%
copy from seatunnel-ui/src/locales/en_US/index.ts
copy to seatunnel-ui/src/locales/en_US/login.ts
index 1e7d2e414..60fb8c2d1 100644
--- a/seatunnel-ui/src/locales/en_US/index.ts
+++ b/seatunnel-ui/src/locales/en_US/login.ts
@@ -15,10 +15,11 @@
* limitations under the License.
*/
-const test = {
- 'test': 'test'
-}
-
export default {
- test
+ login_to_sea_tunnel: 'Login To SeaTunnel',
+ login: 'Login',
+ username: 'Username',
+ password: 'Password',
+ username_tips: 'Please input username',
+ password_tips: 'Please input password'
}
\ No newline at end of file
diff --git a/seatunnel-ui/src/locales/zh_CN/index.ts b/seatunnel-ui/src/locales/zh_CN/index.ts
index e979946bb..1047dee2f 100644
--- a/seatunnel-ui/src/locales/zh_CN/index.ts
+++ b/seatunnel-ui/src/locales/zh_CN/index.ts
@@ -15,10 +15,4 @@
* limitations under the License.
*/
-const test = {
- 'test': '测试'
-}
-
-export default {
- test
-}
\ No newline at end of file
+export default {}
\ No newline at end of file
diff --git a/seatunnel-ui/src/main.ts b/seatunnel-ui/src/main.ts
index 25683a5a2..0f0cb7573 100644
--- a/seatunnel-ui/src/main.ts
+++ b/seatunnel-ui/src/main.ts
@@ -21,11 +21,14 @@ import App from './App'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import i18n from '@/locales'
import router from './router'
+import utils from '@/utils'
+import './assets/styles/default.scss'
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
+app.config.globalProperties.trim = utils.trim
app.use(router)
app.use(pinia)
diff --git a/seatunnel-ui/src/utils/index.ts b/seatunnel-ui/src/utils/index.ts
index f76fbc629..090908237 100644
--- a/seatunnel-ui/src/utils/index.ts
+++ b/seatunnel-ui/src/utils/index.ts
@@ -16,9 +16,11 @@
*/
import mapping from './mapping'
+import trim from './trim'
const utils = {
- mapping
+ mapping,
+ trim
}
export default utils
\ No newline at end of file
diff --git a/seatunnel-ui/src/locales/en_US/index.ts b/seatunnel-ui/src/utils/trim.ts
similarity index 88%
copy from seatunnel-ui/src/locales/en_US/index.ts
copy to seatunnel-ui/src/utils/trim.ts
index 1e7d2e414..20d2fbe89 100644
--- a/seatunnel-ui/src/locales/en_US/index.ts
+++ b/seatunnel-ui/src/utils/trim.ts
@@ -15,10 +15,8 @@
* limitations under the License.
*/
-const test = {
- 'test': 'test'
+const trim = (value: string) => {
+ return !value.startsWith(' ') && !value.endsWith(' ')
}
-export default {
- test
-}
\ No newline at end of file
+export default trim
\ No newline at end of file
diff --git a/seatunnel-ui/src/views/login/index.tsx b/seatunnel-ui/src/views/login/index.tsx
index 92e1cfdbc..3205abf71 100644
--- a/seatunnel-ui/src/views/login/index.tsx
+++ b/seatunnel-ui/src/views/login/index.tsx
@@ -15,17 +15,74 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
+import { defineComponent, toRefs, withKeys, getCurrentInstance } from 'vue'
+import { NSpace, NForm, NFormItem, NInput, NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useForm } from './use-form'
const Login = defineComponent({
setup() {
+ const { t } = useI18n()
+ const { state } = useForm()
+ const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+ const handleLogin = () => {
+
+ }
+
+ return {
+ t,
+ ...toRefs(state),
+ trim,
+ handleLogin
+ }
},
render() {
return (
- <div>
- <h1>Login</h1>
- </div>
+ <NSpace justify='center' align='center' style={{ width: '100%', height: '100vh' }}>
+ <div>
+ <h2>{this.t('login.login_to_sea_tunnel')}</h2>
+ <NForm rules={this.rules} ref='loginFormRef'>
+ <NFormItem
+ label={this.t('login.username')}
+ label-style={{ color: 'black' }}
+ path='userName'
+ >
+ <NInput
+ allowInput={this.trim}
+ type='text'
+ 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='userPassword'
+ >
+ <NInput
+ allowInput={this.trim}
+ type='password'
+ v-model={[this.loginForm.password, 'value']}
+ placeholder={this.t('login.password_tips')}
+ onKeydown={withKeys(this.handleLogin, ['enter'])}
+ />
+ </NFormItem>
+ </NForm>
+ <NButton
+ type='info'
+ disabled={
+ !this.loginForm.username || !this.loginForm.password
+ }
+ style={{ width: '100%' }}
+ onClick={this.handleLogin}
+ >
+ {this.t('login.login')}
+ </NButton>
+ </div>
+ </NSpace>
)
}
})
diff --git a/seatunnel-ui/src/views/login/index.tsx b/seatunnel-ui/src/views/login/use-form.ts
similarity index 51%
copy from seatunnel-ui/src/views/login/index.tsx
copy to seatunnel-ui/src/views/login/use-form.ts
index 92e1cfdbc..ec8bb1f34 100644
--- a/seatunnel-ui/src/views/login/index.tsx
+++ b/seatunnel-ui/src/views/login/use-form.ts
@@ -15,19 +15,40 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
+import { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { FormRules } from 'naive-ui'
-const Login = defineComponent({
- setup() {
+export function useForm() {
+ const { t } = useI18n()
- },
- render() {
- return (
- <div>
- <h1>Login</h1>
- </div>
- )
- }
-})
+ 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'))
+ }
+ }
+ },
+ userPassword: {
+ trigger: ['input', 'blur'],
+ validator() {
+ if (state.loginForm.password === '') {
+ return new Error(t('login.password_tips'))
+ }
+ }
+ }
+ } as FormRules
+ })
-export default Login
\ No newline at end of file
+ return {
+ state
+ }
+}
\ No newline at end of file