working before adding toastify

2022-11-30 16:31:09 +02:00
parent 7d4e2d1b69
commit 98d2d372e8
38 changed files with 2822 additions and 98 deletions
@@ -0,0 +1,108 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { ReactComponent as ArrowRightIcon } from "../assets/svg/keyboardArrowRightIcon.svg";
+import visibilityIcon from "../assets/svg/visibilityIcon.svg";
+import {
+  getAuth,
+  createUserWithEmailAndPassword,
+  updateProfile,
+} from "firebase/auth";
+import { db } from "../firebase.config";
+import { setDoc,doc, serverTimestamp } from "firebase/firestore";
+
+function Signup() {
+  const [showPassword, setShowPassword] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+  });
+  const { name, email, password } = formData;
+
+  const navigate = useNavigate();
+  const onChange = (e) => {
+    setFormData((prevState) => ({
+      ...prevState,
+      [e.target.id]: e.target.value,
+    }));
+  };
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const auth = getAuth();
+      const userCredential = await createUserWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
+      const user = userCredential.user;
+      updateProfile(auth.currentUser, { displayName: name });
+
+      const fromDataCopy = { ...formData };
+      delete fromDataCopy.password;
+      fromDataCopy.timestamp = serverTimestamp();
+
+      await setDoc(doc(db,'users',user.uid), fromDataCopy)
+
+      navigate("/");
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return (
+    <>
+      <div className="pageContainer">
+        <header>
+          <p className="pageHeader">Welcome Back!</p>
+        </header>
+        <form onSubmit={onSubmit}>
+          <input
+            className="nameInput"
+            type="text"
+            placeholder="Name"
+            id="name"
+            value={name}
+            onChange={onChange}
+          />
+          <input
+            className="emailInput"
+            type="email"
+            placeholder="Email"
+            id="email"
+            value={email}
+            onChange={onChange}
+          />
+          <div className="passwordInputDiv">
+            <input
+              type={showPassword ? "text" : "password"}
+              className="passwordInput"
+              placeholder="Password"
+              id="password"
+              value={password}
+              onChange={onChange}
+            />
+            <img
+              className="showPassword"
+              src={visibilityIcon}
+              onClick={() => setShowPassword((prevState) => !prevState)}
+            />
+          </div>
+          <Link to="/forgot-password" className="forgotPasswordLink">
+            Forgot Password
+          </Link>
+          <div className="signUpBar">
+            <p className="sigUpText">Sign In</p>
+            <button className="signUpButton">
+              <ArrowRightIcon fill="#ffffff" width="34px" height="34px" />
+            </button>
+          </div>
+        </form>
+        <Link to="/sign-in" className="registerLink">
+          Sign In Instead
+        </Link>
+      </div>
+    </>
+  );
+}
+export default Signup;