Skip to content

Commit a0a19a9

Browse files
xyhp915tiensonqin
xyhp915
and
tiensonqin
authored
feat: new authenticate UI (#12172)
* 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>
1 parent 5b35a9e commit a0a19a9

File tree

27 files changed

+2365
-251
lines changed

27 files changed

+2365
-251
lines changed

‎gulpfile.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@ const common = {
7979
'node_modules/marked/marked.min.js',
8080
'node_modules/@highlightjs/cdn-assets/highlight.min.js',
8181
'node_modules/@isomorphic-git/lightning-fs/dist/lightning-fs.min.js',
82-
'packages/amplify/dist/amplify.js',
8382
'packages/ui/dist/ui/ui.js',
8483
'node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm',
8584
'node_modules/react/umd/react.production.min.js',
@@ -130,7 +129,6 @@ const common = {
130129
'node_modules/prop-types/prop-types.min.js',
131130
'node_modules/interactjs/dist/interact.min.js',
132131
'node_modules/photoswipe/dist/umd/*.js',
133-
'packages/amplify/dist/amplify.js',
134132
'packages/ui/dist/ui/ui.js',
135133
'node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm',
136134
]).pipe(gulp.dest(path.join(outputPath, 'mobile', 'js'))),

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
"tldraw:build": "yarn --cwd packages/tldraw install",
106106
"amplify:build": "yarn --cwd packages/amplify install",
107107
"ui:build": "yarn --cwd packages/ui install",
108-
"postinstall": "yarn tldraw:build && yarn amplify:build && yarn ui:build"
108+
"postinstall": "yarn tldraw:build && yarn ui:build"
109109
},
110110
"dependencies": {
111111
"@capacitor-community/safe-area": "7.0.0-alpha.1",

‎packages/ui/@/components/ui/alert.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ const alertVariants = cva(
1212
default: 'bg-background text-foreground',
1313
destructive:
1414
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
15+
warning:
16+
'border-yellow-600 text-yellow-600 dark:text-yellow-500/70 [&>svg]:text-yellow-600',
1517
},
1618
},
1719
defaultVariants: {

‎packages/ui/examples/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
1010
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
1111
<script src="./index.tsx" type="module"></script>
12+
<style>
13+
a {
14+
cursor: pointer;
15+
}
16+
</style>
1217
</head>
1318
<body>
1419
<div id="app"></div>

‎packages/ui/examples/index.tsx‎

Lines changed: 49 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,63 @@ import '../src/index.css'
22
import { setupGlobals } from '../src/ui'
33
import * as React from 'react'
44
import * as ReactDOM from 'react-dom'
5+
import { init, t } from '../src/amplify/core'
56

67
// @ts-ignore
7-
import { Button } from '@/components/ui/button'
8+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
9+
import { LoginForm, ResetPasswordForm, SignupForm, ConfirmWithCodeForm } from '../src/amplify/ui'
10+
import { AuthFormRootContext } from '../src/amplify/core'
811

912
// bootstrap
1013
setupGlobals()
14+
init()
1115

1216
function App() {
17+
const [errors, setErrors] = React.useState<string | null>(null)
18+
const [currentTab, setCurrentTab] = React.useState<'login' | 'reset' | 'signup' | 'confirm-code' | any>('login')
19+
const onSessionCallback = React.useCallback((session: any) => {
20+
console.log('==>>session callback:', session)
21+
}, [])
22+
23+
React.useEffect(() => {
24+
setErrors(null)
25+
}, [currentTab])
26+
27+
let content = null
28+
// support passing object with type field
29+
let _currentTab = currentTab?.type ? currentTab.type : currentTab
30+
let _currentTabProps = currentTab?.props || {}
31+
32+
switch (_currentTab) {
33+
case 'login':
34+
content = <LoginForm/>
35+
break
36+
case 'reset':
37+
content = <ResetPasswordForm/>
38+
break
39+
case 'signup':
40+
content = <SignupForm/>
41+
break
42+
case 'confirm-code':
43+
content = <ConfirmWithCodeForm {..._currentTabProps}/>
44+
break
45+
}
46+
1347
return (
14-
<main className={'p-8'}>
15-
<h1 className={'text-red-500 mb-8'}>
16-
Hello, Logseq UI :)
17-
</h1>
18-
<Button asChild>
19-
<a href={'https://google.com'} target={'_blank'}>go to google.com</a>
20-
</Button>
48+
<main className={'h-screen flex flex-col justify-center items-center gap-4'}>
49+
<AuthFormRootContext.Provider value={{
50+
errors, setErrors, setCurrentTab,
51+
onSessionCallback
52+
}}>
53+
<Card className={'sm:w-96'}>
54+
<CardHeader>
55+
<CardTitle className={'capitalize'}>{t(_currentTab)?.replace('-', ' ')}</CardTitle>
56+
</CardHeader>
57+
<CardContent>
58+
{content}
59+
</CardContent>
60+
</Card>
61+
</AuthFormRootContext.Provider>
2162
</main>
2263
)
2364
}

