Add error message

2024-11-22 06:37:56 +01:00 · 2020-11-28 08:04:49 -08:00 · 2020-11-28 08:04:49 -08:00 · 5aecc2ab91
commit 5aecc2ab91
parent c1e3deec76
7 changed files with 105 additions and 29 deletions
--- a/.eslintcache
+++ b/.eslintcache
--- a/package-lock.json
+++ b/package-lock.json
@ -5,7 +5,6 @@
    "requires": true,
    "packages": {
        "": {
-            "name": "wisemapping-reactp",
            "version": "0.1.0",
            "dependencies": {
                "@testing-library/jest-dom": "^5.11.6",
@ -4741,7 +4740,8 @@
            "version": "1.5.1",
            "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
            "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-            "funding": [{
+            "funding": [
+                {
                    "type": "github",
                    "url": "https://github.com/sponsors/feross"
                },
@ -4978,7 +4978,8 @@
            "version": "5.2.1",
            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-            "funding": [{
+            "funding": [
+                {
                    "type": "github",
                    "url": "https://github.com/sponsors/feross"
                },
@ -6848,10 +6849,12 @@
            "version": "2.0.2",
            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
            "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==",
-            "funding": [{
-                "type": "github",
-                "url": "https://github.com/sponsors/fb55"
-            }]
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ]
        },
        "node_modules/domain-browser": {
            "version": "1.2.0",
@ -8677,10 +8680,12 @@
            "version": "1.13.0",
            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
            "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
-            "funding": [{
-                "type": "individual",
-                "url": "https://github.com/sponsors/RubenVerborgh"
-            }],
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://github.com/sponsors/RubenVerborgh"
+                }
+            ],
            "engines": {
                "node": ">=4.0"
            }
@ -9336,7 +9341,8 @@
            "version": "5.2.1",
            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-            "funding": [{
+            "funding": [
+                {
                    "type": "github",
                    "url": "https://github.com/sponsors/feross"
                },
@ -9798,7 +9804,8 @@
            "version": "1.2.1",
            "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-            "funding": [{
+            "funding": [
+                {
                    "type": "github",
                    "url": "https://github.com/sponsors/feross"
                },
@ -17076,7 +17083,8 @@
            "version": "1.1.10",
            "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.10.tgz",
            "integrity": "sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==",
-            "funding": [{
+            "funding": [
+                {
                    "type": "github",
                    "url": "https://github.com/sponsors/feross"
                },
@ -18429,7 +18437,8 @@
            "version": "5.2.1",
            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-            "funding": [{
+            "funding": [
+                {
                    "type": "github",
                    "url": "https://github.com/sponsors/feross"
                },
@ -38702,4 +38711,4 @@
            "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
        }
    }
-}
+}
--- a/package.json
+++ b/package.json
@ -20,6 +20,13 @@
        "extract": "formatjs extract",
        "compile": "formatjs compile"
    },
+    "author": {
+        "name": "Paulo Veiga",
+        "email": "pveiga@wisemapping.com"
+    },
+    "contributors": [
+        "Ezequiel Bergamaschi"
+    ],
    "eslintConfig": {
        "extends": [
            "react-app",
@ -39,8 +46,8 @@
        ]
    },
    "homepage": "http://localhost:8080/react/login/",
+    "license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL",
    "devDependencies": {
        "@formatjs/cli": "^2.13.14"
    }
-
 }
--- a/public/index.html
+++ b/public/index.html
@ -1,3 +1,13 @@
+<!-- This is a temporal hack only with the purpose to allow the transition with Spring MVC-->
+<script>
+    if (!loginErrorCode) {
+        function loginErrorCode() {
+            return 3;
+        }
+    }
+</script>
+
+
 <!DOCTYPE html>
 <html lang="en">

@ -6,8 +16,9 @@
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
+    <meta name="description" content="WiseMappping" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
+
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--- a/src/LoginPage.js
+++ b/src/LoginPage.js
@ -22,15 +22,45 @@ class ConfigStatusMessage extends React.Component {
  }
 }

+class LoginError extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      errorCode: props.errorCode
+    }
+  }
+
+  render() {
+    const errorCode = this.state.errorCode;
+    let result;
+    if (errorCode) {
+      if (errorCode == 3) {
+        result = (
+          <div class='error'>
+            <FormattedMessage id="USER_INACTIVE" defaultMessage="Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!." />
+          </div>)
+      } else {
+        result = (
+          <div class='error'>
+            <FormattedMessage id="LOGIN_ERROR" defaultMessage="The email address or password you entered is incorrect." />
+          </div>)
+      }
+    }
+    return (<span>{result}</span>);
+  }
+}
+
 class LoginForm extends React.Component {
  constructor(props) {
    super(props);
+
+    const errorCode = props.errorCode
    this.state = {
      email: '',
      password: '',
-      staySignIn: false
+      staySignIn: false,
+      errorCode: errorCode
    };
-
  }

  render() {
@ -40,15 +70,16 @@ class LoginForm extends React.Component {
          <h1><FormattedMessage id="WELCOME" defaultMessage="Welcome" /></h1>
          <p><FormattedMessage id="LOG_INTO" defaultMessage="Log Into Your Account" /></p>

+          <LoginError errorCode={this.state.errorCode} />
+
          <form action="/c/perform-login" method="POST">
            <input type="email" name="username" placeholder={intl.formatMessage({ id: "EMAIL", defaultMessage: 'Email' })} value={this.state.value} onChange={this.handleInputChange} required />
            <input type="password" name="password" placeholder={intl.formatMessage({ id: "PASSWORD", defaultMessage: 'Password' })} value={this.state.value} onChange={this.handleInputChange} required />

            <div>
-              <input name="_spring_security_remember_me" id="staySignIn" type="checkbox"/>
+              <input name="_spring_security_remember_me" id="staySignIn" type="checkbox" />
              <label for="staySignIn"><FormattedMessage id="REMEMBER_ME" defaultMessage="Remember me" /></label>
            </div>
-
            <input type="submit" value={intl.formatMessage({ id: "SING_IN", defaultMessage: 'Sign In' })} />
          </form>
          <a href="/c/user/resetPassword"><FormattedMessage id="FORGOT_PASSWORD" defaultMessage="Forgot Password ?" /></a>
@ -70,9 +101,12 @@ class LoginPage extends React.Component {

    const messages = props.messages;
    const locale = props.locale;
+    const errorCode = props.errorCode
+
    this.state = {
      locale: locale,
-      message: messages
+      message: messages,
+      errorCode: errorCode
    };

    intl = createIntl(
@ -90,7 +124,7 @@ class LoginPage extends React.Component {
      <IntlProvider locale={this.state.locale} defaultLocale="en" messages={this.state.messages}>
        <div>
          <Header type='login' />
-          <LoginForm />
+          <LoginForm errorCode={this.state.errorCode} />
          {/* <ConfigStatusMessage enabled='true' /> */}
          <Footer />
        </div>
--- a/src/css/login.css
+++ b/src/css/login.css
@ -71,4 +71,14 @@ input[type=submit]:hover {
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
+}
+
+.error {
+    margin: 10px auto;
+    width: 260px;
+    font-size: 14px;
+    background-color: #e97450;
+    padding: 10px 10px;
+    border-radius: 9px;
+    color: white;
 }
--- a/src/index.js
+++ b/src/index.js
@ -14,12 +14,17 @@ function loadLocaleData(locale) {
 }

 async function bootstrapApplication(locale) {
-  const messages =  loadLocaleData(locale)
+  const messages =  loadLocaleData(locale);
+  
+  // @Todo: how to share the state 
+  let errorCode = null;
+  if(typeof loginErrorCode !== "undefined"){
+     errorCode = eval("loginErrorCode");
+  }

  ReactDOM.render(
-    <LoginPage locale={locale} messages={messages} />,
+    <LoginPage locale={locale} messages={messages} errorCode={errorCode}/>,
    document.getElementById('root')
  )
 }
-// @Todo: Is this correct ?
-bootstrapApplication('en')
+bootstrapApplication('en')