| | |
| | | import { |
| | | useTranslate, |
| | | useLogin, |
| | | localStorageStore, |
| | | useNotify, |
| | | } from 'react-admin'; |
| | | import { useForm, Controller } from 'react-hook-form'; |
| | | import { getSystemDicts } from "@/api/auth"; |
| | | 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 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'); |
| | | const tenantId = watch('tenantId'); |
| | | |
| | | |
| | | useEffect(() => { |
| | | if (tenantList.length > 0 && !tenantId) { |
| | | const rememberTenantId = localStorage.getItem('remember_tenantId'); |
| | |
| | | }, [tenantList, setValue]); |
| | | |
| | | const onSubmit = (data) => { |
| | | getSystemDicts().then(data => { |
| | | localStorage.setItem('sys_dicts', JSON.stringify(data)); |
| | | }) |
| | | setLoading(true); |
| | | 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) => { |
| | | 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} |
| | | /> |
| | | )} |
| | | /> |
| | | ); |
| | | }} |
| | | /> |
| | | {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')} |
| | | 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"> |
| | |
| | | <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')} |
| | | </Button> |
| | | |
| | | </Stack> |
| | | <Box mt={1} mb={1} sx={{ textAlign: 'center' }}>or</Box> |
| | | {/* <Box mt={1} mb={1} sx={{ textAlign: 'center' }}>or</Box> */} |
| | | |
| | | <ProviderChoices type="LOG IN" /> |
| | | {/* <ProviderChoices type="LOG IN" /> */} |
| | | </Box > |
| | | </> |
| | | ) |