Add i18n

2024-11-13 02:37:57 +01:00 · 2020-11-27 14:52:35 -08:00 · 2020-11-27 14:52:35 -08:00 · 4247af3281
commit 4247af3281
parent e49de0c633
9 changed files with 117 additions and 76 deletions
--- a/.eslintcache
+++ b/.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"]
--- a/package-lock.json
+++ b/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": [
-                {
-                    "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",
@ -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": [
-                {
-                    "type": "individual",
-                    "url": "https://github.com/sponsors/RubenVerborgh"
-                }
-            ],
+            "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"
                },
@ -38712,4 +38702,4 @@
            "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
        }
    }
-}
+}
--- a/package.json
+++ b/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": [
--- a/src/Header.js
+++ b/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') {
-            buttons = <SignUpButton/>;
+        if (pageType === 'login') {
+            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>);
    }
 }

--- a/src/LoginPage.js
+++ b/src/LoginPage.js
@ -13,10 +13,11 @@ class ConfigStatusMessage extends React.Component {

  render() {
    return (
-      <p>
-        <FormattedMessage id="NO_PRODUCTION_DATABASE_CONFIGURED" defaultMessage="Missing production database configured" description="Missing production database configured" />
-        <a href="https://wisemapping.atlassian.net/wiki/display/WS/Database+Configuration"></a>.
-      </p>
+      <div class="db-warn-msg">
+        <p>
+          <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>
+        </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);
@ -96,7 +99,7 @@ class LoginPage extends React.Component {
      },
      messages,
      cache
-    )    
+    )
  }

  render() {
@ -105,7 +108,7 @@ class LoginPage extends React.Component {
        <div>
          <Header type='login' />
          <LoginForm />
-          <ConfigStatusMessage enabled='true' />
+          {/* <ConfigStatusMessage enabled='true' /> */}
          <Footer />
        </div>
      </IntlProvider>
--- a/src/css/core.css
+++ b/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 {
-    color: #ffa800;
-    background-color: white;
-}
-
-.nav-signup a {
-    margin-top: 8px;
-    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;
+.nav-center {
+    text-align: left;
+    grid-column-start: 2;
+    text-align: right;
+    font-weight: 500;
+    font-size: 15px;
+    padding: 20px 10px;
 }

 .footer {
@ -181,4 +162,30 @@ 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;
 }
--- a/src/css/login.css
+++ b/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;
 }
--- a/src/index.js
+++ b/src/index.js
@ -21,5 +21,5 @@ async function bootstrapApplication(locale) {
    document.getElementById('root')
  )
 }
-
+// @Todo: Is this correct ?
 bootstrapApplication('en')
--- a/src/lang/en.json
+++ b/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"
  },
				`@ -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"]