login.tsx (2030B)
1 import { memo, useContext, useState } from 'react'; 2 import Button from '../button/button'; 3 import Header from '../header/header'; 4 import Input from '../input/basic/input'; 5 import { Navigate } from 'react-router-dom'; 6 import { MatrixContext } from '../../app/sdk/client'; 7 8 const Login = memo(() => { 9 const matrixClient = useContext(MatrixContext); 10 const [loginPending, setLoginPending] = useState(false); 11 const [loginError, setLoginError] = useState(''); 12 const [username, setUsername] = useState(''); 13 const [password, setPassword] = useState(''); 14 if (matrixClient.isLoggedIn) { 15 //@ts-ignore 16 if (!globalThis.IS_STORYBOOK) { 17 return <Navigate to="/" />; 18 } 19 } 20 const startLogin = async () => { 21 setLoginPending(true); 22 const error = await matrixClient.passwordLogin(username, password); 23 if (error) { 24 setLoginError(error.toString()); 25 } 26 setLoginPending(false); 27 } 28 return ( 29 <form className="flex flex-col rounded-md shadow p-4 bg-white dark:bg-slate-900 gap-2 min-w-[30rem]" onSubmit={(e) => { 30 e.preventDefault(); 31 startLogin(); 32 }}> 33 <Header>Login</Header> 34 {loginError ? <h2 className='text-red-500 font-normal text-sm'>{loginError}</h2> : <div className='min-h-[1.25rem]'></div>} 35 <Input 36 readonly={loginPending} 37 value={username} 38 placeholder="Username" 39 onChange={e => setUsername(e.target.value)} 40 /> 41 <Input 42 readonly={loginPending} 43 value={password} 44 password={true} 45 placeholder="Password" 46 onChange={e => setPassword(e.target.value)} 47 /> 48 <Button 49 readonly={loginPending} 50 style="primary" 51 type="submit" 52 > 53 Login 54 </Button> 55 </form> 56 ); 57 }) 58 59 export default Login;