594aa8a0-d312-4233-a7f2-bff50b8e0226

Committed 01 Jul 2024 09:19AM UTC coverage: 93.441% (-3.4%) from 96.809%

Build # 594aa8a0-d312-4233-a7f2-bff50b8e0226

Build Type

push

circleci

Committed by

web-flow

Commit Message

:admin should be to view all accounts and set permissions or roles (#24)

feature(permissions):admin should be able to view all accounts and set permission's
[Delivers 187364690]

Run Details

219 of 260 branches covered (84.23%)

Branch coverage included in aggregate %.

213 of 220 new or added lines in 13 files covered. (96.82%)

4 existing lines in 1 file now uncovered.

593 of 609 relevant lines covered (97.37%)

7.23 hits per line

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

84.38

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

atlp-rwanda / e-commerce-bitcrafters-fn / 594aa8a0-d312-4233-a7f2-bff50b8e0226

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