From 2d9e66f32fece4cb17bc171de6d98c1168e3737c Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Tue, 1 Dec 2020 17:01:57 -0800 Subject: [PATCH] Move to stateless function mode. --- .eslintcache | 2 +- package-lock.json | 43 ++++++++++++++ package.json | 3 +- src/Header.js | 8 ++- src/LoginApp.js | 124 ++++++++++++++------------------------- src/RegistrationApp.js | 117 ++++++++++++++++-------------------- src/css/registration.css | 7 +++ src/index.js | 2 +- 8 files changed, 154 insertions(+), 152 deletions(-) diff --git a/.eslintcache b/.eslintcache index eb64876e..948efd5b 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/Users/pveiga/repos/wisemapping-react/src/Footer.js":"1","/Users/pveiga/repos/wisemapping-react/src/Header.js":"2","/Users/pveiga/repos/wisemapping-react/src/index.js":"3","/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js":"4","/Users/pveiga/repos/wisemapping-react/src/LoginApp.js":"5"},{"size":1601,"mtime":1606716377431,"results":"6","hashOfConfig":"7"},{"size":1572,"mtime":1606670050593,"results":"8","hashOfConfig":"7"},{"size":1882,"mtime":1606786667541,"results":"9","hashOfConfig":"7"},{"size":3839,"mtime":1606786664130,"results":"10","hashOfConfig":"7"},{"size":4089,"mtime":1606780103039,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",[],"/Users/pveiga/repos/wisemapping-react/src/index.js",["22"],"/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginApp.js",[],{"ruleId":"23","severity":1,"message":"24","line":37,"column":57,"nodeType":"25","messageId":"26","endLine":37,"endColumn":59},"eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected"] \ No newline at end of file +[{"/Users/pveiga/repos/wisemapping-react/src/Footer.js":"1","/Users/pveiga/repos/wisemapping-react/src/Header.js":"2","/Users/pveiga/repos/wisemapping-react/src/index.js":"3","/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js":"4","/Users/pveiga/repos/wisemapping-react/src/LoginApp.js":"5"},{"size":1601,"mtime":1606716377431,"results":"6","hashOfConfig":"7"},{"size":1818,"mtime":1606793242108,"results":"8","hashOfConfig":"7"},{"size":1883,"mtime":1606789677736,"results":"9","hashOfConfig":"7"},{"size":3516,"mtime":1606870582803,"results":"10","hashOfConfig":"7"},{"size":3472,"mtime":1606870845676,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",[],"/Users/pveiga/repos/wisemapping-react/src/index.js",[],"/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginApp.js",[]] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 840e6a62..b2724e5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^12.2.2", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-google-recaptcha": "^2.1.0", "react-intl": "^5.10.5", "react-scripts": "4.0.1", "web-vitals": "^0.2.4" @@ -16112,6 +16113,18 @@ "node": ">=10" } }, + "node_modules/react-async-script": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz", + "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==", + "dependencies": { + "hoist-non-react-statics": "^3.3.0", + "prop-types": "^15.5.0" + }, + "peerDependencies": { + "react": ">=16.4.1" + } + }, "node_modules/react-dev-utils": { "version": "11.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz", @@ -16193,6 +16206,18 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz", "integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==" }, + "node_modules/react-google-recaptcha": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz", + "integrity": "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==", + "dependencies": { + "prop-types": "^15.5.0", + "react-async-script": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16.4.1" + } + }, "node_modules/react-intl": { "version": "5.10.5", "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.10.5.tgz", @@ -34293,6 +34318,15 @@ "whatwg-fetch": "^3.4.1" } }, + "react-async-script": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz", + "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==", + "requires": { + "hoist-non-react-statics": "^3.3.0", + "prop-types": "^15.5.0" + } + }, "react-dev-utils": { "version": "11.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz", @@ -34357,6 +34391,15 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz", "integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==" }, + "react-google-recaptcha": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz", + "integrity": "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==", + "requires": { + "prop-types": "^15.5.0", + "react-async-script": "^1.1.1" + } + }, "react-intl": { "version": "5.10.5", "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.10.5.tgz", diff --git a/package.json b/package.json index ee9fbfc5..8e6ae220 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@testing-library/user-event": "^12.2.2", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-google-recaptcha": "^2.1.0", "react-intl": "^5.10.5", "react-scripts": "4.0.1", "web-vitals": "^0.2.4" @@ -49,4 +50,4 @@ "devDependencies": { "@formatjs/cli": "^2.13.14" } -} \ No newline at end of file +} diff --git a/src/Header.js b/src/Header.js index 5c9a19fe..86c34ec5 100644 --- a/src/Header.js +++ b/src/Header.js @@ -2,7 +2,6 @@ import React from 'react'; import { FormattedMessage } from 'react-intl' import logo from './images/header-logo.png' - class Header extends React.Component { constructor(props) { super(props); @@ -17,9 +16,12 @@ class Header extends React.Component { let text; const pageType = this.state.type; - if (pageType === 'login') { + if (pageType === 'only-signup') { text = ; signUpButton = ; + } if (pageType === 'only-signin') { + text = ; + signUpButton = ; } else { signUpButton = signInButton = ; @@ -40,7 +42,7 @@ class Header extends React.Component { class SignInButton extends React.Component { render() { - return ; + return ; } } class SignUpButton extends React.Component { diff --git a/src/LoginApp.js b/src/LoginApp.js index 38c51c55..ede83c67 100644 --- a/src/LoginApp.js +++ b/src/LoginApp.js @@ -6,71 +6,47 @@ import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl' import Header from './Header.js'; import Footer from './Footer.js'; -class ConfigStatusMessage extends React.Component { - constructor(props) { - super(props) - this.state = { - enabled: props.enabled - } +const ConfigStatusMessage = (props) => { + const enabled = props.enabled + let result; + + if (enabled === true) { + result = (
+

+ here +

+
); + } else { + result = ; } - render() { - let result; - - if (this.state.enabled===true) { - result = (
-

- here -

-
); - } else { - result = ; - } - - return result; - } + return result; } -class LoginError extends React.Component { - constructor(props) { - super(props) - // @Todo: This must be reviewed to be based on navigation state. - // Login error example: http://localhost:8080/c/login?login.error=2 - const errorCode = new URLSearchParams(window.location.search).get('login_error'); - this.state = { - errorCode: errorCode +const LoginError = (props) => { + // @Todo: This must be reviewed to be based on navigation state. + // Login error example: http://localhost:8080/c/login?login.error=2 + const errorCode = new URLSearchParams(window.location.search).get('login_error'); + + let result; + if (errorCode) { + if (errorCode === 3) { + result = ( +
+ +
) + } else { + result = ( +
+ +
) } } + return ({result}); - render() { - - let result; - const errorCode = this.state.errorCode; - if (errorCode) { - if (errorCode === 3) { - result = ( -
- -
) - } else { - result = ( -
- -
) - } - } - return ({result}); - } } class LoginForm extends React.Component { - constructor(props) { - super(props); - this.state = { - intl: props.intl - } - } - render() { const intl = this.props.intl; @@ -99,32 +75,22 @@ class LoginForm extends React.Component { } } -class LoginApp extends React.Component { - constructor(props) { - super(props); +const LoginApp = (props) => { + const messages = props.messages; + const locale = props.locale; - const messages = props.messages; - const locale = props.locale; - - this.state = { - locale: locale, - messages: messages - }; - } - - render() { - return ( - -
-
- - -
-
- - ); - } + return ( + +
+
+ + +
+
+ + ); } + LoginForm = injectIntl(LoginForm) export default LoginApp; diff --git a/src/RegistrationApp.js b/src/RegistrationApp.js index 9628cf56..bc92939a 100644 --- a/src/RegistrationApp.js +++ b/src/RegistrationApp.js @@ -2,70 +2,64 @@ import './css/registration.css'; import React from 'react'; import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl' +import ReCAPTCHA from "react-google-recaptcha"; import Header from './Header.js'; import Footer from './Footer.js'; -class RegistrationError extends React.Component { - constructor(props) { - super(props) - // @Todo: This must be reviewed to be based on navigation state. - // Login error example: http://localhost:8080/c/login?login.error=2 - const errorCode = new URLSearchParams(window.location.search).get('login_error'); - this.state = { - errorCode: errorCode - } - } - - render() { - - let result; - const errorCode = this.state.errorCode; - if (errorCode) { - if (errorCode === 3) { - result = ( -
- -
) - } else { - result = ( -
- -
) - } - } - return ({result}); - } +const RegistrationError = (props) => { + return (); } class RegistrationForm extends React.Component { + constructor(props) { - super(props); - this.state = { - intl: props.intl - } + super(props) + + this.handleChange = this.handleChange.bind(this); + this.handleRecaptchaChange = this.handleRecaptchaChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + + handleChange(event) { + this.setState({ value: event.target.value }); + } + + handleRecaptchaChange(value) { + this.setState({ "recaptcha": value }); + } + + handleSubmit(event) { + event.preventDefault(); } render() { - const intl = this.props.intl; return (
-

+

-
- - - - - + + + + + + +
- +
+

+ +

@@ -75,31 +69,20 @@ class RegistrationForm extends React.Component { } } -class RegistationApp extends React.Component { - constructor(props) { - super(props); - - const messages = props.messages; - const locale = props.locale; - - this.state = { - locale: locale, - messages: messages - }; - } - - render() { - return ( - -
-
- -
-
- - ); - } +const RegistationApp = props => { + const messages = props.messages; + const locale = props.locale; + return ( + +
+
+ +
+ + ); } + RegistrationForm = injectIntl(RegistrationForm) export default RegistationApp; diff --git a/src/css/registration.css b/src/css/registration.css index 8ae972db..82889b68 100644 --- a/src/css/registration.css +++ b/src/css/registration.css @@ -37,6 +37,13 @@ color: white; } +form>p, +form>div { + font-size: 13px; + width: 300px; + margin: auto; +} + input[type=submit]:hover { background-color: #f9a826; } diff --git a/src/index.js b/src/index.js index 7d3c0abc..d4b0cd02 100644 --- a/src/index.js +++ b/src/index.js @@ -34,7 +34,7 @@ function router() { } else { // It's loaded from the npm start const pageId = new URLSearchParams(location.search).get('app'); - result = Object.values(Apps).find(value => value.id == pageId); + result = Object.values(Apps).find(value => value.id === pageId); } if (result === null) { result = Apps.LOGIN;