Login page branch (#95)

* login component completed * login page design completed * added form validation to login page * added snapshot to login page * merged develop branch into current branch Co-authored-by: allan <[email protected]>
ReCoded-Org · Nov 6, 2022 · fea30d1 · fea30d1
1 parent 645fbfd
commit fea30d1
Show file tree

Hide file tree

Showing 12 changed files with 331 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^14.1.1",
+    "babel-plugin-macros": "^3.1.0",
     "font-awesome": "^4.7.0",
     "eslint-import-resolver-node": "^0.3.6",
     "firebase": "^9.13.0",

diff --git a/src/App.jsx b/src/App.jsx
@@ -8,6 +8,7 @@ import Localize from './Localize';
 import MeetOurTeam from './components/MeetOurTeam/MeetOurTeam';
 import { teamMembers } from './data/teamData';
 import WyChooseUs from './components/whyChooseUs/WhyChooseUs';
+import Login from './components/Login/Login';
 import CompanyShowcaseComponent from './components/companyShowcaseComponent/CompanyShowcaseComponent';
 import { showCaseData } from './data/showCaseData';
 import './App.css';
@@ -98,6 +99,7 @@ function App() {
     <div className="App">
       <Navbar />
       <Hero />
+      <Login />
       <SaveButton />
       <Categories />
       <WyChooseUs />

diff --git a/src/components/Hero/Hero.test.js → src/components/Hero/__tests__/Hero.test.js b/src/components/Hero/Hero.test.js → src/components/Hero/__tests__/Hero.test.js
@@ -1,5 +1,5 @@
 import renderer from "react-test-renderer";
-import Hero from "./Hero";
+import Hero from "../Hero";
 
 jest.mock("react-i18next", () => ({
   useTranslation: () => ({ t: (key) => key }),

diff --git a/...ents/Hero/__snapshots__/Hero.test.js.snap → ...__tests__/__snapshots__/Hero.test.js.snap b/...ents/Hero/__snapshots__/Hero.test.js.snap → ...__tests__/__snapshots__/Hero.test.js.snap
diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx
@@ -0,0 +1,89 @@
+import { useForm } from "react-hook-form";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+
+function Login() {
+  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">Log in</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="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"
+            >
+              Log in
+            </button>
+          </div>
+          <div className="mb-4">
+            <p className="text-dark-gray">
+              Don&apos;t Have an Account?{" "}
+              <span className="font-semibold">Sign up</span>
+            </p>
+          </div>
+          <div>
+            <button
+              type="button"
+              className=" text-black border-t-2 border-l-2 border-r-4 border-b-4 border-black py-0.5 px-8 rounded-lg bg-white hover:shadow-md"
+            >
+              <FontAwesomeIcon
+                icon={faGoogle}
+                className="pr-3 text-2xl font-bold"
+              />
+              Log in with
+              <span className="font-bold"> Google</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Login;
diff --git a/src/components/Login/__test__/Login.test.js b/src/components/Login/__test__/Login.test.js
@@ -0,0 +1,8 @@
+import renderer from "react-test-renderer";
+
+import Login from "../Login";
+
+it("renders correctly when the component matches the snapshot", () => {
+  const tree = renderer.create(<Login />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Login/__test__/__snapshots__/Login.test.js.snap b/src/components/Login/__test__/__snapshots__/Login.test.js.snap
@@ -0,0 +1,108 @@
+// 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"
+  >
+    Log in
+  </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="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"
+        >
+          Log in
+        </button>
+      </div>
+      <div
+        className="mb-4"
+      >
+        <p
+          className="text-dark-gray"
+        >
+          Don't Have an Account?
+           
+          <span
+            className="font-semibold"
+          >
+            Sign up
+          </span>
+        </p>
+      </div>
+      <div>
+        <button
+          className=" text-black border-t-2 border-l-2 border-r-4 border-b-4 border-black py-0.5 px-8 rounded-lg bg-white hover:shadow-md"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            className="svg-inline--fa fa-google pr-3 text-2xl font-bold"
+            data-icon="google"
+            data-prefix="fab"
+            focusable="false"
+            role="img"
+            style={Object {}}
+            viewBox="0 0 488 512"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+              fill="currentColor"
+              style={Object {}}
+            />
+          </svg>
+          Log in with
+          <span
+            className="font-bold"
+          >
+             Google
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;
diff --git a/...omponents/whyChooseUs/WhyChooseUs.test.js → ...whyChooseUs/__tests__/WhyChooseUs.test.js b/...omponents/whyChooseUs/WhyChooseUs.test.js → ...whyChooseUs/__tests__/WhyChooseUs.test.js
@@ -1,6 +1,6 @@
 import renderer from "react-test-renderer";
 
-import WhyChooseUs from "./WhyChooseUs";
+import WhyChooseUs from "../WhyChooseUs";
 
 it("renders correctly when the component matches the snapshot", () => {
   const tree = renderer.create(<WhyChooseUs />).toJSON();

diff --git a/...Us/__snapshots__/WhyChooseUs.test.js.snap → ...__/__snapshots__/WhyChooseUs.test.js.snap b/...Us/__snapshots__/WhyChooseUs.test.js.snap → ...__/__snapshots__/WhyChooseUs.test.js.snap
diff --git a/src/index.css b/src/index.css
@@ -5,10 +5,9 @@
 
 :root {
   --primary: #f00;
-  --secondary:#3F525B;
-  --accent: #EC7063;
-  --dark-gray: #34495E;
-
+  --secondary: #3f525b;
+  --accent: #ec7063;
+  --dark-gray: #34495e;
 }
 body {
   margin: 0;
@@ -24,3 +23,6 @@ code {
     monospace;
 }
 
+input {
+  font-family: FontAwesome;
+}
diff --git a/src/index.jsx b/src/index.jsx
@@ -8,6 +8,8 @@ import './index.css';
 import './i18n/config';
 
 
+import 'font-awesome/css/font-awesome.min.css';
+
 const container = document.getElementById('root');
 const root = createRoot(container);