:construction: /register route with register form and redirection to dashboard
Hadrien Froger hadrien@octree.ch
Thu, 16 Jul 2020 07:46:51 +0100
8 files changed,
106 insertions(+),
24 deletions(-)
A
app/.babelrc
@@ -0,0 +1,12 @@
+{ + "presets": ["@babel/preset-env", "@babel/preset-react"], + "plugins": [ + [ + "@babel/plugin-transform-runtime", + { + "regenerator": true + } + ] + ] + } +
M
app/package-lock.json
→
app/package-lock.json
@@ -1683,6 +1683,15 @@ "@testing-library/dom": "^6.15.0",
"@types/testing-library__react": "^9.1.2" } }, + "@testing-library/react-hooks": { + "version": "3.3.0", + "resolved": "https://npm-8ee.hidora.com/@testing-library%2freact-hooks/-/react-hooks-3.3.0.tgz", + "integrity": "sha512-rE9geI1+HJ6jqXkzzJ6abREbeud6bLF8OmF+Vyc7gBoPwZAEVBYjbC1up5nNoVfYBhO5HUwdD4u9mTehAUeiyw==", + "requires": { + "@babel/runtime": "^7.5.4", + "@types/testing-library__react-hooks": "^3.0.0" + } + }, "@testing-library/user-event": { "version": "7.2.1", "resolved": "https://npm-8ee.hidora.com/@testing-library%2fuser-event/-/user-event-7.2.1.tgz",@@ -1813,6 +1822,14 @@ "requires": {
"@types/react": "*" } }, + "@types/react-test-renderer": { + "version": "16.9.2", + "resolved": "https://npm-8ee.hidora.com/@types%2freact-test-renderer/-/react-test-renderer-16.9.2.tgz", + "integrity": "sha512-4eJr1JFLIAlWhzDkBCkhrOIWOvOxcCAfQh+jiKg7l/nNZcCIL2MHl2dZhogIFKyHzedVWHaVP1Yydq/Ruu4agw==", + "requires": { + "@types/react": "*" + } + }, "@types/react-transition-group": { "version": "4.4.0", "resolved": "https://npm-8ee.hidora.com/@types%2freact-transition-group/-/react-transition-group-4.4.0.tgz",@@ -1931,6 +1948,15 @@ "requires": {
"has-flag": "^4.0.0" } } + } + }, + "@types/testing-library__react-hooks": { + "version": "3.2.0", + "resolved": "https://npm-8ee.hidora.com/@types%2ftesting-library__react-hooks/-/testing-library__react-hooks-3.2.0.tgz", + "integrity": "sha512-dE8iMTuR5lzB+MqnxlzORlXzXyCL0EKfzH0w/lau20OpkHD37EaWjZDz0iNG8b71iEtxT4XKGmSKAGVEqk46mw==", + "requires": { + "@types/react": "*", + "@types/react-test-renderer": "*" } }, "@types/yargs": {@@ -6713,9 +6739,9 @@ "resolved": "https://npm-8ee.hidora.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" }, "i18next": { - "version": "19.6.0", - "resolved": "https://npm-8ee.hidora.com/i18next/-/i18next-19.6.0.tgz", - "integrity": "sha512-t+pA7iN2WtwS1UQc4PFKHDIO4HYZIl2Wo8UC8gqt70Q1qY50FflAF5vV4IbQEqy4DuK3I9wv3BL1PMvkk238WA==", + "version": "19.6.1", + "resolved": "https://npm-8ee.hidora.com/i18next/-/i18next-19.6.1.tgz", + "integrity": "sha512-/pp1yfIkHcg3ZtbA7/lL80VQhC+VdpRs39RcztTosdVXpGqN7cQZfg04htfrDpHYGnUx5iTNuo9xXwZuO7FkbA==", "requires": { "@babel/runtime": "^7.10.1" }@@ -12302,10 +12328,11 @@ "resolved": "https://npm-8ee.hidora.com/stealthy-require/-/stealthy-require-1.1.1.tgz",
"integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=" }, "strapi-react-context": { - "version": "0.2.3", - "resolved": "https://npm-8ee.hidora.com/strapi-react-context/-/strapi-react-context-0.2.3.tgz", - "integrity": "sha512-KBc1EyIuZeevzylm4wmhQ12WLGZuZScZi/5pxKsE7j+m1hYZ+6gDmqBsOch0VPhKOINNtyBzJVtYxtkW9HVfYw==", + "version": "0.2.4", + "resolved": "https://npm-8ee.hidora.com/strapi-react-context/-/strapi-react-context-0.2.4.tgz", + "integrity": "sha512-r4WWqP0paCI4pmhJQpmdOWigworIaqt+1VSoN53/llCq9w7azPEE3fhrIlFj4gbqyVXXGyViqNodX+3JLlJ+XA==", "requires": { + "@testing-library/react-hooks": "^3.3.0", "react": "^16.13.1" } },
M
app/package.json
→
app/package.json
@@ -12,7 +12,7 @@ "@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "fontsource-roboto": "^2.1.4", - "i18next": "^19.5.1", + "i18next": "^19.6.1", "leaflet": "^1.6.0", "marked": "^1.1.0", "moment": "^2.27.0",@@ -24,7 +24,7 @@ "react-leaflet": "^2.7.0",
"react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "react-slick": "^0.26.1", - "strapi-react-context": "^0.2.3" + "strapi-react-context": "^0.2.4" }, "scripts": { "start": "react-scripts start",
M
app/src/Router.js
→
app/src/Router.js
@@ -6,6 +6,7 @@ // Pages
import Home from './pages/Home'; import Event from './pages/Event'; import NotFound from './pages/NotFound'; +import Dashboard from './pages/Dashboard'; import SignUp from './pages/SignUp'; const Router = () => { useGTM();@@ -15,6 +16,7 @@ <Switch>
<Route path="/e/:eventId" component={Event} /> <Route path="/" exact component={Home} /> <Route path="/register" exact component={SignUp} /> + <Route path="/dashboard" exact component={Dashboard} /> <Route component={NotFound} /> </Switch> </BrowserRouter>
M
app/src/containers/SignUp/SignUp.js
→
app/src/containers/SignUp/SignUp.js
@@ -3,14 +3,16 @@ 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'; +import {useToast} from '../../contexts/Toast'; +import {Redirect} from 'react-router-dom'; +import {CircularProgress} from '@material-ui/core'; export default () => { const {t} = useTranslation(); - const {signUp} = useAuth(); + const {signUp, token} = useAuth(); const [isLoading, setIsLoading] = useState(false); const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState('');@@ -23,16 +25,47 @@ [firstName, lastName, email, password].filter(s => s.length < 4)
.length === 0, [firstName, lastName, email, password] ); + const {addToast} = useToast(); - 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]); + const onSubmit = useCallback( + async evt => { + if (evt.preventDefault) evt.preventDefault(); + setIsLoading(true); + try { + const error = await signUp(email.replace(/\.@/, '_'), email, password, { + firstName, + lastName, + }); + if (error) { + addToast(t('signup.errors.email_taken')); + } + } catch (error) { + console.log('ERROR', {error}); + // if (error.statusCode && error.statusCode === 400) { + // const [message] = error.message.messages; + // console.log('add toast', message); + // addToast(message.message); + // } + } + console.log('SIGN UP'); + + setIsLoading(false); + return false; + }, + [firstName, lastName, email, password, addToast, signUp] + ); + if (isLoading) { + return ( + <CardContent> + <CircularProgress /> + </CardContent> + ); + } + + if (token) { + return <Redirect to="/dashboard" />; + } + return ( <form onSubmit={onSubmit}> <CardContent>@@ -93,9 +126,9 @@ s
> {t('signup.submit')} </Button> - <Link id="SignUpLogin" href="/login"> + <Button id="SignUpLogin" href="/login"> {t('signup.login')} - </Link> + </Button> </CardActions> </CardActionArea> </form>
M
app/src/locales/fr.json
→
app/src/locales/fr.json
@@ -96,7 +96,10 @@ "firstName": "Prénom",
"lastName": "Nom", "password": "Mot de passe", "submit": "Créer son compte", - "login": "Déjà un compte ? Se connecter" + "login": "Déjà un compte ? Se connecter", + "errors":{ + "email_taken": "Email déjà pris" + } } }
A
app/src/pages/Dashboard.js
@@ -0,0 +1,7 @@
+import React from 'react'; + +const Dashboard = () => { + return <div>Dashboard – NOT IMPLEMENTED</div>; +}; + +export default Dashboard;
M
extensions/users-permissions/models/User.settings.json
→
extensions/users-permissions/models/User.settings.json
@@ -15,14 +15,12 @@ },
"firstName": { "type": "string", "minLength": 3, - "unique": true, "configurable": false, "required": true }, "lastName": { "type": "string", "minLength": 3, - "unique": true, "configurable": false, "required": true },