9641788547

Committed 24 Jun 2024 08:05AM UTC coverage: 85.401% (+0.3%) from 85.144%

Build # 9641788547

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #30 from atlp-rwanda/feat-OTP-2FA-verfication

feat-OTP-2FA

Run Details

79 of 145 branches covered (54.48%)

Branch coverage included in aggregate %.

186 of 251 new or added lines in 9 files covered. (74.1%)

1 existing line in 1 file now uncovered.

1360 of 1540 relevant lines covered (88.31%)

2.62 hits per line

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

73.51

/src/pages/Authentication/OtpPage.tsx

import React from 'react';
import { useState, ChangeEvent, FormEvent } from 'react';
import { toast } from 'react-hot-toast';
import axios from 'axios';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../../redux/store';
import { setCredentials } from '../../redux/reducers/authReducer';

const OtpPage = () => {
  interface OtpForm {
    first: string;
    second: string;
    third: string;
    fourth: string;
    fifth: string;
    sixth: string;
  }

  const initialForm = {
    first: '',
    second: '',
    third: '',
    fourth: '',
    fifth: '',
    sixth: ''
  };

  const [otpForm, setOtpForm] = useState<OtpForm>(initialForm);
  const [loading, setLoading] = useState(false);
  const { email } = useSelector((state: RootState) => state.currentUser);

  const dispatch = useDispatch<AppDispatch>();
  const fields = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'] as const;

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    if (/^\d?$/.test(value)) {
      setOtpForm((prevFormData) => ({ ...prevFormData, [name]: value }));
    }
  };

  const handleError = (error: any) => {
    axios.isAxiosError(error)
      ? toast.error(error.response?.data?.message || 'Server Down. Try again later!')
      : toast.error((error as Error).message);
  };

  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();
    try {
      const allFieldsFilled = fields.every((field) => otpForm[field]);
      if (!allFieldsFilled) {
        toast.error('Fill all the OTP fields.');
        return;
      }

      const otpCode = Object.values(otpForm).join('');
      if (!email) throw Error('Something went wrong, Login again');
      const reqData = { email, otp: otpCode };
      setLoading(true);
      const response = await axios.post(`${import.meta.env.VITE_APP_API_URL}/user/verify-otp`, reqData);

      if (response.status === 200) {
        dispatch(setCredentials(response.data.data.token));
      }
    } catch (error) {
      handleError(error);
    } finally {
      setOtpForm(initialForm);
      setLoading(false);
    }
  };

  const resendOTP = async () => {
    try {
      if (!email) throw Error('Something went wrong, Login again');
      const reqData = { email };
      setLoading(true);
      const response = await axios.post(`${import.meta.env.VITE_APP_API_URL}/user/resend-otp`, reqData);

      if (response.data.data.message === 'OTP sent successfully') toast.success('OTP resent successfully');
    } catch (error) {
      handleError(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="flex bg-transparent1 items-center justify-center h-[530px]">
        <div className="bg-transparent1 sm:bg-white p-5 sm:p-10  text-black flex flex-col gap-6 items-center">
          <h2 className="font-medium text-[20px]">Verify Your Identity</h2>
          <p className="font-light text-xs sm:text-[12.3px] max-w-[281px] sm:max-w-[412px] text-center">
            Protecting your account is our priority. Please confirm your identity by providing the code sent to your
            email/phone.
          </p>

          <form className="flex flex-col gap-6 items-center" onSubmit={handleSubmit}>
            <div className="flex gap-[17px] text-black">
              {fields.map((field) => (
                <input
                  key={field}
                  className="w-8 h-8 sm:w-[50px] sm:h-[50px] bg-white border border-grey3 border-solid text-center"
                  maxLength={1}
                  onChange={handleChange}
                  name={field}
                  value={otpForm[field]}
                />
              ))}
            </div>
            <button
              type={loading ? 'button' : 'submit'}
              className={`bg-primary text-white text-[16px] py-2 px-2 rounded-sm ${loading ? 'cursor-not-allowed' : 'cursor-pointer'} w-60`}
            >
              {loading ? 'Loading...' : 'Verify'}
            </button>
          </form>
          <p className="font-light text-xs sm:text-[12.3px] max-w-[296px] sm:max-w-[329px] text-center">
            It may take a minute to receive verification message. Haven’t received it yet?
            <span onClick={resendOTP} className="text-orange cursor-pointer">
              Resend
            </span>
          </p>
        </div>
      </div>
    </>
  );
};

export default OtpPage;

1	import React from 'react';	1✔
2	import { useState, ChangeEvent, FormEvent } from 'react';	1✔
3	import { toast } from 'react-hot-toast';	1✔
4	import axios from 'axios';	1✔
5	import { useDispatch, useSelector } from 'react-redux';	1✔
6	import { AppDispatch, RootState } from '../../redux/store';	1✔
7	import { setCredentials } from '../../redux/reducers/authReducer';	1✔
8		1✔
9	const OtpPage = () => {	1✔
10	interface OtpForm {	11✔
11	first: string;	11✔
12	second: string;	11✔
13	third: string;	11✔
14	fourth: string;	11✔
15	fifth: string;	11✔
16	sixth: string;	11✔
17	}	11✔
18		11✔
19	const initialForm = {	11✔
20	first: '',	11✔
21	second: '',	11✔
22	third: '',	11✔
23	fourth: '',	11✔
24	fifth: '',	11✔
25	sixth: ''	11✔
26	};	11✔
27		11✔
28	const [otpForm, setOtpForm] = useState<OtpForm>(initialForm);	11✔
29	const [loading, setLoading] = useState(false);	11✔
30	const { email } = useSelector((state: RootState) => state.currentUser);	11✔
31		11✔
32	const dispatch = useDispatch<AppDispatch>();	11✔
33	const fields = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'] as const;	11✔
34		11✔
35	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {	11✔
36	const { name, value } = event.target;	13✔
37	if (/^\d?$/.test(value)) {	13✔
38	setOtpForm((prevFormData) => ({ ...prevFormData, [name]: value }));	6✔
39	}	6✔
40	};	13✔
41		11✔
42	const handleError = (error: any) => {	11✔
NEW 43	axios.isAxiosError(error)	×
NEW 44	? toast.error(error.response?.data?.message \|\| 'Server Down. Try again later!')	×
NEW 45	: toast.error((error as Error).message);	×
NEW 46	};	×
47		11✔
48	const handleSubmit = async (event: FormEvent) => {	11✔
49	event.preventDefault();	1✔
50	try {	1✔
51	const allFieldsFilled = fields.every((field) => otpForm[field]);	1✔
52	if (!allFieldsFilled) {	1✔
53	toast.error('Fill all the OTP fields.');	1✔
54	return;	1✔
55	}	1!
NEW 56		×
NEW 57	const otpCode = Object.values(otpForm).join('');	×
NEW 58	if (!email) throw Error('Something went wrong, Login again');	×
NEW 59	const reqData = { email, otp: otpCode };	×
NEW 60	setLoading(true);	×
NEW 61	const response = await axios.post(`${import.meta.env.VITE_APP_API_URL}/user/verify-otp`, reqData);	×
NEW 62		×
NEW 63	if (response.status === 200) {	×
NEW 64	dispatch(setCredentials(response.data.data.token));	×
NEW 65	}	×
NEW 66	} catch (error) {	×
NEW 67	handleError(error);	×
NEW 68	} finally {	×
69	setOtpForm(initialForm);	1!
NEW 70	setLoading(false);	×
71	}	1✔
72	};	1✔
73		1✔
74	const resendOTP = async () => {	1✔
75	try {	1✔
76	if (!email) throw Error('Something went wrong, Login again');	11✔
77	const reqData = { email };	11✔
NEW 78	setLoading(true);	×
NEW 79	const response = await axios.post(`${import.meta.env.VITE_APP_API_URL}/user/resend-otp`, reqData);	×
NEW 80		×
NEW 81	if (response.data.data.message === 'OTP sent successfully') toast.success('OTP resent successfully');	×
NEW 82	} catch (error) {	×
NEW 83	handleError(error);	×
NEW 84	} finally {	×
NEW 85	setLoading(false);	×
NEW 86	}	×
NEW 87	};	×
NEW 88		×
NEW 89	return (	×
NEW 90	<>	×
NEW 91	<div className="flex bg-transparent1 items-center justify-center h-[530px]">	×
NEW 92	<div className="bg-transparent1 sm:bg-white p-5 sm:p-10 text-black flex flex-col gap-6 items-center">	×
NEW 93	<h2 className="font-medium text-[20px]">Verify Your Identity</h2>	×
NEW 94	<p className="font-light text-xs sm:text-[12.3px] max-w-[281px] sm:max-w-[412px] text-center">	×
95	Protecting your account is our priority. Please confirm your identity by providing the code sent to your	11✔
96	email/phone.	11✔
97	</p>	11✔
98		11✔
99	<form className="flex flex-col gap-6 items-center" onSubmit={handleSubmit}>	11✔
100	<div className="flex gap-[17px] text-black">	11✔
101	{fields.map((field) => (	11✔
102	<input	11✔
103	key={field}	11✔
104	className="w-8 h-8 sm:w-[50px] sm:h-[50px] bg-white border border-grey3 border-solid text-center"	11✔
105	maxLength={1}	11✔
106	onChange={handleChange}	11✔
107	name={field}	11✔
108	value={otpForm[field]}	11✔
109	/>	66✔
110	))}	66✔
111	</div>	66✔
112	<button	66✔
113	type={loading ? 'button' : 'submit'}	66✔
114	className={`bg-primary text-white text-[16px] py-2 px-2 rounded-sm ${loading ? 'cursor-not-allowed' : 'cursor-pointer'} w-60`}	66✔
115	>	66✔
116	{loading ? 'Loading...' : 'Verify'}	66✔
117	</button>	11✔
118	</form>	11✔
119	<p className="font-light text-xs sm:text-[12.3px] max-w-[296px] sm:max-w-[329px] text-center">	11✔
120	It may take a minute to receive verification message. Haven’t received it yet?	11!
121	<span onClick={resendOTP} className="text-orange cursor-pointer">	11!
122	Resend	11✔
123	</span>	11!
124	</p>	11✔
125	</div>	11✔
126	</div>	11✔
127	</>	11✔
128	);	11✔
129	};	11✔
130		11✔
131	export default OtpPage;	11✔

atlp-rwanda / knights-ecomm-fe / 9641788547

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