aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authormikems66 <>2021-02-01 15:54:38 +0100
committermikems66 <>2021-02-01 15:54:38 +0100
commit599104d3e8bf3545d00fa63ad5061e0bb9ad47b7 (patch)
treeaa1f880053a408a5efefa54dc827d4b5e4a1d597
parent4b1574d1603c01304e5505facccf0a817e5e5026 (diff)
downloadetbsa-traccar-web-599104d3e8bf3545d00fa63ad5061e0bb9ad47b7.tar.gz
etbsa-traccar-web-599104d3e8bf3545d00fa63ad5061e0bb9ad47b7.tar.bz2
etbsa-traccar-web-599104d3e8bf3545d00fa63ad5061e0bb9ad47b7.zip
Form fields into separate vars, disable submit if e-mail is invalid
-rw-r--r--modern/src/RegisterDialog.js55
1 files changed, 27 insertions, 28 deletions
diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js
index 32694ea..5317436 100644
--- a/modern/src/RegisterDialog.js
+++ b/modern/src/RegisterDialog.js
@@ -9,35 +9,39 @@ import TextField from '@material-ui/core/TextField';
import Snackbar from '@material-ui/core/Snackbar';
const RegisterDialog = ({ showDialog, onResult }) => {
- const [formFields, setFormFields] = useState({});
- const [validationErrors, setValidationErrors] = useState({});
+ const [name, setName] = useState('');
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
const [snackbarOpen, setSnackbarOpen] = useState(false);
- const handleChange = (event) => {
- setFormFields({ ...formFields, [event.target.name]: event.target.value });
- setValidationErrors({ ...validationErrors, [event.target.name]: false });
+ const handleNameChange = (event) => {
+ setName(event.target.value);
+ }
+
+ const handleEmailChange = (event) => {
+ setEmail(event.target.value);
+ }
+
+ const handlePasswordChange = (event) => {
+ setPassword(event.target.value);
+ }
+
+ const submitDisabled = () => {
+ return (!name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password);
}
const handleRegister = async (event) => {
- let objErrors = {};
- if (!/(.+)@(.+)\.(.{2,})/.test(formFields.email)) {
- objErrors.email = true;
- }
- if (Object.keys(objErrors).length !== 0) {
- setValidationErrors(objErrors);
- return;
- }
const response = await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(formFields)
+ body: JSON.stringify({name, email, password})
});
if (response.ok) {
showDialog = false;
setSnackbarOpen(true);
- }
+ }
}
if (snackbarOpen) {
@@ -60,40 +64,35 @@ const RegisterDialog = ({ showDialog, onResult }) => {
margin='normal'
required
fullWidth
- error={validationErrors.name}
label={t('sharedName')}
name='name'
- value={formFields.name || ''}
+ value={name || ''}
autoComplete='name'
autoFocus
- onChange={handleChange}
- helperText={validationErrors.name && t('sharedRequired')} />
+ onChange={handleNameChange} />
<TextField
margin='normal'
required
fullWidth
- error={validationErrors.email}
+ type='email'
label={t('userEmail')}
name='email'
- value={formFields.email || ''}
+ value={email || ''}
autoComplete='email'
- onChange={handleChange}
- helperText={validationErrors.email && t('sharedRequired')} />
+ onChange={handleEmailChange} />
<TextField
margin='normal'
required
fullWidth
- error={validationErrors.password}
label={t('userPassword')}
name='password'
- value={formFields.password || ''}
+ value={password || ''}
type='password'
autoComplete='current-password'
- onChange={handleChange}
- helperText={validationErrors.password && t('sharedRequired')} />
+ onChange={handlePasswordChange} />
</DialogContent>
<DialogActions>
- <Button color="primary" onClick={handleRegister} disabled={!formFields.name || !formFields.email || !formFields.password}>{t('loginRegister')}</Button>
+ <Button color="primary" onClick={handleRegister} disabled={submitDisabled()}>{t('loginRegister')}</Button>
<Button autoFocus onClick={() => onResult(false)}>{t('sharedCancel')}</Button>
</DialogActions>
</Dialog>