Add registration app

.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":1601,"mtime":1606716377431,"results":"5","hashOfConfig":"6"},{"size":1572,"mtime":1606670050593,"results":"7","hashOfConfig":"6"},{"size":1830,"mtime":1606768674181,"results":"8","hashOfConfig":"6"},{"size":4064,"mtime":1606716464165,"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":"16"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/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"],"import './css/login.css';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport LoginPage from './LoginPage.js';\n\nfunction loadLocaleData(language) {\n  switch (language) {\n    case 'es':\n      return import('./compiled-lang/es.json')\n    default:\n      return import('./compiled-lang/en.json')\n  }\n}\n\nconst Apps = Object.freeze({\n  LOGIN: {\n    id: 'login',\n    path: '/c/login'\n  },\n  REGISTRATION: {\n    id: 'registration',\n    path: '/c/user/registration'\n  }\n});\n\nfunction router() {\n  let result = null;\n\n  // Is it running ebedded ?.\n  const location = window.location;\n  if (location.pathname.indexOf('/c/') !== -1) {\n    const pathname = location.pathname;\n    result = Object.values(Apps).find(value => value.path.endsWith(pathname));\n  } else {\n    // It's loaded from the npm start\n    const pageId = new URLSearchParams(location.search).get('app');\n    result = Object.values(Apps).find(value => value.id == pageId);\n  }\n  if (result === null) {\n    result = Apps.LOGIN;\n  }\n\n  console.log(\"router():\" + result);\n  return result;\n}\n\nasync function bootstrapApplication() {\n\n  // Boostrap i18n ...\n  const locale = (navigator.languages && navigator.languages[0])\n    || navigator.language\n    || navigator.userLanguage\n    || 'en-US';\n  const language = locale.split('-')[0];\n  const messages = (await loadLocaleData(language));\n\n  // Todo: This is a temporal hack to rudimentary dispatch application.\n  let rootPage;\n  switch (router()) {\n    case Apps.LOGIN:\n      rootPage = <LoginPage locale={locale} messages={messages} />;\n      break\n    case Apps.REGISTRATION:\n      rootPage = <div>Register</div>;\n      break\n    default:\n      rootPage = <LoginPage locale={locale} messages={messages} />;\n  }\n\n  ReactDOM.render(\n    rootPage,\n    document.getElementById('root')\n  )\n}\n\nbootstrapApplication()\n","/Users/pveiga/repos/wisemapping-react/src/LoginPage.js",[],{"ruleId":"20","severity":1,"message":"21","line":38,"column":57,"nodeType":"22","messageId":"23","endLine":38,"endColumn":59},"eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected"]
+[{"/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/RegistrationApp.js":"4"},{"size":1601,"mtime":1606716377431,"results":"5","hashOfConfig":"6"},{"size":1572,"mtime":1606670050593,"results":"7","hashOfConfig":"6"},{"size":1826,"mtime":1606776455622,"results":"8","hashOfConfig":"6"},{"size":3257,"mtime":1606776552866,"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":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/pveiga/repos/wisemapping-react/src/Footer.js",[],"/Users/pveiga/repos/wisemapping-react/src/Header.js",[],"/Users/pveiga/repos/wisemapping-react/src/index.js",["18"],"/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js",[],{"ruleId":"19","severity":1,"message":"20","line":38,"column":57,"nodeType":"21","messageId":"22","endLine":38,"endColumn":59},"eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected"]

package.json

@@ -44,7 +44,7 @@
             "last 1 safari version"
         ]
     },
-    "homepage": "http://localhost:8080/react/login/",
+    "homepage": "http://localhost:8080/react",
     "license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL",
     "devDependencies": {
         "@formatjs/cli": "^2.13.14"

src/LoginApp.js

@@ -97,7 +97,7 @@ class LoginForm extends React.Component {
   }
 }
 
