diff --git a/package.json b/package.json
index abb1f096451196acb1e304f828b55ade781b56e4..a2b8d840944409b610702238fa2fed16e8cf5243 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^6.15.5",
+ "react-intl": "^5.15.5",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"typescript": "^4.1.2"
diff --git a/src/App.tsx b/src/App.tsx
index 694bde22cb58786ad40a699c6ee61b0fa05d1e3d..92e85b70d934dcebc5a77ef09fe3b133c9e509d0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,12 +4,10 @@ import { AuthUser } from './components/AuthUser/AuthUser';
export const App: FC = () => (
<Router>
- <Switch>
- <Route path="/">
- <div data-testid="App">
- <AuthUser />
- </div>
- </Route>
- </Switch>
+ <div data-testid="App">
+ <Switch>
+ <Route exact path="/" component={AuthUser} />
+ </Switch>
+ </div>
</Router>
);
diff --git a/src/components/AuthUser/SignInForm/SignInForm.tsx b/src/components/AuthUser/SignInForm/SignInForm.tsx
index 866b5df7501ad014e5db4d4382992c9139d47bf4..af58f727a7b04d54f7f64daeaeea3708e70ffc30 100644
--- a/src/components/AuthUser/SignInForm/SignInForm.tsx
+++ b/src/components/AuthUser/SignInForm/SignInForm.tsx
@@ -33,13 +33,11 @@ export const SignInForm: FC = () => {
};
const { control, register, errors, handleSubmit } = useForm<FormData>({
- mode: 'onChange',
- reValidateMode: 'onChange',
defaultValues,
});
const onSubmit: any = (values: FormData) => {
- // Send data
+ alert(JSON.stringify(values));
};
const classes = useStyles();
return (
@@ -54,8 +52,9 @@ export const SignInForm: FC = () => {
control={control}
defaultValues
rules={{
- required: true,
- pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+ validate: (value) =>
+ /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
+ required: { value: true, message: 'You must enter your email' },
}}
render={() => (
<TextField
@@ -79,9 +78,9 @@ export const SignInForm: FC = () => {
control={control}
defaultValues
rules={{
- required: true,
- min: 8,
- max: 60,
+ minLength: 8,
+ maxLength: 60,
+ required: { value: true, message: 'You must enter your name' },
}}
render={() => (
<TextField
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..0000000000000000000000000000000000000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/index.tsx b/src/index.tsx
index bc4d4a8f3962b9d567a53d5191d2d81cc29dae00..0fccccb0ddf325834eeac345df5804ae6cae64ef 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,11 +1,17 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import './index.css';
+import { IntlProvider } from 'react-intl';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import MESSAGES_EN from './intl/en.json';
import { App } from './App';
ReactDOM.render(
<React.StrictMode>
- <App />
+ <IntlProvider locale="en" messages={MESSAGES_EN}>
+ <CssBaseline />
+ <App />
+ </IntlProvider>
+ ,
</React.StrictMode>,
document.getElementById('root'),
);
diff --git a/src/intl/en.json b/src/intl/en.json
new file mode 100644
index 0000000000000000000000000000000000000000..e59230501b4682251da36efad4cb653c82df7070
--- /dev/null
+++ b/src/intl/en.json
@@ -0,0 +1,5 @@
+{
+ "email": "Email address",
+ "password": "Password",
+ "error": "Insert valid email address"
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e7c9c40b88a418938ffeceadf8a7c415a7cc6727..a9e35e86bda131c31b8776ce06d60839c4108b07 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1629,6 +1629,59 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"
+"@formatjs/ecma402-abstract@1.6.4":
+ version "1.6.4"
+ resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.6.4.tgz#cff5ef03837fb6bae70b16d04940213c17e87884"
+ integrity sha512-ukFjGD9dLsxcD9D5AEshJqQElPQeUAlTALT/lzIV6OcYojyuU81gw/uXDUOrs6XW79jtOJwQDkLqHbCJBJMOTw==
+ dependencies:
+ tslib "^2.1.0"
+
+"@formatjs/icu-messageformat-parser@1.1.2":
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-1.1.2.tgz#e0d41edcfd031c0627b0f40dfcce5883d765df5d"
+ integrity sha512-AgwoQ2XUL+bQ/v7t4TBJh9vsob8zXgfM3RNe3MvJBCVOEZ+9z8mszsqeae/DmJgLK6SDezJex5O9Vdiny58Pwg==
+ dependencies:
+ "@formatjs/ecma402-abstract" "1.6.4"
+ "@formatjs/icu-skeleton-parser" "1.1.1"
+ tslib "^2.1.0"
+
+"@formatjs/icu-skeleton-parser@1.1.1":
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.1.1.tgz#b2c39a7817816d68d31272947dded970f6d1d1c7"
+ integrity sha512-hkRJhjr9G0IE730Kxwq65+rz/2fdCckSJTPrKmViMxLNtRmIt6Hx67tffElr9/QSlpzGlXw9XAMdFOa1ylRrJQ==
+ dependencies:
+ "@formatjs/ecma402-abstract" "1.6.4"
+ tslib "^2.1.0"
+
+"@formatjs/intl-displaynames@4.0.12":
+ version "4.0.12"
+ resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-4.0.12.tgz#9af9992e544aa96b32c3a4994d6fef878e0376c9"
+ integrity sha512-2f3nf5IcPYk2SCS83rJoV5y47OTL+YtHDa5G42KDgSA8ZgmgkN5OaYs3WF6a2RweMG9jp4LCTUmqS42LcAhJSw==
+ dependencies:
+ "@formatjs/ecma402-abstract" "1.6.4"
+ tslib "^2.1.0"
+
+"@formatjs/intl-listformat@5.0.13":
+ version "5.0.13"
+ resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-5.0.13.tgz#5b13057a12642089108ddf4316bab976319fd941"
+ integrity sha512-z4vZ5FX6dsL2fbO7NCmmJXKXH9p0gubzZVSsmCOUBIuy6rODLD8kE2LVnefd4wnXEJi5/fAnwGT2NMjirWa71g==
+ dependencies:
+ "@formatjs/ecma402-abstract" "1.6.4"
+ tslib "^2.1.0"
+
+"@formatjs/intl@1.9.5":
+ version "1.9.5"
+ resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-1.9.5.tgz#02bc32ab9e52b7f0201c964a696609b6d455cca2"
+ integrity sha512-PEvdDuppTHW23B4s1nzKCY1wku3HYEgmV2ip02RspSUKl8p3t/TCwb1/U3Qwhgj3EUsjYdiaF1uyMj61eChAow==
+ dependencies:
+ "@formatjs/ecma402-abstract" "1.6.4"
+ "@formatjs/icu-messageformat-parser" "1.1.2"
+ "@formatjs/intl-displaynames" "4.0.12"
+ "@formatjs/intl-listformat" "5.0.13"
+ fast-memoize "^2.5.2"
+ intl-messageformat "9.6.4"
+ tslib "^2.1.0"
+
"@graphql-tools/batch-execute@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz#e79d11bd5b39f29172f6ec2eafa71103c6a6c85b"
@@ -2674,6 +2727,14 @@
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"
integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==
+"@types/hoist-non-react-statics@^3.3.1":
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+ integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+ dependencies:
+ "@types/react" "*"
+ hoist-non-react-statics "^3.3.0"
+
"@types/html-minifier-terser@^5.0.0":
version "5.1.1"
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@@ -7651,7 +7712,7 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
-fast-memoize@^2.5.1:
+fast-memoize@^2.5.1, fast-memoize@^2.5.2:
version "2.5.2"
resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
@@ -9889,6 +9950,15 @@ interpret@^1.0.0:
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
+intl-messageformat@9.6.4:
+ version "9.6.4"
+ resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.6.4.tgz#6ee964235c37b864359dc848b3dd5ea984cc8065"
+ integrity sha512-NCstnz4qiRYHRiFwAadptARV0XGv8dFtC6ZcDfjKlFePvyyQ9zkPXq28Tg7UPTfUZnOfGjnxgi0mMem/5/TbDw==
+ dependencies:
+ "@formatjs/icu-messageformat-parser" "1.1.2"
+ fast-memoize "^2.5.2"
+ tslib "^2.1.0"
+
into-stream@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6"
@@ -15171,6 +15241,21 @@ react-hot-loader@^4.12.21:
shallowequal "^1.1.0"
source-map "^0.7.3"
+react-intl@^5.15.5:
+ version "5.15.5"
+ resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.15.5.tgz#a475445f7e9d9085040d622528ed18a082b03b5d"
+ integrity sha512-TdjMVU0xkH5hKonv/g5x2sD94iojErqlDMbLADsTmz1dgRDc6iLRP5b7mtp0//pkK/psrb283B8HL1wp1vhpiQ==
+ dependencies:
+ "@formatjs/ecma402-abstract" "1.6.4"
+ "@formatjs/icu-messageformat-parser" "1.1.2"
+ "@formatjs/intl" "1.9.5"
+ "@formatjs/intl-displaynames" "4.0.12"
+ "@formatjs/intl-listformat" "5.0.13"
+ "@types/hoist-non-react-statics" "^3.3.1"
+ hoist-non-react-statics "^3.3.2"
+ intl-messageformat "9.6.4"
+ tslib "^2.1.0"
+
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -17847,7 +17932,7 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-tslib@^2, tslib@^2.0.0, tslib@^2.0.3, tslib@~2.1.0:
+tslib@^2, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@~2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==