@@ -1,6 +1,6 @@ 
 {
   "name": "app",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "proxy": "http://localhost:1337",
   "dependencies": {

@@ -0,0 +1,29 @@ 
+import React from 'react';
+import CardContent from '@material-ui/core/CardContent';
+import {useTranslation} from 'react-i18next';
+import {makeStyles} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const LoginGoogle = () => {
+  const {t} = useTranslation();
+  const classes = useStyles();
+
+  return (
+    <CardContent className={classes.content}>
+      <Button variant="contained" color="primary" href="/connect/google">
+        {t('signin.withGoogle')}
+      </Button>
+    </CardContent>
+  );
+};
+
+const useStyles = makeStyles(theme => ({
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: theme.spacing(4, 0),
+  },
+}));
+
+export default LoginGoogle;

@@ -6,7 +6,7 @@ import TextField from '@material-ui/core/TextField';
 import {useLocation} from 'react-router-dom';
 import Button from '@material-ui/core/Button';
 import Link from '@material-ui/core/Link';
-
+import Typography from '@material-ui/core/Typography';
 import CardContent from '@material-ui/core/CardContent';
 import {CircularProgress} from '@material-ui/core';
 import CardActions from '@material-ui/core/CardActions';
@@ -74,7 +74,8 @@ return <Redirect to="/confirm" />;
 
   return (
     <form onSubmit={onSubmit}>
-      <CardContent>
+      <CardContent className={classes.content}>
+        <Typography variant="h6">{t('signin.title')}</Typography>
         <TextField
           label={t('signin.email')}
           fullWidth
@@ -108,7 +109,7 @@ )
           }
         />
       </CardContent>
-      <CardActions>
+      <CardActions className={classes.actions}>
         <Button
           color="primary"
           variant="contained"
@@ -116,16 +117,15 @@ type="submit"
           disabled={!canSubmit}
           aria-disabled={!canSubmit}
           id="SignInSubmit"
+          fullWidth
         >
-          {t('signin.login')}
-          {isLoading && (
+          {isLoading ? (
             <CircularProgress className={classes.loader} size={20} />
+          ) : (
+            t('signin.login')
           )}
         </Button>
-        <Button color="primary" variant="contained" href="/connect/google">
-          {t('signin.withGoogle')}
-        </Button>
-        <Button id="SignInRegister" href="/register">
+        <Button id="SignInRegister" href="/register" fullWidth size="small">
           {t('signin.register')}
         </Button>
       </CardActions>
@@ -134,8 +134,18 @@ );
 };
 
 const useStyles = makeStyles(theme => ({
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
   loader: {
     marginLeft: '14px',
+  },
+  actions: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
   },
 }));
 export default SignIn;

@@ -5,6 +5,7 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';
+import Typography from '@material-ui/core/Typography';
 import {useToast} from '../../contexts/Toast';
 import {Redirect} from 'react-router-dom';
 import {CircularProgress} from '@material-ui/core';
@@ -63,7 +64,8 @@ }
 
   return (
     <form onSubmit={onSubmit}>
-      <CardContent>
+      <CardContent className={classes.content}>
+        <Typography variant="h6">{t('signup.title')}</Typography>
         <TextField
           label={t('signup.firstName')}
           fullWidth
@@ -108,12 +110,14 @@ name="password"
           type="password"
         />
       </CardContent>
-      <CardActions>
+      <CardActions className={classes.actions}>
         <Button
           color="primary"
           variant="contained"
           type="submit"
           disabled={!canSubmit}
+          className={classes.button}
+          fullWidth
           aria-disabled={!canSubmit}
           id="SignUpSubmit"
         >
@@ -126,10 +130,7 @@ color="secondary"
             />
           )}
         </Button>
-        <Button color="primary" variant="contained" href="/connect/google">
-          {t('signin.withGoogle')}
-        </Button>
-        <Button id="SignUpLogin" href="/login">
+        <Button id="SignUpLogin" href="/login" fullWidth>
           {t('signup.login')}
         </Button>
       </CardActions>
@@ -138,8 +139,21 @@ );
 };
 
 const useStyles = makeStyles(theme => ({
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
   loader: {
     marginLeft: '14px',
+  },
+  actions: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  button: {
+    margin: theme.spacing(1),
   },
 }));
 export default SignUp;

@@ -183,13 +183,13 @@ "create_event": "Créer un évènement"
     }
   },
   "signin": {
-    "title": "Se connecter",
+    "title": "Connexion",
     "email": "Email",
     "password": "Mot de passe",
     "login": "Se connecter",
-    "register": "Pas encore de compte ? S'inscrire",
+    "register": "S'inscrire",
     "errors": "Vérifier votre email et mot de passe",
-    "withGoogle": "Login avec Google"
+    "withGoogle": "Se connecter avec Google"
   },
   "lost_password": {
     "title": "Récupération de mot de passe",

@@ -1,10 +1,12 @@ 
 import React from 'react';
-import Layout from '../layouts/Centered';
 import Card from '@material-ui/core/Card';
+import {useTranslation} from 'react-i18next';
 import CardMedia from '@material-ui/core/CardMedia';
+import Divider from '@material-ui/core/Divider';
+import Layout from '../layouts/Centered';
 import Logo from '../components/Logo';
 import SignInForm from '../containers/SignInForm';
-import {useTranslation} from 'react-i18next';
+import LoginGoogle from '../containers/LoginGoogle';
 
 const SignIn = () => {
   const {t} = useTranslation();
@@ -12,6 +14,9 @@ return (
     <Layout menuTitle={t('signin.title')}>
       <Card>
         <CardMedia component={Logo} />
+        <Divider />
+        <LoginGoogle />
+        <Divider />
         <SignInForm />
       </Card>
     </Layout>

@@ -1,10 +1,12 @@ 
 import React from 'react';
-import Layout from '../layouts/Centered';
 import Card from '@material-ui/core/Card';
 import CardMedia from '@material-ui/core/CardMedia';
+import Divider from '@material-ui/core/Divider';
+import {useTranslation} from 'react-i18next';
+import Layout from '../layouts/Centered';
 import Logo from '../components/Logo';
 import SignUpForm from '../containers/SignUpForm';
-import {useTranslation} from 'react-i18next';
+import LoginGoogle from '../containers/LoginGoogle';
 
 const SignUp = () => {
   const {t} = useTranslation();
@@ -12,6 +14,9 @@ return (
     <Layout menuTitle={t('signup.title')}>
       <Card>
         <CardMedia component={Logo} />
+        <Divider />
+        <LoginGoogle />
+        <Divider />
         <SignUpForm />
       </Card>
     </Layout>

@@ -1,5 +1,5 @@ 
 module.exports = ({env}) => ({
   host: env('HOST', '0.0.0.0'),
   port: env.int('PORT', 1337),
-  url: env('STRAPI_URL', 'http://localhost:1337'),
+  url: env('STRAPI_URL', ''),
 });

@@ -0,0 +1,18 @@ 
+module.exports = {
+  lifecycles: {
+    async afterCreate(user) {
+      if (user.email) {
+        try {
+          strapi.plugins['email'].services.contact.subscribe({
+            email: user.email,
+          });
+          strapi.log.info(
+            `Email ${user.email} saved to Sendgrid contact list.`
+          );
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    },
+  },
+};