‎packages/ui/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@radix-ui/react-toggle-group": "^1.1.7",
3535
"@radix-ui/react-tooltip": "^1.2.4",
3636
"@silk-hq/components": "^0.9.10",
37+
"aws-amplify": "^6.15.6",
3738
"class-variance-authority": "^0.7.1",
3839
"clsx": "^2.0.0",
3940
"cmdk": "^0.2.0",
@@ -70,6 +71,7 @@
7071
"@types/prop-types": "^15",
7172
"@types/react": "17",
7273
"@types/react-dom": "17",
74+
"buffer": "^5.5.0",
7375
"parcel": "2.8.3",
7476
"postcss": "^8.4.31",
7577
"postcss-loader": "^7.3.3",

‎packages/ui/src/amplify/core.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Amplify } from 'aws-amplify'
2+
import { createContext, useContext } from 'react'
3+
import { translate, setNSDicts, setLocale } from '../i18n'
4+
5+
export const AuthFormRootContext = createContext<any>(null)
6+
export const useAuthFormState = () => {
7+
return useContext(AuthFormRootContext)
8+
}
9+
10+
export function t(key: string, ...args: any) {
11+
return translate('amplify', key, ...args)
12+
}
13+
14+
export function init({ lang, authCognito }: any) {
15+
// Load default language
16+
setNSDicts('amplify', require('./lang').default)
17+
if (lang) setLocale(lang)
18+
Amplify.configure({
19+
Auth: {
20+
Cognito: {
21+
...authCognito,
22+
loginWith: { email: true }
23+
}
24+
}
25+
})
26+
}

‎packages/ui/src/amplify/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as Auth from 'aws-amplify/auth'
2+
import { init } from './core'
3+
import { LSAuthenticator } from './ui'
4+
5+
export {
6+
init, Auth,
7+
LSAuthenticator
8+
}

