From 12184a5ef570593ab492c1499f2d7a23e3be2569 Mon Sep 17 00:00:00 2001 From: zirops Date: Tue, 26 Jan 2021 10:57:25 +0100 Subject: user self registration --- modern/src/LoginPage.js | 29 +++++++++++- modern/src/RegisterDialog.js | 109 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 modern/src/RegisterDialog.js diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 2636c807..cbe50fe4 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -7,6 +7,9 @@ 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 Snackbar from '@material-ui/core/Snackbar'; +import { useSelector } from 'react-redux'; import t from './common/localization'; @@ -47,10 +50,19 @@ const LoginPage = () => { const [failed, setFailed] = useState(false); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); + const [registerDialogShown, setRegisterDialogShown] = useState(false); + const [snackbarOpen, setSnackbarOpen] = useState(false); const classes = useStyles(); const history = useHistory(); + const server = useSelector(state => state.session.server); + + let registrationPref = false; + if (server) { + registrationPref = server['registration'] + } + const handleEmailChange = (event) => { setEmail(event.target.value); } @@ -60,7 +72,14 @@ const LoginPage = () => { } const handleRegister = () => { - // TODO: Implement registration + setRegisterDialogShown(true); + } + + const handleRegisterResult = (resultOk) => { + setRegisterDialogShown(false); + if (resultOk) { + setSnackbarOpen(true); + } } const handleLogin = async (event) => { @@ -109,7 +128,7 @@ const LoginPage = () => {
-
+ {registerDialogShown && } + {setSnackbarOpen(false);}} message={t('loginCreated')} + /> ); diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js new file mode 100644 index 00000000..ecd07ac2 --- /dev/null +++ b/modern/src/RegisterDialog.js @@ -0,0 +1,109 @@ +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 Alert from '@material-ui/lab/Alert'; + +const RegisterDialog = ({ open, onResult }) => { + const [formFields, setFormFields] = useState({}); + const [validationErrors, setValidationErrors] = useState({}); + const [errorResponse, setErrorResponse] = useState(null); + + const handleChange = (event) => { + setFormFields({ ...formFields, [event.target.name]: event.target.value }); + setValidationErrors({ ...validationErrors, [event.target.name]: false }); + } + + const handleRegister = async (event) => { + event.preventDefault(); + setErrorResponse(null); + let objErrors = {}; + if (formFields.name.trim() === '') { + objErrors.name = true; + } + if (! + /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(formFields.email)) { + objErrors.email = true; + } + if (formFields.password.trim() === '') { + objErrors.password = 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) + }); + + if (response.ok) { + onResult(true) + } else { + setErrorResponse(t('errorGeneral')); + } + } + + return ( + { onResult(false) }}> + + {t('loginRegister')} + + {errorResponse && {errorResponse}} + + + + + + + + + + + + + + ); +}; + +export default RegisterDialog; -- cgit v1.2.3 From f70882e49d3cd6deeec75be967365535db2f93b3 Mon Sep 17 00:00:00 2001 From: zirops Date: Wed, 27 Jan 2021 15:49:43 +0100 Subject: user self registration code review 1 --- modern/src/LoginPage.js | 27 ++++++++------------------ modern/src/RegisterDialog.js | 45 +++++++++++++++++++++----------------------- 2 files changed, 29 insertions(+), 43 deletions(-) diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index cbe50fe4..14960f82 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -8,7 +8,6 @@ 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 Snackbar from '@material-ui/core/Snackbar'; import { useSelector } from 'react-redux'; import t from './common/localization'; @@ -51,18 +50,12 @@ const LoginPage = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [registerDialogShown, setRegisterDialogShown] = useState(false); - const [snackbarOpen, setSnackbarOpen] = useState(false); const classes = useStyles(); const history = useHistory(); - const server = useSelector(state => state.session.server); - - let registrationPref = false; - if (server) { - registrationPref = server['registration'] - } - + const registrationPref = useSelector(state => state.session.server ? state.session.server['registration'] : false); + const handleEmailChange = (event) => { setEmail(event.target.value); } @@ -75,11 +68,8 @@ const LoginPage = () => { setRegisterDialogShown(true); } - const handleRegisterResult = (resultOk) => { + const handleRegisterResult = () => { setRegisterDialogShown(false); - if (resultOk) { - setSnackbarOpen(true); - } } const handleLogin = async (event) => { @@ -137,12 +127,11 @@ const LoginPage = () => { - {registerDialogShown && } - {setSnackbarOpen(false);}} message={t('loginCreated')} - /> + + {registerDialogShown && + + } + ); diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js index ecd07ac2..5be0a247 100644 --- a/modern/src/RegisterDialog.js +++ b/modern/src/RegisterDialog.js @@ -6,12 +6,12 @@ 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 Alert from '@material-ui/lab/Alert'; +import Snackbar from '@material-ui/core/Snackbar'; -const RegisterDialog = ({ open, onResult }) => { +const RegisterDialog = ({ showDialog, onResult }) => { const [formFields, setFormFields] = useState({}); const [validationErrors, setValidationErrors] = useState({}); - const [errorResponse, setErrorResponse] = useState(null); + const [snackbarOpen, setSnackbarOpen] = useState(false); const handleChange = (event) => { setFormFields({ ...formFields, [event.target.name]: event.target.value }); @@ -19,14 +19,11 @@ const RegisterDialog = ({ open, onResult }) => { } const handleRegister = async (event) => { - event.preventDefault(); - setErrorResponse(null); let objErrors = {}; if (formFields.name.trim() === '') { objErrors.name = true; } - if (! - /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(formFields.email)) { + if (!/(.+)@(.+)\.(.{2,})/.test(formFields.email)) { objErrors.email = true; } if (formFields.password.trim() === '') { @@ -44,21 +41,23 @@ const RegisterDialog = ({ open, onResult }) => { }); if (response.ok) { - onResult(true) - } else { - setErrorResponse(t('errorGeneral')); + showDialog = false; + setSnackbarOpen(true); } } - return ( - { onResult(true) }} message={t('loginCreated')} + /> + } else if (showDialog) { + return { onResult(false) }}> {t('loginRegister')} - - {errorResponse && {errorResponse}} - { autoComplete='name' autoFocus onChange={handleChange} - helperText={validationErrors.name && 'Name is required'} /> - + helperText={validationErrors.name && t('sharedRequired')} /> { value={formFields.email || ''} autoComplete='email' onChange={handleChange} - helperText={validationErrors.email && 'Invalid e-mail'} /> - + helperText={validationErrors.email && t('sharedRequired')} /> { type='password' autoComplete='current-password' onChange={handleChange} - helperText={validationErrors.password && 'Password is required'} /> - + helperText={validationErrors.password && t('sharedRequired')} /> - - ); + ; + } else return null; + }; export default RegisterDialog; -- cgit v1.2.3 From 5256eea09b59f3d2793805e960abdae55555a30a Mon Sep 17 00:00:00 2001 From: mikems66 <77976973+mikems66@users.noreply.github.com> Date: Thu, 28 Jan 2021 15:12:05 +0100 Subject: Update modern/src/RegisterDialog.js Co-authored-by: Anton Tananaev --- modern/src/RegisterDialog.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js index 5be0a247..6dda25ec 100644 --- a/modern/src/RegisterDialog.js +++ b/modern/src/RegisterDialog.js @@ -47,11 +47,14 @@ const RegisterDialog = ({ showDialog, onResult }) => { } if (snackbarOpen) { - return { onResult(true) }} message={t('loginCreated')} - /> + return ( + { onResult(true) }} + message={t('loginCreated')} /> + ); } else if (showDialog) { return Date: Thu, 28 Jan 2021 16:35:29 +0100 Subject: fix formatting, remove validation --- modern/src/RegisterDialog.js | 100 +++++++++++++++++++++---------------------- 1 file changed, 48 insertions(+), 52 deletions(-) diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js index 6dda25ec..32694ead 100644 --- a/modern/src/RegisterDialog.js +++ b/modern/src/RegisterDialog.js @@ -20,15 +20,9 @@ const RegisterDialog = ({ showDialog, onResult }) => { const handleRegister = async (event) => { let objErrors = {}; - if (formFields.name.trim() === '') { - objErrors.name = true; - } if (!/(.+)@(.+)\.(.{2,})/.test(formFields.email)) { objErrors.email = true; } - if (formFields.password.trim() === '') { - objErrors.password = true; - } if (Object.keys(objErrors).length !== 0) { setValidationErrors(objErrors); return; @@ -56,52 +50,54 @@ const RegisterDialog = ({ showDialog, onResult }) => { message={t('loginCreated')} /> ); } else if (showDialog) { - return { onResult(false) }}> - - {t('loginRegister')} - - - - - - - - - ; + return ( + { onResult(false) }}> + + {t('loginRegister')} + + + + + + + + + + ) } else return null; }; -- cgit v1.2.3 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} /> + onChange={handleEmailChange} /> + onChange={handlePasswordChange} /> - + -- cgit v1.2.3