Merge pull request #813 from mikems66/registration

User self registration

2 files changed, 120 insertions, 2 deletions

diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index 2636c80..14960f8 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -7,6 +7,8 @@ import FormControl from '@material-ui/core/FormControl';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core';
 import TextField from '@material-ui/core/TextField';
+import RegisterDialog from './RegisterDialog';
+import { useSelector } from 'react-redux';
 
 import t from './common/localization';
 
@@ -47,10 +49,13 @@ const LoginPage = () => {
   const [failed, setFailed] = useState(false);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [registerDialogShown, setRegisterDialogShown] = useState(false);
 
   const classes = useStyles();
   const history = useHistory();
 
+  const registrationPref =  useSelector(state => state.session.server ? state.session.server['registration'] : false);
+ 
   const handleEmailChange = (event) => {
     setEmail(event.target.value);
   }
@@ -60,7 +65,11 @@ const LoginPage = () => {
   }
 
   const handleRegister = () => {
-    // TODO: Implement registration
+    setRegisterDialogShown(true);
+  }
+
+  const handleRegisterResult = () => {
+    setRegisterDialogShown(false);
   }
 
   const handleLogin = async (event) => {
@@ -109,7 +118,7 @@ const LoginPage = () => {
 
           <FormControl fullWidth margin='normal'>
             <div className={classes.buttons}>
-              <Button type='button' variant='contained' disabled onClick={handleRegister}>
+              <Button type='button' variant='contained' onClick={handleRegister} disabled={!registrationPref}>
                 {t('loginRegister')}
               </Button>
               <Button type='submit' variant='contained' color='primary' disabled={!email || !password}>
@@ -118,6 +127,11 @@ const LoginPage = () => {
             </div>
           </FormControl>
         </form>
+
+        {registerDialogShown && 
+          <RegisterDialog showDialog={true} onResult={handleRegisterResult} />
+        }
+      
       </Paper>
     </main>
   );
diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js
new file mode 100644
index 0000000..5317436
--- /dev/null
+++ b/modern/src/RegisterDialog.js
@@ -0,0 +1,104 @@
+import t from './common/localization'
+import React, { useState } from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import TextField from '@material-ui/core/TextField';
+import Snackbar from '@material-ui/core/Snackbar';
+
+const RegisterDialog = ({ showDialog, onResult }) => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [snackbarOpen, setSnackbarOpen] = useState(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) => {
+
+    const response = await fetch('/api/users', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({name, email, password})
+    });
+
+    if (response.ok) {
+      showDialog = false;
+      setSnackbarOpen(true);
+    } 
+  }
+
+  if (snackbarOpen) {
+    return (
+      <Snackbar
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        open={snackbarOpen}
+        autoHideDuration={6000}
+        onClose={() => { onResult(true) }}
+        message={t('loginCreated')} />
+    );
+  } else if (showDialog) {
+    return (
+      <Dialog
+        open={true}
+        onClose={() => { onResult(false) }}>
+        <DialogContent>
+          <DialogContentText>{t('loginRegister')}</DialogContentText>
+          <TextField
+            margin='normal'
+            required
+            fullWidth
+            label={t('sharedName')}
+            name='name'
+            value={name || ''}
+            autoComplete='name'
+            autoFocus
+            onChange={handleNameChange} />
+          <TextField
+            margin='normal'
+            required
+            fullWidth
+            type='email' 
+            label={t('userEmail')}
+            name='email'
+            value={email || ''}
+            autoComplete='email'
+            onChange={handleEmailChange} />
+          <TextField
+            margin='normal'
+            required
+            fullWidth
+            label={t('userPassword')}
+            name='password'
+            value={password || ''}
+            type='password'
+            autoComplete='current-password'
+            onChange={handlePasswordChange} />
+        </DialogContent>
+        <DialogActions>
+          <Button color="primary" onClick={handleRegister} disabled={submitDisabled()}>{t('loginRegister')}</Button>
+          <Button autoFocus onClick={() => onResult(false)}>{t('sharedCancel')}</Button>
+        </DialogActions>
+      </Dialog>
+    )
+  } else return null;
+
+};
+
+export default RegisterDialog;