mirror of
https://github.com/logseq/logseq.git
synced 2026-05-03 10:26:35 +00:00
a0a19a91fa
* enhance(ui): login form * enhance(ui): add localization support with translate and locale management * enhance(ui): WIP implement new authentication forms with context management * enhance(ui): add password visibility toggle to input row * enhance(ui): adjust padding for password visibility toggle * enhance(i18n): implement internationalization support for authentication UI * enhance(ui): implement sign in and sign up functionality with loading state * enhance(ui): add session management and error handling in login form * enhance(ui): add confirm code form and enhance authentication flow * enhance(ui): improve sign-in flow and confirm code handling * enhance(ui): add warning variant to alerts and improve error handling * enhance(ui): implement countdown timer for code resend functionality * enhance(ui): implement countdown timer for password reset and enhance login flow * enhance(ui): export authentication and enhance UI components * enhance(ui): integrate new login component and refresh token handling * chore: clear amplify related codes * enhance(i18n): normalize language codes and update locale handling * enhance(auth): add multilingual support for signup and password reset flows * enhance(ui): update login styles to inherit text color * enhance(ui): adjust input color variables for improved accessibility * enhance(auth): add password policy validation and tips in multiple languages * enhance(ui): improve localization handling and update alert styles * enhance(mobile): enhance login modal styling and accessibility * fix(ui): update password validation regex for special characters * enhance(ui): add padding to card header in login dialog --------- Co-authored-by: Tienson Qin <tiensonqin@gmail.com>
67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import '../src/index.css'
|
|
import { setupGlobals } from '../src/ui'
|
|
import * as React from 'react'
|
|
import * as ReactDOM from 'react-dom'
|
|
import { init, t } from '../src/amplify/core'
|
|
|
|
// @ts-ignore
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { LoginForm, ResetPasswordForm, SignupForm, ConfirmWithCodeForm } from '../src/amplify/ui'
|
|
import { AuthFormRootContext } from '../src/amplify/core'
|
|
|
|
// bootstrap
|
|
setupGlobals()
|
|
init()
|
|
|
|
function App() {
|
|
const [errors, setErrors] = React.useState<string | null>(null)
|
|
const [currentTab, setCurrentTab] = React.useState<'login' | 'reset' | 'signup' | 'confirm-code' | any>('login')
|
|
const onSessionCallback = React.useCallback((session: any) => {
|
|
console.log('==>>session callback:', session)
|
|
}, [])
|
|
|
|
React.useEffect(() => {
|
|
setErrors(null)
|
|
}, [currentTab])
|
|
|
|
let content = null
|
|
// support passing object with type field
|
|
let _currentTab = currentTab?.type ? currentTab.type : currentTab
|
|
let _currentTabProps = currentTab?.props || {}
|
|
|
|
switch (_currentTab) {
|
|
case 'login':
|
|
content = <LoginForm/>
|
|
break
|
|
case 'reset':
|
|
content = <ResetPasswordForm/>
|
|
break
|
|
case 'signup':
|
|
content = <SignupForm/>
|
|
break
|
|
case 'confirm-code':
|
|
content = <ConfirmWithCodeForm {..._currentTabProps}/>
|
|
break
|
|
}
|
|
|
|
return (
|
|
<main className={'h-screen flex flex-col justify-center items-center gap-4'}>
|
|
<AuthFormRootContext.Provider value={{
|
|
errors, setErrors, setCurrentTab,
|
|
onSessionCallback
|
|
}}>
|
|
<Card className={'sm:w-96'}>
|
|
<CardHeader>
|
|
<CardTitle className={'capitalize'}>{t(_currentTab)?.replace('-', ' ')}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{content}
|
|
</CardContent>
|
|
</Card>
|
|
</AuthFormRootContext.Provider>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
// mount app
|
|
ReactDOM.render(<App/>, document.querySelector('#app')) |