Split css

2024-11-22 06:37:56 +01:00 · 2020-11-30 17:38:35 -08:00 · 2020-11-30 17:38:35 -08:00 · 78cd809acd
commit 78cd809acd
parent df02fa9b4c
6 changed files with 103 additions and 14 deletions
--- a/.eslintcache
+++ b/.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"]
--- a/src/LoginApp.js
+++ b/src/LoginApp.js
@ -1,3 +1,5 @@
+import './css/login.css';
+
 import React from 'react';
 import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl'

--- a/src/RegistrationApp.js
+++ b/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>
-          <p><FormattedMessage id="registration.loginto" defaultMessage="Log Into Your Account" /></p>
+          <h1><FormattedMessage id="registration.welcome" 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 />

          <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="password" name="password" placeholder={intl.formatMessage({ id: "login.password", defaultMessage: "Password" })} required="true" autocomplete="current-password" />
-
+            <input type="email" name="username" placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required="true" autocomplete="email" />
+            <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" />
-              <label for="staySignIn"><FormattedMessage id="login.remberme" defaultMessage="Remember me" /></label>
+              <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." />
            </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>
    );
--- a/src/css/login.css
+++ b/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;
--- a/src/css/registration.css
+++ b/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;
+}
--- a/src/index.js
+++ b/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';