Add registration app

This commit is contained in:
Paulo Gustavo Veiga 2020-11-30 14:49:47 -08:00
parent a7f42ce83a
commit df02fa9b4c
5 changed files with 113 additions and 9 deletions

View File

@ -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"]

View File

@ -44,9 +44,9 @@
"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"
}
}
}

View File

@ -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;

103
src/RegistrationApp.js Normal file
View File

@ -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;

View File

@ -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(