Signup page branch (#96)

* login component completed * login page design completed * sign up page design completed * added form validation to sign up page * deleted node modules Co-authored-by: allan <[email protected]>
ReCoded-Org · Nov 6, 2022 · a4ae624 · a4ae624
1 parent fea30d1
commit a4ae624
Show file tree

Hide file tree

Showing 5 changed files with 250 additions and 113 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -9,6 +9,7 @@ import MeetOurTeam from './components/MeetOurTeam/MeetOurTeam';
 import { teamMembers } from './data/teamData';
 import WyChooseUs from './components/whyChooseUs/WhyChooseUs';
 import Login from './components/Login/Login';
+import SignUp from './components/signup/SignUp';
 import CompanyShowcaseComponent from './components/companyShowcaseComponent/CompanyShowcaseComponent';
 import { showCaseData } from './data/showCaseData';
 import './App.css';
@@ -100,6 +101,7 @@ function App() {
       <Navbar />
       <Hero />
       <Login />
+      <SignUp />
       <SaveButton />
       <Categories />
       <WyChooseUs />

diff --git a/src/components/signup/SignUp.jsx b/src/components/signup/SignUp.jsx
@@ -0,0 +1,86 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+
+function SignUp() {
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm();
+  const onSubmit = (data) => console.log(data);
+  return (
+    <div className=" my-52">
+      <h1 className="font-inter font-black text-2xl mb-6">Sign Up</h1>
+      <div className="w-full max-w-sm mx-auto">
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="mb-4">
+            <input
+              className="shadow border-2 border-black rounded-md w-full py-2 px-3 text-dark-gray leading-tight focus:outline-1 focus:shadow-outline"
+              id="username"
+              type="text"
+              placeholder="Username                                                                    &#xF007;"
+              {...register("name", { required: true })}
+            />
+            <error className="text-primary font-inter">
+              {errors.name?.type === "required" && "Please Enter your Name"}
+            </error>
+          </div>
+          <div className="mb-4">
+            <input
+              className="shadow border-2 border-black rounded-md w-full py-2 px-3 text-dark-gray leading-tight focus:outline-1 focus:shadow-outline"
+              id="email"
+              type="email"
+              placeholder="[email protected]                                                    &#xF007;"
+              {...register("email", {
+                required: true,
+                pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/i,
+              })}
+            />
+            <error className="text-primary font-inter">
+              {errors.email?.type === "required" && "Please Enter an Email"}
+              {errors.email?.type === "pattern" &&
+                "Entered email is in wrong format"}
+            </error>
+          </div>
+          <div className="mb-4 font-inter">
+            <input
+              className="shadow border-2 border-black rounded-md w-full py-2 px-3 text-dark-gray leading-tight focus:outline-1 focus:shadow-outline"
+              id="password"
+              type="password"
+              placeholder="Password                                                                     &#xF023;"
+              {...register("password", {
+                required: true,
+                minLength: 8,
+                maxLength: 20,
+              })}
+            />
+            <error className="text-primary font-inter">
+              {errors.password?.type === "required" &&
+                "Please Enter a Password"}
+              {errors.password?.type === "minLength" &&
+                "Entered password is less than 8 characters"}
+              {errors.password?.type === "maxLength" &&
+                "Entered password is more than 20 characters"}
+            </error>
+          </div>
+          <div className="mb-4">
+            <button
+              type="submit"
+              className="w-full bg-accent font-inter text-white rounded-md py-1 hover:bg-red-500"
+            >
+              Sign Up
+            </button>
+          </div>
+          <div className="mb-4">
+            <p className="text-dark-gray">
+              Already Have an Account?{" "}
+              <span className="font-semibold">Log in</span>
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default SignUp;
diff --git a/src/components/signup/__test__/SignUp.test.js b/src/components/signup/__test__/SignUp.test.js
@@ -0,0 +1,8 @@
+import renderer from "react-test-renderer";
+
+import SignUp from "../SignUp";
+
+it("renders correctly when the component matches the snapshot", () => {
+  const tree = renderer.create(<SignUp />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/signup/__test__/__snapshots__/SignUp.test.js.snap b/src/components/signup/__test__/__snapshots__/SignUp.test.js.snap
@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly when the component matches the snapshot 1`] = `
+<div
+  className=" my-52"
+>
+  <h1
+    className="font-inter font-black text-2xl mb-6"
+  >
+    Sign Up
+  </h1>
+  <div
+    className="w-full max-w-sm mx-auto"
+  >
+    <form
+      onSubmit={[Function]}
+    >
+      <div
+        className="mb-4"
+      >
+        <input
+          className="shadow border-2 border-black rounded-md w-full py-2 px-3 text-dark-gray leading-tight focus:outline-1 focus:shadow-outline"
+          id="username"
+          name="name"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="Username                                                                    "
+          type="text"
+        />
+        <error
+          className="text-primary font-inter"
+        />
+      </div>
+      <div
+        className="mb-4"
+      >
+        <input
+          className="shadow border-2 border-black rounded-md w-full py-2 px-3 text-dark-gray leading-tight focus:outline-1 focus:shadow-outline"
+          id="email"
+          name="email"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="[email protected]                                                    "
+          type="email"
+        />
+        <error
+          className="text-primary font-inter"
+        />
+      </div>
+      <div
+        className="mb-4 font-inter"
+      >
+        <input
+          className="shadow border-2 border-black rounded-md w-full py-2 px-3 text-dark-gray leading-tight focus:outline-1 focus:shadow-outline"
+          id="password"
+          name="password"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="Password                                                                     "
+          type="password"
+        />
+        <error
+          className="text-primary font-inter"
+        />
+      </div>
+      <div
+        className="mb-4"
+      >
+        <button
+          className="w-full bg-accent font-inter text-white rounded-md py-1 hover:bg-red-500"
+          type="submit"
+        >
+          Sign Up
+        </button>
+      </div>
+      <div
+        className="mb-4"
+      >
+        <p
+          className="text-dark-gray"
+        >
+          Already Have an Account?
+           
+          <span
+            className="font-semibold"
+          >
+            Log in
+          </span>
+        </p>
+      </div>
+    </form>
+  </div>
+</div>
+`;