|  |  | 
 |  |  |     Button, | 
 |  |  |     TextField, | 
 |  |  |     Stack, | 
 |  |  |     Autocomplete | 
 |  |  |     Autocomplete, | 
 |  |  |     InputAdornment, | 
 |  |  |     IconButton, | 
 |  |  | } from '@mui/material'; | 
 |  |  | import { | 
 |  |  |     useTranslate, | 
 |  |  | 
 |  |  |     useNotify, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { useForm, Controller } from 'react-hook-form'; | 
 |  |  | import ProviderChoices from "./ProviderChoices"; | 
 |  |  | import Visibility from '@mui/icons-material/Visibility'; | 
 |  |  | import VisibilityOff from '@mui/icons-material/VisibilityOff'; | 
 |  |  |  | 
 |  |  | const Register = (props) => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  | 
 |  |  |     const { control, watch, handleSubmit, setValue } = useForm(); | 
 |  |  |  | 
 |  |  |     const [loading, setLoading] = useState(false); | 
 |  |  |     const [showPassword, setShowPassword] = useState(true); | 
 |  |  |  | 
 |  |  |     const username = watch('username'); | 
 |  |  |     const password = watch('password'); | 
 |  |  |     const confirmPassword = watch('confirmPassword'); | 
 |  |  |     const tenantId = watch('tenantId'); | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  | 
 |  |  |     }, [tenantList, setValue]); | 
 |  |  |  | 
 |  |  |     const onSubmit = (data) => { | 
 |  |  |         console.log(data); | 
 |  |  |         notify("Registration is not open yet"); | 
 |  |  |         return; | 
 |  |  |         setLoading(true); | 
 |  |  |         // js native confirm && root | 
 |  |  |         login( | 
 |  |  | 
 |  |  |                                 variant="standard" | 
 |  |  |                                 disabled={loading} | 
 |  |  |                                 autoFocus | 
 |  |  |                                 autoComplete="off" | 
 |  |  |                             /> | 
 |  |  |                         )} | 
 |  |  |                     /> | 
 |  |  | 
 |  |  |                             <TextField | 
 |  |  |                                 {...field} | 
 |  |  |                                 label={translate('ra.auth.password')} | 
 |  |  |                                 type="password" | 
 |  |  |                                 type={showPassword ? 'text' : 'password'} | 
 |  |  |                                 variant="standard" | 
 |  |  |                                 disabled={loading} | 
 |  |  |  | 
 |  |  |                                 autoComplete="off" | 
 |  |  |                                 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> | 
 |  |  |                     <Controller | 
 |  |  |                         name="confirmPassword" | 
 |  |  |                         control={control} | 
 |  |  |                         defaultValue="" | 
 |  |  |                         rules={{ required: true }} | 
 |  |  |                         render={({ field }) => ( | 
 |  |  |                             <TextField | 
 |  |  |                                 {...field} | 
 |  |  |                                 label={translate('page.login.confirmPwd')} | 
 |  |  |                                 type={showPassword ? 'text' : 'password'} | 
 |  |  |                                 variant="standard" | 
 |  |  |                                 disabled={loading} | 
 |  |  |                                 autoComplete="off" | 
 |  |  |                                 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 /> | 
 |  |  |  | 
 |  |  |                     <Button | 
 |  |  |                         type="submit" | 
 |  |  |                         variant="contained" | 
 |  |  |                         disabled={loading || !(tenantId && username && password)} | 
 |  |  |                         disabled={loading || !(tenantId && username && password && confirmPassword)} | 
 |  |  |                         sx={{ | 
 |  |  |                             backgroundColor: "#3D4BA7" | 
 |  |  |                         }} | 
 |  |  | 
 |  |  |  | 
 |  |  |                 </Stack> | 
 |  |  |                 <Box mt={1} mb={1} sx={{ textAlign: 'center' }}>or</Box> | 
 |  |  |  | 
 |  |  |                 <ProviderChoices type="REGISTER" /> | 
 |  |  |             </Box > | 
 |  |  |         </> | 
 |  |  |     ) |