From 599104d3e8bf3545d00fa63ad5061e0bb9ad47b7 Mon Sep 17 00:00:00 2001
From: mikems66 <>
Date: Mon, 1 Feb 2021 15:54:38 +0100
Subject: Form fields into separate vars, disable submit if e-mail is invalid

---
 modern/src/RegisterDialog.js | 55 ++++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 28 deletions(-)

diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js
index 32694ead..53174360 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>
-- 
cgit v1.2.3