79a030cd-a561-48c7-a65b-16e301d14ef0

Committed 10 Jul 2024 06:52PM UTC coverage: 93.144% (+1.2%) from 91.933%

Build # 79a030cd-a561-48c7-a65b-16e301d14ef0

Build Type

Pull #36

circleci

Committed by

AngeloChristian1

Commit Message

Feature(User Cart):  A buyer should be able to view their cart

[Delivers #187364699]

Pull Request Pull Request #36: [187364699] - Feature(User Cart): A buyer should be able to view their cart

Run Details

408 of 483 branches covered (84.47%)

Branch coverage included in aggregate %.

63 of 65 new or added lines in 9 files covered. (96.92%)

13 existing lines in 3 files now uncovered.

1195 of 1238 relevant lines covered (96.53%)

9.62 hits per line

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

96.04

/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 {
  setAuthRole,
  setAuthToken,
  setAuthUserId,
  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";
import { jwtDecode } from "jwt-decode";

export interface DecodedToken {
  email: string;
  id: string;
  username: string;
  userRole: string;
  otp?: string
}
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 {
          const decodedToken: DecodedToken = jwtDecode(response.data.authToken);
          let userRole = decodedToken.userRole;
          dispatch(setAuthToken(response.data.authToken));
          dispatch(setAuthRole(userRole));
          dispatch(setIsLoggedIn(true));
          dispatch(setAuthUserId(decodedToken.id));

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

atlp-rwanda / e-commerce-bitcrafters-fn / 79a030cd-a561-48c7-a65b-16e301d14ef0

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