diff --git a/src/App.tsx b/src/App.tsx
index eff19068d86ecac464c94e0705e65735672d1df3..458470b04401c6a1593bef169628b611cd9916d9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,7 @@ export const App: FC = () => (
<Switch>
<Route path="/auth" component={AuthUser} />
<Route exact path="/" component={LandingPage} />
+ <Route exact path="/home" component={HomePage} />
</Switch>
</div>
</Router>
diff --git a/src/components/AuthUser/AuthUser.tsx b/src/components/AuthUser/AuthUser.tsx
index 52b4a2b1c270be80ca3598d841c40ec4c6f1e0a5..51621049d7d74beaf16d4e6a60f0933d454b2bdd 100644
--- a/src/components/AuthUser/AuthUser.tsx
+++ b/src/components/AuthUser/AuthUser.tsx
@@ -7,10 +7,11 @@ export const AuthUser: FC = () => {
useEffect(() => {
axios
.get('api/web/csrf')
- .then((response) =>
- sessionStorage.setItem('CSRF_TOKEN', response.data.token),
- )
- .catch((error) => console.log(error));
+ .then((response) => {
+ // Check this https://stackoverflow.com/questions/39254562/csrf-with-django-reactredux-using-axios
+ axios.defaults.headers.common['X-CSRFTOKEN'] = response.data.token;
+ })
+ .catch((error) => error);
}, []);
return (
<Container maxWidth="sm">
diff --git a/src/components/AuthUser/SignInForm/InputField.tsx b/src/components/AuthUser/SignInForm/InputField.tsx
index fc11e0adc031f0d0c1a686a7b7b3052f7ba0dda9..a0093c9c7bacc5ab2a82c2a924b83e12100332f8 100644
--- a/src/components/AuthUser/SignInForm/InputField.tsx
+++ b/src/components/AuthUser/SignInForm/InputField.tsx
@@ -1,32 +1,46 @@
import React, { FC } from 'react';
import { TextField } from '@material-ui/core';
+import { Control, Controller, FieldValues } from 'react-hook-form';
type Props = {
- id: string;
+ /**
+ * Name of the elemement. ex. email, password
+ */
+ name: string;
label: string;
error: boolean;
errorMessage: string;
- value: string;
- onChange: any;
+ /**
+ * react-hook-form control
+ */
+ control: Control<FieldValues> | undefined;
+ rules: Partial<unknown>;
};
export const InputField: FC<Props> = (props: Props) => {
- const { id, label, error, errorMessage, onChange, value } = props;
+ const { name, label, error, errorMessage, control, rules } = props;
return (
- <TextField
- variant="outlined"
- margin="normal"
- required
- fullWidth
- id={id}
- label={label}
- name={id}
- onChange={onChange}
- value={value}
- autoComplete={id}
- autoFocus
- error={error}
- helperText={error && errorMessage}
+ <Controller
+ name={name}
+ control={control}
+ rules={rules}
+ render={({ onChange, value }) => (
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ id={name}
+ label={label}
+ name={name}
+ onChange={onChange}
+ value={value}
+ autoComplete={name}
+ autoFocus
+ error={error}
+ helperText={error && errorMessage}
+ />
+ )}
/>
);
};
diff --git a/src/components/AuthUser/SignInForm/SignInForm.tsx b/src/components/AuthUser/SignInForm/SignInForm.tsx
index 5aae7b9363442f5acd2a4cf1c6460961c94ee207..bdb8ad4c499af5173b5d9de5aedb4e55817093e8 100644
--- a/src/components/AuthUser/SignInForm/SignInForm.tsx
+++ b/src/components/AuthUser/SignInForm/SignInForm.tsx
@@ -1,9 +1,9 @@
import React, { FC } from 'react';
import axios from 'axios';
-import { useForm, Controller, appendErrors } from 'react-hook-form';
+import { SubmitHandler, useForm } 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 { Button } from '@material-ui/core';
import { DevTool } from '@hookform/devtools';
import { InputField } from './InputField';
@@ -36,21 +36,20 @@ export const SignInForm: FC = () => {
password: '',
};
- const { control, register, errors, handleSubmit } = useForm<FormData>({
+ const { control, errors, handleSubmit } = useForm<FormData>({
defaultValues,
});
- const onSubmit: any = (values: FormData) => {
+ const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
axios
.post('/api/web/login', {
values,
- token: sessionStorage.getItem('CSRF_TOKEN'),
})
.then((response) => {
- console.log(response);
+ // Handle server reponse
})
.catch((error) => {
- console.log(error);
+ // Handle error
});
};
const intl = useIntl();
@@ -62,48 +61,36 @@ export const SignInForm: FC = () => {
onSubmit={handleSubmit(onSubmit)}
data-testid="Form"
>
- <Controller
+ <InputField
name="email"
control={control}
- defaultValues
rules={{
- validate: (value) =>
+ validate: (value: string) =>
/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
required: {
value: true,
message: intl.formatMessage({ id: 'email' }),
},
}}
- render={({ onChange, value }) => (
- <InputField
- id="email"
- value={value}
- onChange={onChange}
- label={intl.formatMessage({ id: 'email' })}
- error={!!errors.email}
- errorMessage={intl.formatMessage({ id: 'error' })}
- />
- )}
+ label={intl.formatMessage({ id: 'email' })}
+ error={!!errors.email}
+ errorMessage={intl.formatMessage({ id: 'email-error' })}
/>
- <Controller
+ <InputField
name="password"
control={control}
rules={{
minLength: 8,
maxLength: 60,
- required: { value: true, message: 'You must enter your name' },
+ required: {
+ value: true,
+ message: intl.formatMessage({ id: 'password' }),
+ },
}}
- render={({ onChange, value }) => (
- <InputField
- id="password"
- value={value}
- onChange={onChange}
- label="Password"
- error={!!errors.password}
- errorMessage="Incorrect entry."
- />
- )}
+ label={intl.formatMessage({ id: 'password' })}
+ error={!!errors.password}
+ errorMessage={intl.formatMessage({ id: 'password-error' })}
/>
<Button
diff --git a/src/components/LandingPage/LandingPage.tsx b/src/components/LandingPage/LandingPage.tsx
index 51f422645bf8db6a8990794dfdbc6cfb6fc97b05..5567be0bdcc3aa06af023345824b31163ce6288a 100644
--- a/src/components/LandingPage/LandingPage.tsx
+++ b/src/components/LandingPage/LandingPage.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
export const LandingPage: FC = () => (
<>
diff --git a/src/components/LandingPage/TeamPage.tsx b/src/components/LandingPage/TeamPage.tsx
index 58d850befb0555629c9a8391f6176e57ec393e03..b0a945e8347fdc1b4c1027ea1cf3a03df91eb95d 100644
--- a/src/components/LandingPage/TeamPage.tsx
+++ b/src/components/LandingPage/TeamPage.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
export const TeamPage: FC = () => (
<>
diff --git a/src/intl/en.json b/src/intl/en.json
index e59230501b4682251da36efad4cb653c82df7070..347550bbe2d981d469c98efa089b3f5a97b1aaed 100644
--- a/src/intl/en.json
+++ b/src/intl/en.json
@@ -1,5 +1,6 @@
{
"email": "Email address",
"password": "Password",
- "error": "Insert valid email address"
+ "email-error": "Insert valid email address",
+ "password-error": "Insert valid password"
}
\ No newline at end of file