Add router to simplify navidation

.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/RegistrationApp.js":"4","/Users/pveiga/repos/wisemapping-react/src/LoginApp.js":"5"},{"size":1609,"mtime":1607011308675,"results":"6","hashOfConfig":"7"},{"size":1924,"mtime":1607015196109,"results":"8","hashOfConfig":"7"},{"size":1883,"mtime":1607118506285,"results":"9","hashOfConfig":"7"},{"size":4123,"mtime":1607126426627,"results":"10","hashOfConfig":"7"},{"size":3519,"mtime":1607114188755,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","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",[],"/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js",["22"],"/Users/pveiga/repos/wisemapping-react/src/LoginApp.js",[],{"ruleId":"23","severity":1,"message":"24","line":59,"column":13,"nodeType":"25","messageId":"26","endLine":59,"endColumn":19},"no-unused-vars","'status' is assigned a value 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","/Users/pveiga/repos/wisemapping-react/src/RegistrationPage.js":"5"},{"size":1609,"mtime":1607011308675,"results":"6","hashOfConfig":"7"},{"size":1924,"mtime":1607015196109,"results":"8","hashOfConfig":"7"},{"size":1385,"mtime":1607144319143,"results":"9","hashOfConfig":"7"},{"size":3359,"mtime":1607141115584,"results":"10","hashOfConfig":"7"},{"size":4573,"mtime":1607143971378,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xegajf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","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",[],"/Users/pveiga/repos/wisemapping-react/src/LoginPage.js",["22"],"/Users/pveiga/repos/wisemapping-react/src/RegistrationPage.js",[],{"ruleId":"23","severity":1,"message":"24","line":4,"column":28,"nodeType":"25","messageId":"26","endLine":4,"endColumn":40},"no-unused-vars","'IntlProvider' is defined but never used.","Identifier","unusedVar"]

src/App.js

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import RegistrationApp from './RegistrationApp.js';
+import LoginPage from './LoginPage.js';
+
+const Apps = Object.freeze({
+    LOGIN: {
+        id: 'login',
+        path: '/c/login'
+    },
+    REGISTRATION: {
+        id: 'registration',
+        path: '/c/user/registration'
+    }
+});
+
+function router() {
+    let result = null;
+
+    // Is it running ebedded ?.
+    const location = window.location;
+    if (location.pathname.indexOf('/c/') !== -1) {
+        const pathname = location.pathname;
+        result = Object.values(Apps).find(value => value.path.endsWith(pathname));
+    } else {
+        // It's loaded from the npm start
+        const pageId = new URLSearchParams(location.search).get('app');
+        result = Object.values(Apps).find(value => value.id === pageId);
+    }
+    if (result === null) {
+        result = Apps.LOGIN;
+    }
+
+    console.log("router():" + result);
+    return result;
+}
+
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+   
+    render()
+    {
+        const locale = this.props.locale;
+        const messages = this.props.messages;
+
+        // Todo: This is a temporal hack to rudimentary dispatch application.
+        let rootPage;
+        switch (router()) {
+            case Apps.LOGIN:
+                rootPage = <LoginPage locale = { locale }
+                messages = { messages }
+                />;
+                break
+            case Apps.REGISTRATION:
+                rootPage = <RegistrationApp locale = { locale }
+                messages = { messages }
+                />;
+                break
+            default:
+                rootPage = <LoginPage locale = { locale }
+                messages = { messages }
+                />;
+        }
+
+        return rootPage;
+        
+    }
+
+}
+export default App;

src/LoginPage.js

