appsumo

gistfile1.txt

import React, { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { Auth } from "aws-amplify";
import { createMuiTheme, makeStyles } from "@material-ui/core/styles";
import Axios from 'axios';



import BarLoader from "react-spinners/PulseLoader";





const useStyles = makeStyles({
    root: {
        "&:hover $notchedOutline": {
            opacity: "0.5",
            borderRadius: "5px",
            borderColor: "#ffc600",
        },
    },
    notchedOutline: {},
    welcomeBtn: {
        width: "130px",
        objectFit: "contain",
        border: "solid 1px #ffffff",
        backgroundColor: "#d8ac1c",
        borderRadius: "50px",
        color: "#2d2d2d",
        fontWeight: "normal",
        fontStretch: "normal",
        fontStyle: "normal",
    },
});

const Register = () => {
    const history = useHistory();

    const [users, setUsers] = useState({
        email: "",
        password: "",

        appsumocode: "",
        firstName: "",
        lastName: ""

    });
    const [SignUp, setSignup] = useState(true);

    const [nameErr, setNameErr] = useState("");
    const [isLoading, setIsLoading] = useState(true);




    const onRegisterSubmit = async (event) => {
        event.preventDefault();

        var body = new FormData();

        const { firstName, email, password, appsumocode, lastName } = users;


        if (users.password.trim() === "" || users.email.trim() === "" || users.firstName.trim() === "") {
            setIsLoading(false);
            setNameErr("Fields can not be empty");
        } else if (!users.email.match(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/)) {
            setIsLoading(false);
            setNameErr("Invalid Email Address");
        } else if (
            !users.password.match(
                /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
            )) {
            setNameErr(
                "Password Should Contain Atleast 8 Character,One Uppercase,One LowerCase,One Special Character  "
            );
        }
        else {

            setIsLoading(true);
            const name = firstName + " " + lastName
            console.log(name, email, password, appsumocode)

            await body.append('email', email);
            await body.append('Name', name);
            await body.append('Password', password);
            await body.append('code', appsumocode);
            pushData('http://18.224.182.202:9001/appsumo/user/sign-up', body)

        }
    };

    const pushData = (url, body) => {

        console.log(url)
        console.log("body" + body)
        Axios.post(url, body)
            .then((res) => {
                console.log(res);

                checkSucessful(res)

            })
            .catch((err) => {

                console.log(err)
            });
    }

    const checkSucessful = (res) => {


        if (res.data.result) {

            // history.push('/')
            setNameErr("You can login")

        }
        else {

            setNameErr("AppSumo code invalid or Email already registered")

        }
    }

    const handleInput = (e) => {
        const { name, value } = e.target;
        setNameErr("");
        setUsers({
            ...users,
            [name]: value,
        });
    };



    const SignUpContainer = () => {
        return (
            <form onSubmit={onRegisterSubmit} className="loginfrm">
                <div className="row middleflx">
                    <div className="col-sm-6">
                        <div className="form-wrap">
                            <h2 className="title">App Sumo</h2>

                            <div className="input-field">
                                <input
                                    type="text"
                                    name="firstName"
                                    className="input"
                                    value={users.firstName}
                                    onChange={handleInput}
                                    placeholder="FirstName"
                                />
                            </div>
                            <div className="input-field">
                                <input
                                    type="text"
                                    name="lastName"
                                    className="input"
                                    value={users.lastName}
                                    onChange={handleInput}
                                    placeholder="Last Name"
                                />
                            </div>
                            <div className="input-field">
                                <input
                                    type="email"
                                    name="email"
                                    className="input"
                                    value={users.email}
                                    onChange={handleInput}
                                    placeholder="Email"
                                />
                            </div>
                            <div className="input-field">
                                <input
                                    type="password"
                                    name="password"
                                    className="input"
                                    value={users.password}
                                    onChange={handleInput}
                                    placeholder="Password"
                                />
                            </div>

                            <div className="input-field">
                                <input
                                    type="text"
                                    name="appsumocode"
                                    className="input"
                                    value={users.appsumocode}
                                    onChange={handleInput}
                                    placeholder="App Sumo Code"
                                />
                            </div>
                            <div className="register-btn">
                                <button type="submit" className="btnn solid" >
                                    Sign Up </button>


                                <div>
                                    <p style={{ color: "red", marginTop: 20 }}>{nameErr}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-sm-6">
                        <div className="right-logo" style={{ marginTop: "13%" }}>
                            <img src="https://i.ibb.co/3YH74LL/screely-1607517226938.png" />
                        </div>
                    </div>
                </div>

            </form>
        );
    };


    return (
        <div className="auth-container">
            <div className="container-wrap">
                <div className="panels-container">
                    <div className="panel left-panel">
                        <img src="img/appsumo.png" className="image" alt="" />
                    </div>
                    {/* {registermodal()} */}
                    <div className="signin-signup">
                        {SignUp ? SignUpContainer() : SignUpContainer()}
                    </div>
                </div>
            </div>
            <BarLoader
                size={20}
                margin={2}
                color={"#2C3E50"}
                loading={isLoading}
                css={`
          position: absolute;
          top: 63%;
          left: 70%;
          border-color: #f5b848;
          z-index:"6"
        `}
            />
        </div>
    );
};

export default Register;