|  |  | 
 |  |  |     Button, | 
 |  |  |     TextField, | 
 |  |  |     Stack, | 
 |  |  |     Autocomplete | 
 |  |  |     Autocomplete, | 
 |  |  |     InputAdornment, | 
 |  |  |     IconButton, | 
 |  |  | } from '@mui/material'; | 
 |  |  | import { | 
 |  |  |     useTranslate, | 
 |  |  |     useLogin, | 
 |  |  |     useNotify, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { useForm, Controller } from 'react-hook-form'; | 
 |  |  | import { useForm, Controller, useWatch, FormProvider, useFormContext } from "react-hook-form"; | 
 |  |  | import ProviderChoices from "./ProviderChoices"; | 
 |  |  | import Visibility from '@mui/icons-material/Visibility'; | 
 |  |  | import VisibilityOff from '@mui/icons-material/VisibilityOff'; | 
 |  |  |  | 
 |  |  | const Login = (props) => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const notify = useNotify(); | 
 |  |  |     const login = useLogin(); | 
 |  |  |     const location = useLocation(); | 
 |  |  |     const { tenantList } = props; | 
 |  |  |     const { systemInfo: { mode }, tenantList } = props; | 
 |  |  |  | 
 |  |  |     const { control, watch, handleSubmit, setValue } = useForm(); | 
 |  |  |     const { control, handleSubmit, watch, setValue, getValues, setError, clearErrors } = useForm(); | 
 |  |  |  | 
 |  |  |     const [loading, setLoading] = useState(false); | 
 |  |  |     const [showPassword, setShowPassword] = useState(false); | 
 |  |  |  | 
 |  |  |     const username = watch('username'); | 
 |  |  |     const password = watch('password'); | 
 |  |  | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         if (tenantList.length > 0 && !tenantId) { | 
 |  |  |             setValue('tenantId', tenantList[0].id); | 
 |  |  |             const rememberTenantId = localStorage.getItem('remember_tenantId'); | 
 |  |  |             if (rememberTenantId && tenantList.some(t => t.id === Number(rememberTenantId))) { | 
 |  |  |                 setValue('tenantId', Number(rememberTenantId)); | 
 |  |  |             } else { | 
 |  |  |                 setValue('tenantId', tenantList[0].id); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |     }, [tenantList, setValue]); | 
 |  |  |  | 
 |  |  | 
 |  |  |         login( | 
 |  |  |             data, | 
 |  |  |             location.state ? (location.state).nextPathname : '/' | 
 |  |  |         ).catch((error) => { | 
 |  |  |         ).catch((res) => { | 
 |  |  |             setLoading(false); | 
 |  |  |             notify( | 
 |  |  |                 typeof error === 'string' | 
 |  |  |                     ? error | 
 |  |  |                     : typeof error === 'undefined' || !error.message | 
 |  |  |                         ? 'ra.auth.sign_in_error' | 
 |  |  |                         : error.message, | 
 |  |  |                 { | 
 |  |  |                     type: 'error', | 
 |  |  |                     messageArgs: { | 
 |  |  |                         _: | 
 |  |  |                             typeof error === 'string' | 
 |  |  |                                 ? error | 
 |  |  |                                 : error && error.message | 
 |  |  |                                     ? error.message | 
 |  |  |                                     : undefined, | 
 |  |  |                     }, | 
 |  |  |                 } | 
 |  |  |             ); | 
 |  |  |             const { code, msg, data } = res; | 
 |  |  |             if (code === 10003) { | 
 |  |  |                 setError('username', { | 
 |  |  |                     message: msg | 
 |  |  |                 }) | 
 |  |  |             } else if (code === 10004) { | 
 |  |  |                 setError('username', { | 
 |  |  |                     message: msg | 
 |  |  |                 }) | 
 |  |  |             } else if (code === 10001) { | 
 |  |  |                 setError('password', { | 
 |  |  |                     message: msg | 
 |  |  |                 }) | 
 |  |  |             } else { | 
 |  |  |                 notify(msg, { type: 'error', messageArgs: { _: msg } }); | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  | 
 |  |  |                 component="form" onSubmit={handleSubmit(onSubmit)} noValidate | 
 |  |  |             > | 
 |  |  |                 <Stack spacing={2}> | 
 |  |  |                     <Controller | 
 |  |  |                         name="tenantId" | 
 |  |  |                         control={control} | 
 |  |  |                         rules={{ required: true }} | 
 |  |  |                         defaultValue={tenantList.length > 0 ? tenantList[0].id : ''} | 
 |  |  |                         render={({ field: { onChange, value, ref } }) => { | 
 |  |  |                             const selectedTenant = tenantList.find(tenant => tenant.id === value) || null; | 
 |  |  |                             return ( | 
 |  |  |                                 <Autocomplete | 
 |  |  |                                     options={tenantList} | 
 |  |  |                                     getOptionLabel={(option) => option.name} | 
 |  |  |                                     value={selectedTenant} | 
 |  |  |                                     onChange={(_, newValue) => { | 
 |  |  |                                         onChange(newValue ? newValue.id : ''); | 
 |  |  |                                     }} | 
 |  |  |                                     renderInput={(params) => ( | 
 |  |  |                                         <TextField | 
 |  |  |                                             {...params} | 
 |  |  |                                             label={translate("page.login.tenant")} | 
 |  |  |                                             variant="standard" | 
 |  |  |                                             inputRef={ref} | 
 |  |  |                                         /> | 
 |  |  |                                     )} | 
 |  |  |                                 /> | 
 |  |  |                             ); | 
 |  |  |                         }} | 
 |  |  |                     /> | 
 |  |  |                     {mode === 'OFFLINE' && ( | 
 |  |  |                         <Controller | 
 |  |  |                             name="tenantId" | 
 |  |  |                             control={control} | 
 |  |  |                             rules={{ required: true }} | 
 |  |  |                             defaultValue={tenantList.length > 0 ? tenantList[0].id : ''} | 
 |  |  |                             render={({ field: { onChange, value, ref } }) => { | 
 |  |  |                                 const selectedTenant = tenantList.find(tenant => tenant.id === value) || null; | 
 |  |  |                                 return ( | 
 |  |  |                                     <Autocomplete | 
 |  |  |                                         options={tenantList} | 
 |  |  |                                         getOptionLabel={(option) => option.name} | 
 |  |  |                                         value={selectedTenant} | 
 |  |  |                                         onChange={(_, newValue) => { | 
 |  |  |                                             const newTenantId = newValue ? newValue.id : ''; | 
 |  |  |                                             onChange(newTenantId); | 
 |  |  |                                             localStorage.setItem('remember_tenantId', newTenantId); | 
 |  |  |                                         }} | 
 |  |  |                                         renderInput={(params) => ( | 
 |  |  |                                             <TextField | 
 |  |  |                                                 {...params} | 
 |  |  |                                                 label={translate("page.login.tenant")} | 
 |  |  |                                                 variant="standard" | 
 |  |  |                                                 inputRef={ref} | 
 |  |  |                                             /> | 
 |  |  |                                         )} | 
 |  |  |                                     /> | 
 |  |  |                                 ); | 
 |  |  |                             }} | 
 |  |  |                         /> | 
 |  |  |                     )} | 
 |  |  |  | 
 |  |  |                     <Controller | 
 |  |  |                         name="username" | 
 |  |  |                         control={control} | 
 |  |  |                         defaultValue="" | 
 |  |  |                         rules={{ required: true }} | 
 |  |  |                         render={({ field }) => ( | 
 |  |  |                         render={({ field, fieldState: { error } }) => ( | 
 |  |  |                             <TextField | 
 |  |  |                                 {...field} | 
 |  |  |                                 label={translate('ra.auth.username')} | 
 |  |  |                                 label={translate("page.login.username")} | 
 |  |  |                                 variant="standard" | 
 |  |  |                                 disabled={loading} | 
 |  |  |                                 autoFocus | 
 |  |  |                                 autoComplete="off" | 
 |  |  |                                 error={!!error} | 
 |  |  |                                 helperText={error?.message || ""} | 
 |  |  |                             /> | 
 |  |  |                         )} | 
 |  |  |                     /> | 
 |  |  | 
 |  |  |                         control={control} | 
 |  |  |                         defaultValue="" | 
 |  |  |                         rules={{ required: true }} | 
 |  |  |                         render={({ field }) => ( | 
 |  |  |                         render={({ field, fieldState: { error } }) => ( | 
 |  |  |                             <TextField | 
 |  |  |                                 {...field} | 
 |  |  |                                 label={translate('ra.auth.password')} | 
 |  |  |                                 type="password" | 
 |  |  |                                 label={translate("page.login.password")} | 
 |  |  |                                 type={showPassword ? 'text' : 'password'} | 
 |  |  |                                 variant="standard" | 
 |  |  |                                 disabled={loading} | 
 |  |  |  | 
 |  |  |                                 autoComplete="off" | 
 |  |  |                                 error={!!error} | 
 |  |  |                                 helperText={error?.message || ""} | 
 |  |  |                                 InputProps={{ | 
 |  |  |                                     endAdornment: ( | 
 |  |  |                                         <InputAdornment position="end"> | 
 |  |  |                                             <IconButton | 
 |  |  |                                                 aria-label="toggle password visibility" | 
 |  |  |                                                 onClick={() => setShowPassword((show) => !show)} | 
 |  |  |                                                 onMouseDown={(event) => { event.preventDefault() }} | 
 |  |  |                                                 edge="end" | 
 |  |  |                                             > | 
 |  |  |                                                 {showPassword ? <VisibilityOff /> : <Visibility />} | 
 |  |  |                                             </IconButton> | 
 |  |  |                                         </InputAdornment> | 
 |  |  |                                     ), | 
 |  |  |                                 }} | 
 |  |  |                             /> | 
 |  |  |                         )} | 
 |  |  |                     /> | 
 |  |  |  | 
 |  |  |                     <Box mt={10}></Box> | 
 |  |  |                     <Box /> | 
 |  |  |  | 
 |  |  |                     <Button | 
 |  |  |                         type="submit" | 
 |  |  |                         variant="contained" | 
 |  |  |                         disabled={loading || !(tenantId && username && password)} | 
 |  |  |                         sx={{ | 
 |  |  |                             backgroundColor: "#3D4BA7" | 
 |  |  |                         }} | 
 |  |  |                         disabled={loading || !((mode === 'OFFLINE' ? tenantId : true) && username && password)} | 
 |  |  |                     > | 
 |  |  |                         {loading && <CircularProgress size={25} thickness={2} />} | 
 |  |  |                         {translate('page.login.button.login')} | 
 |  |  | 
 |  |  |  | 
 |  |  |                 </Stack> | 
 |  |  |                 <Box mt={1} mb={1} sx={{ textAlign: 'center' }}>or</Box> | 
 |  |  |  | 
 |  |  |                 <ProviderChoices type="LOG IN" /> | 
 |  |  |             </Box > | 
 |  |  |         </> | 
 |  |  |     ) |