From 73623e1eccde7160fa83b79ad96ae744fa357a32 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Mon, 3 May 2021 17:45:13 +0530 Subject: Initial Login Screen Draft --- modern/public/logo.svg | 4 +- modern/public/logo_main.svg | 33 +++++++++++ modern/src/App.js | 7 ++- modern/src/LoginPage.js | 130 +++++++++++++++++++++++++++----------------- modern/src/Theme.js | 50 +++++++++++++++++ 5 files changed, 169 insertions(+), 55 deletions(-) create mode 100644 modern/public/logo_main.svg create mode 100644 modern/src/Theme.js (limited to 'modern') diff --git a/modern/public/logo.svg b/modern/public/logo.svg index 008b46d4..6fbe7b0d 100644 --- a/modern/public/logo.svg +++ b/modern/public/logo.svg @@ -12,8 +12,8 @@ - - + + diff --git a/modern/public/logo_main.svg b/modern/public/logo_main.svg new file mode 100644 index 00000000..008b46d4 --- /dev/null +++ b/modern/public/logo_main.svg @@ -0,0 +1,33 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modern/src/App.js b/modern/src/App.js index 5fd10deb..7ff090ac 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,4 +1,5 @@ import React from 'react'; +import { ThemeProvider } from '@material-ui/core/styles'; import { Switch, Route } from 'react-router-dom' import CssBaseline from '@material-ui/core/CssBaseline'; import MainPage from './MainPage'; @@ -31,11 +32,13 @@ import MaintenancePage from './settings/MaintenancePage'; import StatisticsPage from './admin/StatisticsPage'; import CachingController from './CachingController'; +import theme from './Theme'; + const App = () => { const initialized = useSelector(state => !!state.session.server && !!state.session.user); return ( - <> + @@ -72,7 +75,7 @@ const App = () => { )} - + ); } diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index d3be3978..068b1565 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -2,11 +2,17 @@ import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { sessionActions } from './store'; -import Button from '@material-ui/core/Button'; -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 { Grid, + useMediaQuery, + makeStyles, + InputLabel, + Select, + MenuItem, + FormControl, + Button, + TextField, + Paper } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; import RegisterDialog from './RegisterDialog'; import { useSelector } from 'react-redux'; @@ -14,48 +20,53 @@ import t from './common/localization'; const useStyles = makeStyles(theme => ({ root: { - width: 'auto', - marginLeft: theme.spacing(3), - marginRight: theme.spacing(3), - [theme.breakpoints.up(400 + theme.spacing(3 * 2))]: { - width: 400, - marginLeft: 'auto', - marginRight: 'auto', + display: 'flex', + height: '100vh', + }, + sidebar: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + background: theme.palette.common.purple, + width: '28%', + [theme.breakpoints.down('xs')]: { + width: '0px', }, }, paper: { - marginTop: theme.spacing(8), - display: 'flex', + display:'flex', flexDirection: 'column', + justifyContent: 'center', alignItems: 'center', - padding: theme.spacing(3), - }, - logo: { - marginTop: theme.spacing(2) + width: '100%', + padding: theme.spacing(8, 4), + boxShadow: '-2px 0px 16px rgba(0, 0, 0, 0.25)' }, - buttons: { + form: { marginTop: theme.spacing(1), - display: 'flex', - justifyContent: 'space-evenly', - '& > *': { - flexBasis: '40%', - }, }, + submit: { + margin: theme.spacing(3, 0, 2), + }, + register: { + marginTop: theme.spacing(2), + } })); const LoginPage = () => { + const classes = useStyles(); + const theme = useTheme(); + const dispatch = useDispatch(); + const history = useHistory(); 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 registrationEnabled = useSelector(state => state.session.server ? state.session.server['registration'] : false); - + const matches = useMediaQuery(theme.breakpoints.down('md')); + const handleEmailChange = (event) => { setEmail(event.target.value); } @@ -87,10 +98,12 @@ const LoginPage = () => { return (
+
+ {!matches && Traccar} +
- Traccar -
- + {matches && Traccar} + { autoComplete='email' autoFocus onChange={handleEmailChange} - helperText={failed && 'Invalid username or password'} /> - + helperText={failed && 'Invalid username or password'} + variant='filled' /> { value={password} type='password' autoComplete='current-password' - onChange={handlePasswordChange} /> - - -
- + + + - -
- + + + + {t('loginLanguage')} + + + + + + + + + - - {registerDialogShown && - - } -
- ); + ) } - export default LoginPage; diff --git a/modern/src/Theme.js b/modern/src/Theme.js new file mode 100644 index 00000000..4d534a43 --- /dev/null +++ b/modern/src/Theme.js @@ -0,0 +1,50 @@ +import { createMuiTheme } from '@material-ui/core/styles'; + +const traccarPurple = '#333366'; +const traccarGreen = '#4CAF50'; +const traccarWhite = '#FFF'; + +export default createMuiTheme({ + palette: { + common: { + purple: traccarPurple, + green: traccarGreen + }, + primary: { + main: traccarPurple + }, + secondary: { + main: traccarGreen, + contrastText: traccarWhite + } + }, + overrides: { + MuiFormControl: { + root: { + height: '42px', + } + }, + MuiFilledInput: { + root: { + height: '42px', + borderRadius: '4px' + }, + underline: { + "&:before": { + borderBottom: 'none', + }, + "&:after": { + borderBottom: 'none', + }, + "&:hover:before": { + borderBottom: 'none', + }, + } + }, + MuiButton: { + root: { + height: '42px', + } + } + } +}); -- cgit v1.2.3 From f7ada6916541047f8ddf6eb2d1a45ddc3b9dead0 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Thu, 6 May 2021 14:47:56 +0530 Subject: More code improvement --- modern/src/App.js | 2 +- modern/src/LoginPage.js | 143 ++++++++++++++++++++--------------------- modern/src/Logo.js | 31 +++++++++ modern/src/Theme.js | 50 -------------- modern/src/theme/dimensions.js | 7 ++ modern/src/theme/index.js | 12 ++++ modern/src/theme/overrides.js | 48 ++++++++++++++ modern/src/theme/palette.js | 19 ++++++ 8 files changed, 188 insertions(+), 124 deletions(-) create mode 100644 modern/src/Logo.js delete mode 100644 modern/src/Theme.js create mode 100644 modern/src/theme/dimensions.js create mode 100644 modern/src/theme/index.js create mode 100644 modern/src/theme/overrides.js create mode 100644 modern/src/theme/palette.js (limited to 'modern') diff --git a/modern/src/App.js b/modern/src/App.js index 7ff090ac..7db5f128 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -32,7 +32,7 @@ import MaintenancePage from './settings/MaintenancePage'; import StatisticsPage from './admin/StatisticsPage'; import CachingController from './CachingController'; -import theme from './Theme'; +import theme from './theme'; const App = () => { const initialized = useSelector(state => !!state.session.server && !!state.session.user); diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 068b1565..18638d21 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -2,21 +2,13 @@ import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { sessionActions } from './store'; -import { Grid, - useMediaQuery, - makeStyles, - InputLabel, - Select, - MenuItem, - FormControl, - Button, - TextField, - Paper } from '@material-ui/core'; +import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Paper } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; import RegisterDialog from './RegisterDialog'; import { useSelector } from 'react-redux'; import t from './common/localization'; +import Logo from './Logo'; const useStyles = makeStyles(theme => ({ root: { @@ -28,7 +20,11 @@ const useStyles = makeStyles(theme => ({ justifyContent: 'center', alignItems: 'center', background: theme.palette.common.purple, - width: '28%', + paddingBottom: theme.spacing(5), + width: `${theme.dimensions.sidebarWidth}%`, + [theme.breakpoints.down('md')]: { + width: `${theme.dimensions.minSidebarWidth}px`, + }, [theme.breakpoints.down('xs')]: { width: '0px', }, @@ -38,19 +34,13 @@ const useStyles = makeStyles(theme => ({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', - width: '100%', - padding: theme.spacing(8, 4), + flex: 1, + //padding: theme.spacing(0, 25, 0, 0), boxShadow: '-2px 0px 16px rgba(0, 0, 0, 0.25)' }, form: { - marginTop: theme.spacing(1), - }, - submit: { - margin: theme.spacing(3, 0, 2), + maxWidth: theme.dimensions.maxFormWidth, }, - register: { - marginTop: theme.spacing(2), - } })); const LoginPage = () => { @@ -99,66 +89,73 @@ const LoginPage = () => { return (
- {!matches && Traccar} + {!matches && }
- {matches && Traccar}
- - - - - - + + + {matches && } - - - {t('loginLanguage')} - - + + + + + - - - + + + + + + + + + {t('loginLanguage')} + + + + + + + +
diff --git a/modern/src/Logo.js b/modern/src/Logo.js new file mode 100644 index 00000000..bea14d8c --- /dev/null +++ b/modern/src/Logo.js @@ -0,0 +1,31 @@ +import React from 'react'; + +const Logo = ({ fill }) => { + + return ( + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default Logo; diff --git a/modern/src/Theme.js b/modern/src/Theme.js deleted file mode 100644 index 4d534a43..00000000 --- a/modern/src/Theme.js +++ /dev/null @@ -1,50 +0,0 @@ -import { createMuiTheme } from '@material-ui/core/styles'; - -const traccarPurple = '#333366'; -const traccarGreen = '#4CAF50'; -const traccarWhite = '#FFF'; - -export default createMuiTheme({ - palette: { - common: { - purple: traccarPurple, - green: traccarGreen - }, - primary: { - main: traccarPurple - }, - secondary: { - main: traccarGreen, - contrastText: traccarWhite - } - }, - overrides: { - MuiFormControl: { - root: { - height: '42px', - } - }, - MuiFilledInput: { - root: { - height: '42px', - borderRadius: '4px' - }, - underline: { - "&:before": { - borderBottom: 'none', - }, - "&:after": { - borderBottom: 'none', - }, - "&:hover:before": { - borderBottom: 'none', - }, - } - }, - MuiButton: { - root: { - height: '42px', - } - } - } -}); diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js new file mode 100644 index 00000000..bc20cb91 --- /dev/null +++ b/modern/src/theme/dimensions.js @@ -0,0 +1,7 @@ +export default { + inputHeight: 42, + borderRadius: 4, + maxFormWidth: 335, + sidebarWidth: 28, + minSidebarWidth: 52 +}; diff --git a/modern/src/theme/index.js b/modern/src/theme/index.js new file mode 100644 index 00000000..5a3b2a9c --- /dev/null +++ b/modern/src/theme/index.js @@ -0,0 +1,12 @@ +import { createMuiTheme } from '@material-ui/core/styles'; +import palette from './palette'; +import overrides from './overrides'; +import dimensions from './dimensions'; + +const theme = createMuiTheme({ + palette, + overrides, + dimensions +}); + +export default theme; diff --git a/modern/src/theme/overrides.js b/modern/src/theme/overrides.js new file mode 100644 index 00000000..021770b7 --- /dev/null +++ b/modern/src/theme/overrides.js @@ -0,0 +1,48 @@ +import dimensions from './dimensions'; + +export default { + MuiFormControl: { + root: { + height: dimensions.inputHeight, + } + }, + MuiInputLabel: { + filled: { + transform: 'translate(12px, 14px) scale(1)', + '&$shrink' :{ + transform: 'translate(12px, -12px) scale(0.75)' + } + }, + }, + MuiFilledInput: { + root: { + height: dimensions.inputHeight, + borderRadius: dimensions.borderRadius, + }, + input: { + height: dimensions.inputHeight, + borderRadius: dimensions.borderRadius, + paddingTop: '10px', + boxSizing: 'border-box', + '&:-webkit-autofill': { + WebkitBoxShadow: '0 0 0 100px #eeeeee inset', + }, + }, + underline: { + "&:before": { + borderBottom: 'none', + }, + "&:after": { + borderBottom: 'none', + }, + "&:hover:before": { + borderBottom: 'none', + }, + } + }, + MuiButton: { + root: { + height: dimensions.inputHeight, + } + } +}; diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js new file mode 100644 index 00000000..24aefce1 --- /dev/null +++ b/modern/src/theme/palette.js @@ -0,0 +1,19 @@ +import { deepPurple, green } from '@material-ui/core/colors'; + +const traccarPurple = deepPurple[500]; +const traccarGreen = green[500]; +const traccarWhite = '#FFF'; + +export default { + common: { + purple: traccarPurple, + green: traccarGreen + }, + primary: { + main: traccarPurple + }, + secondary: { + main: traccarGreen, + contrastText: traccarWhite + } +}; -- cgit v1.2.3 From 8b7e1491fa1003172e1d653ce1fd774ebee8451e Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Fri, 7 May 2021 13:22:04 +0530 Subject: More code improvement --- modern/src/LoginPage.js | 19 +++++++++++++------ modern/src/theme/dimensions.js | 9 ++++----- modern/src/theme/overrides.js | 2 ++ modern/src/theme/palette.js | 4 ++-- 4 files changed, 21 insertions(+), 13 deletions(-) (limited to 'modern') diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 18638d21..f029cbc3 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -21,9 +21,9 @@ const useStyles = makeStyles(theme => ({ alignItems: 'center', background: theme.palette.common.purple, paddingBottom: theme.spacing(5), - width: `${theme.dimensions.sidebarWidth}%`, + width: theme.dimensions.sidebarWidth, [theme.breakpoints.down('md')]: { - width: `${theme.dimensions.minSidebarWidth}px`, + width: theme.dimensions.tabletSidebarWidth, }, [theme.breakpoints.down('xs')]: { width: '0px', @@ -35,11 +35,18 @@ const useStyles = makeStyles(theme => ({ justifyContent: 'center', alignItems: 'center', flex: 1, - //padding: theme.spacing(0, 25, 0, 0), - boxShadow: '-2px 0px 16px rgba(0, 0, 0, 0.25)' + boxShadow: '-2px 0px 16px rgba(0, 0, 0, 0.25)', + [theme.breakpoints.up('lg')]: { + padding: theme.spacing(0, 25, 0, 0) + }, }, form: { - maxWidth: theme.dimensions.maxFormWidth, + maxWidth: theme.spacing(52), + padding: theme.spacing(5), + width: "100%", + }, + logo: { + textAlign: 'center', }, })); @@ -94,7 +101,7 @@ const LoginPage = () => {
- + {matches && } diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js index bc20cb91..e36fc23b 100644 --- a/modern/src/theme/dimensions.js +++ b/modern/src/theme/dimensions.js @@ -1,7 +1,6 @@ export default { - inputHeight: 42, - borderRadius: 4, - maxFormWidth: 335, - sidebarWidth: 28, - minSidebarWidth: 52 + inputHeight: '42px', + borderRadius: '4px', + sidebarWidth: '28%', + tabletSidebarWidth: '52px' }; diff --git a/modern/src/theme/overrides.js b/modern/src/theme/overrides.js index 021770b7..28ac7467 100644 --- a/modern/src/theme/overrides.js +++ b/modern/src/theme/overrides.js @@ -18,6 +18,7 @@ export default { root: { height: dimensions.inputHeight, borderRadius: dimensions.borderRadius, + background: 'rgba(0, 0, 0, 0.035)', }, input: { height: dimensions.inputHeight, @@ -43,6 +44,7 @@ export default { MuiButton: { root: { height: dimensions.inputHeight, + textTransform: 'none' } } }; diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js index 24aefce1..5a54b77f 100644 --- a/modern/src/theme/palette.js +++ b/modern/src/theme/palette.js @@ -1,7 +1,7 @@ import { deepPurple, green } from '@material-ui/core/colors'; -const traccarPurple = deepPurple[500]; -const traccarGreen = green[500]; +const traccarPurple = '#333366'; +const traccarGreen = '#4CAF50'; const traccarWhite = '#FFF'; export default { -- cgit v1.2.3 From 47f8bd006edf77b1325ecb36e594eed2fa0dd26e Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Fri, 7 May 2021 16:22:54 +0530 Subject: Replacing button with link for Reset Password --- modern/src/LoginPage.js | 8 +++----- modern/src/theme/overrides.js | 1 - 2 files changed, 3 insertions(+), 6 deletions(-) (limited to 'modern') diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index f029cbc3..30275e51 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { sessionActions } from './store'; -import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Paper } from '@material-ui/core'; +import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Paper, Link } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; import RegisterDialog from './RegisterDialog'; import { useSelector } from 'react-redux'; @@ -156,11 +156,9 @@ const LoginPage = () => { - + - + {t('loginReset')} diff --git a/modern/src/theme/overrides.js b/modern/src/theme/overrides.js index 28ac7467..c8d64a9d 100644 --- a/modern/src/theme/overrides.js +++ b/modern/src/theme/overrides.js @@ -44,7 +44,6 @@ export default { MuiButton: { root: { height: dimensions.inputHeight, - textTransform: 'none' } } }; -- cgit v1.2.3 From ca9d842c875c8867aca8ec7c5f533bde1be3f975 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Sat, 8 May 2021 18:20:48 +0530 Subject: Added Registration form --- modern/public/logo.svg | 4 +- modern/src/LoginPage.js | 118 ++------------------------- modern/src/components/LoginForm.js | 125 +++++++++++++++++++++++++++++ modern/src/components/RegisterForm.js | 122 ++++++++++++++++++++++++++++ modern/src/components/ResetPasswordForm.js | 12 +++ modern/src/theme/palette.js | 2 - 6 files changed, 267 insertions(+), 116 deletions(-) create mode 100644 modern/src/components/LoginForm.js create mode 100644 modern/src/components/RegisterForm.js create mode 100644 modern/src/components/ResetPasswordForm.js (limited to 'modern') diff --git a/modern/public/logo.svg b/modern/public/logo.svg index 6fbe7b0d..008b46d4 100644 --- a/modern/public/logo.svg +++ b/modern/public/logo.svg @@ -12,8 +12,8 @@ - - + + diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 30275e51..3d4b17f4 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -1,14 +1,8 @@ import React, { useState } from 'react'; -import { useDispatch } from 'react-redux'; -import { useHistory } from 'react-router-dom'; -import { sessionActions } from './store'; -import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Paper, Link } from '@material-ui/core'; +import { useMediaQuery, makeStyles, Paper } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; -import RegisterDialog from './RegisterDialog'; -import { useSelector } from 'react-redux'; -import t from './common/localization'; -import Logo from './Logo'; +import LoginForm from './components/LoginForm'; const useStyles = makeStyles(theme => ({ root: { @@ -45,123 +39,23 @@ const useStyles = makeStyles(theme => ({ padding: theme.spacing(5), width: "100%", }, - logo: { - textAlign: 'center', - }, })); const LoginPage = () => { const classes = useStyles(); const theme = useTheme(); - const dispatch = useDispatch(); - const history = useHistory(); - - const [failed, setFailed] = useState(false); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [registerDialogShown, setRegisterDialogShown] = useState(false); - const registrationEnabled = useSelector(state => state.session.server ? state.session.server['registration'] : false); + const [CurrentForm, setCurrentForm] = useState(() => LoginForm); const matches = useMediaQuery(theme.breakpoints.down('md')); - const handleEmailChange = (event) => { - setEmail(event.target.value); - } - - const handlePasswordChange = (event) => { - setPassword(event.target.value); - } - - const handleRegister = () => { - setRegisterDialogShown(true); - } - - const handleRegisterResult = () => { - setRegisterDialogShown(false); - } - - const handleLogin = async (event) => { - event.preventDefault(); - const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) }); - if (response.ok) { - const user = await response.json(); - dispatch(sessionActions.updateUser(user)); - history.push('/'); - } else { - setFailed(true); - setPassword(''); - } - } - return (
- {!matches && } + {!matches && Traccar }
- - - - {matches && } - - - - - - - - - - - - - - - - - {t('loginLanguage')} - - - - - - - {t('loginReset')} - - - + +
diff --git a/modern/src/components/LoginForm.js b/modern/src/components/LoginForm.js new file mode 100644 index 00000000..d52a51dd --- /dev/null +++ b/modern/src/components/LoginForm.js @@ -0,0 +1,125 @@ +import React, { useState } from 'react'; +import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; +import { useDispatch, useSelector } from 'react-redux'; +import { useHistory } from 'react-router-dom'; +import { sessionActions } from './../store'; +import t from './../common/localization'; +import RegisterForm from './RegisterForm'; +import ResetPasswordForm from './ResetPasswordForm'; + +const useStyles = makeStyles(theme => ({ + logoContainer: { + textAlign: 'center', + }, + resetPassword: { + cursor: 'pointer', + } +})); + +const forms = { + register: () => RegisterForm, + resetPassword: () => ResetPasswordForm, +}; + +const LoginForm = ({ setCurrentForm }) => { + + const classes = useStyles(); + const dispatch = useDispatch(); + const history = useHistory(); + const theme = useTheme(); + const matches = useMediaQuery(theme.breakpoints.down('md')); + + const [failed, setFailed] = useState(false); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const registrationEnabled = useSelector(state => state.session.server ? state.session.server['registration'] : false); + + const handleEmailChange = (event) => { + setEmail(event.target.value); + } + + const handlePasswordChange = (event) => { + setPassword(event.target.value); + } + + const handleLogin = async (event) => { + event.preventDefault(); + const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) }); + if (response.ok) { + const user = await response.json(); + dispatch(sessionActions.updateUser(user)); + history.push('/'); + } else { + setFailed(true); + setPassword(''); + } + } + + return ( + + + {matches && Traccar} + + + + + + + + + + + + + + + + + {t('loginLanguage')} + + + + + + + setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')} + + + + ) +} + +export default LoginForm; diff --git a/modern/src/components/RegisterForm.js b/modern/src/components/RegisterForm.js new file mode 100644 index 00000000..6d013f70 --- /dev/null +++ b/modern/src/components/RegisterForm.js @@ -0,0 +1,122 @@ +import React, { useState } from 'react'; +import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import LoginForm from './LoginForm'; +import t from './../common/localization'; + +const useStyles = makeStyles(theme => ({ + register: { + fontSize: theme.spacing(3), + fontWeight: 500 + }, + link: { + fontSize: theme.spacing(3), + fontWeight: 500, + marginTop: theme.spacing(0.5), + cursor: 'pointer' + } +})); + +const forms = { + login: () => LoginForm, +}; + +const RegisterForm = ({ setCurrentForm }) => { + + const classes = useStyles(); + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [snackbarOpen, setSnackbarOpen] = useState(false); + + const submitDisabled = () => { + return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; + } + + const handleRegister = async () => { + const response = await fetch('/api/users', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({name, email, password}) + }); + + if (response.ok) { + setSnackbarOpen(true); + } + } + + return ( + <> + setCurrentForm(forms.login)} + autoHideDuration={6000} + message={t('loginCreated')} /> + + + + + setCurrentForm(forms.login)}> + + + + + + + {t('loginRegister')} + + + + + setName(event.target.value)} + variant='filled' /> + + + setEmail(event.target.value)} + variant='filled' /> + + + setPassword(event.target.value)} + variant='filled' /> + + + + + + + ) +} + +export default RegisterForm; diff --git a/modern/src/components/ResetPasswordForm.js b/modern/src/components/ResetPasswordForm.js new file mode 100644 index 00000000..c268f808 --- /dev/null +++ b/modern/src/components/ResetPasswordForm.js @@ -0,0 +1,12 @@ +import React from 'react'; + +const ResetPasswordForm = () => { + + return ( + <> +
Reset Password Comming Soon!!!
+ + ) +} + +export default ResetPasswordForm; diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js index 5a54b77f..5c93cfd2 100644 --- a/modern/src/theme/palette.js +++ b/modern/src/theme/palette.js @@ -1,5 +1,3 @@ -import { deepPurple, green } from '@material-ui/core/colors'; - const traccarPurple = '#333366'; const traccarGreen = '#4CAF50'; const traccarWhite = '#FFF'; -- cgit v1.2.3