mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Add router to simplify navidation
This commit is contained in:
parent
0d3414dcb5
commit
08517ca3f2
@ -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"]
|
72
src/App.js
Normal file
72
src/App.js
Normal file
@ -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;
|
@ -47,7 +47,6 @@ const LoginError = (props) => {
|
|||||||
|
|
||||||
class LoginForm extends React.Component {
|
class LoginForm extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
const intl = this.props.intl;
|
const intl = this.props.intl;
|
||||||
return (
|
return (
|
||||||
<div className="wrapper">
|
<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 (
|
return (
|
||||||
<IntlProvider locale={locale} defaultLocale='en' messages={messages}>
|
|
||||||
<div>
|
<div>
|
||||||
<Header type='only-signup' />
|
<Header type='only-signup' />
|
||||||
<LoginForm />
|
<LoginForm />
|
||||||
<ConfigStatusMessage enabled='false' />
|
<ConfigStatusMessage enabled='false' />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</IntlProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
LoginForm = injectIntl(LoginForm)
|
LoginForm = injectIntl(LoginForm)
|
||||||
|
|
||||||
export default LoginApp;
|
export default LoginPage;
|
||||||
|
|
@ -2,7 +2,9 @@ import './css/registration.css';
|
|||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import axios from 'axios';
|
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 ReCAPTCHA from "react-google-recaptcha";
|
||||||
|
|
||||||
import Header from './Header.js';
|
import Header from './Header.js';
|
||||||
@ -51,12 +53,12 @@ class RegistrationForm extends React.Component {
|
|||||||
rest,
|
rest,
|
||||||
{ headers: { 'Content-Type': 'application/json' } }
|
{ headers: { 'Content-Type': 'application/json' } }
|
||||||
).then(response => {
|
).then(response => {
|
||||||
alert(response.data);
|
const history = useHistory();
|
||||||
this.setState({ errorMsg: "Error Message" });
|
history.push("/c/user/registrationSuccess");
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
// Handle error ...
|
// Handle error ...
|
||||||
const data = error.response.data;
|
const data = error.response.data;
|
||||||
const status = error.response.status;
|
// const status = error.response.status;
|
||||||
|
|
||||||
const errorMsg = Object.values(data.fieldErrors)[0];
|
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 (
|
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;
|
|
||||||
|
|
71
src/index.js
71
src/index.js
@ -1,7 +1,15 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
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) {
|
function loadLocaleData(language) {
|
||||||
switch (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() {
|
async function bootstrapApplication() {
|
||||||
|
|
||||||
// Boostrap i18n ...
|
// Boostrap i18n ...
|
||||||
@ -51,24 +27,23 @@ async function bootstrapApplication() {
|
|||||||
|| navigator.language
|
|| navigator.language
|
||||||
|| navigator.userLanguage
|
|| navigator.userLanguage
|
||||||
|| 'en-US';
|
|| 'en-US';
|
||||||
|
|
||||||
const language = locale.split('-')[0];
|
const language = locale.split('-')[0];
|
||||||
const messages = (await loadLocaleData(language));
|
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(
|
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')
|
document.getElementById('root')
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user