import React, { useState, useRef, useEffect, useMemo } from "react";
|
import { useLocation } from 'react-router-dom';
|
import {
|
Box,
|
CircularProgress,
|
Typography,
|
Button,
|
TextField,
|
Stack,
|
Autocomplete
|
} from '@mui/material';
|
import {
|
useTranslate,
|
useLogin,
|
useNotify,
|
} from 'react-admin';
|
import { useForm, Controller } from 'react-hook-form';
|
|
const Register = (props) => {
|
const translate = useTranslate();
|
const notify = useNotify();
|
const login = useLogin();
|
const location = useLocation();
|
const { tab, tenantList } = props;
|
|
const { control, watch, handleSubmit, setValue } = useForm();
|
|
const [loading, setLoading] = useState(false);
|
|
const username = watch('username');
|
const password = watch('password');
|
const tenantId = watch('tenantId');
|
|
useEffect(() => {
|
if (tenantList.length > 0 && !tenantId) {
|
setValue('tenantId', tenantList[0].id);
|
}
|
}, [tenantList, setValue]);
|
|
const onSubmit = (data) => {
|
console.log(data);
|
setLoading(true);
|
// js native confirm && root
|
login(
|
data,
|
location.state ? (location.state).nextPathname : '/'
|
).catch((error) => {
|
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,
|
},
|
}
|
);
|
});
|
};
|
|
return (
|
<>
|
<Box
|
p={2}
|
display="flex"
|
flexDirection='column'
|
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}
|
/>
|
)}
|
/>
|
);
|
}}
|
/>
|
|
<Controller
|
name="username"
|
control={control}
|
defaultValue=""
|
rules={{ required: true }}
|
render={({ field }) => (
|
<TextField
|
{...field}
|
label={translate('ra.auth.username')}
|
variant="standard"
|
disabled={loading}
|
autoFocus
|
/>
|
)}
|
/>
|
|
<Controller
|
name="password"
|
control={control}
|
defaultValue=""
|
rules={{ required: true }}
|
render={({ field }) => (
|
<TextField
|
{...field}
|
label={translate('ra.auth.password')}
|
type="password"
|
variant="standard"
|
disabled={loading}
|
|
/>
|
)}
|
/>
|
|
<Box mt={10}></Box>
|
|
<Button
|
type="submit"
|
variant="contained"
|
disabled={loading || !(tenantId && username && password)}
|
sx={{
|
backgroundColor: "#3D4BA7"
|
}}
|
>
|
{loading && <CircularProgress size={25} thickness={2} />}
|
{translate('page.login.button.register')}
|
</Button>
|
|
</Stack>
|
<Box mt={1} mb={1} sx={{ textAlign: 'center' }}>or</Box>
|
</Box >
|
</>
|
)
|
}
|
|
export default Register;
|
