228ac93b-3219-4e98-887a-e5b7cb56b6e7

Committed 30 Jun 2024 05:24PM UTC coverage: 93.066% (-3.7%) from 96.809%

Build # 228ac93b-3219-4e98-887a-e5b7cb56b6e7

Build Type

Pull #16

circleci

Committed by

Yvan-David

Commit Message

feat(Add Product): implement frontend for adding product

 - seller should be able to add a product in a collection
 - only authenticated seller can access the collection and the page
 - a seller can create a collection

[Delivers #187364686]

Pull Request Pull Request #16: [#187364686] A seller should be able to create/add items

Run Details

158 of 183 branches covered (86.34%)

Branch coverage included in aggregate %.

199 of 226 new or added lines in 12 files covered. (88.05%)

1 existing line in 1 file now uncovered.

607 of 639 relevant lines covered (94.99%)

6.45 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.75

/src/views/Login.tsx

import React, { useState } from "react";
import TextInput from "../components/TextInput.tsx";
import Hero from "../assets/images/women-signup.svg";
import { FcGoogle } from "react-icons/fc";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import * as yup from "yup";
import { Formik } from "formik";
import { Link } from "react-router-dom";
import { setAuthToken, setIsLoggedIn } from "../redux/authSlice";
import { useDispatch } from "react-redux";
import axiosClient from "../hooks/AxiosInstance";
import Button from "../components/Button";
import { useNavigate } from "react-router-dom";
import { PUBLIC_URL } from "../constants";

const Login: React.FC = () => {
  const client = axiosClient();
  const notify = (message: string) => toast(message);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  const backendUrl = PUBLIC_URL

  const loginWithGoogle = async () => {
    try {
      window.open(`${backendUrl}users/google`, "_self");

      const urlParams = new URLSearchParams(window.location.search);
      const token = urlParams.get('token');

      if (token) {
        const bearerToken = `Bearer ${token}`;
        localStorage.setItem('AUTH_TOKEN', bearerToken);
        dispatch(setAuthToken(token))
        dispatch(setIsLoggedIn(true));
      } 

    } catch (error) {
      notify("Login with Google failed");
    }
  };
  const loginSchema = yup.object().shape({
    email: yup
      .string()
      .required("Email is required")
      .email("Please enter a valid email")
      .matches(emailPattern, "Please enter a valid email"),

    password: yup
      .string()
      .required("Password is required")
      .min(8, "Password must contain at least 6 characters"),
  });

  const handleLogin = async (values: { email: string; password: string }) => {
    try {
      setIsLoading(true);
      const response = await client.post(`/users/login`, {
        email: values.email,
        password: values.password,
      });

      if (response.status === 200) {
        setIsLoading(false);
        if (response.data.message.includes("OTP")) {
          navigate("/verify-otp", { state: { email: values.email } });
          notify(response.data.message);
        } else {
          localStorage.setItem(
            "AUTH_TOKEN",
            JSON.stringify(response.data.authToken),
          );
          dispatch(setAuthToken(response.data.authToken));
          dispatch(setIsLoggedIn(true));
          notify(response.data.message);
          setTimeout(() => {
            navigate("/");
          }, 2500);
        }
      }
    } catch (err: any) {
      setIsLoading(false);
      notify(err.response ? err.response.data.message : "Login failed");
      if (
        err?.response?.data?.message ===
        "Your password has expired please update it"
      ) {
        setTimeout(() => {
          navigate("/request", { state: { email: values.email } });
        }, 2500);
      }
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="container m-3 tablet:m-10 flex space-x-2 items-center justify-center tablet:min-h-[100vh] px-10">
      <div className="image-container hidden tablet:flex tablet:w-[45%] ">
        <img src={Hero} alt="Women" className="w-[80%]" />
      </div>

      <div className="content flex flex-col  gap-5 space-y-4 w-[100%]  phone:w-[80%] tablet:w-[40%] justify-start items-start  h-full">
        <h3 className="text-lg font-semibold text-center self-center">
          LOGIN TO CONTINUE
        </h3>
        <p className="text-smpy-2">Enter details below</p>

        <Formik
          initialValues={{ email: "", password: "" }}
          validateOnMount={true}
          onSubmit={(values) => {
            handleLogin(values);
          }}
          validationSchema={loginSchema}
        >
          {({
            handleChange,
            handleBlur,
            handleSubmit,
            values,
            touched,
            errors,
            isValid,
          }) => (
            <form className="w-full flex flex-col space-y-5 h-[45%] justify-end">
              <TextInput
                error={errors.email && touched.email ? `${errors.email}` : ""}
                borderColor={errors.email && touched.email ? `red` : "gray"}
                onBlur={handleBlur("email")}
                secured={false}
                type="email"
                title="Email"
                placeholder="Enter email"
                value={values.email}
                onChange={handleChange("email")}
              />
              <TextInput
                error={
                  errors.password && touched.password
                    ? `${errors.password}`
                    : ""
                }
                borderColor={
                  errors.password && touched.password ? `red` : "gray"
                }
                onBlur={handleBlur("password")}
                secured={true}
                type="password"
                title="Password"
                placeholder="Enter password"
                value={values.password}
                onChange={handleChange("password")}
              />
              <div className="flex flex-col ">
                <p className="text-xs">
                  <Link to="/forgot-password" className="text-blue-500 hover:text-blue-800">
                    Forgot password?
                  </Link>
                </p>

                <Button
                  type="submit"
                  onClick={(event) => {
                    event.preventDefault();
                    handleSubmit();
                  }}
                  disabled={!isValid}
                  color={isValid ? "rgb(38 38 38)" : "rgba(0,0,0,.5)"}
                  value={isLoading ? "Loading..." : "Login"}
                />
              </div>
            </form>
          )}
        </Formik>
        <p className="text-center align-middle self-center ">- OR -</p>

        <Button
        icon={<FcGoogle />}
        value="Continue with google"
        type="submit"
        onClick={loginWithGoogle}
        />

        <p className="text-sm">
          Don't have an account.{" "}
          <Link to="/signup" className="text-blue-500 hover:text-blue-800">
            Create One
          </Link>
        </p>
      </div>

      <ToastContainer />
    </div>
  );
};

export default Login;

1	import React, { useState } from "react";	3✔
2	import TextInput from "../components/TextInput.tsx";	3✔
3	import Hero from "../assets/images/women-signup.svg";	3✔
4	import { FcGoogle } from "react-icons/fc";	3✔
5	import { ToastContainer, toast } from "react-toastify";	3✔
6	import "react-toastify/dist/ReactToastify.css";	3✔
7	import * as yup from "yup";	3✔
8	import { Formik } from "formik";	3✔
9	import { Link } from "react-router-dom";	3✔
10	import { setAuthToken, setIsLoggedIn } from "../redux/authSlice";	3✔
11	import { useDispatch } from "react-redux";	3✔
12	import axiosClient from "../hooks/AxiosInstance";	3✔
13	import Button from "../components/Button";	3✔
14	import { useNavigate } from "react-router-dom";	3✔
15	import { PUBLIC_URL } from "../constants";	3✔
16
17	const Login: React.FC = () => {	3✔
18	const client = axiosClient();	23✔
19	const notify = (message: string) => toast(message);	23✔
20	const navigate = useNavigate();	23✔
21	const dispatch = useDispatch();	23✔
22	const [isLoading, setIsLoading] = useState<boolean>(false);	23✔
23
24	const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;	23✔
25	const backendUrl = PUBLIC_URL	23✔
26
27	const loginWithGoogle = async () => {	23✔
28	try {	2✔
29	window.open(`${backendUrl}users/google`, "_self");	2✔
30
31	const urlParams = new URLSearchParams(window.location.search);	2✔
32	const token = urlParams.get('token');	2✔
33
34	if (token) {	2✔
35	const bearerToken = `Bearer ${token}`;	1✔
36	localStorage.setItem('AUTH_TOKEN', bearerToken);	1✔
37	dispatch(setAuthToken(token))	1✔
38	dispatch(setIsLoggedIn(true));	1✔
39	}
40
41	} catch (error) {
UNCOV 42	notify("Login with Google failed");	×
43	}
44	};
45	const loginSchema = yup.object().shape({	23✔
46	email: yup
47	.string()
48	.required("Email is required")
49	.email("Please enter a valid email")
50	.matches(emailPattern, "Please enter a valid email"),
51
52	password: yup
53	.string()
54	.required("Password is required")
55	.min(8, "Password must contain at least 6 characters"),
56	});
57
58	const handleLogin = async (values: { email: string; password: string }) => {	23✔
59	try {	8✔
60	setIsLoading(true);	8✔
61	const response = await client.post(`/users/login`, {	8✔
62	email: values.email,
63	password: values.password,
64	});
65
66	if (response.status === 200) {	3✔
67	setIsLoading(false);	3✔
68	if (response.data.message.includes("OTP")) {	3✔
69	navigate("/verify-otp", { state: { email: values.email } });	1✔
70	notify(response.data.message);	1✔
71	} else {
72	localStorage.setItem(	2✔
73	"AUTH_TOKEN",
74	JSON.stringify(response.data.authToken),
75	);
76	dispatch(setAuthToken(response.data.authToken));	2✔
77	dispatch(setIsLoggedIn(true));	2✔
78	notify(response.data.message);	2✔
79	setTimeout(() => {	2✔
80	navigate("/");	1✔
81	}, 2500);
82	}
83	}
84	} catch (err: any) {
85	setIsLoading(false);	5✔
86	notify(err.response ? err.response.data.message : "Login failed");	5✔
87	if (	5✔
88	err?.response?.data?.message ===
89	"Your password has expired please update it"
90	) {
91	setTimeout(() => {	1✔
92	navigate("/request", { state: { email: values.email } });	1✔
93	}, 2500);
94	}
95	} finally {
96	setIsLoading(false);	8✔
97	}
98	};
99
100	return (	23✔
101	<div className="container m-3 tablet:m-10 flex space-x-2 items-center justify-center tablet:min-h-[100vh] px-10">
102	<div className="image-container hidden tablet:flex tablet:w-[45%] ">
103	<img src={Hero} alt="Women" className="w-[80%]" />
104	</div>
105
106	<div className="content flex flex-col gap-5 space-y-4 w-[100%] phone:w-[80%] tablet:w-[40%] justify-start items-start h-full">
107	<h3 className="text-lg font-semibold text-center self-center">
108	LOGIN TO CONTINUE
109	</h3>
110	<p className="text-smpy-2">Enter details below</p>
111
112	<Formik
113	initialValues={{ email: "", password: "" }}
114	validateOnMount={true}
115	onSubmit={(values) => {
116	handleLogin(values);	8✔
117	}}
118	validationSchema={loginSchema}
119	>
120	{({
121	handleChange,
122	handleBlur,
123	handleSubmit,
124	values,
125	touched,
126	errors,
127	isValid,
128	}) => (
129	<form className="w-full flex flex-col space-y-5 h-[45%] justify-end">	80✔
130	<TextInput
131	error={errors.email && touched.email ? `${errors.email}` : ""}	176✔
132	borderColor={errors.email && touched.email ? `red` : "gray"}	176✔
133	onBlur={handleBlur("email")}
134	secured={false}
135	type="email"
136	title="Email"
137	placeholder="Enter email"
138	value={values.email}
139	onChange={handleChange("email")}
140	/>
141	<TextInput
142	error={
143	errors.password && touched.password	176✔
144	? `${errors.password}`
145	: ""
146	}
147	borderColor={
148	errors.password && touched.password ? `red` : "gray"	176✔
149	}
150	onBlur={handleBlur("password")}
151	secured={true}
152	type="password"
153	title="Password"
154	placeholder="Enter password"
155	value={values.password}
156	onChange={handleChange("password")}
157	/>
158	<div className="flex flex-col ">
159	<p className="text-xs">
160	<Link to="/forgot-password" className="text-blue-500 hover:text-blue-800">
161	Forgot password?
162	</Link>
163	</p>
164
165	<Button
166	type="submit"
167	onClick={(event) => {
168	event.preventDefault();	11✔
169	handleSubmit();	11✔
170	}}
171	disabled={!isValid}
172	color={isValid ? "rgb(38 38 38)" : "rgba(0,0,0,.5)"}	80✔
173	value={isLoading ? "Loading..." : "Login"}	80!
174	/>
175	</div>
176	</form>
177	)}
178	</Formik>
179	<p className="text-center align-middle self-center ">- OR -</p>
180
181	<Button
182	icon={<FcGoogle />}
183	value="Continue with google"
184	type="submit"
185	onClick={loginWithGoogle}
186	/>
187
188	<p className="text-sm">
189	Don't have an account.{" "}
190	<Link to="/signup" className="text-blue-500 hover:text-blue-800">
191	Create One
192	</Link>
193	</p>
194	</div>
195
196	<ToastContainer />
197	</div>
198	);
199	};
200
201	export default Login;	3✔

atlp-rwanda / e-commerce-bitcrafters-fn / 228ac93b-3219-4e98-887a-e5b7cb56b6e7

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous