@@ -6,7 +6,7 @@ // Pages
 import Home from './pages/Home';
 import Event from './pages/Event';
 import NotFound from './pages/NotFound';
-
+import SignUp from './pages/SignUp';
 const Router = () => {
   useGTM();
   return (
@@ -14,6 +14,7 @@ <BrowserRouter>
       <Switch>
         <Route path="/e/:eventId" component={Event} />
         <Route path="/" exact component={Home} />
+        <Route path="/register" exact component={SignUp} />
         <Route component={NotFound} />
       </Switch>
     </BrowserRouter>

@@ -0,0 +1,103 @@ 
+import React, {useCallback, useState, useMemo} from 'react';
+import {useTranslation} from 'react-i18next';
+import {useAuth} from 'strapi-react-context';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import {Link} from '@material-ui/core';
+import CardContent from '@material-ui/core/CardContent';
+import CardActionArea from '@material-ui/core/CardActions';
+import CardActions from '@material-ui/core/CardActions';
+
+export default () => {
+  const {t} = useTranslation();
+  const {signUp} = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const canSubmit = useMemo(
+    () =>
+      [firstName, lastName, email, password].filter(s => s.length < 4)
+        .length === 0,
+    [firstName, lastName, email, password]
+  );
+
+  const onSubmit = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      await signUp(email, email, password, {firstName, lastName});
+    } catch (error) {
+      console.error(error);
+    }
+    setIsLoading(false);
+  }, [firstName, lastName, email, password]);
+  return (
+    <form onSubmit={onSubmit}>
+      <CardContent>
+        <TextField
+          label={t('signup.firstName')}
+          fullWidth
+          autoFocus
+          margin="dense"
+          value={firstName}
+          required={true}
+          onChange={({target: {value = ''}}) => setFirstName(value)}
+          id="SignUpFirstName"
+          name="firstName"
+        />
+        <TextField
+          label={t('signup.lastName')}
+          fullWidth
+          required={true}
+          margin="dense"
+          value={lastName}
+          onChange={({target: {value = ''}}) => setLastName(value)}
+          id="SignUpLastName"
+          name="lastName"
+        />
+        <TextField
+          label={t('signup.email')}
+          fullWidth
+          required={true}
+          margin="dense"
+          value={email}
+          onChange={({target: {value = ''}}) => setEmail(value)}
+          id="SignUpEmail"
+          name="email"
+          type="email"
+        />
+        <TextField
+          label={t('signup.password')}
+          fullWidth
+          required={true}
+          margin="dense"
+          value={password}
+          onChange={({target: {value = ''}}) => setPassword(value)}
+          id="SignUpEmail"
+          name="password"
+          type="password"
+        />
+      </CardContent>
+      <CardActionArea>
+        <CardActions>
+          <Button
+            color="primary"
+            variant="contained"
+            type="submit"
+            disabled={!canSubmit}
+            aria-disabled={!canSubmit}
+            id="SignUpSubmit"
+            s
+          >
+            {t('signup.submit')}
+          </Button>
+          <Link id="SignUpLogin" href="/login">
+            {t('signup.login')}
+          </Link>
+        </CardActions>
+      </CardActionArea>
+    </form>
+  );
+};

@@ -0,0 +1,11 @@ 
+import React from 'react';
+import renderer from 'react-test-renderer';
+import SignUp from './SignUp';
+describe('SignUp', () => {
+  const signUpNode = renderer.create(<SignUp />);
+  it('match snapshot without props', () => {
+    expect(signUpNode.toJSON()).toMatchSnapshot();
+  });
+
+  it('can not submit the form until email and password is set', () => {});
+});

@@ -0,0 +1,168 @@ 
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SignUp match snapshot without props 1`] = `
+<form>
+  <div
+    className="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
+  >
+    <label
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense"
+      data-shrink={false}
+      htmlFor="SignUpFirstName"
+      id="SignUpFirstName-label"
+    >
+      Prénom
+    </label>
+    <div
+      className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
+      onClick={[Function]}
+    >
+      <input
+        aria-invalid={false}
+        autoFocus={true}
+        className="MuiInputBase-input MuiInput-input MuiInputBase-inputMarginDense MuiInput-inputMarginDense"
+        disabled={false}
+        id="SignUpFirstName"
+        name="firstName"
+        onAnimationStart={[Function]}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        required={false}
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
+  >
+    <label
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense"
+      data-shrink={false}
+      htmlFor="SignUpLastName"
+      id="SignUpLastName-label"
+    >
+      Nom
+    </label>
+    <div
+      className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
+      onClick={[Function]}
+    >
+      <input
+        aria-invalid={false}
+        autoFocus={true}
+        className="MuiInputBase-input MuiInput-input MuiInputBase-inputMarginDense MuiInput-inputMarginDense"
+        disabled={false}
+        id="SignUpLastName"
+        name="lastName"
+        onAnimationStart={[Function]}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        required={false}
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
+  >
+    <label
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense"
+      data-shrink={false}
+      htmlFor="SignUpEmail"
+      id="SignUpEmail-label"
+    >
+      Email
+    </label>
+    <div
+      className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
+      onClick={[Function]}
+    >
+      <input
+        aria-invalid={false}
+        autoFocus={true}
+        className="MuiInputBase-input MuiInput-input MuiInputBase-inputMarginDense MuiInput-inputMarginDense"
+        disabled={false}
+        id="SignUpEmail"
+        name="email"
+        onAnimationStart={[Function]}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        required={false}
+        type="email"
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
+  >
+    <label
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense"
+      data-shrink={false}
+      htmlFor="SignUpEmail"
+      id="SignUpEmail-label"
+    >
+      Mot de passe
+    </label>
+    <div
+      className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
+      onClick={[Function]}
+    >
+      <input
+        aria-invalid={false}
+        autoFocus={true}
+        className="MuiInputBase-input MuiInput-input MuiInputBase-inputMarginDense MuiInput-inputMarginDense"
+        disabled={false}
+        id="SignUpEmail"
+        name="password"
+        onAnimationStart={[Function]}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        required={false}
+        type="password"
+        value=""
+      />
+    </div>
+  </div>
+  <button
+    aria-disabled={true}
+    className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-disabled Mui-disabled"
+    disabled={true}
+    id="SignUpSubmit"
+    onBlur={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={-1}
+    type="submit"
+  >
+    <span
+      className="MuiButton-label"
+    >
+      Créer son compte
+    </span>
+  </button>
+  <a
+    className="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary"
+    href="/login"
+    id="SignUpLogin"
+    onBlur={[Function]}
+    onFocus={[Function]}
+  >
+    Déjà un compte ? Se connecter
+  </a>
+</form>
+`;

@@ -0,0 +1,3 @@ 
+import SignUp from './SignUp';
+
+export default SignUp;

@@ -89,5 +89,14 @@ "cant_add_passenger": "Impossible d'ajouter un passager",
       "cant_save_passengers": "Impossible de mettre à jour passagers",
       "cant_select_car": "Impossible de sélectionner la voiture"
     }
+  },
+  "signup":{
+    "email": "Email",
+    "firstName": "Prénom",
+    "lastName": "Nom",
+    "password": "Mot de passe",
+    "submit": "Créer son compte",
+    "login": "Déjà un compte ? Se connecter"
+    
   }
 }

@@ -0,0 +1,17 @@ 
+import React from 'react';
+import Layout from '../layouts/Centered';
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import Logo from '../components/Logo';
+import SignUp from '../containers/SignUp';
+
+export default () => {
+  return (
+    <Layout>
+      <Card>
+        <CardMedia component={Logo} />
+        <SignUp />
+      </Card>
+    </Layout>
+  );
+};

@@ -0,0 +1,13 @@ 
+import React from 'react';
+import renderer from 'react-test-renderer';
+jest.mock('../containers/SignUp/index', () => ({
+  __esModule: true,
+  default: () => <span>/containers/SignUp component</span>,
+}));
+import SignUp from './SignUp';
+describe('SignUp page', () => {
+  const SignUpPage = renderer.create(<SignUp />);
+  it('match snapshot', () => {
+    expect(SignUpPage.toJSON()).toMatchSnapshot();
+  });
+});

@@ -0,0 +1,35 @@ 
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SignUp page match snapshot 1`] = `
+<div>
+  <div
+    className="makeStyles-layout-1"
+  >
+    <div
+      className="MuiContainer-root MuiContainer-maxWidthSm"
+    >
+      <div
+        className="MuiPaper-root MuiCard-root MuiPaper-elevation1 MuiPaper-rounded"
+      >
+        <div
+          className="makeStyles-layout-2"
+        >
+          <a
+            className="makeStyles-link-3"
+            href="https://caroster.io"
+          >
+            <img
+              alt="Caroster"
+              className="makeStyles-logo-4"
+              src="logo.png"
+            />
+          </a>
+        </div>
+        <span>
+          /containers/SignUp component
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

@@ -3,3 +3,4 @@ // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
+import './i18n';