Add i18n

.eslintcache

@@ -0,0 +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":701,"mtime":1606446171817,"results":"5","hashOfConfig":"6"},{"size":1536,"mtime":1606517031518,"results":"7","hashOfConfig":"6"},{"size":554,"mtime":1606496703139,"results":"8","hashOfConfig":"6"},{"size":3622,"mtime":1606512919931,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"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",["18"],"/Users/pveiga/repos/wisemapping-react/src/Header.js",["19"],"/Users/pveiga/repos/wisemapping-react/src/index.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginPage.js",["20"],{"ruleId":"21","severity":1,"message":"22","line":8,"column":17,"nodeType":"23","endLine":8,"endColumn":58},{"ruleId":"24","severity":1,"message":"25","line":46,"column":5,"nodeType":"26","messageId":"27","endLine":48,"endColumn":6},{"ruleId":"28","severity":1,"message":"29","line":6,"column":7,"nodeType":"30","messageId":"31","endLine":6,"endColumn":26},"jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","no-useless-constructor","Useless constructor.","MethodDefinition","noUselessConstructor","no-unused-vars","'ConfigStatusMessage' is defined but never used.","Identifier","unusedVar"]

package-lock.json

@@ -1,11 +1,11 @@
 {
-    "name": "my-app",
+    "name": "wisemapping-react",
     "version": "0.1.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
-            "name": "my-app",
+            "name": "wisemapping-reactp",
             "version": "0.1.0",
             "dependencies": {
                 "@testing-library/jest-dom": "^5.11.6",
@@ -4741,8 +4741,7 @@
             "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"
                 },
@@ -4979,8 +4978,7 @@
             "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"
                 },
@@ -6850,12 +6848,10 @@
             "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",
@@ -8681,12 +8677,10 @@
             "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"
             }
@@ -9342,8 +9336,7 @@
             "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"
                 },
@@ -9805,8 +9798,7 @@
             "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"
                 },
@@ -17084,8 +17076,7 @@
             "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"
                 },
@@ -18438,8 +18429,7 @@
             "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

