majin1102 commented on code in PR #4094:
URL: https://github.com/apache/amoro/pull/4094#discussion_r2850659633
##########
amoro-web/src/views/login/index.vue:
##########
@@ -38,166 +37,664 @@ export default defineComponent({
password: '',
})
const placeholder = reactive(usePlaceholder())
- const onFinish = async (values: FormState) => {
+
+ // Password visibility toggle
+ const passwordVisible = ref(false)
+
+ // Button disabled state - use ref instead of computed to force update
+ const disabled = ref(true)
+
+ // Update disabled state when form fields change
+ const updateDisabledState = () => {
+ disabled.value = !(formState.username && formState.password)
+ }
+
+ // Handle browser autofill - listen to input events
+ const handleInput = () => {
+ updateDisabledState()
+ }
+
+ // Typing animation - matching demo exactly
+ const keywords = ['Iceberg', 'Paimon', 'Lance', 'Multi-modal', 'Vector']
+ const currentKeyword = ref('')
+ const keywordIndex = ref(0)
+ const charIndex = ref(0)
+ const isDeleting = ref(false)
+ let typingTimer: ReturnType<typeof setTimeout> | null = null
+
+ function typeKeyword() {
+ const current = keywords[keywordIndex.value]
+ let delay = 150
+
+ if (isDeleting.value) {
+ currentKeyword.value = current.substring(0, charIndex.value - 1)
+ charIndex.value--
+ delay = 50
+ }
+ else {
+ currentKeyword.value = current.substring(0, charIndex.value + 1)
+ charIndex.value++
+ delay = 100
+ }
+
+ if (!isDeleting.value && charIndex.value === current.length) {
+ isDeleting.value = true
+ delay = 2000
+ }
+ else if (isDeleting.value && charIndex.value === 0) {
+ isDeleting.value = false
+ keywordIndex.value = (keywordIndex.value + 1) % keywords.length
+ delay = 300
+ }
+
+ typingTimer = setTimeout(typeKeyword, delay)
+ }
+
+ onMounted(() => {
+ typeKeyword()
+ // Delay to ensure autofill has completed
+ setTimeout(() => {
+ updateDisabledState()
+ }, 100)
+ })
+
+ onUnmounted(() => {
+ if (typingTimer) {
+ clearTimeout(typingTimer)
+ }
+ })
+
+ const onFinish = async () => {
try {
- const store = useStore()
const res = await loginService.login({
- user: values.username,
- password: values.password,
+ user: formState.username,
+ password: formState.password,
})
if (res.code !== 200) {
message.error(res.message)
return
}
- const { path, query } = store.historyPathInfo
-
- const backRoute = path && path !== '/login' ? path : '/'
-
- router.replace({
- path: backRoute,
- query,
- })
+ setTimeout(() => {
+ window.location.href = '/'
+ }, 100)
}
catch (error) {
message.error((error as Error).message)
}
}
- const disabled = computed(() => {
- return !(formState.username && formState.password)
- })
+ const togglePassword = () => {
+ passwordVisible.value = !passwordVisible.value
+ }
return {
placeholder,
formState,
onFinish,
disabled,
+ passwordVisible,
+ togglePassword,
+ currentKeyword,
+ handleInput,
}
},
})
</script>
<template>
- <div class="login-wrap g-flex-jc">
+ <div class="login-wrap">
+ <!-- Background effects -->
+ <div class="bg-grid" />
+ <div class="particles">
+ <div class="particle" />
+ <div class="particle" />
+ <div class="particle" />
+ <div class="particle" />
+ <div class="particle" />
+ </div>
+
+ <!-- Login form -->
<div class="login-content">
- <div class="img-logo">
- <img src="@/assets/images/logo-all1.svg" class="arctic-logo" alt="">
+ <div class="terminal-header">
+ <img src="@/assets/images/logo-all1.svg" class="header-logo"
alt="Amoro">
+ <a href="https://amoro.apache.org"; target="_blank" class="docs-link">
+ <span class="docs-dot" />
+ Docs
+ </a>
</div>
- <div class="content-title">
- Lakehouse management system
+
+ <div class="img-logo">
+ <div class="logo-icon">
+ <div class="typing-line1">
+ <span class="typing-prefix">></span>
+ <span class="typing-fixed">Automatically and Continuously
Tune</span>
Review Comment:
You mean "Automatic and Continuous Tuning your xxxx?"
The syntax seems not right
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
