Split css

.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"},{"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"]
+[{"/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":1572,"mtime":1606670050593,"results":"8","hashOfConfig":"7"},{"size":1882,"mtime":1606786667541,"results":"9","hashOfConfig":"7"},{"size":3839,"mtime":1606786664130,"results":"10","hashOfConfig":"7"},{"size":4089,"mtime":1606780103039,"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":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"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",["22"],"/Users/pveiga/repos/wisemapping-react/src/RegistrationApp.js",[],"/Users/pveiga/repos/wisemapping-react/src/LoginApp.js",[],{"ruleId":"23","severity":1,"message":"24","line":37,"column":57,"nodeType":"25","messageId":"26","endLine":37,"endColumn":59},"eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected"]

src/LoginApp.js

@@ -1,3 +1,5 @@
+import './css/login.css';
+
 import React from 'react';
 import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl'
 

src/RegistrationApp.js

@@ -1,3 +1,5 @@
+import './css/registration.css';
+
 import React from 'react';
 import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl'
 
@@ -50,22 +52,23 @@ class RegistrationForm extends React.Component {
     return (
       <div class="wrapper">
         <div class="content">
-          <h1><FormattedMessage id="registration.welcome" defaultMessage="Registration" /></h1>
+          <h1><FormattedMessage id="registration.welcome" defaultMessage="Become a member of our comunity" /></h1>
-          <p><FormattedMessage id="registration.loginto" defaultMessage="Log Into Your Account" /></p>
+          <p><FormattedMessage id="registration.signup" defaultMessage="Signing up is free and just take a moment " /></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="email" name="username" placeholder={intl.formatMessage({ id: "registration.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" />
+            <input type="text" name="firstname" placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required="true" autocomplete="given-name" />
-
+            <input type="text" name="lastname" placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required="true" autocomplete="family-name" />
+            <input type="password" name="password" placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required="true" autocomplete="new-password" />
+            <input type="password" name="retypePassword" placeholder={intl.formatMessage({ id: "registration.retypepassword", defaultMessage: "Retype Password" })} required="true" autocomplete="new-password" />
             <div>
-              <input name="_spring_security_login.remberme" id="staySignIn" type="checkbox" />
+              <FormattedMessage id="registration.termandconditions" defaultMessage="By clicking Sign Up, you agree to our Terms, Data Policy and Cookies Policy. You may receive SMS Notifications from us and can opt out any time." />
-              <label for="staySignIn"><FormattedMessage id="login.remberme" defaultMessage="Remember me" /></label>
             </div>
-            <input type="submit" value={intl.formatMessage({ id: "login.signin", defaultMessage: "Sign In" })} />
+
+            <input type="submit" value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
           </form>
-          <a href="/c/user/resetPassword"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></a>
         </div>
       </div>
     );

src/css/login.css

@@ -11,7 +11,8 @@
 }
 
 .content input[type=email],
-.content input[type=password] {
+.content input[type=password],
+.content input[type=text] {
     width: 258px;
     height: 53px;
     padding: 0px 20px;

src/css/registration.css

@@ -0,0 +1,85 @@
+@import "core.css";
+.wrapper {
+    max-width: 1024px;
+    display: grid;
+    grid-template-areas: "content" "footer";
+}
+
+.content {
+    grid-area: content;
+    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;
+}
+
+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;
+}
+
+.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;
+}
+
+.error {
+    margin: 10px auto;
+    width: 260px;
+    font-size: 14px;
+    background-color: #e97450;
+    padding: 10px 10px;
+    border-radius: 9px;
+    color: white;
+}

src/index.js

@@ -1,5 +1,3 @@
-import './css/login.css';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import LoginApp from './LoginApp.js';