@@ -47,7 +47,6 @@ const LoginError = (props) => {
 
 class LoginForm extends React.Component {
   render() {
-
     const intl = this.props.intl;
     return (
       <div className="wrapper">
@@ -74,23 +73,18 @@ class LoginForm extends React.Component {
   }
 }
 
-const LoginApp = (props) => {
+const LoginPage = (props) => {
-  const messages = props.messages;
-  const locale = props.locale;
-
   return (
-    <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
       <div>
         <Header type='only-signup' />
         <LoginForm />
         <ConfigStatusMessage enabled='false' />
         <Footer />
       </div>
-    </IntlProvider>
   );
 }
 
 LoginForm = injectIntl(LoginForm)
 
-export default LoginApp;
+export default LoginPage;
 

src/RegistrationPage.js

@@ -2,7 +2,9 @@ import './css/registration.css';
 
 import React from 'react';
 import axios from 'axios';
-import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
+import { useHistory } from "react-router-dom";
+
 import ReCAPTCHA from "react-google-recaptcha";
 
 import Header from './Header.js';
@@ -51,15 +53,15 @@ class RegistrationForm extends React.Component {
       rest,
       { headers: { 'Content-Type': 'application/json' } }
     ).then(response => {
-      alert(response.data);
+      const history = useHistory();
-      this.setState({ errorMsg: "Error Message" });
+      history.push("/c/user/registrationSuccess");
     }).catch(error => {
       // Handle error ...
       const data = error.response.data;
-      const status = error.response.status;
+      // const status = error.response.status;
 
       const errorMsg = Object.values(data.fieldErrors)[0];
-      this.setState({ "errorMsg": errorMsg});
+      this.setState({ "errorMsg": errorMsg });
     });
   }
 
@@ -98,23 +100,33 @@ class RegistrationForm extends React.Component {
     );
   }
 }
+RegistrationForm = injectIntl(RegistrationForm);
 
-const RegistationApp = props => {
+const RegistationFormPage = props => {
-  const messages = props.messages;
-  const locale = props.locale;
-
   return (
-    <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
+    <div>
-      <div>
+      <Header type='only-signin' />
-        <Header type='only-signin' />
+      <RegistrationForm />
-        <RegistrationForm />
+      <Footer />
-        <Footer />
+    </div>
-      </div>
-    </IntlProvider>
   );
 }
 
-RegistrationForm = injectIntl(RegistrationForm)
+const RegistrationSuccessPage = (props) => {
+  return (
+    <div>
+      <Header type='only-signup' />
+      <div className="wrapper">
+        <div className="content">
+          <h1><FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" /></h1>
+          <p><FormattedMessage id="registration.success.desc" defaultMessage="Your account has been created successfully, click to sign in and start enjoying  WiseMapping." /></p>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export { RegistationFormPage, RegistrationSuccessPage };
 
-export default RegistationApp;
 

src/index.js

@@ -1,7 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import LoginApp from './LoginApp.js';
+import LoginPage from './LoginPage.js';
-import RegistationApp from './RegistrationApp';
+import { RegistrationSuccessPage, RegistationFormPage } from './RegistrationPage';
+import { IntlProvider } from 'react-intl'
+import {
+  BrowserRouter as Router,
+  Route,
+  Switch,
+  Redirect
+} from 'react-router-dom';
+
 
 function loadLocaleData(language) {
   switch (language) {
@@ -12,38 +20,6 @@ function loadLocaleData(language) {
   }
 }
 
-const Apps = Object.freeze({
-  LOGIN: {
-    id: 'login',
-    path: '/c/login'
-  },
-  REGISTRATION: {
-    id: 'registration',
-    path: '/c/user/registration'
-  }
-});
-
-function router() {
-  let result = null;
-
-  // Is it running ebedded ?.
-  const location = window.location;
-  if (location.pathname.indexOf('/c/') !== -1) {
-    const pathname = location.pathname;
-    result = Object.values(Apps).find(value => value.path.endsWith(pathname));
-  } else {
-    // It's loaded from the npm start
-    const pageId = new URLSearchParams(location.search).get('app');
-    result = Object.values(Apps).find(value => value.id === pageId);
-  }
-  if (result === null) {
-    result = Apps.LOGIN;
-  }
-
-  console.log("router():" + result);
-  return result;
-}
-
 async function bootstrapApplication() {
 
   // Boostrap i18n ...
@@ -51,24 +27,23 @@ async function bootstrapApplication() {
     || navigator.language
     || navigator.userLanguage
     || 'en-US';
+
   const language = locale.split('-')[0];
   const messages = (await loadLocaleData(language));
 
-  // Todo: This is a temporal hack to rudimentary dispatch application.
-  let rootPage;
-  switch (router()) {
-    case Apps.LOGIN:
-      rootPage = <LoginApp locale={locale} messages={messages} />;
-      break
-    case Apps.REGISTRATION:
-      rootPage = <RegistationApp locale={locale} messages={messages} />;
-      break
-    default:
-      rootPage = <LoginApp locale={locale} messages={messages} />;
-  }
-
   ReactDOM.render(
-    rootPage,
+    <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
+      <Router>
+        <Switch>
+          <Route exact path="/">
+            <Redirect to="/c/login" />
+          </Route>
+          <Route path="/c/login" render={() => <LoginPage />} />
+          <Route path="/c/user/registration" render={() => <RegistationFormPage />} />
+          <Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} />
+        </Switch>
+      </Router>
+    </IntlProvider>,
     document.getElementById('root')
   )
 }