+
- auth
- .createUserWithEmailAndPassword(email, password)
- .then((auth) => {
- // it successfully created a new user with email and password
- if (auth) {
- history.push('/')
- }
- })
- .catch(error => alert(error.message))
- }
+
+
+ );
}
-export default Login
+export default Login;
diff --git a/src/Register.css b/src/Register.css
new file mode 100644
index 000000000..f26b2901c
--- /dev/null
+++ b/src/Register.css
@@ -0,0 +1,82 @@
+.register {
+ background: white;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.register__logo {
+ width: 100px;
+ margin: 20px auto;
+ object-fit: contain;
+}
+
+.register__container {
+ width: 300px;
+ height: fit-content;
+ display: flex;
+ flex-direction: column;
+ border-radius: 5px;
+ border: 1px solid lightgray;
+ padding: 20px;
+}
+
+.register__container > h1 {
+ font-weight: 500;
+ margin-bottom: 20px;
+}
+
+.register__container > form > h5 {
+ margin-bottom: 5px;
+}
+
+.register__container > form > input {
+ height: 30px;
+ margin-bottom: 10px;
+ padding-left: 10px;
+ border-radius: 3px;
+ border: 1px solid grey;
+ background-color: white;
+ width: 95%;
+}
+
+.register__container > form > input:focus {
+ border: 2px solid #f0c14b;
+ outline: none;
+}
+
+.register__container > form > button {
+ border-radius: 2px;
+ width: 100%;
+ height: 30px;
+ border: 1px solid;
+ margin-top: 10px;
+ background-image: linear-gradient(white, #f0c14b, #f0c14b);
+ border-color: #a88734 #9c7e31 #846a29;
+}
+
+.register__container > p {
+ margin-top: 20px;
+ font-size: 12px;
+ text-align: center;
+}
+
+.register__alreadyAccount {
+ border-top: 1px solid lightgray;
+ padding-top: 30px;
+ padding-bottom: 20px;
+ margin-top: 20px;
+ font-size: 12px;
+ text-align: center;
+}
+
+.register__alreadyAccount > strong {
+ color: #0066c0;
+ cursor: pointer;
+}
+
+a {
+ color: #0066c0;
+ text-decoration: none;
+}
diff --git a/src/Register.js b/src/Register.js
new file mode 100644
index 000000000..55f946dc4
--- /dev/null
+++ b/src/Register.js
@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import "./Register.css";
+import PulseLoader from "react-spinners/PulseLoader";
+import { Link, useHistory } from "react-router-dom";
+
+import { auth } from "./firebase";
+
+function Register() {
+ const history = useHistory();
+ const [loading, setLoading] = useState(false);
+ const [user, setUser] = useState({ name: "", email: "", password: "" });
+
+ const handleOnChange = (e) => {
+ setUser({
+ ...user,
+ [e.target.name]: e.target.value,
+ });
+ };
+
+ const register = (e) => {
+ e.preventDefault();
+ setLoading(true);
+
+ auth
+ .createUserWithEmailAndPassword(user.email, user.password)
+ .then((auth) => {
+ auth.user.updateProfile({
+ displayName: user.name,
+ });
+ })
+ .then(() => {
+ // I did this because if I perform the action continuously, the username takes it as its initial value (null)
+ setTimeout(() => {
+ history.push("/");
+ }, 1500);
+ })
+ .catch((error) => alert(error.message))
+ .then(() => setLoading(true));
+ };
+
+ return (
+ Sign-in
- return ( -
-
- 
-
+
+
-
+
+
+
+
+
+
+ );
+}
+
+export default Register;
+
+
+
+
+ Create Account
+ + + ++ By creating an account, you agree to the Terms of Use and Privacy + Notice of AMAZON FAKE CLONE. +
+ +
+ ¿Already have an account?
+
+ Sign in
+
+
+