vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-25 15:47:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Continue migration to styles-component

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2020-12-09 19:33:30 -08:00
parent e5866a9e4e
commit 0e0ef13e92
18 changed files with 199 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webapp/public/manifest.json
View File

@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "WiseMapping",
"name": "WiseMapping",
"icons": [{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",

4
packages/webapp/src/app.tsx
View File

@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import { Service, RestService } from './services/Service';
import { IntlProvider } from 'react-intl'
import GlobalStyle from './theme/global-style';
import { RegistrationSuccessPage } from './components/registration-success-page';
import { RegistationPage } from './components/registration-page';
import LoginPage from './components/login-page';
@ -47,6 +48,7 @@ const App = () => {
return messages ? (
<IntlProvider locale={locale} defaultLocale='en' messages={messages}>
<GlobalStyle/>
<Router>
<Switch>
<Route exact path="/">
@ -61,7 +63,7 @@ const App = () => {
</Switch>
</Router>
</IntlProvider>
) : <div>loading</div>
) : <div>Loading ... </div>
}
export default App;

7
packages/webapp/src/components/footer/index.tsx
View File

@ -1,13 +1,12 @@
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { StyledFooter } from './styled'
const logo = require('../../images/logo-text.svg')
const Footer = () => {
return (
<footer className="footer" >
{/* Todo: Replace this with a SVG Image */}
<StyledFooter>
<div style={{ padding: 0, margin: 0 }}>
<a href="http://www.wisemapping.org/">
<div style={{ textAlign: "left" }}>Powered By</div><img src={logo} alt="logo" />
@ -28,7 +27,7 @@ const Footer = () => {
<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>
</StyledFooter>
)
}

44
packages/webapp/src/components/footer/styled.ts Normal file
View File

@ -0,0 +1,44 @@
import styled from 'styled-components';
/* Footer */
export const StyledFooter = styled.footer`
height: 250px;
margin-top: 80px;
padding: 60px 40px 10px 50px;
background-color: #f9a826;
display: grid;
grid-template-columns: 200px 1fr 1fr 3fr;
& a {
font-size: 14px;
color: white;
word-wrap: nowrap;
}
& h4 {
font-size: 14px;
color: white;
word-wrap: nowrap;
font-weight: 500px;
margin: 0px;
}
&>svg {
grid-column: 1;
}
& div:nth-child(2) {
grid-column: 2;
}
& div:nth-child(3) {
grid-column: 3;
}
& div:nth-child(4) {
grid-column: 4;
text-align: right;
display: inline-block;
visibility: visible;
}`

12
packages/webapp/src/components/form-error-dialog/index.tsx Normal file
View File

@ -0,0 +1,12 @@
import React, { useEffect } from 'react'
import { StyleDiv } from './styled'
type FormErrorDialogProps = {
message: string | null;
}
const FormErrorDialog = (props: FormErrorDialogProps) => {
return props.message ? <StyleDiv>{props.message}</StyleDiv > : null;
}
export default FormErrorDialog;

12
packages/webapp/src/components/form-error-dialog/styled.ts Normal file
View File

@ -0,0 +1,12 @@
import styled from 'styled-components';
export const StyleDiv = styled.div`
margin: 10px auto;
width: 260px;
font-size: 15px;
border: 2px solid #e97450;
padding: 10px 10px;
border-radius: 9px;
color: white;
background-color: #e78b72;
`

12
packages/webapp/src/components/header/styled.ts
View File

@ -38,6 +38,18 @@ z-index: 1;
.header-area-right2 {
grid-column-start: 4;
}
.header-area-right1 span,
.header-area-right2 span {
font-size: 15px;
}
.header-area-content-span {
grid-column-start: 2;
grid-column-end: 4;
text-align: right;
font-size: 14px;
padding: 10px;
}
`;
export const StyledDiv = styled.nav`

24
packages/webapp/src/components/login-page/index.tsx
View File

@ -5,22 +5,17 @@ import { Link } from 'react-router-dom'
import Header from '../header'
import Footer from '../footer'
import SubmitButton from '../submit-button'
const css = require('../../css/login.css')
import FormErrorDialog from '../form-error-dialog'
const ConfigStatusMessage = (props: any) => {
const enabled = props.enabled
let result;
let result= null;
if (enabled === true) {
result = (<div className="db-warn-msg">
<p>
<FormattedMessage id="login.hsqldbcofig" defaultMessage="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" /><a href="https://wisemapping.atlassian.net/wiki/display/WS/Database+Configuration"> here</a>
</p>
</div>);
} else {
result = <span></span>;
}
return result;
}
@ -29,22 +24,17 @@ const LoginError = () => {
// @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');
const intl = useIntl();
let result;
let msg = null;
if (errorCode) {
if (errorCode === "3") {
result = (
<div className='form-error-dialog'>
<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>)
msg = intl.formatMessage({ 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!."});
} else {
result = (
<div className='form-error-dialog'>
<FormattedMessage id="login.error" defaultMessage="The login.email address or login.password you entered is not valid." />
</div>)
msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is not valid."});
}
}
return (<span>{result}</span>);
return <FormErrorDialog message={msg} />
}
const LoginForm = () => {

18
packages/webapp/src/components/login-page/styled.ts
View File

@ -1 +1,19 @@
import styled from 'styled-components';
export const StyledNav = styled.div`
.db-warn-msg {
margin-top: 30px;
width: 100%;
}
.db-warn-msg p {
margin: 0 auto;
width: 500px;
background-color: #e97450;
font-size: 15px;
color: white;
padding: 15px 30px;
border-radius: 10px;
}
`

35
packages/webapp/src/components/registration-page/index.tsx
View File

@ -1,9 +1,9 @@
import React, { useState, useEffect} from 'react'
import React, { useState, useEffect } from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
import ReCAPTCHA from 'react-google-recaptcha'
import { useHistory } from "react-router-dom"
import { Service, NewUser } from '../../services/Service'
import FormErrorDialog from '../form-error-dialog'
import Header from '../header'
import Footer from '../footer'
@ -11,30 +11,6 @@ import SubmitButton from '../submit-button'
const css = require('../../css/registration.css');
interface ErrorMessageDialogProps {
message: string
}
const ErrorMessageDialog = (props: ErrorMessageDialogProps) => {
let result;
const message = props.message;
if (message) {
result = <p className='form-error-dialog'>{message}</p>
} else {
result = <span></span>
}
return result;
}
type RegistrationBody = {
email: string;
firstname: string;
lastlname: string;
password: string;
recaptcha: string | null;
}
const RegistrationForm = (props: ServiceProps) => {
const [email, setEmail] = useState("");
const [lastname, setLastname] = useState("")
@ -70,7 +46,6 @@ const RegistrationForm = (props: ServiceProps) => {
}
return (
<div className="wrapper">
<div className="content">
<h1><FormattedMessage id="registration.title" defaultMessage="Become a member of our comunity" /></h1>
<p><FormattedMessage id="registration.desc" defaultMessage="Signing up is free and just take a moment " /></p>
@ -86,9 +61,7 @@ const RegistrationForm = (props: ServiceProps) => {
sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
onChange={setRecaptchaToken} />
</div>
<ErrorMessageDialog message={errorMsg} />
<FormErrorDialog message={errorMsg} />
<p>
<FormattedMessage id="registration.termandconditions" defaultMessage="Terms of Service: Please check the WiseMapping Account information you've entered above, and review the Terms of Service here. By clicking on 'Register' below you are agreeing to the Terms of Service above and the Privacy Policy" />
</p>
@ -96,9 +69,7 @@ const RegistrationForm = (props: ServiceProps) => {
<SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
</form>
</div>
</div>
);
}
type ServiceProps = {

17
packages/webapp/src/components/registration-page/styled.ts Normal file
View File

@ -0,0 +1,17 @@
import styled from 'styled-components';
export const StyledNav = styled.div`
.db-warn-msg {
margin-top: 30px;
width: 100%;
}
.db-warn-msg p {
margin: 0 auto;
width: 500px;
background-color: #e97450;
font-size: 15px;
color: white;
padding: 15px 30px;
border-radius: 10px;
}
`

9
packages/webapp/src/components/registration-success-page/index.tsx
View File

@ -1,10 +1,11 @@
import React, { useEffect } from 'react'
import { FormattedMessage } from 'react-intl'
import StyledDiv from './styled'
import Header, { SignInButton } from '../header'
import Footer from '../footer'
import PageContent from './styled'
const css = require('../../css/success.css');
const RegistrationSuccessPage = () => {
@ -15,8 +16,7 @@ const RegistrationSuccessPage = () => {
return (
<div>
<Header type='none' />
<div className="wrapper">
<div className="rcontent">
<PageContent>
<h1>
<FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
</h1>
@ -25,9 +25,8 @@ const RegistrationSuccessPage = () => {
</p>
<SignInButton style='style1'/>
</PageContent>
</div>
</div>
<Footer />
</div>
);

22
packages/webapp/src/components/registration-success-page/styled.ts Normal file
View File

@ -0,0 +1,22 @@
import styled from 'styled-components';
const PageContent = styled.div`
max-width: 1024px;
min-height: 400px;
margin: auto;
padding-top: 100px;
grid-area: content;
text-align: center;
& p {
color: black;
font-size: 18px;
margin: 10px 0px 30px 0px;
}
& h1 {
color: #f9a826;
font-size: 30px;
}`
export default PageContent;

39
packages/webapp/src/css/login.css
View File

@ -1,39 +0,0 @@
@import "core.css";
.wrapper {
max-width: 1024px;
display: grid;
grid-template-areas: "content" "footer";
}
.content {
grid-area: content;
text-align: center;
}
.content input:placeholder {
color: grey;
}
.content label {
font-size: 14px;
}
.content a {
color: #f9a826;
font-size: 15px;
}
.db-warn-msg {
margin-top: 30px;
width: 100%;
}
.db-warn-msg p {
margin: 0 auto;
width: 500px;
background-color: #e97450;
font-size: 15px;
color: white;
padding: 15px 30px;
border-radius: 10px;
}

31
packages/webapp/src/css/registration.css
View File

@ -1,10 +1,3 @@
@import "core.css";
.wrapper {
max-width: 1024px;
display: grid;
grid-template-areas: "content" "footer";
}
.content {
grid-area: content;
text-align: center;
@ -16,27 +9,3 @@ form>div {
width: 300px;
margin: auto;
}
.content label {
font-size: 14px;
}
.content a {
color: #f9a826;
font-size: 15px;
}
.db-warn-msg {
margin-top: 30px;
width: 100%;
}
.db-warn-msg p {
margin: 0 auto;
width: 500px;
background-color: #e97450;
font-size: 15px;
color: white;
padding: 15px 30px;
border-radius: 10px;
}

39
packages/webapp/src/css/reset-password.css
View File

@ -1,39 +0,0 @@
@import "core.css";
.wrapper {
max-width: 1024px;
display: grid;
grid-template-areas: "content" "footer";
}
.content {
grid-area: content;
text-align: center;
}
.content input:placeholder {
color: grey;
}
.content label {
font-size: 14px;
}
.content a {
color: #f9a826;
font-size: 15px;
}
.db-warn-msg {
margin-top: 30px;
width: 100%;
}
.db-warn-msg p {
margin: 0 auto;
width: 500px;
background-color: #e97450;
font-size: 15px;
color: white;
padding: 15px 30px;
border-radius: 10px;
}

22
packages/webapp/src/css/success.css
View File

@ -1,22 +0,0 @@
@import "core.css";
.wrapper {
max-width: 1024px;
min-height: 400px;
}
.rcontent {
padding-top: 100px;
grid-area: content;
text-align: center;
}
.rcontent p {
color: black;
font-size: 18px;
margin: 10px 0px 30px 0px;
}
.rcontent h1 {
color: #f9a826;
font-size: 30px;
}

102
packages/webapp/src/css/core.css → packages/webapp/src/theme/global-style.ts
View File

@ -1,3 +1,7 @@
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900');
* {
box-sizing: border-box;
@ -52,90 +56,6 @@ p {
color: #000000;
}
/* Footer */
.footer {
height: 250px;
margin-top: 80px;
padding: 60px 40px 10px 50px;
background-color: #f9a826;
display: grid;
}
.footer a {
font-size: 14px;
color: white;
word-wrap: nowrap;
}
.footer h4 {
font-size: 14px;
color: white;
word-wrap: nowrap;
font-weight: 500px;
margin: 0px;
}
.footer>svg {
grid-column: 1;
}
.footer div:nth-child(2) {
grid-column: 2;
}
.footer div:nth-child(3) {
grid-column: 3;
}
.footer {
grid-template-columns: 200px 1fr 1fr 3fr;
}
.footer>svg {
display: inline-block;
visibility: visible;
}
.footer div:nth-child(4) {
grid-column: 4;
text-align: right;
display: inline-block;
visibility: visible;
}
.header-area-right1 span,
.header-area-right2 span {
font-size: 15px;
}
.header-area-content-span {
grid-column-start: 2;
grid-column-end: 4;
text-align: right;
font-size: 14px;
padding: 10px;
}
@media (max-width: 500px) {
.footer {
grid-template-columns: 0px 1fr 1fr 5px;
}
.footer div:nth-child(1),
.footer div:nth-child(4),
.header-area-content-span {
display: none;
visibility: hidden;
}
.header {
display: grid;
white-space: nowrap;
grid-template-columns: 100px 1fr 130px 130px;
}
}
/* Form Styles Section */
input[type=email],
@ -179,17 +99,6 @@ input:placeholder {
color: grey;
}
.form-error-dialog {
margin: 10px auto;
width: 260px;
font-size: 15px;
border: 2px solid #e97450;
padding: 10px 10px;
border-radius: 9px;
color: white;
background-color: #e78b72;
}
/* Buttons */
@ -249,3 +158,6 @@ input:placeholder {
border: solid 1px #ffa800;
font-weight: 600;
}
`;
export default GlobalStyle;