-class LoginPage extends React.Component {
+class LoginApp extends React.Component {
   constructor(props) {
     super(props);
 
@@ -125,5 +125,5 @@ class LoginPage extends React.Component {
 }
 LoginForm = injectIntl(LoginForm)
 
-export default LoginPage;
+export default LoginApp;
 

src/RegistrationApp.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl'
+
+import Header from './Header.js';
+import Footer from './Footer.js';
+
+class RegistrationError extends React.Component {
+  constructor(props) {
+    super(props)
+    // @Todo: This must be reviewed to be based on navigation state.
+    // Login error example: http://localhost:8080/c/login?login.error=2
+    const errorCode = new URLSearchParams(window.location.search).get('login_error');
+    this.state = {
+      errorCode: errorCode
+    }
+  }
+
+  render() {
+
+    let result;
+    const errorCode = this.state.errorCode;
+    if (errorCode) {
+      if (errorCode === 3) {
+        result = (
+          <div class='error'>
+            <FormattedMessage id="login.userinactive" defaultMessage="Sorry, your account has not been activated yet. You'll receive a notification login.email when it becomes active. Stay tuned!." />
+          </div>)
+      } else {
+        result = (
+          <div class='error'>
+            <FormattedMessage id="login.error" defaultMessage="The login.email address or login.password you entered is  not valid." />
+          </div>)
+      }
+    }
+    return (<span>{result}</span>);
+  }
+}
+
+class RegistrationForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      intl: props.intl
+    }
+  }
+
+  render() {
+
+    const intl = this.props.intl;
+    return (
+      <div class="wrapper">
+        <div class="content">
+          <h1><FormattedMessage id="registration.welcome" defaultMessage="Registration" /></h1>
+          <p><FormattedMessage id="registration.loginto" defaultMessage="Log Into Your Account" /></p>
+
+          <RegistrationError/>
+
+          <form action="/c/perform-login" method="POST">
+            <input type="email" name="username" placeholder={intl.formatMessage({ id: "login.email", defaultMessage: "Email" })} required="true" autocomplete="email" />
+            <input type="password" name="password" placeholder={intl.formatMessage({ id: "login.password", defaultMessage: "Password" })} required="true" autocomplete="current-password" />
+
+            <div>
+              <input name="_spring_security_login.remberme" id="staySignIn" type="checkbox" />
+              <label for="staySignIn"><FormattedMessage id="login.remberme" defaultMessage="Remember me" /></label>
+            </div>
+            <input type="submit" value={intl.formatMessage({ id: "login.signin", defaultMessage: "Sign In" })} />
+          </form>
+          <a href="/c/user/resetPassword"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></a>
+        </div>
+      </div>
+    );
+  }
+}
+
+class RegistationApp extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const messages = props.messages;
+    const locale = props.locale;
+
+    this.state = {
+      locale: locale,
+      messages: messages
+    };
+  }
+
+  render() {
+    return (
+      <IntlProvider locale={this.state.locale} defaultLocale='en' messages={this.state.messages}>
+        <div>
+          <Header type='none' />
+          <RegistrationForm />
+          <Footer />
+        </div>
+      </IntlProvider>
+    );
+  }
+}
+RegistrationForm = injectIntl(RegistrationForm)
+
+export default RegistationApp;
+

src/index.js

@@ -2,7 +2,8 @@ import './css/login.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import LoginPage from './LoginPage.js';
+import LoginApp from './LoginApp.js';
+import RegistationApp from './RegistrationApp';
 
 function loadLocaleData(language) {
   switch (language) {
@@ -59,13 +60,13 @@ async function bootstrapApplication() {
   let rootPage;
   switch (router()) {
     case Apps.LOGIN:
-      rootPage = <LoginPage locale={locale} messages={messages} />;
+      rootPage = <LoginApp locale={locale} messages={messages} />;
       break
     case Apps.REGISTRATION:
-      rootPage = <div>Register</div>;
+      rootPage = <RegistationApp locale={locale} messages={messages} />;
       break
     default:
-      rootPage = <LoginPage locale={locale} messages={messages} />;
+      rootPage = <LoginApp locale={locale} messages={messages} />;
   }
 
   ReactDOM.render(