@@ -1,5 +1,5 @@
 {
-    "name": "my-app",
+    "name": "wisemapping-react",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
@@ -19,7 +19,6 @@
         "eject": "react-scripts eject",
         "extract": "formatjs extract",
         "compile": "formatjs compile"
-
     },
     "eslintConfig": {
         "extends": [

src/Header.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl'
+
 
 class Header extends React.Component {
-
     constructor(props) {
         super(props);
         this.state = {
@@ -10,19 +11,26 @@ class Header extends React.Component {
     }
 
     render() {
-        let buttons;
+        let signUpButton;
+        let signInButton;
+        let text;
+
         const pageType = this.state.type;
-        if (pageType == 'login') {
+        if (pageType === 'login') {
-            buttons = <SignUpButton/>;
+            text = <span class="nav-center"><FormattedMessage id="DONT_HAVE_ACCOUNT" defaultMessage="Don't have an account ?" /></span>;
+            signUpButton = <SignUpButton/>;
         } else {
-            buttons = <span><SignUpButton/><SignInButton/></span>;
+            signUpButton = <SignUpButton/>
+            signInButton = <SignInButton/>;
         }
 
         return (
             <nav>
                 <div class="header">
                     <span class="header-logo"><a href="/"><img src="images/header-logo.png" alt="logo" /></a></span>
-                    {buttons}
+                    {text}
+                    {signUpButton}
+                    {signInButton}
                 </div>
             </nav>
         ) 
@@ -35,8 +43,14 @@ class SignInButton extends React.Component {
     }
 }
 class SignUpButton extends React.Component {
+    constructor(props) {
+        super(props);
+    }
     render() {
-        return <span class="nav-signup"><a href="https://app.wisemapping.com/c/user/registration">Sign Up</a></span>;
+        return (
+            <span class="nav-signup button-style1">
+                <a href="https://app.wisemapping.com/c/user/registration">Sign Up</a>
+            </span>);
     }
 }
 

src/LoginPage.js

@@ -13,10 +13,11 @@ class ConfigStatusMessage extends React.Component {
 
   render() {
     return (
+      <div class="db-warn-msg">
         <p>
-        <FormattedMessage id="NO_PRODUCTION_DATABASE_CONFIGURED" defaultMessage="Missing production database configured" description="Missing production database configured" />
+          <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>
-        <a href="https://wisemapping.atlassian.net/wiki/display/WS/Database+Configuration"></a>.
         </p>
+      </div>
     );
   }
 }
@@ -65,19 +66,21 @@ class LoginForm extends React.Component {
               <label for="staySignIn"><FormattedMessage id="REMEMBER_ME" defaultMessage="Remember me" /></label>
             </div>
 
-            <input type="submit" value={intl.formatMessage({ id: "SING_IN", defaultMessage: 'Sign In' })} value={this.state.value} />
+            <input type="submit" value={intl.formatMessage({ id: "SING_IN", defaultMessage: 'Sign In' })} />
           </form>
-          <a hef="forgot"><FormattedMessage id="FORGOT_PASSWORD" defaultMessage="Forgot Password ?" /></a>
+          <a href="resetPassword"><FormattedMessage id="FORGOT_PASSWORD" defaultMessage="Forgot Password ?" /></a>
         </div>
       </div>
     );
   }
 }
 
+// Internationalize setup ....
 const cache = createIntlCache()
 
 // @Todo: Review ...
 var intl = null;
+
 class LoginPage extends React.Component {
   constructor(props) {
     super(props);
@@ -105,7 +108,7 @@ class LoginPage extends React.Component {
         <div>
           <Header type='login' />
           <LoginForm />
-          <ConfigStatusMessage enabled='true' />
+          {/* <ConfigStatusMessage enabled='true' /> */}
           <Footer />
         </div>
       </IntlProvider>

src/css/core.css

@@ -126,42 +126,23 @@ nav a {
     color: #ffa800;
 }
 
-.nav-signin,
-.nav-signup {
-    margin: 20px 0px;
-    font-size: 16px;
-    font-weight: 700;
-}
-
 .nav-signin {
     grid-column-start: 4;
+    margin: 20px 0px;
 }
 
 .nav-signup {
     grid-column-start: 3;
+    margin: 20px 0px;
 }
 
-.nav-signin a {
+.nav-center {
-    color: #ffa800;
+    text-align: left;
-    background-color: white;
+    grid-column-start: 2;
-}
+    text-align: right;
-
+    font-weight: 500;
-.nav-signup a {
+    font-size: 15px;
-    margin-top: 8px;
+    padding: 20px 10px;
-    font-size: 16px;
-    font-weight: 600;
-    font-stretch: normal;
-    font-style: normal;
-    letter-spacing: normal;
-    color: #ffffff;
-    border-radius: 9px;
-    border: 0px;
-    background-color: #ffa800;
-}
-
-.nav-signup a:hover {
-    background-color: #f8c255;
-    color: white;
 }
 
 .footer {
@@ -182,3 +163,29 @@ nav a {
 .footer img {
     float: left;
 }
+
+
+/* Buttons */
+
+.button-style1 {
+    font-size: 16px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    letter-spacing: normal;
+    border-radius: 9px;
+}
+
+.button-style1 a {
+    border: solid 1px #f9a826;
+    color: #ffa800;
+    padding: 10px 30px 10px 30px;
+    background-color: white;
+    transition: background-color 0.3s ease;
+}
+
+.button-style1 a:hover {
+    color: white;
+    background-color: rgba(255, 168, 0, 0.6);
+    border: 0px;
+}

src/css/login.css

@@ -26,15 +26,19 @@
     height: 53px;
     padding: 0px 20px;
     margin: 10px 20px;
+    font-size: 20px;
     font-weight: 600;
     border-radius: 9px;
     border: 0px;
     background-color: rgba(255, 168, 0, 0.6);
     color: white;
-    font-size: 20px;
 }
 
-.content input::placeholder {
+input[type=submit]:hover {
+    background-color: #f9a826;
+}
+
+.content input:placeholder {
     color: grey;
 }
 
@@ -43,10 +47,26 @@
 }
 
 .content input[type=checkbox] {
-    border: solid 1px #f9a826;
+    /* border: solid 1px #f9a826; */
+    background-color: #f9a826;
 }
 
 .content a {
     color: #f9a826;
     font-size: 15px;
 }
+
+.db-warn-msg {
+    margin-top: 30px;
+    width: 100%;
+}
+
+.db-warn-msg p {
+    margin: 0 auto;
+    width: 500px;
+    background-color: #e97450;
+    font-size: 15px;
+    color: white;
+    padding: 15px 30px;
+    border-radius: 10px;
+}

src/index.js

@@ -21,5 +21,5 @@ async function bootstrapApplication(locale) {
     document.getElementById('root')
   )
 }
-
+// @Todo: Is this correct ?
 bootstrapApplication('en')

src/lang/en.json

@@ -1,4 +1,7 @@
 {
+  "DONT_HAVE_ACCOUNT": {
+    "defaultMessage": "Don't have an account ?"
+  },
   "EMAIL": {
     "defaultMessage": "Email"
   },
@@ -8,6 +11,10 @@
   "LOG_INTO": {
     "defaultMessage": "Log Into Your Account"
   },
+  "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"
+  },
   "PASSWORD": {
     "defaultMessage": "Password"
   },