Add error message

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": [{
+            "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": [{
+            "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"
                 },

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"
     }
-
 }

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/

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>

src/css/login.css

@@ -72,3 +72,13 @@ input[type=submit]:hover {
     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;
+}

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')