diff --git a/src/components/AuthUser/SignInForm/InputField.tsx b/src/components/AuthUser/SignInForm/InputField.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a2dc677dcc785b87fc28e94d1cc1a40b6cc4c065
--- /dev/null
+++ b/src/components/AuthUser/SignInForm/InputField.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { TextField } from '@material-ui/core';
+
+type Props = {
+ id: string;
+ label: string;
+ error: boolean;
+ errorMessage: string;
+};
+
+export const InputField: FC<Props> = (props: Props) => {
+ const { id, label, error, errorMessage } = props;
+ return (
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ id={id}
+ label={label}
+ name={id}
+ autoComplete={id}
+ autoFocus
+ error={error}
+ helperText={error && errorMessage}
+ />
+ );
+};
diff --git a/src/components/AuthUser/SignInForm/SignInForm.tsx b/src/components/AuthUser/SignInForm/SignInForm.tsx
index af58f727a7b04d54f7f64daeaeea3708e70ffc30..585c6b8fa3c5dd512672cdd89de3f47ac60cfd8f 100644
--- a/src/components/AuthUser/SignInForm/SignInForm.tsx
+++ b/src/components/AuthUser/SignInForm/SignInForm.tsx
@@ -1,8 +1,10 @@
import React, { FC } from 'react';
-import { useForm, Controller } from 'react-hook-form';
+import { useForm, Controller, appendErrors } from 'react-hook-form';
+import { useIntl } from 'react-intl';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import { TextField, Button } from '@material-ui/core';
import { DevTool } from '@hookform/devtools';
+import { InputField } from './InputField';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -20,6 +22,7 @@ const useStyles = makeStyles((theme: Theme) =>
},
}),
);
+
// TODO: real time form validation
export const SignInForm: FC = () => {
interface FormData {
@@ -39,6 +42,7 @@ export const SignInForm: FC = () => {
const onSubmit: any = (values: FormData) => {
alert(JSON.stringify(values));
};
+ const intl = useIntl();
const classes = useStyles();
return (
<>
@@ -54,21 +58,17 @@ export const SignInForm: FC = () => {
rules={{
validate: (value) =>
/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
- required: { value: true, message: 'You must enter your email' },
+ required: {
+ value: true,
+ message: intl.formatMessage({ id: 'email' }),
+ },
}}
render={() => (
- <TextField
- variant="outlined"
- margin="normal"
- required
- fullWidth
+ <InputField
id="email"
- label="Email Address"
- name="email"
- autoComplete="email"
- autoFocus
+ label={intl.formatMessage({ id: 'email' })}
error={Boolean(errors.email)}
- helperText={errors.email && 'Incorrect entry.'}
+ errorMessage={intl.formatMessage({ id: 'error' })}
/>
)}
/>
@@ -83,19 +83,11 @@ export const SignInForm: FC = () => {
required: { value: true, message: 'You must enter your name' },
}}
render={() => (
- <TextField
- variant="outlined"
- margin="normal"
- required
- fullWidth
- name="password"
- label="Password"
- type="password"
+ <InputField
id="password"
- autoComplete="password"
- autoFocus
+ label="Password"
error={Boolean(errors.password)}
- helperText={errors.password && 'Incorrect entry.'}
+ errorMessage="Incorrect entry."
/>
)}
/>
diff --git a/src/components/HomePage/HomePage.tsx b/src/components/HomePage/HomePage.tsx
index 7eda5937b940681e8fd5cb6039c5303dc6be6f63..99b3448459007f960afbfdacbfefac747d0e5d9a 100644
--- a/src/components/HomePage/HomePage.tsx
+++ b/src/components/HomePage/HomePage.tsx
@@ -1,3 +1,104 @@
import React, { FC } from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
-export const HomePage: FC = () => <div>Welcome</div>;
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ appBar: {
+ zIndex: theme.zIndex.drawer + 1,
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ },
+ drawerContainer: {
+ overflow: 'auto',
+ },
+ content: {
+ flexGrow: 1,
+ padding: theme.spacing(3),
+ },
+ }),
+);
+
+export const HomePage: FC = () => {
+ const classes = useStyles();
+
+ return (
+ <div className={classes.root}>
+ <CssBaseline />
+ <AppBar position="fixed" className={classes.appBar}>
+ <Toolbar>
+ <Typography variant="h6" noWrap>
+ Moveaid
+ </Typography>
+ </Toolbar>
+ </AppBar>
+ <Drawer
+ className={classes.drawer}
+ variant="permanent"
+ classes={{
+ paper: classes.drawerPaper,
+ }}
+ >
+ <Toolbar />
+ <div className={classes.drawerContainer}>
+ <List>
+ {['Reservation'].map((text) => (
+ <ListItem button key={text}>
+ <ListItemText primary={text} />
+ </ListItem>
+ ))}
+ </List>
+ </div>
+ </Drawer>
+ <main className={classes.content}>
+ <Toolbar />
+ <Typography paragraph>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus
+ dolor purus non enim praesent elementum facilisis leo vel. Risus at
+ ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum
+ quisque non tellus. Convallis convallis tellus id interdum velit
+ laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed
+ adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies
+ integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate
+ eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo
+ quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat
+ vivamus at augue. At augue eget arcu dictum varius duis at consectetur
+ lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien
+ faucibus et molestie ac.
+ </Typography>
+ <Typography paragraph>
+ Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
+ ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
+ elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse
+ sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat
+ mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis
+ risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas
+ purus viverra accumsan in. In hendrerit gravida rutrum quisque non
+ tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant
+ morbi tristique senectus et. Adipiscing elit duis tristique
+ sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
+ eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
+ posuere sollicitudin aliquam ultrices sagittis orci a.
+ </Typography>
+ </main>
+ </div>
+ );
+};