Move images as part of the bundle.

.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":1728,"mtime":1606520682659,"results":"5","hashOfConfig":"6"},{"size":1577,"mtime":1606519756685,"results":"7","hashOfConfig":"6"},{"size":554,"mtime":1606522800588,"results":"8","hashOfConfig":"6"},{"size":3712,"mtime":1606522489344,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"12","messages":"13","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"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},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",["18"],"/Users/pveiga/repos/wisemapping-react/src/index.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginPage.js",["19"],{"ruleId":"20","severity":1,"message":"21","line":46,"column":5,"nodeType":"22","messageId":"23","endLine":48,"endColumn":6},{"ruleId":"24","severity":1,"message":"25","line":6,"column":7,"nodeType":"26","messageId":"27","endLine":6,"endColumn":26},"no-useless-constructor","Useless constructor.","MethodDefinition","noUselessConstructor","no-unused-vars","'ConfigStatusMessage' is defined but never used.","Identifier","unusedVar"]
+[{"/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":1550,"mtime":1606529544343,"results":"7","hashOfConfig":"6"},{"size":554,"mtime":1606522800588,"results":"8","hashOfConfig":"6"},{"size":3494,"mtime":1606528432477,"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":null},"/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",["18"],{"ruleId":"19","severity":1,"message":"20","line":6,"column":7,"nodeType":"21","messageId":"22","endLine":6,"endColumn":26},"no-unused-vars","'ConfigStatusMessage' is defined but never used.","Identifier","unusedVar"]

package.json

@@ -38,7 +38,9 @@
             "last 1 safari version"
         ]
     },
+    "homepage": "http://localhost:8080/react/login/",
     "devDependencies": {
         "@formatjs/cli": "^2.13.14"
     }
+
 }

public/index.html

@@ -7,7 +7,7 @@
     <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" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <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/

public/manifest.json

@@ -1,25 +1,19 @@
 {
-  "short_name": "React App",
+    "short_name": "React App",
-  "name": "Create React App Sample",
+    "name": "Create React App Sample",
-  "icons": [
+    "icons": [{
-    {
+            "src": "favicon.ico",
-      "src": "favicon.ico",
+            "sizes": "64x64 32x32 24x24 16x16",
-      "sizes": "64x64 32x32 24x24 16x16",
+            "type": "image/x-icon"
-      "type": "image/x-icon"
+        },
-    },
+        {
-    {
+            "src": "favicon.png",
-      "src": "logo192.png",
+            "type": "image/png",
-      "type": "image/png",
+            "sizes": "512x512"
-      "sizes": "192x192"
+        }
-    },
+    ],
-    {
+    "start_url": ".",
-      "src": "logo512.png",
+    "display": "standalone",
-      "type": "image/png",
+    "theme_color": "#000000",
-      "sizes": "512x512"
+    "background_color": "#ffffff"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
 }

src/Footer.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl'
-
+import { ReactComponent as Logo } from './images/logo-text.svg'
 
 class Footer extends React.Component {
     render() {
         return (
             <footer class="footer">
-                <img src="images/text-wisemapping.svg" alt="logo"/>
+                <Logo/>
                 <div>
                     <div><a href="termsofuse.html"><FormattedMessage id="TERMS_AND_CONDITIONS" defaultMessage="Term And Conditions" /></a></div>
                     <div><a href="faq.html"><FormattedMessage id="FAQ" defaultMessage="F.A.Q." /></a></div>

src/Header.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl'
+import logo from './images/header-logo.png'
 
 
 class Header extends React.Component {
@@ -27,7 +28,7 @@ class Header extends React.Component {
         return (
             <nav>
                 <div class="header">
-                    <span class="header-logo"><a href="/"><img src="images/header-logo.png" alt="logo" /></a></span>
+                    <span class="header-logo"><a href="/"><img src={logo} alt="logo" /></a></span>
                     {text}
                     {signUpButton}
                     {signInButton}

src/LoginPage.js

@@ -32,7 +32,6 @@ class LoginForm extends React.Component {
     };
 
     this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   handleInputChange(event) {
@@ -45,11 +44,6 @@ class LoginForm extends React.Component {
     });
   };
 
-  handleSubmit(event) {
-    // @todo: implements in the future ...
-    // event.preventDefault();
-  }
-
   render() {
     return (
       <div class="wrapper">
@@ -57,13 +51,13 @@ class LoginForm extends React.Component {
           <h1><FormattedMessage id="WELCOME" defaultMessage="Welcome" /></h1>
           <p><FormattedMessage id="LOG_INTO" defaultMessage="Log Into Your Account" /></p>
 
-          <form onSubmit={this.handleSubmit} action="/c/j_spring_security_check" method="post">
+          <form action="/c/perform-login" method="POST">
-            <input type="email" name="j_username" placeholder={intl.formatMessage({ id: "EMAIL", defaultMessage: 'Email' })} value={this.state.value} onChange={this.handleInputChange} required />
+            <input type="email" name="username" placeholder={intl.formatMessage({ id: "EMAIL", defaultMessage: 'Email' })} value={this.state.value} onChange={this.handleInputChange} required />
-            <input type="password" name="j_password" placeholder={intl.formatMessage({ id: "PASSWORD", defaultMessage: 'Password' })} 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" checked={this.state.staySignIn} onChange={this.handleInputChange} />
-              <label for="_spring_security_remember_me"><FormattedMessage id="REMEMBER_ME" defaultMessage="Remember me" /></label>
+              <label for="staySignIn"><FormattedMessage id="REMEMBER_ME" defaultMessage="Remember me" /></label>
             </div>
 
             <input type="submit" value={intl.formatMessage({ id: "SING_IN", defaultMessage: 'Sign In' })} />