‎packages/ui/src/amplify/lang.ts‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
export default {
2+
'en': {
3+
'signup': 'Sign Up',
4+
'reset-password': 'Reset Password',
5+
'confirm-code': 'Confirm Code',
6+
'CODE_ON_THE_WAY_TIP': 'Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.',
7+
'PW_POLICY_TIP': '1. at least 8 characters.\n' +
8+
'2. must have lowercase characters.\n' +
9+
'3. must have uppercase characters.\n' +
10+
'4. must have symbol characters.',
11+
},
12+
'zh-cn': {
13+
'login': '登录',
14+
'signup': '注册',
15+
'reset-password': '重置密码',
16+
'confirm-code': '确认验证码',
17+
'PW_POLICY_TIP': '1. 密码长度至少8个字符\n' +
18+
'2. 密码必须包含小写字母\n' +
19+
'3. 密码必须包含大写字母\n' +
20+
'4. 密码必须包含特殊字符',
21+
'CODE_ON_THE_WAY_TIP': '验证码已发送。请输入我们发送给您的验证码以登录。可能需要一分钟才能收到。',
22+
'Sign in to your account': '登录到您的账户',
23+
'Email': '电子邮箱',
24+
'Password': '密码',
25+
'Sign in': '登录',
26+
'Confirm': '确认',
27+
'Don\'t have an account?': '还没有账户？',
28+
'Sign up': '注册',
29+
'or': '或 ',
30+
'Forgot your password?': '忘记密码？',
31+
'Create account': '创建您的账户',
32+
'Username': '用户名',
33+
'Confirm Password': '确认密码',
34+
'New Password': '新密码',
35+
'By signing up, you agree to our': '注册即表示您同意我们的 ',
36+
'Terms of Service': '服务条款',
37+
'Privacy Policy': '隐私政策',
38+
'Already have an account?': '已经有账户？',
39+
'Reset password': '重置您的密码',
40+
'Enter the code sent to your email': '输入发送到您邮箱的验证码',
41+
'Send code': '发送验证码',
42+
'Resend code': '重新发送验证码',
43+
'Back to login': '返回登录',
44+
'Enter your email': '请输入您的电子邮箱'
45+
},
46+
'zh-hant': {
47+
'login': '登入',
48+
'signup': '註冊',
49+
'reset-password': '重置密碼',
50+
'confirm-code': '確認驗證碼',
51+
'CODE_ON_THE_WAY_TIP': '驗證碼已發送。請輸入我們發送給您的驗證碼以登入。可能需要一分鐘才能收到。',
52+
'PW_POLICY_TIP': '1. 密碼長度至少8個字符\n' +
53+
'2. 密碼必須包含小寫字母\n' +
54+
'3. 密碼必須包含大寫字母\n' +
55+
'4. 密碼必須包含特殊字符',
56+
'Sign in to your account': '登入到您的帳戶',
57+
'Email': '電子郵箱',
58+
'Password': '密碼',
59+
'Sign in': '登入',
60+
'Confirm': '確認',
61+
'Don\'t have an account?': '還沒有帳戶？',
62+
'Sign up': '註冊',
63+
'or': '或 ',
64+
'Forgot your password?': '忘記密碼？',
65+
'Create account': '創建您的帳戶',
66+
'Username': '用戶名',
67+
'Confirm Password': '確認密碼',
68+
'New Password': '新密碼',
69+
'By signing up, you agree to our': '註冊即表示您同意我們的 ',
70+
'Terms of Service': '服務條款',
71+
'Privacy Policy': '隱私政策',
72+
'Already have an account?': '已經有帳戶？',
73+
'Reset password': '重置您的密碼',
74+
'Enter the code sent to your email': '輸入發送到您郵箱的驗證碼',
75+
'Send code': '發送驗證碼',
76+
'Resend code': '重新發送驗證碼',
77+
'Back to login': '返回登入',
78+
'Enter your email': '請輸入您的電子郵箱'
79+
},
80+
'ja': {
81+
'login': 'ログイン',
82+
'signup': 'サインアップ',
83+
'reset-password': 'パスワードをリセットする',
84+
'confirm-code': 'コードを確認する',
85+
'CODE_ON_THE_WAY_TIP': 'コードが送信されました。ログインするには、送信したコードを入力してください。届くまでに1分ほどかかる場合があります。',
86+
'PW_POLICY_TIP': '1. パスワードは8文字以上であること。\n' +
87+
'2. パスワードには小文字を含める必要があります。\n' +
88+
'3. パスワードには大文字を含める必要があります。\n' +
89+
'4. パスワードには記号を含める必要があります。',
90+
'Sign in to your account': 'アカウントにサインイン',
91+
'Email': 'メール',
92+
'Password': 'パスワード',
93+
'Sign in': 'サインイン',
94+
'Confirm': '確認',
95+
'Don\'t have an account?': 'アカウントをお持ちでないですか？',
96+
'Sign up': 'サインアップ',
97+
'or': 'または ',
98+
'Forgot your password?': 'パスワードをお忘れですか？',
99+
'Create account': 'アカウントを作成する',
100+
'Username': 'ユーザー名',
101+
'New Password': '新しいパスワード',
102+
'Confirm Password': 'パスワードを確認する',
103+
'By signing up, you agree to our': 'サインアップすることで、あなたは私たちの ',
104+
'Terms of Service': '利用規約',
105+
'Privacy Policy': 'プライバシーポリシー',
106+
'Already have an account? ': 'すでにアカウントをお持ちですか？',
107+
'Reset password': 'パスワードをリセットする',
108+
'Enter the code sent to your email': 'メールに送信されたコードを入力してください',
109+
'Send code': 'コードを送信',
110+
'Resend code': 'コードを再送信',
111+
'Back to login': 'ログインに戻る',
112+
'Enter your email': 'メールアドレスを入力してください'
113+
}
114+
}

0 commit comments

Comments
 (0)