98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import Button from '@mui/material/Button';
|
|
import Dialog from '@mui/material/Dialog';
|
|
import DialogActions from '@mui/material/DialogActions';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
import DialogTitle from '@mui/material/DialogTitle';
|
|
import TextField from '@mui/material/TextField';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import React from 'react';
|
|
|
|
interface IProps {
|
|
name?: string;
|
|
fClose: VoidFunction;
|
|
fOnSubmit: (name: string, pass: string) => Promise<boolean>;
|
|
}
|
|
|
|
const RegistrationDialog = ({fClose, fOnSubmit, name: initialName = ''}: IProps) => {
|
|
const [name, setName] = React.useState(initialName);
|
|
const [pass, setPass] = React.useState('');
|
|
const namePresent = name.length !== 0;
|
|
const passPresent = pass.length !== 0;
|
|
|
|
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setName(e.target.value);
|
|
};
|
|
|
|
const handlePassChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setPass(e.target.value);
|
|
};
|
|
|
|
const submitAndClose = (): void => {
|
|
fOnSubmit(name, pass).then((success) => {
|
|
if (success) {
|
|
fClose();
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
open={true}
|
|
onClose={fClose}
|
|
aria-labelledby="form-dialog-title"
|
|
id="add-edit-user-dialog">
|
|
<DialogTitle id="form-dialog-title">Registration</DialogTitle>
|
|
<DialogContent>
|
|
<TextField
|
|
autoFocus
|
|
id="register-username"
|
|
margin="dense"
|
|
className="name"
|
|
label="Username *"
|
|
name="username"
|
|
value={name}
|
|
autoComplete="username"
|
|
onChange={handleNameChange}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
id="register-password"
|
|
margin="dense"
|
|
className="password"
|
|
type="password"
|
|
value={pass}
|
|
fullWidth
|
|
label="Password *"
|
|
name="password"
|
|
autoComplete="new-password"
|
|
onChange={handlePassChange}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={fClose}>Cancel</Button>
|
|
<Tooltip
|
|
placement={'bottom-start'}
|
|
title={
|
|
namePresent
|
|
? passPresent
|
|
? ''
|
|
: 'password is required'
|
|
: 'username is required'
|
|
}>
|
|
<div>
|
|
<Button
|
|
className="save-create"
|
|
disabled={!passPresent || !namePresent}
|
|
onClick={submitAndClose}
|
|
color="primary"
|
|
variant="contained">
|
|
Register
|
|
</Button>
|
|
</div>
|
|
</Tooltip>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|
|
export default RegistrationDialog;
|