mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-24 15:37:55 +01:00
refactor: support lerna, include @wisemapping/login into webapp
This commit is contained in:
Ezequiel Bergamaschi
parent
76fca84366
commit
937f5ff9cb
8
lerna.json
Normal file
8
lerna.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"packages": [
|
||||
"packages/*"
|
||||
],
|
||||
"version": "1.0.0",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true
|
||||
}
|
||||
62
package.json
62
package.json
@ -1,57 +1,17 @@
|
||||
{
|
||||
"name": "wisemapping-react",
|
||||
"version": "0.1.4",
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.11.6",
|
||||
"@testing-library/react": "^11.2.2",
|
||||
"@testing-library/user-event": "^12.2.2",
|
||||
"axios": "^0.21.0",
|
||||
"cors": "^2.8.5",
|
||||
"joi": "^17.3.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-google-recaptcha": "^2.1.0",
|
||||
"react-intl": "^5.10.5",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.1",
|
||||
"web-vitals": "^0.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"extract": "formatjs extract",
|
||||
"compile": "formatjs compile"
|
||||
"bootstrap": "lerna bootstrap",
|
||||
"build": "lerna run build",
|
||||
"clean": "lerna clean && rm -rf node_modules",
|
||||
"lint": "lerna run lint",
|
||||
"test": "lerna run test"
|
||||
},
|
||||
"author": {
|
||||
"name": "Paulo Veiga",
|
||||
"login.email": "pveiga@wisemapping.com"
|
||||
},
|
||||
"contributors": [
|
||||
"Ezequiel Bergamaschi"
|
||||
],
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"homepage": "http://localhost:8080/react",
|
||||
"license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@formatjs/cli": "^2.13.14"
|
||||
}
|
||||
"lerna": "^3.16.4"
|
||||
},
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
]
|
||||
}
|
||||
|
||||
13
packages/editor/index.html
Normal file
13
packages/editor/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Wisemapping</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- React app root element -->
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
30
packages/editor/package.json
Normal file
30
packages/editor/package.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "@wisemapping/editor",
|
||||
"version": "1.0.0",
|
||||
"main": "src/index.tsx",
|
||||
"scripts": {
|
||||
"lint": "eslint src"
|
||||
},
|
||||
"repository": "http://www.wisemapping.com",
|
||||
"author": "Paulo Veiga <pveiga@gmail.com>, Ezequiel Bergamaschi <ezequielbergamaschi@gmail.com>",
|
||||
"license": "MIT",
|
||||
"private": false,
|
||||
"devDependencies": {
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.8.1",
|
||||
"@typescript-eslint/parser": "^4.8.1",
|
||||
"eslint": "^7.14.0",
|
||||
"eslint-plugin-react": "^7.21.5",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"ts-loader": "^8.0.11",
|
||||
"ts-node": "^9.0.0",
|
||||
"typescript": "^4.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/styled-components": "^5.1.4",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"styled-components": "^5.2.1"
|
||||
}
|
||||
}
|
||||
8
packages/editor/src/components/canvas/index.tsx
Normal file
8
packages/editor/src/components/canvas/index.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import { StyledCanvas } from './styled';
|
||||
|
||||
const Canvas = () => (
|
||||
<StyledCanvas>canvas</StyledCanvas>
|
||||
);
|
||||
|
||||
export default Canvas;
|
||||
8
packages/editor/src/components/canvas/styled.ts
Normal file
8
packages/editor/src/components/canvas/styled.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const StyledCanvas = styled.div`
|
||||
height: 100%
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
`;
|
||||
8
packages/editor/src/components/footer/index.tsx
Normal file
8
packages/editor/src/components/footer/index.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import { StyledFooter } from './styled';
|
||||
|
||||
const Footer = () => (
|
||||
<StyledFooter>footer</StyledFooter>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
8
packages/editor/src/components/footer/styled.ts
Normal file
8
packages/editor/src/components/footer/styled.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import styled from 'styled-components';
|
||||
import { times } from '../../size';
|
||||
|
||||
export const StyledFooter = styled.div`
|
||||
height: ${times(10)};
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
`;
|
||||
15
packages/editor/src/components/frame/index.tsx
Normal file
15
packages/editor/src/components/frame/index.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import Footer from '../footer';
|
||||
import TopBar from '../top-bar';
|
||||
import Canvas from '../canvas';
|
||||
import { StyledFrame } from './styled';
|
||||
|
||||
const Frame = () => (
|
||||
<StyledFrame>
|
||||
<TopBar />
|
||||
<Canvas />
|
||||
<Footer />
|
||||
</StyledFrame>
|
||||
);
|
||||
|
||||
export default Frame;
|
||||
8
packages/editor/src/components/frame/styled.ts
Normal file
8
packages/editor/src/components/frame/styled.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const StyledFrame = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
8
packages/editor/src/components/top-bar/index.tsx
Normal file
8
packages/editor/src/components/top-bar/index.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import { StyledTopBar } from './styled'
|
||||
|
||||
const TopBar = () => (
|
||||
<StyledTopBar>top bar</StyledTopBar>
|
||||
);
|
||||
|
||||
export default TopBar;
|
||||
8
packages/editor/src/components/top-bar/styled.ts
Normal file
8
packages/editor/src/components/top-bar/styled.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import styled from 'styled-components';
|
||||
import { times } from '../../size';
|
||||
|
||||
export const StyledTopBar = styled.div`
|
||||
height: ${times(10)};
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
`;
|
||||
3
packages/editor/src/index.tsx
Normal file
3
packages/editor/src/index.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import Editor from './components/frame';
|
||||
|
||||
export default Editor;
|
||||
9
packages/editor/src/size.ts
Normal file
9
packages/editor/src/size.ts
Normal file
@ -0,0 +1,9 @@
|
||||
const unit = 4; // pixels
|
||||
|
||||
export const XS = '4px';
|
||||
export const S = '8px';
|
||||
export const M = '16px';
|
||||
export const L = '24px';
|
||||
export const XL = '24px';
|
||||
|
||||
export const times = (n: number) => `${unit * n}px`;
|
||||
12
packages/editor/tsconfig.json
Normal file
12
packages/editor/tsconfig.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/",
|
||||
"sourceMap": true,
|
||||
"noImplicitAny": true,
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"jsx": "react",
|
||||
"allowJs": true,
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}
|
||||
44
packages/editor/webpack.config.js
Normal file
44
packages/editor/webpack.config.js
Normal file
@ -0,0 +1,44 @@
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
mode: 'development',
|
||||
devtool: 'eval-source-map',
|
||||
entry: {
|
||||
app: path.join(__dirname, 'src', 'index.tsx')
|
||||
},
|
||||
target: 'web',
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx']
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: '/node_modules/'
|
||||
}
|
||||
],
|
||||
},
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(__dirname, 'dist')
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, 'index.html')
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('development')
|
||||
})
|
||||
],
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, 'dist'),
|
||||
compress: true,
|
||||
port: 9000,
|
||||
hot: true,
|
||||
}
|
||||
}
|
||||
4699
packages/editor/yarn.lock
Normal file
4699
packages/editor/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,7 @@ Front end for WiseMapping.Org project.
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
### `yarn start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
@ -14,12 +14,12 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
The page will reload if you make edits.\
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
### `yarn test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
### `yarn run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
@ -29,7 +29,7 @@ Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
### `yarn run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
|
||||
@ -42,11 +42,11 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
|
||||
# Generate I18n resource
|
||||
|
||||
## Extract
|
||||
`npm run extract -- 'src/*.js' --out-file lang/en.json`
|
||||
`yarn extract -- 'src/*.js' --out-file lang/en.json`
|
||||
|
||||
## Compile
|
||||
`npm run compile -- lang/en.json --ast --out-file src/compiled-lang/en.json`
|
||||
`npm run compile -- lang/es.json --ast --out-file src/compiled-lang/es.json`
|
||||
`yarn compile -- lang/en.json --ast --out-file src/compiled-lang/en.json`
|
||||
`yarn compile -- lang/es.json --ast --out-file src/compiled-lang/es.json`
|
||||
|
||||
## License
|
||||
|
||||
60
packages/login/lang/en.json
Normal file
60
packages/login/lang/en.json
Normal file
@ -0,0 +1,60 @@
|
||||
{
|
||||
"footer.aboutus": {
|
||||
"defaultMessage": "About Us"
|
||||
},
|
||||
"footer.contactus": {
|
||||
"defaultMessage": "Contact Us"
|
||||
},
|
||||
"footer.donations": {
|
||||
"defaultMessage": "Donations"
|
||||
},
|
||||
"header.donthaveaccount": {
|
||||
"defaultMessage": "Don't have an account ?"
|
||||
},
|
||||
"login.email": {
|
||||
"defaultMessage": "Email"
|
||||
},
|
||||
"footer.faq": {
|
||||
"defaultMessage": "F.A.Q."
|
||||
},
|
||||
"footer.feedback": {
|
||||
"defaultMessage": "Feedback"
|
||||
},
|
||||
"login.forgotpwd": {
|
||||
"defaultMessage": "Forgot Password ?"
|
||||
},
|
||||
"login.error": {
|
||||
"defaultMessage": "The email address or password you entered is not valid."
|
||||
},
|
||||
"login.loginto": {
|
||||
"defaultMessage": "Log Into Your Account"
|
||||
},
|
||||
"login.hsqldbcofig": {
|
||||
"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"
|
||||
},
|
||||
"footer.opensource": {
|
||||
"defaultMessage": "Open Source"
|
||||
},
|
||||
"login.password": {
|
||||
"defaultMessage": "Password"
|
||||
},
|
||||
"login.remberme": {
|
||||
"defaultMessage": "Remember me"
|
||||
},
|
||||
"login.signin": {
|
||||
"defaultMessage": "Sign In"
|
||||
},
|
||||
"login.signup": {
|
||||
"defaultMessage": "Sign Up"
|
||||
},
|
||||
"footer.termsandconditions": {
|
||||
"defaultMessage": "Term And Conditions"
|
||||
},
|
||||
"login.userinactive": {
|
||||
"defaultMessage": "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!."
|
||||
},
|
||||
"login.welcome": {
|
||||
"defaultMessage": "Welcome"
|
||||
}
|
||||
}
|
||||
57
packages/login/package.json
Normal file
57
packages/login/package.json
Normal file
@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "@wisemapping/login",
|
||||
"version": "0.1.3",
|
||||
"main": "src/app.jsx",
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"extract": "formatjs extract",
|
||||
"compile": "formatjs compile"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.0",
|
||||
"cors": "^2.8.5",
|
||||
"joi": "^17.3.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-google-recaptcha": "^2.1.0",
|
||||
"react-intl": "^5.10.5",
|
||||
"web-vitals": "^0.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@formatjs/cli": "^2.13.14",
|
||||
"@testing-library/jest-dom": "^5.11.6",
|
||||
"@testing-library/react": "^11.2.2",
|
||||
"@testing-library/user-event": "^12.2.2",
|
||||
"react-scripts": "4.0.1"
|
||||
},
|
||||
"author": {
|
||||
"name": "Paulo Veiga",
|
||||
"login.email": "pveiga@wisemapping.com"
|
||||
},
|
||||
"contributors": [
|
||||
"Ezequiel Bergamaschi"
|
||||
],
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"homepage": "http://localhost:8080/react",
|
||||
"license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL"
|
||||
}
|
||||
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
28
packages/login/src/Footer.jsx
Normal file
28
packages/login/src/Footer.jsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl'
|
||||
import { ReactComponent as SvgLogo } from './images/logo-text.svg'
|
||||
|
||||
class Footer extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<footer className="footer" >
|
||||
{/* FIXME: we have to unify the way we load SVGs <Logo />*/}
|
||||
<div >
|
||||
<div><a href="termsofuse.html"> <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" /> </a></div>
|
||||
<div><a href="faq.html"> <FormattedMessage id="footer.faq" defaultMessage="F.A.Q."/> </a></div >
|
||||
<div><a href="aboutus.html"> <FormattedMessage id="footer.aboutus" defaultMessage="About Us" /></a></div >
|
||||
</div>
|
||||
<div >
|
||||
<div><a href="http://www.wisemapping.org/"> <FormattedMessage id="footer.opensource" defaultMessage="Open Source" /> </a></div>
|
||||
<div><a href="mailto:team@wisemapping.com"> <FormattedMessage id="footer.contactus" defaultMessage="Contact Us" /> </a></div>
|
||||
<div>< a href="mailto:feedback@wisemapping.com" > <FormattedMessage id="footer.feedback" defaultMessage="Feedback" /> </a></div>
|
||||
</div>
|
||||
<div>
|
||||
<div><span className="button-style2" >< a href="https://www.paypal.com/webapps/shoppingcart?flowlogging_id=c7ac923b53025&mfid=1606520600355_c7ac923b53025#/checkout/openButton">< FormattedMessage id="footer.donations" defaultMessage="PayPal Donations" /> </a></span ></div>
|
||||
</div >
|
||||
</footer>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
57
packages/login/src/Header.jsx
Normal file
57
packages/login/src/Header.jsx
Normal file
@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl'
|
||||
import logo from './images/header-logo.png'
|
||||
|
||||
class Header extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
type: props.type
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
let signUpButton;
|
||||
let signInButton;
|
||||
let text;
|
||||
|
||||
const pageType = this.state.type;
|
||||
if (pageType === 'only-signup') {
|
||||
text = <span className="header-area-content-span"><span><FormattedMessage id="header.donthaveaccount" defaultMessage="Don't have an account ?" /></span></span>;
|
||||
signUpButton = <SignUpButton className="header-area-right2" />;
|
||||
} else if (pageType === 'only-signin') {
|
||||
text = <span className="header-area-content-span"><span><FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" /></span></span>;
|
||||
signUpButton = <SignInButton className="header-area-right2" />;
|
||||
} else {
|
||||
signUpButton = <SignUpButton />
|
||||
signInButton = <SignInButton />;
|
||||
}
|
||||
|
||||
return (
|
||||
<nav>
|
||||
<div className="header">
|
||||
<span className="header-logo"><a href="/"><img src={logo} alt="logo" /></a></span>
|
||||
{text}
|
||||
{signUpButton}
|
||||
{signInButton}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
const SignInButton = (props) => {
|
||||
return (
|
||||
<span className={`button-style1 ${props.className}`}>
|
||||
<a href="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></a>
|
||||
</span>);
|
||||
}
|
||||
|
||||
const SignUpButton = (props) => {
|
||||
return (
|
||||
<span className={`button-style1 ${props.className}`}>
|
||||
<a href="/c/user/registration"><FormattedMessage id="login.signup" defaultMessage="Sign Up" /></a>
|
||||
</span>);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -3,8 +3,8 @@ import './css/login.css';
|
||||
import React from 'react';
|
||||
import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl'
|
||||
|
||||
import Header from './Header.js';
|
||||
import Footer from './Footer.js';
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
|
||||
const ConfigStatusMessage = (props) => {
|
||||
const enabled = props.enabled
|
||||
@ -7,8 +7,8 @@ import { useHistory } from "react-router-dom";
|
||||
|
||||
import ReCAPTCHA from "react-google-recaptcha";
|
||||
|
||||
import Header from './Header.js';
|
||||
import Footer from './Footer.js';
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
|
||||
|
||||
const ErrorMessageDialog = (props) => {
|
||||
59
packages/login/src/app.jsx
Normal file
59
packages/login/src/app.jsx
Normal file
@ -0,0 +1,59 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import LoginPage from './LoginPage.jsx';
|
||||
import { RegistrationSuccessPage, RegistationFormPage } from './RegistrationPage.jsx';
|
||||
import { IntlProvider } from 'react-intl'
|
||||
|
||||
import {
|
||||
Route,
|
||||
Switch,
|
||||
Redirect,
|
||||
useRouteMatch,
|
||||
} from 'react-router-dom';
|
||||
|
||||
function loadLocaleData(language) {
|
||||
switch (language) {
|
||||
case 'es':
|
||||
return import('./compiled-lang/es.json')
|
||||
default:
|
||||
return import('./compiled-lang/en.json')
|
||||
}
|
||||
}
|
||||
|
||||
const App = () => {
|
||||
const [messages, setMessages] = useState(undefined);
|
||||
|
||||
// Boostrap i18n ...
|
||||
const locale = (navigator.languages && navigator.languages[0])
|
||||
|| navigator.language
|
||||
|| navigator.userLanguage
|
||||
|| 'en-US';
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const language = locale.split('-')[0];
|
||||
const fetchData = async () => {
|
||||
const messages = await loadLocaleData(language);
|
||||
setMessages(messages);
|
||||
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const match = useRouteMatch();
|
||||
|
||||
return messages ? (
|
||||
<IntlProvider locale={locale} defaultLocale='en' messages={messages}>
|
||||
<Switch>
|
||||
<Route exact path={`${match.url}/`}>
|
||||
<Redirect to={`${match.url}/c/login`} />
|
||||
</Route>
|
||||
<Route path={`${match.url}/c/login`} render={() => <LoginPage />} />
|
||||
<Route path={`${match.url}/c/user/registration`} render={() => <RegistationFormPage />} />
|
||||
<Route path={`${match.url}/c/user/registrationSuccess`} component={RegistrationSuccessPage} />
|
||||
</Switch>
|
||||
</IntlProvider>
|
||||
) : <div>loading</div>
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
12
packages/login/src/index.jsx
Normal file
12
packages/login/src/index.jsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './app';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
|
||||
function bootstrapApplication() {
|
||||
ReactDOM.render(<Router><App /></Router>,
|
||||
document.getElementById('root')
|
||||
)
|
||||
}
|
||||
|
||||
bootstrapApplication()
|
||||
5
packages/webapp/.babelrc
Normal file
5
packages/webapp/.babelrc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"plugins": [
|
||||
"@babel/plugin-transform-runtime"
|
||||
]
|
||||
}
|
||||
1
packages/webapp/@types/index.d.ts
vendored
Normal file
1
packages/webapp/@types/index.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module '@wisemapping/login'; //FIXME: temporal hasta pasarlo a ts
|
||||
13
packages/webapp/index.html
Normal file
13
packages/webapp/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Wisemapping</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- React app root element -->
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
49
packages/webapp/package.json
Normal file
49
packages/webapp/package.json
Normal file
@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "@wisemapping/webapp",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "webpack serve",
|
||||
"build": "webpack --mode production",
|
||||
"lint": "eslint src"
|
||||
},
|
||||
"repository": "http://www.wisemapping.com",
|
||||
"author": "Paulo Veiga <pveiga@gmail.com>, Ezequiel Bergamaschi <ezequielbergamaschi@gmail.com>",
|
||||
"license": "MIT",
|
||||
"private": false,
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.12.7",
|
||||
"@babel/preset-react": "^7.12.7",
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"@types/react-router-dom": "^5.1.6",
|
||||
"@typescript-eslint/eslint-plugin": "^4.8.1",
|
||||
"@typescript-eslint/parser": "^4.8.1",
|
||||
"babel-loader": "^8.2.2",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"css-loader": "^5.0.1",
|
||||
"eslint": "^7.14.0",
|
||||
"eslint-plugin-react": "^7.21.5",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"html-webpack-plugin": "^4.5.0",
|
||||
"sass-loader": "^10.1.0",
|
||||
"style-loader": "^2.0.0",
|
||||
"svg-url-loader": "^7.1.1",
|
||||
"ts-loader": "^8.0.11",
|
||||
"ts-node": "^9.0.0",
|
||||
"typescript": "^4.1.2",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^5.6.0",
|
||||
"webpack-cli": "^4.2.0",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/styled-components": "^5.1.4",
|
||||
"@wisemapping/editor": "1.0.0",
|
||||
"@wisemapping/login": "0.1.3",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"styled-components": "^5.2.1"
|
||||
}
|
||||
}
|
||||
46
packages/webapp/src/index.tsx
Normal file
46
packages/webapp/src/index.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
import {
|
||||
Switch,
|
||||
Route,
|
||||
Link,
|
||||
BrowserRouter as Router,
|
||||
} from "react-router-dom";
|
||||
import Editor from '@wisemapping/editor';
|
||||
import Login from '@wisemapping/login';
|
||||
|
||||
const GlobalStyle = createGlobalStyle`
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const Component = () => (
|
||||
<React.Fragment>
|
||||
<Router>
|
||||
<GlobalStyle />
|
||||
<Switch>
|
||||
<Route path="/login">
|
||||
<Login />
|
||||
</Route>
|
||||
<Route path="/editor">
|
||||
<Editor />
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to='/login'>/login</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to='/editor'>/editor</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
ReactDOM.render(<Component />, document.querySelector('#root'));
|
||||
12
packages/webapp/tsconfig.json
Normal file
12
packages/webapp/tsconfig.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/",
|
||||
"sourceMap": true,
|
||||
"noImplicitAny": true,
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"jsx": "react",
|
||||
"allowJs": true,
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}
|
||||
91
packages/webapp/webpack.config.js
Normal file
91
packages/webapp/webpack.config.js
Normal file
@ -0,0 +1,91 @@
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
mode: 'development',
|
||||
devtool: 'eval-source-map',
|
||||
entry: {
|
||||
app: [path.join(__dirname, 'src', 'index.tsx')]
|
||||
},
|
||||
target: 'web',
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js']
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: '/node_modules/'
|
||||
},
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: '/node_modules/',
|
||||
resolve: {
|
||||
extensions: [".js", ".jsx"]
|
||||
},
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"targets": {
|
||||
"esmodules": true
|
||||
}
|
||||
}
|
||||
],
|
||||
'@babel/preset-react',
|
||||
],
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
exclude: /\.x.svg$/,
|
||||
loader: 'svg-url-loader',
|
||||
},
|
||||
|
||||
// Inline PNGs in Base64 if it is smaller than 10KB; otherwise, emmit files using file-loader.
|
||||
{
|
||||
test: /\.png$/,
|
||||
loader: 'url-loader',
|
||||
options: { mimetype: 'image/png', limit: 10000, name: '[name]-[hash:6].[ext]' },
|
||||
},
|
||||
|
||||
// Style loader
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [{
|
||||
loader: 'style-loader',
|
||||
}, {
|
||||
loader: 'css-loader',
|
||||
}],
|
||||
},
|
||||
],
|
||||
},
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
publicPath: '/'
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, 'index.html')
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('development')
|
||||
}),
|
||||
],
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, 'dist'),
|
||||
compress: true,
|
||||
port: 9000,
|
||||
hot: true,
|
||||
historyApiFallback: true,
|
||||
}
|
||||
}
|
||||
72
src/App.js
72
src/App.js
@ -1,72 +0,0 @@
|
||||
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;
|
||||
@ -1,28 +0,0 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl'
|
||||
import { ReactComponent as Logo } from './images/logo-text.svg'
|
||||
|
||||
class Footer extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<footer className="footer" >
|
||||
<Logo />
|
||||
<div >
|
||||
<div><a href="termsofuse.html"> <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" /> </a></div>
|
||||
<div><a href="faq.html"> <FormattedMessage id="footer.faq" defaultMessage="F.A.Q."/> </a></div >
|
||||
<div><a href="aboutus.html"> <FormattedMessage id="footer.aboutus" defaultMessage="About Us" /></a></div >
|
||||
</div>
|
||||
<div >
|
||||
<div><a href="http://www.wisemapping.org/"> <FormattedMessage id="footer.opensource" defaultMessage="Open Source" /> </a></div>
|
||||
<div><a href="mailto:team@wisemapping.com"> <FormattedMessage id="footer.contactus" defaultMessage="Contact Us" /> </a></div>
|
||||
<div>< a href="mailto:feedback@wisemapping.com" > <FormattedMessage id="footer.feedback" defaultMessage="Feedback" /> </a></div>
|
||||
</div>
|
||||
<div>
|
||||
<div><span className="button-style2" >< a href="https://www.paypal.com/webapps/shoppingcart?flowlogging_id=c7ac923b53025&mfid=1606520600355_c7ac923b53025#/checkout/openButton">< FormattedMessage id="footer.donations" defaultMessage="PayPal Donations" /> </a></span ></div>
|
||||
</div >
|
||||
</footer>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@ -1,57 +0,0 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl'
|
||||
import logo from './images/header-logo.png'
|
||||
|
||||
class Header extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
type: props.type
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
let signUpButton;
|
||||
let signInButton;
|
||||
let text;
|
||||
|
||||
const pageType = this.state.type;
|
||||
if (pageType === 'only-signup') {
|
||||
text = <span className="header-area-content-span"><span><FormattedMessage id="header.donthaveaccount" defaultMessage="Don't have an account ?" /></span></span>;
|
||||
signUpButton = <SignUpButton className="header-area-right2" />;
|
||||
} else if (pageType === 'only-signin') {
|
||||
text = <span className="header-area-content-span"><span><FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" /></span></span>;
|
||||
signUpButton = <SignInButton className="header-area-right2" />;
|
||||
} else {
|
||||
signUpButton = <SignUpButton />
|
||||
signInButton = <SignInButton />;
|
||||
}
|
||||
|
||||
return (
|
||||
<nav>
|
||||
<div className="header">
|
||||
<span className="header-logo"><a href="/"><img src={logo} alt="logo" /></a></span>
|
||||
{text}
|
||||
{signUpButton}
|
||||
{signInButton}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
const SignInButton = (props) => {
|
||||
return (
|
||||
<span className={`button-style1 ${props.className}`}>
|
||||
<a href="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></a>
|
||||
</span>);
|
||||
}
|
||||
|
||||
const SignUpButton = (props) => {
|
||||
return (
|
||||
<span className={`button-style1 ${props.className}`}>
|
||||
<a href="/c/user/registration"><FormattedMessage id="login.signup" defaultMessage="Sign Up" /></a>
|
||||
</span>);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
51
src/index.js
51
src/index.js
@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import LoginPage from './LoginPage.js';
|
||||
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) {
|
||||
case 'es':
|
||||
return import('./compiled-lang/es.json')
|
||||
default:
|
||||
return import('./compiled-lang/en.json')
|
||||
}
|
||||
}
|
||||
|
||||
async function bootstrapApplication() {
|
||||
|
||||
// Boostrap i18n ...
|
||||
const locale = (navigator.languages && navigator.languages[0])
|
||||
|| navigator.language
|
||||
|| navigator.userLanguage
|
||||
|| 'en-US';
|
||||
|
||||
const language = locale.split('-')[0];
|
||||
const messages = (await loadLocaleData(language));
|
||||
|
||||
ReactDOM.render(
|
||||
<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')
|
||||
)
|
||||
}
|
||||
|
||||
bootstrapApplication()
|
||||
Loading…
Reference in New Issue
Block a user