import { useState } from 'react' import { Alert, Button, ControlLabel, FormControl, FormGroup, } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import { postJSON } from '../../../infrastructure/fetch-json' import getMeta from '../../../utils/meta' import { ExposedSettings } from '../../../../../types/exposed-settings' import useAsync from '../../../shared/hooks/use-async' function AccountInfoSection() { const { t } = useTranslation() const { hasAffiliationsFeature } = getMeta( 'ol-ExposedSettings' ) as ExposedSettings const isExternalAuthenticationSystemUsed = getMeta( 'ol-isExternalAuthenticationSystemUsed' ) as boolean const shouldAllowEditingDetails = getMeta( 'ol-shouldAllowEditingDetails' ) as boolean const [email, setEmail] = useState(() => getMeta('ol-usersEmail') as string) const [firstName, setFirstName] = useState( () => getMeta('ol-firstName') as string ) const [lastName, setLastName] = useState( () => getMeta('ol-lastName') as string ) const { isLoading, error, isSuccess, runAsync } = useAsync() const [isFormValid, setIsFormValid] = useState(true) const handleEmailChange = event => { setEmail(event.target.value) setIsFormValid(event.target.validity.valid) } const handleFirstNameChange = event => { setFirstName(event.target.value) } const handleLastNameChange = event => { setLastName(event.target.value) } const canUpdateEmail = !hasAffiliationsFeature && !isExternalAuthenticationSystemUsed const canUpdateNames = shouldAllowEditingDetails const handleSubmit = event => { event.preventDefault() if (!isFormValid) { return } runAsync( postJSON('/user/settings', { body: { email: canUpdateEmail ? email : undefined, firstName: canUpdateNames ? firstName : undefined, lastName: canUpdateNames ? lastName : undefined, }, }) ).catch(() => {}) } return ( <>