diff --git a/src/App.tsx b/src/App.tsx
index 9d1d19342648952b1588f71cd951c9c315694c65..ca7cc5c6f16bbfbd147a2af13f9ccb88051bbdc6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { HomePage } from 'components/HomePage/HomePage';
import { AuthUser } from 'components/AuthUser/AuthUser';
@@ -9,26 +9,49 @@ import { NotFound } from 'components/NotFound/NotFound';
import { ProfilePage } from 'components/ProfilePage/ProfilePage';
import { Roles } from 'components/api/userRoles';
import { Unauthorized } from 'components/Unauthorized/Unauthorized';
+import axios from 'axios';
-export const App: FC = () => (
- <Router>
- <div data-testid="App">
- <Switch>
- <Route path={NonAuthRoutes.auth} component={AuthUser} />
- <Route exact path={NonAuthRoutes.home} component={LandingPage} />
- <PrivateRoute
- path={AuthRoutes.dashboard}
- Component={HomePage}
- requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
- />
- <PrivateRoute
- path={AuthRoutes.profile}
- Component={ProfilePage}
- requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
- />
- <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
- <Route component={NotFound} />
- </Switch>
- </div>
- </Router>
-);
+const configDjangoCookieName = (): void => {
+ axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
+ axios.defaults.xsrfCookieName = 'csrftoken';
+ axios.defaults.withCredentials = true;
+};
+
+export const App: FC = () => {
+ const [isCookieFetched, setisCookieFetched] = useState<string>('');
+ configDjangoCookieName();
+ useEffect(() => {
+ const fetchCookie = async (): Promise<unknown> => {
+ const response = await axios('api/web/csrf');
+ axios.defaults.headers.common['X-CSRFTOKEN'] = response.data.token;
+ sessionStorage.setItem('X-CSRFTOKEN', response.data.token);
+ sessionStorage.setItem('ROLE', 'admin');
+ setisCookieFetched(response.data.token);
+ return null;
+ };
+ if (!isCookieFetched) fetchCookie();
+ }, []);
+
+ return (
+ <Router>
+ <div data-testid="App">
+ <Switch>
+ <Route path={NonAuthRoutes.auth} component={AuthUser} />
+ <Route exact path={NonAuthRoutes.home} component={LandingPage} />
+ <PrivateRoute
+ path={AuthRoutes.dashboard}
+ Component={HomePage}
+ requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+ />
+ <PrivateRoute
+ path={AuthRoutes.profile}
+ Component={ProfilePage}
+ requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+ />
+ <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
+ <Route component={NotFound} />
+ </Switch>
+ </div>
+ </Router>
+ );
+};
diff --git a/src/components/AuthUser/AuthUser.tsx b/src/components/AuthUser/AuthUser.tsx
index a30678cdfaf877b4c2c69a3ec0c49bf94dbece34..7ce456866dba108167b96450887eeb910db605a1 100644
--- a/src/components/AuthUser/AuthUser.tsx
+++ b/src/components/AuthUser/AuthUser.tsx
@@ -1,30 +1,12 @@
-import React, { FC, useEffect } from 'react';
-import axios from 'axios';
+import React, { FC } from 'react';
import Container from '@material-ui/core/Container';
import { Route, useRouteMatch } from 'react-router-dom';
import { NonAuthRoutes } from 'components/api/routes';
import { SignInForm } from 'components/AuthUser/SignInForm/SignInForm';
import { SignUpForm } from 'components/AuthUser/SignUpForm/SignUpForm';
-const configDjangoCookieName = (): void => {
- axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
- axios.defaults.xsrfCookieName = 'csrftoken';
- axios.defaults.withCredentials = true;
-};
-
export const AuthUser: FC = () => {
const { path } = useRouteMatch();
- configDjangoCookieName();
- useEffect(() => {
- axios
- .get('api/web/csrf')
- .then((response) => {
- axios.defaults.headers.common['X-CSRFTOKEN'] = response.data.token;
- sessionStorage.setItem('X-CSRFTOKEN', response.data.token);
- sessionStorage.setItem('ROLE', 'admin');
- })
- .catch((error) => error);
- }, []);
return (
<Container maxWidth="sm">
<Route path={`${path}${NonAuthRoutes.signIn}`} component={SignInForm} />
diff --git a/src/components/AuthUser/SignUpForm/SignUpForm.tsx b/src/components/AuthUser/SignUpForm/SignUpForm.tsx
index eebc44fda67efba7ece0a008ecf78242cad30f0f..b38fdabc87a838ad7838bf22f93bc0ab395eb6cf 100644
--- a/src/components/AuthUser/SignUpForm/SignUpForm.tsx
+++ b/src/components/AuthUser/SignUpForm/SignUpForm.tsx
@@ -8,42 +8,53 @@ import axios from 'axios';
// TODO: Replace notes with big input field
export const SignUpForm: FC = () => {
type FormData = {
- user: {
- username: string;
- password: string;
- firstName: string;
- lastName: string;
- email: string;
- };
- phoneNumber: number;
- homeAddress: {
- address: string;
- };
- memberCardIssuer: {
- name: string;
- };
- memberCardNumber: number;
- notes: string;
+ username: string;
+ password: string;
+ firstName: string;
+ lastName: string;
+ email: string;
};
- const { control, errors, handleSubmit } = useForm<FormData>();
+ const defaultValues: FormData = {
+ username: '',
+ password: '',
+ firstName: '',
+ lastName: '',
+ email: '',
+ };
+
+ const { control, errors, handleSubmit } = useForm<FormData>({
+ defaultValues,
+ });
const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
- axios.post(
- '/api/web/seniors/',
- {
- user: values.user,
- phone_number: values.phoneNumber,
- home_address: values.homeAddress.address,
- member_card_issuer: values.memberCardIssuer,
- notes: values.notes,
- },
- {
- headers: {
- 'Content-Type': 'application/json',
+ axios
+ .post(
+ '/api/web/seniors/',
+ {
+ user: {
+ username: 'test',
+ password: values.password,
+ firstName: 'a',
+ lastName: 'b',
+ email: values.email,
+ },
+ phone_number: '213432234',
+ home_address: {
+ address: 'test street, 3',
+ },
+ member_card_issuer: {
+ name: 'test issuer',
+ },
+ member_card_number: '33333333333',
},
- },
- );
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ },
+ )
+ .then((res) => console.log(res));
};
const classes = useStyles();
@@ -54,101 +65,6 @@ export const SignUpForm: FC = () => {
onSubmit={handleSubmit(onSubmit)}
data-testid="Form"
>
- <InputField
- name="firstName"
- control={control}
- rules={{
- validate: (value: string) => /^[A-Za-z]$/.test(value),
- required: {
- value: true,
- message: 'firstName is not valid',
- },
- }}
- label="First name"
- error={!!errors.user?.firstName}
- errorMessage="Insert firstName"
- />
-
- <InputField
- name="lastName"
- control={control}
- rules={{
- validate: (value: string) => /^[A-Za-z]$/.test(value),
- required: {
- value: true,
- message: 'lastName is not valid',
- },
- }}
- label="Last name"
- error={!!errors.user?.lastName}
- errorMessage="Insert lastName"
- />
-
- <InputField
- name="phoneNumber"
- control={control}
- rules={{
- required: {
- value: true,
- message: 'phoneNumber is not valid',
- },
- }}
- label="Phone number"
- error={!!errors.phoneNumber}
- errorMessage="Insert phoneNumber"
- />
- <InputField
- name="memberCardIssuer"
- control={control}
- rules={{
- validate: (value: string) => /^[A-Za-z]$/.test(value),
- required: {
- value: true,
- message: 'memberCardIssuer is not valid',
- },
- }}
- label="Member card issuer"
- error={!!errors.memberCardIssuer?.name}
- errorMessage="Insert memberCardIssuer"
- />
-
- <InputField
- name="memberCardNumber"
- control={control}
- rules={{
- required: {
- value: true,
- message: 'memberCardNumber is not valid',
- },
- }}
- label="Card number"
- error={!!errors.memberCardNumber}
- errorMessage="Insert memberCardNumber"
- />
-
- <InputField
- name="address"
- control={control}
- rules={{
- validate: (value: string) => /^[A-Za-z]$/.test(value),
- required: {
- value: true,
- message: 'address is not valid',
- },
- }}
- label="Home address"
- error={!!errors.homeAddress?.address}
- errorMessage="Insert address"
- />
-
- <InputField
- name="notes"
- control={control}
- label="Notes"
- error={!!errors.notes}
- errorMessage="Insert valid password"
- />
-
<InputField
name="email"
control={control}
@@ -161,7 +77,7 @@ export const SignUpForm: FC = () => {
},
}}
label="Email"
- error={!!errors.user?.email}
+ error={!!errors.email}
errorMessage="Insert email"
/>
@@ -177,10 +93,9 @@ export const SignUpForm: FC = () => {
},
}}
label="Password"
- error={!!errors.user?.password}
+ error={!!errors.password}
errorMessage="Insert valid password"
/>
-
<Button
data-testid="Submit"
type="submit"