9662581492

Committed 25 Jun 2024 12:38PM UTC coverage: 86.803% (+0.5%) from 86.345%

Build # 9662581492

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #35 from atlp-rwanda/feature-vendor-adding-product

Feature addition of new product by the vendor

Run Details

186 of 312 branches covered (59.62%)

Branch coverage included in aggregate %.

984 of 1103 new or added lines in 21 files covered. (89.21%)

5 existing lines in 2 files now uncovered.

2741 of 3060 relevant lines covered (89.58%)

3.4 hits per line

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

86.07

/src/pages/Authentication/ResetPassword.tsx

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../../redux/store';
import { resetPassword } from '../../redux/actions/passwordResetActions';
import { useLocation, useNavigate } from 'react-router-dom';
import { resetState } from '../../redux/reducers/passwordResetReducer';
import toast from 'react-hot-toast';
import { useForm, SubmitHandler } from 'react-hook-form';
import { Eye, EyeOff } from 'lucide-react';

interface ResetPasswordData {
  newPassword: string;
  confirmPassword: string;
}

export const ResetPassword: React.FC = () => {
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  const dispatch = useDispatch<AppDispatch>();
  const { loading, error, resetPassword: registerResponse } = useSelector((state: RootState) => state.password);

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    watch
  } = useForm<ResetPasswordData>();

  const location = useLocation();
  const navigate = useNavigate();
  const params = new URLSearchParams(location.search);
  const userId = params.get('userid');
  const email = params.get('email');

  useEffect(() => {
    if (error) {
      toast.error(error);
      dispatch(resetState());
    }
    if (registerResponse) {
      toast.success(registerResponse.data.message);
      reset();
      dispatch(resetState());
      navigate('/login');
    }
  }, [error, registerResponse, dispatch, reset, navigate]);

  const onSubmit: SubmitHandler<ResetPasswordData> = () => {
    if (!userId || !email) return toast.error('Password reset link is required');

    dispatch(resetPassword({ email, userId, confirmPassword: confirmPass, newPassword: password }));
  };

  const password = watch('newPassword', '');
  const confirmPass = watch('confirmPassword', '');

  const passwordRequirements = (
    <ul className="text-grey2 text-sm mt-1">
      <li className={password.length >= 8 ? 'text-green-600' : ''}>- At least 8 characters</li>
      <li className={/[A-Z]/.test(password) ? 'text-green-600' : ''}>- One uppercase letter</li>
      <li className={/[a-z]/.test(password) ? 'text-green-600' : ''}>- One lowercase letter</li>
      <li className={/\d/.test(password) ? 'text-green-600' : ''}>- One number</li>
      <li className={/[!@#$%^&*(),.?":{}|<>]/.test(password) ? 'text-green-600' : ''}>- One special character</li>
    </ul>
  );

  const isEmailValid = password !== '' && confirmPass !== '';

  return (
    <div className="min-h-[100vh] h-auto w-full flex items-center justify-center py-10 px-4  bg-transparent1">
      <form
        className="min-w-[90%] flex flex-col items-center justify-start gap-y-4 bg-white p-12 md:min-w-[500px] md:max-w-[500px]"
        onSubmit={handleSubmit(onSubmit)}
      >
        <div className="w-full flex flex-col items-start justify-start gap-y-2">
          <h1 className="text-black1 font-Poppins text-2xl">Reset your password</h1>
          <p className="text-black1 text-sm">New password</p>
          <div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">
            <input
              className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"
              data-testid="newPassword"
              type={showNewPassword ? 'text' : 'password'}
              placeholder="----------"
              {...register('newPassword', {
                required: 'Password is required',
                minLength: {
                  value: 8,
                  message: 'Password must be at least 8 characters long'
                },
                pattern: {
                  value: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*(),.?":{}|<>]).{8,}$/,
                  message: 'Password must include uppercase, lowercase, number, and special character'
                }
              })}
            />
            {showNewPassword ? (
              <EyeOff
                data-testid="eye-icon"
                strokeWidth={1.5}
                className="text-grey2 cursor-pointer"
                onClick={() => setShowNewPassword(!showNewPassword)}
              />
            ) : (
              <Eye
                data-testid="eye-icon"
                strokeWidth={1.5}
                className="text-grey2 cursor-pointer"
                onClick={() => setShowNewPassword(!showNewPassword)}
              />
            )}
          </div>
          {password && passwordRequirements}
          {errors.newPassword && <span className="text-orange">{errors.newPassword.message}</span>}

          <p className="text-black1 text-sm">Confirm password</p>
          <div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">
            <input
              className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"
              type={showConfirmPassword ? 'text' : 'password'}
              data-testid="confirmPassword"
              placeholder="----------"
              {...register('confirmPassword', {
                required: 'Password confirmation is required',
                validate: (value) => value === password || 'Passwords do not match'
              })}
            />
            {showConfirmPassword ? (
              <EyeOff
                data-testid="eye-icon2"
                strokeWidth={1.5}
                className="text-grey2 cursor-pointer"
                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
              />
            ) : (
              <Eye
                data-testid="eye-icon2"
                strokeWidth={1.5}
                className="text-grey2 cursor-pointer"
                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
              />
            )}
          </div>
          {errors.confirmPassword && <span className="text-orange">{errors.confirmPassword.message}</span>}
        </div>
        <button
          type={loading ? 'button' : 'submit'}
          disabled={!isEmailValid || loading}
          className={`w-full min-h-[50px] flex items-center rounded-3xl justify-center bg-primary text-white text-lg font-medium mt-2 ${loading ? 'cursor-not-allowed' : ''}`}
        >
          {loading ? 'Loading...' : 'Reset Password'}
        </button>

        <p className="text-sm text-black1 md:text-base">
          Remember your credentials?{' '}
          <a href="/login" className="ml-1 text-orange">
            login here
          </a>
        </p>
      </form>
    </div>
  );
};

1	import React, { useEffect, useState } from 'react';	1✔
2	import { useDispatch, useSelector } from 'react-redux';	1✔
3	import { AppDispatch, RootState } from '../../redux/store';	1✔
4	import { resetPassword } from '../../redux/actions/passwordResetActions';	1✔
5	import { useLocation, useNavigate } from 'react-router-dom';	1✔
6	import { resetState } from '../../redux/reducers/passwordResetReducer';	1✔
7	import toast from 'react-hot-toast';	1✔
8	import { useForm, SubmitHandler } from 'react-hook-form';	1✔
9	import { Eye, EyeOff } from 'lucide-react';	1✔
10		1✔
11	interface ResetPasswordData {	1✔
12	newPassword: string;	1✔
13	confirmPassword: string;	1✔
14	}	1✔
15		1✔
16	export const ResetPassword: React.FC = () => {	1✔
17	const [showNewPassword, setShowNewPassword] = useState(false);	5✔
18	const [showConfirmPassword, setShowConfirmPassword] = useState(false);	5✔
19		5✔
20	const dispatch = useDispatch<AppDispatch>();	5✔
21	const { loading, error, resetPassword: registerResponse } = useSelector((state: RootState) => state.password);	5✔
22		5✔
23	const {	5✔
24	register,	5✔
25	handleSubmit,	5✔
26	formState: { errors },	5✔
27	reset,	5✔
28	watch	5✔
29	} = useForm<ResetPasswordData>();	5✔
30		5✔
31	const location = useLocation();	5✔
32	const navigate = useNavigate();	5✔
33	const params = new URLSearchParams(location.search);	5✔
34	const userId = params.get('userid');	5✔
35	const email = params.get('email');	5✔
36		5✔
37	useEffect(() => {	5✔
38	if (error) {	5✔
39	toast.error(error);	5✔
40	dispatch(resetState());	5✔
41	}	5✔
42	if (registerResponse) {	1!
43	toast.success(registerResponse.data.message);	×
44	reset();	×
UNCOV 45	dispatch(resetState());	×
46	navigate('/login');	1!
47	}	×
48	}, [error, registerResponse, dispatch, reset, navigate]);	×
49		×
50	const onSubmit: SubmitHandler<ResetPasswordData> = () => {	×
51	if (!userId \|\| !email) return toast.error('Password reset link is required');	×
52		5✔
53	dispatch(resetPassword({ email, userId, confirmPassword: confirmPass, newPassword: password }));	5✔
54	};	5✔
55		×
56	const password = watch('newPassword', '');	×
57	const confirmPass = watch('confirmPassword', '');	×
58		×
59	const passwordRequirements = (	5✔
60	<ul className="text-grey2 text-sm mt-1">	5✔
61	<li className={password.length >= 8 ? 'text-green-600' : ''}>- At least 8 characters</li>	5✔
62	<li className={/[A-Z]/.test(password) ? 'text-green-600' : ''}>- One uppercase letter</li>	5✔
63	<li className={/[a-z]/.test(password) ? 'text-green-600' : ''}>- One lowercase letter</li>	5✔
64	<li className={/\d/.test(password) ? 'text-green-600' : ''}>- One number</li>	5✔
65	<li className={/[!@#$%^&*(),.?":{}\|<>]/.test(password) ? 'text-green-600' : ''}>- One special character</li>	5!
66	</ul>	5!
67	);	5!
68		5!
69	const isEmailValid = password !== '' && confirmPass !== '';	5!
70		5✔
71	return (	5✔
72	<div className="min-h-[100vh] h-auto w-full flex items-center justify-center py-10 px-4 bg-transparent1">	5✔
73	<form	5✔
74	className="min-w-[90%] flex flex-col items-center justify-start gap-y-4 bg-white p-12 md:min-w-[500px] md:max-w-[500px]"	5✔
75	onSubmit={handleSubmit(onSubmit)}	5!
76	>	5✔
77	<div className="w-full flex flex-col items-start justify-start gap-y-2">	5✔
78	<h1 className="text-black1 font-Poppins text-2xl">Reset your password</h1>	5✔
79	<p className="text-black1 text-sm">New password</p>	5✔
80	<div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">	5✔
81	<input	5✔
82	className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"	5✔
83	data-testid="newPassword"	5✔
84	type={showNewPassword ? 'text' : 'password'}	5✔
85	placeholder="----------"	5✔
86	{...register('newPassword', {	5✔
87	required: 'Password is required',	5✔
88	minLength: {	5✔
89	value: 8,	5✔
90	message: 'Password must be at least 8 characters long'	5✔
91	},	5✔
92	pattern: {	5✔
93	value: /^(?=.[A-Z])(?=.[a-z])(?=.\d)(?=.[!@#$%^&*(),.?":{}\|<>]).{8,}$/,	5✔
94	message: 'Password must include uppercase, lowercase, number, and special character'	5✔
95	}	5✔
96	})}	5✔
97	/>	5✔
98	{showNewPassword ? (	5✔
99	<EyeOff	5✔
100	data-testid="eye-icon"	5✔
101	strokeWidth={1.5}	5✔
102	className="text-grey2 cursor-pointer"	5✔
103	onClick={() => setShowNewPassword(!showNewPassword)}	5✔
104	/>	5✔
105	) : (	5✔
106	<Eye	1✔
107	data-testid="eye-icon"	1✔
108	strokeWidth={1.5}	1✔
109	className="text-grey2 cursor-pointer"	1✔
110	onClick={() => setShowNewPassword(!showNewPassword)}	1✔
111	/>	1✔
112	)}	4✔
113	</div>	4✔
114	{password && passwordRequirements}	4✔
115	{errors.newPassword && <span className="text-orange">{errors.newPassword.message}</span>}	4✔
116		4✔
117	<p className="text-black1 text-sm">Confirm password</p>	4✔
118	<div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">	4✔
119	<input	5✔
120	className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"	5✔
121	type={showConfirmPassword ? 'text' : 'password'}	5!
122	data-testid="confirmPassword"	5!
123	placeholder="----------"	5✔
124	{...register('confirmPassword', {	5✔
125	required: 'Password confirmation is required',	5✔
126	validate: (value) => value === password \|\| 'Passwords do not match'	5✔
127	})}	5✔
128	/>	5✔
129	{showConfirmPassword ? (	5✔
130	<EyeOff	5✔
131	data-testid="eye-icon2"	5✔
132	strokeWidth={1.5}	5✔
133	className="text-grey2 cursor-pointer"	5✔
134	onClick={() => setShowConfirmPassword(!showConfirmPassword)}	5✔
135	/>	5✔
136	) : (	5✔
137	<Eye	1✔
138	data-testid="eye-icon2"	1✔
139	strokeWidth={1.5}	1✔
140	className="text-grey2 cursor-pointer"	1✔
141	onClick={() => setShowConfirmPassword(!showConfirmPassword)}	1✔
142	/>	1✔
143	)}	4✔
144	</div>	4✔
145	{errors.confirmPassword && <span className="text-orange">{errors.confirmPassword.message}</span>}	4✔
146	</div>	4✔
147	<button	4✔
148	type={loading ? 'button' : 'submit'}	4✔
149	disabled={!isEmailValid \|\| loading}	4✔
150	className={`w-full min-h-[50px] flex items-center rounded-3xl justify-center bg-primary text-white text-lg font-medium mt-2 ${loading ? 'cursor-not-allowed' : ''}`}	5✔
151	>	5✔
152	{loading ? 'Loading...' : 'Reset Password'}	5!
153	</button>	×
154		5✔
155	<p className="text-sm text-black1 md:text-base">	5✔
156	Remember your credentials?{' '}	5✔
157	<a href="/login" className="ml-1 text-orange">	5!
158	login here	5!
159	</a>	5!
160	</p>	5✔
161	</form>	5!
162	</div>	5✔
163	);	5✔
164	};	5✔

atlp-rwanda / knights-ecomm-fe / 9662581492

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