aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzirops <zirops@gmail.com>2021-01-27 15:49:43 +0100
committerzirops <zirops@gmail.com>2021-01-27 15:49:43 +0100
commitf70882e49d3cd6deeec75be967365535db2f93b3 (patch)
tree02b6f3e2f5b8b15b61380a90f0df1eb431dc72f9
parent12184a5ef570593ab492c1499f2d7a23e3be2569 (diff)
downloadtrackermap-web-f70882e49d3cd6deeec75be967365535db2f93b3.tar.gz
trackermap-web-f70882e49d3cd6deeec75be967365535db2f93b3.tar.bz2
trackermap-web-f70882e49d3cd6deeec75be967365535db2f93b3.zip
user self registration code review 1
-rw-r--r--modern/src/LoginPage.js27
-rw-r--r--modern/src/RegisterDialog.js45
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 = () => {
</div>
</FormControl>
</form>
- {registerDialogShown && <RegisterDialog open={registerDialogShown} onResult={handleRegisterResult} />}
- <Snackbar
- anchorOrigin={{ vertical: 'bottom', horizontal: 'center', }}
- open={snackbarOpen} autoHideDuration={6000}
- onClose={()=>{setSnackbarOpen(false);}} message={t('loginCreated')}
- />
+
+ {registerDialogShown &&
+ <RegisterDialog showDialog={true} onResult={handleRegisterResult} />
+ }
+
</Paper>
</main>
);
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 (
- <Dialog
- open={open}
+ 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>
-
- {errorResponse && <Alert severity="error">{errorResponse}</Alert>}
-
<TextField
margin='normal'
required
@@ -70,8 +69,7 @@ const RegisterDialog = ({ open, onResult }) => {
autoComplete='name'
autoFocus
onChange={handleChange}
- helperText={validationErrors.name && 'Name is required'} />
-
+ helperText={validationErrors.name && t('sharedRequired')} />
<TextField
margin='normal'
required
@@ -82,8 +80,7 @@ const RegisterDialog = ({ open, onResult }) => {
value={formFields.email || ''}
autoComplete='email'
onChange={handleChange}
- helperText={validationErrors.email && 'Invalid e-mail'} />
-
+ helperText={validationErrors.email && t('sharedRequired')} />
<TextField
margin='normal'
required
@@ -95,15 +92,15 @@ const RegisterDialog = ({ open, onResult }) => {
type='password'
autoComplete='current-password'
onChange={handleChange}
- helperText={validationErrors.password && 'Password is required'} />
-
+ helperText={validationErrors.password && t('sharedRequired')} />
</DialogContent>
<DialogActions>
<Button color="primary" onClick={handleRegister} disabled={!formFields.name || !formFields.email || !formFields.password}>{t('loginRegister')}</Button>
<Button autoFocus onClick={() => onResult(false)}>{t('sharedCancel')}</Button>
</DialogActions>
- </Dialog>
- );
+ </Dialog>;
+ } else return null;
+
};
export default RegisterDialog;