7da2d850-b52c-4eb6-afb1-2d01ee58e49d

Committed 07 Jul 2024 08:56AM UTC coverage: 92.481% (+0.5%) from 91.946%

Build # 7da2d850-b52c-4eb6-afb1-2d01ee58e49d

Build Type

Pull #34

circleci

Committed by

EricNiyo73

Commit Message

feature(chat):users shoulde be able to chat via

Pull Request Pull Request #34: [#187364694]:Users should be able to chat

Run Details

310 of 374 branches covered (82.89%)

Branch coverage included in aggregate %.

88 of 91 new or added lines in 6 files covered. (96.7%)

6 existing lines in 3 files now uncovered.

760 of 783 relevant lines covered (97.06%)

7.55 hits per line

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

83.51

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

atlp-rwanda / e-commerce-bitcrafters-fn / 7da2d850-b52c-4eb6-afb1-2d01ee58e49d

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