Move form types to central place.

.eslintcache

@@ -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":1601,"mtime":1606716377431,"results":"6","hashOfConfig":"7"},{"size":1818,"mtime":1606793242108,"results":"8","hashOfConfig":"7"},{"size":1883,"mtime":1606789677736,"results":"9","hashOfConfig":"7"},{"size":3516,"mtime":1606870582803,"results":"10","hashOfConfig":"7"},{"size":3472,"mtime":1606870845676,"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":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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",[],"/Users/pveiga/repos/wisemapping-react/src/LoginApp.js",[]]
+[{"/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":1601,"mtime":1606716377431,"results":"6","hashOfConfig":"7"},{"size":1823,"mtime":1606961799662,"results":"8","hashOfConfig":"7"},{"size":1883,"mtime":1606789677736,"results":"9","hashOfConfig":"7"},{"size":3892,"mtime":1606881237401,"results":"10","hashOfConfig":"7"},{"size":3495,"mtime":1606881218435,"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":0,"fixableErrorCount":0,"fixableWarningCount":0},{"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",[],"/Users/pveiga/repos/wisemapping-react/src/LoginApp.js",[]]

src/Header.js

@@ -19,7 +19,7 @@ class Header extends React.Component {
         if (pageType === 'only-signup') {
             text = <span class="nav-center"><FormattedMessage id="header.donthaveaccount" defaultMessage="Don't have an account ?" /></span>;
             signUpButton = <SignUpButton/>;
-        } if (pageType === 'only-signin') {
+        } else if (pageType === 'only-signin') {
             text = <span class="nav-center"><FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" /></span>;
             signUpButton = <SignInButton/>;
         } else {

src/LoginApp.js

@@ -19,7 +19,6 @@ const ConfigStatusMessage = (props) => {
   } else {
     result = <span></span>;
   }
-
   return result;
 }
 
@@ -32,12 +31,12 @@ const LoginError = (props) => {
   if (errorCode) {
     if (errorCode === 3) {
       result = (
-        <div class='error'>
+        <div class='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 = (
-        <div class='error'>
+        <div class='form-error-dialog'>
           <FormattedMessage id="login.error" defaultMessage="The login.email address or login.password you entered is  not valid." />
         </div>)
     }

src/RegistrationApp.js

@@ -7,21 +7,33 @@ import ReCAPTCHA from "react-google-recaptcha";
 import Header from './Header.js';
 import Footer from './Footer.js';
 
-const RegistrationError = (props) => {
-  return (<span></span>);
+const ErrorMessageDialog = (props) => {
+  let result;
+
+  const message = props.message;
+  if (message) {
+    const message = "here is a messar ofr error eerera rser wer"
+    result = <p class='form-error-dialog'>{message}</p>
+  } else {
+    result = <span></span>
+  }
+  return result;
 }
 
+
 class RegistrationForm extends React.Component {
 
   constructor(props) {
     super(props)
+    this.state = {
+      errorMsg: ""
+    }
 
     this.handleChange = this.handleChange.bind(this);
     this.handleRecaptchaChange = this.handleRecaptchaChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-
   handleChange(event) {
     this.setState({ value: event.target.value });
   }
@@ -31,18 +43,21 @@ class RegistrationForm extends React.Component {
   }
 
   handleSubmit(event) {
+    this.setState({ errorMsg: "Error Message" });
     event.preventDefault();
   }
 
   render() {
     const intl = this.props.intl;
+    const errrMsg = this.state.errorMsg;
+
     return (
       <div class="wrapper">
         <div class="content">
           <h1><FormattedMessage id="registration.become" defaultMessage="Become a member of our comunity" /></h1>
           <p><FormattedMessage id="registration.signup" defaultMessage="Signing up is free and just take a moment " /></p>
 
-          <RegistrationError />
+          <ErrorMessageDialog message={errrMsg} />
 
           <form action="/" method="POST" onSubmit={this.handleSubmit}>
             <input type="email" name="username" onChange={this.handleChange} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required="true" autoComplete="email" />
@@ -72,6 +87,7 @@ class RegistrationForm extends React.Component {
 const RegistationApp = props => {
   const messages = props.messages;
   const locale = props.locale;
+
   return (
     <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
       <div>

src/css/core.css

@@ -209,6 +209,65 @@ nav a {
     }
 }
 
+input[type=email],
+input[type=password],
+input[type=text] {
+    width: 258px;
+    height: 53px;
+    padding: 0px 20px;
+    margin: 10px 20px;
+    border-radius: 9px;
+    font-size: 16px;
+    border: solid 1px #f9a826;
+    display: block;
+    margin: 10px auto;
+}
+
+input[type=checkbox] {
+    border: solid 1px #f9a826;
+    background-color: #f9a826;
+}
+
+input[type=submit] {
+    width: 258px;
+    height: 53px;
+    padding: 0px 20px;
+    margin: 10px 20px;
+    font-size: 20px;
+    font-weight: 600;
+    border-radius: 9px;
+    border: 0px;
+    background-color: rgba(255, 168, 0, 0.6);
+    color: white;
+}
+
+input[type=submit]:hover {
+    background-color: #f9a826;
+}
+
+input:placeholder {
+    color: grey;
+}
+
+::-moz-selection {
+    background: #f7a494;
+}
+
+::selection {
+    background: #f7a494;
+}
+
+.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 */
 

src/css/login.css

@@ -37,7 +37,12 @@
     color: white;
 }
 
-input[type=submit]:hover {
+.content input[type=checkbox] {
+    border: solid 1px #f9a826;
+    background-color: #f9a826;
+}
+
+.content input[type=submit]:hover {
     background-color: #f9a826;
 }
 
@@ -49,11 +54,6 @@ input[type=submit]:hover {
     font-size: 14px;
 }
 
-.content input[type=checkbox] {
-    border: solid 1px #f9a826;
-    background-color: #f9a826;
-}
-
 .content a {
     color: #f9a826;
     font-size: 15px;
@@ -72,14 +72,4 @@ input[type=submit]:hover {
     color: white;
     padding: 15px 30px;
     border-radius: 10px;
-}
-
-.error {
-    margin: 10px auto;
-    width: 260px;
-    font-size: 14px;
-    background-color: #e97450;
-    padding: 10px 10px;
-    border-radius: 9px;
-    color: white;
 }

src/css/registration.css

@@ -10,33 +10,6 @@
     text-align: center;
 }
 
-.content input[type=email],
-.content input[type=password],
-.content input[type=text] {
-    width: 258px;
-    height: 53px;
-    padding: 0px 20px;
-    margin: 10px 20px;
-    border-radius: 9px;
-    font-size: 16px;
-    border: solid 1px #f9a826;
-    display: block;
-    margin: 10px auto;
-}
-
-.content input[type=submit] {
-    width: 258px;
-    height: 53px;
-    padding: 0px 20px;
-    margin: 10px 20px;
-    font-size: 20px;
-    font-weight: 600;
-    border-radius: 9px;
-    border: 0px;
-    background-color: rgba(255, 168, 0, 0.6);
-    color: white;
-}
-
 form>p,
 form>div {
     font-size: 13px;
@@ -44,23 +17,10 @@ form>div {
     margin: auto;
 }
 
-input[type=submit]:hover {
-    background-color: #f9a826;
-}
-
-.content input:placeholder {
-    color: grey;
-}
-
 .content label {
     font-size: 14px;
 }
 
-.content input[type=checkbox] {
-    border: solid 1px #f9a826;
-    background-color: #f9a826;
-}
-
 .content a {
     color: #f9a826;
     font-size: 15px;
@@ -79,14 +39,4 @@ input[type=submit]:hover {
     color: white;
     padding: 15px 30px;
     border-radius: 10px;
-}
-
-.error {
-    margin: 10px auto;
-    width: 260px;
-    font-size: 14px;
-    background-color: #e97450;
-    padding: 10px 10px;
-    border-radius: 9px;
-    color: white;
 }