diff --git a/.eslintcache b/.eslintcache
index 2b3ac985..d41a66fe 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/LoginPage.js":"4"},{"size":1747,"mtime":1606529689598,"results":"5","hashOfConfig":"6"},{"size":1557,"mtime":1606529996629,"results":"7","hashOfConfig":"6"},{"size":554,"mtime":1606522800588,"results":"8","hashOfConfig":"6"},{"size":3146,"mtime":1606530371412,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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":"18"},"/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/LoginPage.js",["19"],"import React from 'react';\nimport Header from './Header.js';\nimport Footer from './Footer.js';\nimport { createIntl, createIntlCache, FormattedMessage, IntlProvider } from 'react-intl'\n\nclass ConfigStatusMessage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      enabled: props.enabled\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"db-warn-msg\">\n        <p>\n          <FormattedMessage id=\"NO_PRODUCTION_DATABASE_CONFIGURED\" defaultMessage=\"Warning: Although HSQLDB is bundled with WiseMapping by default during the installation, we do not recommend this database for production use. Please consider using MySQL 5.7 instead. You can find more information how to configure MySQL\" description=\"Missing production database configured\" /><a href=\"https://wisemapping.atlassian.net/wiki/display/WS/Database+Configuration\"> here</a>\n        </p>\n      </div>\n    );\n  }\n}\n\nclass LoginForm extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      email: '',\n      password: '',\n      staySignIn: false\n    };\n\n  }\n\n  render() {\n    return (\n      <div class=\"wrapper\">\n        <div class=\"content\">\n          <h1><FormattedMessage id=\"WELCOME\" defaultMessage=\"Welcome\" /></h1>\n          <p><FormattedMessage id=\"LOG_INTO\" defaultMessage=\"Log Into Your Account\" /></p>\n\n          <form action=\"/c/perform-login\" method=\"POST\">\n            <input type=\"email\" name=\"username\" placeholder={intl.formatMessage({ id: \"EMAIL\", defaultMessage: 'Email' })} value={this.state.value} onChange={this.handleInputChange} required />\n            <input type=\"password\" name=\"password\" placeholder={intl.formatMessage({ id: \"PASSWORD\", defaultMessage: 'Password' })} value={this.state.value} onChange={this.handleInputChange} required />\n\n            <div>\n              <input name=\"_spring_security_remember_me\" id=\"staySignIn\" type=\"checkbox\"/>\n              <label for=\"staySignIn\"><FormattedMessage id=\"REMEMBER_ME\" defaultMessage=\"Remember me\" /></label>\n            </div>\n\n            <input type=\"submit\" value={intl.formatMessage({ id: \"SING_IN\", defaultMessage: 'Sign In' })} />\n          </form>\n          <a href=\"/c/user/resetPassword\"><FormattedMessage id=\"FORGOT_PASSWORD\" defaultMessage=\"Forgot Password ?\" /></a>\n        </div>\n      </div>\n    );\n  }\n}\n\n// Internationalize setup ....\nconst cache = createIntlCache()\n\n// @Todo: Review ...\nvar intl = null;\n\nclass LoginPage extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const messages = props.messages;\n    const locale = props.locale;\n    this.state = {\n      locale: locale,\n      message: messages\n    };\n\n    intl = createIntl(\n      {\n        locale: locale,\n        defaultLocale: 'en'\n      },\n      messages,\n      cache\n    )\n  }\n\n  render() {\n    return (\n      <IntlProvider locale={this.state.locale} defaultLocale=\"en\" messages={this.state.messages}>\n        <div>\n          <Header type='login' />\n          <LoginForm />\n          {/* <ConfigStatusMessage enabled='true' /> */}\n          <Footer />\n        </div>\n      </IntlProvider>\n    );\n  }\n}\nexport default LoginPage;\n\n",{"ruleId":"20","severity":1,"message":"21","line":6,"column":7,"nodeType":"22","messageId":"23","endLine":6,"endColumn":26},"no-unused-vars","'ConfigStatusMessage' is defined but never used.","Identifier","unusedVar"]
\ 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/LoginPage.js":"4"},{"size":1747,"mtime":1606529689598,"results":"5","hashOfConfig":"6"},{"size":1557,"mtime":1606529996629,"results":"7","hashOfConfig":"6"},{"size":702,"mtime":1606578931580,"results":"8","hashOfConfig":"6"},{"size":4158,"mtime":1606534865391,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"16","messages":"17","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"18"},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",[],"/Users/pveiga/repos/wisemapping-react/src/index.js",["19"],"/Users/pveiga/repos/wisemapping-react/src/LoginPage.js",["20","21"],"import React from 'react';\nimport Header from './Header.js';\nimport Footer from './Footer.js';\nimport { createIntl, createIntlCache, FormattedMessage, IntlProvider } from 'react-intl'\n\nclass ConfigStatusMessage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      enabled: props.enabled\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"db-warn-msg\">\n        <p>\n          <FormattedMessage id=\"NO_PRODUCTION_DATABASE_CONFIGURED\" defaultMessage=\"Warning: Although HSQLDB is bundled with WiseMapping by default during the installation, we do not recommend this database for production use. Please consider using MySQL 5.7 instead. You can find more information how to configure MySQL\" description=\"Missing production database configured\" /><a href=\"https://wisemapping.atlassian.net/wiki/display/WS/Database+Configuration\"> here</a>\n        </p>\n      </div>\n    );\n  }\n}\n\nclass LoginError extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      errorCode: props.errorCode\n    }\n  }\n\n  render() {\n    const errorCode = this.state.errorCode;\n    let result;\n    if (errorCode) {\n      if (errorCode == 3) {\n        result = (\n          <div class='error'>\n            <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!.\" />\n          </div>)\n      } else {\n        result = (\n          <div class='error'>\n            <FormattedMessage id=\"LOGIN_ERROR\" defaultMessage=\"The email address or password you entered is incorrect.\" />\n          </div>)\n      }\n    }\n    return (<span>{result}</span>);\n  }\n}\n\nclass LoginForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const errorCode = props.errorCode\n    this.state = {\n      email: '',\n      password: '',\n      staySignIn: false,\n      errorCode: errorCode\n    };\n  }\n\n  render() {\n    return (\n      <div class=\"wrapper\">\n        <div class=\"content\">\n          <h1><FormattedMessage id=\"WELCOME\" defaultMessage=\"Welcome\" /></h1>\n          <p><FormattedMessage id=\"LOG_INTO\" defaultMessage=\"Log Into Your Account\" /></p>\n\n          <LoginError errorCode={this.state.errorCode} />\n\n          <form action=\"/c/perform-login\" method=\"POST\">\n            <input type=\"email\" name=\"username\" placeholder={intl.formatMessage({ id: \"EMAIL\", defaultMessage: 'Email' })} value={this.state.value} onChange={this.handleInputChange} required />\n            <input type=\"password\" name=\"password\" placeholder={intl.formatMessage({ id: \"PASSWORD\", defaultMessage: 'Password' })} value={this.state.value} onChange={this.handleInputChange} required />\n\n            <div>\n              <input name=\"_spring_security_remember_me\" id=\"staySignIn\" type=\"checkbox\" />\n              <label for=\"staySignIn\"><FormattedMessage id=\"REMEMBER_ME\" defaultMessage=\"Remember me\" /></label>\n            </div>\n            <input type=\"submit\" value={intl.formatMessage({ id: \"SING_IN\", defaultMessage: 'Sign In' })} />\n          </form>\n          <a href=\"/c/user/resetPassword\"><FormattedMessage id=\"FORGOT_PASSWORD\" defaultMessage=\"Forgot Password ?\" /></a>\n        </div>\n      </div>\n    );\n  }\n}\n\n// Internationalize setup ....\nconst cache = createIntlCache()\n\n// @Todo: Review ...\nvar intl = null;\n\nclass LoginPage extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const messages = props.messages;\n    const locale = props.locale;\n    const errorCode = props.errorCode\n\n    this.state = {\n      locale: locale,\n      message: messages,\n      errorCode: errorCode\n    };\n\n    intl = createIntl(\n      {\n        locale: locale,\n        defaultLocale: 'en'\n      },\n      messages,\n      cache\n    )\n  }\n\n  render() {\n    return (\n      <IntlProvider locale={this.state.locale} defaultLocale=\"en\" messages={this.state.messages}>\n        <div>\n          <Header type='login' />\n          <LoginForm errorCode={this.state.errorCode} />\n          {/* <ConfigStatusMessage enabled='true' /> */}\n          <Footer />\n        </div>\n      </IntlProvider>\n    );\n  }\n}\nexport default LoginPage;\n\n",{"ruleId":"22","severity":1,"message":"23","line":22,"column":18,"nodeType":"24","messageId":"25","endLine":22,"endColumn":22},{"ruleId":"26","severity":1,"message":"27","line":6,"column":7,"nodeType":"28","messageId":"29","endLine":6,"endColumn":26},{"ruleId":"30","severity":1,"message":"31","line":37,"column":21,"nodeType":"32","messageId":"25","endLine":37,"endColumn":23},"no-eval","eval can be harmful.","CallExpression","unexpected","no-unused-vars","'ConfigStatusMessage' is defined but never used.","Identifier","unusedVar","eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression"]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2c0856e5..14c17c9e 100644
--- 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=="
         }
     }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 0f7cfd7a..2bef9eff 100644
--- 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"
     }
-
 }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 0273e50b..e7da157e 100644
--- 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/
diff --git a/src/LoginPage.js b/src/LoginPage.js
index 28371f3e..a21e4967 100644
--- 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>
diff --git a/src/css/login.css b/src/css/login.css
index da76a756..b41bd9e7 100644
--- 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;
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index bb8ecbe2..c53c9ca9 100644
--- 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')
\ No newline at end of file
+bootstrapApplication('en')