#39 SignUp Component

frontend/src/App.js

@@ -1,19 +1,25 @@
 import React from 'react';
 import './App.css';
-import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
+import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
 import Navbar from './components/layout/Navbar'
 import Footer from './components/layout/Footer';
 import Cards from './components/layout/Cards';
+import SignUp from './components/layout/SignUp';
 import Charts from './components/layout/Charts';
 
 function App() {
   return (
 	<Router>
 		<div className="App">
 			<Navbar/>
-			<Cards/>
-			<Charts/>
-			<Footer/>
+			<Route exact path="/">
+				<Cards/>
+				<Charts/>
+			</Route>
+			<Route path="/signup">
+				<SignUp />
+			</Route>
+		<Footer/>
 		</div>
 	</Router>
 

frontend/src/components/layout/Navbar.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import "../styles/Navbar.css";
-import FontAwesome from 'react-fontawesome'
+import FontAwesome from 'react-fontawesome';
 
 const links = [
   { name: "home", to: "/" },
@@ -34,7 +34,7 @@ const Navbar = () => {
           ))}
           <NavLink
             exact
-            to="/login"
+            to="/signup"
             className="header-link  user"
             activeClassName="header-link-active"
           >

frontend/src/components/layout/SignUp.js

@@ -0,0 +1,129 @@
+import React, { Component } from "react";
+
+// CSS Style
+import "../styles/SignUp.css";
+
+class Signup extends Component {
+  // Form fields data state
+  state = {
+    fields: {},
+    errors: {},
+    errorsImg: "",
+    buttonTxt: "Register",
+  };
+
+  // Handle validation function binding form fields state
+  handleValidation() {
+    let fields = this.state.fields;
+    let errors = {};
+    let errorsImg = {};
+    let formIsValid = true;
+
+    // firstname validation
+    if (!fields["firstname"]) {
+      formIsValid = false;
+      this.setState({ errorsImg: "errors"});
+      errors["firstname"] = "Firstname cannot be empty";
+    }
+    if (typeof fields["firstname"] !== "undefined") {
+      if (!fields["firstname"].match(/^[a-zA-Z]+$/)) {
+        formIsValid = false;
+        errors["firstname"] = "only letters";
+      }
+    }
+
+    // lastname validation
+    if (!fields["lastname"]){
+        formIsValid = false;
+        errors["lastname"] = "Lastname cannot be empty"
+    };
+
+    // password validation
+    if (!fields["password"]){
+        formIsValid = false;
+        errors["password"] = "Password cannot be empty"
+    };
+
+    // Email validation
+    if (!fields["email"]) {
+      formIsValid = false;
+      errors["email"] = "Looks like this not an email";
+    }
+
+
+    this.setState({ errors: errors, formIsValid: formIsValid});
+
+    formIsValid && this.setState({ errorsImg: {}});
+    return formIsValid;
+  }
+
+  handleChange(field, e) {
+    let fields = this.state.fields;
+    fields[field] = e.target.value;
+    this.setState({ fields });
+  }
+
+
+  // Handle form submit
+  contactSubmit(e) {
+    e.preventDefault();
+
+    if (this.handleValidation()) {
+      this.setState({ buttonTxt: "Click to Begin", hasError: false});
+    } else {
+      this.setState({ buttonTxt: "Form has errors", hasError: true });
+    }
+  }
+
+  render() {
+    const Label = ({name = '', placeholder = ''}) => {
+      return <label htmlFor={name}>
+        <input
+          type="text"
+          name={name}
+          placeholder={placeholder}
+          className={this.state.errorsImg}
+          value={this.state.fields[name]}
+          onChange={this.handleChange.bind(this, name)}
+        />
+        <p className="errors-txt">
+          {this.state.errors[name]}
+        </p>
+    </label>
+    }
+
+    return (
+      <div className="Signup">
+        <div className="container">
+          <div className="signup-txt">
+            <h1>Share Your Work <br /> in numbers</h1>
+            <p>Get your working graph reminders for coding contests.</p>
+            <p>Share your work among your peers.</p>
+          </div>
+          <div>
+            <div className="form-header">
+              <p>Try it today <span>admire it later</span></p>
+            </div>
+            <div className="form-wrapper">
+              <form className="form-group" onSubmit={this.contactSubmit.bind(this)}>
+                {Label({name:"firstname", placeholder:"First Name"})}
+                {Label({name:"lastname", placeholder:"Last Name"})}
+                {Label({name:"email", placeholder:"Email Address"})}
+                {Label({name:"password", placeholder:"Password"})}
+
+                <button type="submit" name="submit" className={this.state.hasError ? "errors-btn" : ""} onClick={()=> (this.state.buttonTxt === "Click to Begin") && this.props.onClose()}>
+                  {this.state.buttonTxt}
+                </button>
+              </form>
+              <p className="terms-txt">
+                By clicking the button, you are agreeing to our <span>Terms and Services</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Signup;

frontend/src/components/styles/SignUp.css

@@ -0,0 +1,137 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400;500;600;700&display=swap');
+
+.container{
+    scroll-behavior: smooth;
+    width: 80%;
+    margin: auto;
+    text-rendering: optimizeSpeed;
+    line-height: 1.5;
+    font-size: 16px;
+    font-family: 'Poppins', sans-serif;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    margin-top: 40px;
+    justify-content: space-between;
+}
+
+.signup-txt{
+    margin-top: 100px;
+    padding: 30px;
+}
+.signup-txt h1{
+    font-size: 50px;
+    font-weight: 600;
+    line-height: 1.2;
+    margin-bottom: 20px;
+    padding: 0;
+    margin: 0;
+}
+
+.form-header{
+    background: hsl(154, 59%, 51%);
+    height: 50px;
+    margin: 0 20px;
+    padding: 15px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 3px 10px -1px #a3a5ae9d;
+    box-sizing: border-box;
+}
+.form-header p, span {
+    padding: 0;
+    margin: 0;
+}
+.form-header p{
+    font-weight: 600;
+}
+.form-header span{
+    font-weight: 300;
+}
+
+.form-wrapper{
+    margin: 0 20px 20px;
+    padding: 15px;
+    border-radius: 10px;
+}
+
+.form-group input{
+    display: block;
+    width: 100%;
+    height: 50px;
+    margin-top: 25px;
+    border-radius: 10px;
+    padding: 20px;
+    border: solid 1px hsl(249, 10%, 26%);
+    font-size: 16px;
+    outline: none;
+    box-sizing: border-box;
+}
+.form-group input:focus{
+    border: solid 2px hsl(248, 32%, 49%);
+}
+.form-group button{
+    width:100%;
+    background-color: #324DE0;
+    color: white;
+    border-radius: 20px;
+    cursor: pointer;
+    padding: 0.7rem 1rem;
+    font-size: 1.1rem;
+    outline: none;
+    border: none;
+    box-shadow: 0 1px 3px grey; 
+    margin: 1.5rem 0 0.5rem;
+    user-select: none;
+}
+.form-group .errors-txt{
+    color: red;
+    font-size: 13px;
+    font-weight: 200;
+    text-align: right;
+    padding: 0;
+    margin: 0;
+}
+
+.errors{
+    border: solid 2px #ff0000 !important;
+    background: url('../../images/icon-error.svg');
+    background-repeat: no-repeat;
+    background-position: right;
+}
+.errors-btn{   
+    color: yellow !important;
+}
+
+.terms-txt{
+    color: hsl(249, 10%, 26%);
+    font-size: 13px;
+    font-weight: 200;
+    text-align: center;
+}
+.terms-txt span{
+    color: #ff7a7a;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+@media(max-width:900px){
+    .container{
+        width: 100%;
+        grid-template-columns: 100%;
+        margin-top: 20px;
+    }
+
+    .signup-txt{
+        margin-top: 10px;
+        padding: 10px;
+        text-align: center;
+    }
+    .signup-txt h1{
+        font-size: 25px;
+    }
+
+    .form-header{
+        height: 50px;
+        font-size: 14px;
+    }
+}