Continue migration to styles-component

packages/webapp/public/manifest.json

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

packages/webapp/src/app.tsx

@@ -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,21 +48,22 @@ const App = () => {
 
   return messages ? (
     <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
-      <Router>
+      <GlobalStyle/>
-        <Switch>
+        <Router>
-          <Route exact path="/">
+          <Switch>
-            <Redirect to="/c/login" />
+            <Route exact path="/">
-          </Route>
+              <Redirect to="/c/login" />
-          <Route path="/c/login" component={LoginPage} />
+            </Route>
-          <Route path="/c/user/registration">
+            <Route path="/c/login" component={LoginPage} />
-            <RegistationPage service={service} />
+            <Route path="/c/user/registration">
-          </Route>
+              <RegistationPage service={service} />
-          <Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} />
+            </Route>
-          <Route path="/c/user/resetPassword" component={ForgotPasswordPage} />
+            <Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} />
-        </Switch>
+            <Route path="/c/user/resetPassword" component={ForgotPasswordPage} />
-      </Router>
+          </Switch>
+        </Router>
     </IntlProvider>
-  ) : <div>loading</div>
+  ) : <div>Loading ... </div>
 }
 
 export default App;

packages/webapp/src/components/footer/index.tsx

@@ -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" >
+    <StyledFooter>
-      {/* Todo: Replace this with a SVG Image */}
       <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>
   )
 }
 

packages/webapp/src/components/footer/styled.ts

@@ -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;
+}`
+

packages/webapp/src/components/form-error-dialog/index.tsx

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

packages/webapp/src/components/form-error-dialog/styled.ts

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

packages/webapp/src/components/header/styled.ts

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

packages/webapp/src/components/login-page/index.tsx

@@ -5,23 +5,18 @@ import { Link } from 'react-router-dom'
 import Header from '../header'
 import Footer from '../footer'
 import SubmitButton from '../submit-button'
-
+import FormErrorDialog from '../form-error-dialog'
-const css = require('../../css/login.css')
-
 
 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 = (
+      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!."});
-        <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>)
     } else {
-      result = (
+      msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is  not valid."});
-        <div className='form-error-dialog'>
-          <FormattedMessage id="login.error" defaultMessage="The login.email address or login.password you entered is  not valid." />
-        </div>)
     }
   }
-  return (<span>{result}</span>);
+  return <FormErrorDialog message={msg} />
 
 }
 const LoginForm = () => {

packages/webapp/src/components/login-page/styled.ts

@@ -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;
+}
+`

packages/webapp/src/components/registration-page/index.tsx

@@ -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,35 +46,30 @@ const RegistrationForm = (props: ServiceProps) => {
   }
 
   return (
-    <div className="wrapper">
+    <div className="content">
-      <div className="content">
+      <h1><FormattedMessage id="registration.title" defaultMessage="Become a member of our comunity" /></h1>
-        <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>
-        <p><FormattedMessage id="registration.desc" defaultMessage="Signing up is free and just take a moment " /></p>
 
-        <form action="/" method="POST" onSubmit={e => handleSubmit(e)}>
+      <form action="/" method="POST" onSubmit={e => handleSubmit(e)}>
-          <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
+        <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
-          <input type="text" name="firstname" onChange={e => setFirstname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required={true} autoComplete="given-name" />
+        <input type="text" name="firstname" onChange={e => setFirstname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required={true} autoComplete="given-name" />
-          <input type="text" name="lastname" onChange={e => setLastname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required={true} autoComplete="family-name" />
+        <input type="text" name="lastname" onChange={e => setLastname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required={true} autoComplete="family-name" />
-          <input type="password" name="password" onChange={e => setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" />
+        <input type="password" name="password" onChange={e => setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" />
 
-          <div>
+        <div>
-            <ReCAPTCHA
+          <ReCAPTCHA
-              sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
+            sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
-              onChange={setRecaptchaToken} />
+            onChange={setRecaptchaToken} />
-          </div>
+        </div>
+        <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>
 
-          <ErrorMessageDialog message={errorMsg} />
+        <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
-
+      </form>
-          <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>
-
-          <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
-        </form>
-      </div>
     </div>
   );
-
 }
 
 type ServiceProps = {

packages/webapp/src/components/registration-page/styled.ts

@@ -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;
+}
+`

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

@@ -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">
+      <PageContent>
-        <div className="rcontent">
           <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>
   );

packages/webapp/src/components/registration-success-page/styled.ts

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

packages/webapp/src/css/login.css

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

packages/webapp/src/css/registration.css

@@ -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;
@@ -15,28 +8,4 @@ form>div {
     font-size: 13px;
     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;
 }

packages/webapp/src/css/reset-password.css

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

packages/webapp/src/css/success.css

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

packages/webapp/src/theme/global-style.ts

@@ -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 */
 
@@ -248,4 +157,7 @@ input:placeholder {
     background-color: white;
     border: solid 1px #ffa800;
     font-weight: 600;
-}
+}
+`;
+ 
+export default GlobalStyle;