Changeset View
Changeset View
Standalone View
Standalone View
web/account/traditional-login-form.react.js
Show All 23 Lines | |||||
import HeaderSeparator from './header-separator.react.js'; | import HeaderSeparator from './header-separator.react.js'; | ||||
import css from './log-in-form.css'; | import css from './log-in-form.css'; | ||||
import PasswordInput from './password-input.react.js'; | import PasswordInput from './password-input.react.js'; | ||||
import Button from '../components/button.react.js'; | import Button from '../components/button.react.js'; | ||||
import LoadingIndicator from '../loading-indicator.react.js'; | import LoadingIndicator from '../loading-indicator.react.js'; | ||||
import Input from '../modals/input.react.js'; | import Input from '../modals/input.react.js'; | ||||
import { useSelector } from '../redux/redux-utils.js'; | import { useSelector } from '../redux/redux-utils.js'; | ||||
import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js'; | import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js'; | ||||
import { signedIdentityKeysBlobSelector } from '../selectors/socket-selectors.js'; | import { getSignedIdentityKeysBlobSelector } from '../selectors/socket-selectors.js'; | ||||
const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes); | const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes); | ||||
function TraditionalLoginForm(): React.Node { | function TraditionalLoginForm(): React.Node { | ||||
const inputDisabled = useSelector(loadingStatusSelector) === 'loading'; | const inputDisabled = useSelector(loadingStatusSelector) === 'loading'; | ||||
const loginExtraInfo = useSelector(webLogInExtraInfoSelector); | const loginExtraInfo = useSelector(webLogInExtraInfoSelector); | ||||
const callLogIn = useServerCall(logIn); | const callLogIn = useServerCall(logIn); | ||||
const dispatchActionPromise = useDispatchActionPromise(); | const dispatchActionPromise = useDispatchActionPromise(); | ||||
const modalContext = useModalContext(); | const modalContext = useModalContext(); | ||||
const signedIdentityKeysBlob: ?SignedIdentityKeysBlob = useSelector( | const getSignedIdentityKeysBlob: ?() => Promise<SignedIdentityKeysBlob> = | ||||
signedIdentityKeysBlobSelector, | useSelector(getSignedIdentityKeysBlobSelector); | ||||
); | |||||
const [signedIdentityKeysBlob, setSignedIdentityKeysBlob] = | |||||
React.useState<?SignedIdentityKeysBlob>(null); | |||||
React.useEffect(() => { | |||||
(async () => { | |||||
if ( | |||||
getSignedIdentityKeysBlob === null || | |||||
getSignedIdentityKeysBlob === undefined | |||||
) { | |||||
setSignedIdentityKeysBlob(null); | |||||
return; | |||||
} | |||||
const resolvedSignedIdentityKeysBlob: SignedIdentityKeysBlob = | |||||
await getSignedIdentityKeysBlob(); | |||||
setSignedIdentityKeysBlob(resolvedSignedIdentityKeysBlob); | |||||
})(); | |||||
}, [getSignedIdentityKeysBlob]); | |||||
const usernameInputRef = React.useRef(); | const usernameInputRef = React.useRef(); | ||||
React.useEffect(() => { | React.useEffect(() => { | ||||
usernameInputRef.current?.focus(); | usernameInputRef.current?.focus(); | ||||
}, []); | }, []); | ||||
const [username, setUsername] = React.useState<string>(''); | const [username, setUsername] = React.useState<string>(''); | ||||
const onUsernameChange = React.useCallback(e => { | const onUsernameChange = React.useCallback(e => { | ||||
▲ Show 20 Lines • Show All 142 Lines • Show Last 20 Lines |