9587583489

Committed 19 Jun 2024 08:05PM UTC coverage: 84.066% (+1.4%) from 82.648%

Build # 9587583489

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #23 from atlp-rwanda/ft-register

implement User registration (Vendors and Buyers)

Run Details

34 of 74 branches covered (45.95%)

Branch coverage included in aggregate %.

645 of 732 new or added lines in 15 files covered. (88.11%)

826 of 949 relevant lines covered (87.04%)

1.09 hits per line

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

84.72

/src/pages/Authentication/Register.tsx

import React, { useEffect, useState } from 'react';
import { Eye, EyeOff } from 'lucide-react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { RegisterData } from '../../types/registerType';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from '../../redux/store';
import { registerUser } from '../../redux/actions/registerAction';
import { resetState } from '../../redux/reducers/registerReducer';
import toast from 'react-hot-toast';

function Register() {
  const [showPassword, setShowPassword] = useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    watch
  } = useForm<RegisterData>();

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

  const onSubmit: SubmitHandler<RegisterData> = (userData: RegisterData) => {
    userData.userType = 'Buyer';
    dispatch(registerUser(userData));
  };

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

  const password = watch('password', '');

  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>
  );

  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)}
      >
        <h1 className="min-w-[100%] text-black1 text-2xl font-medium">Sign up</h1>

        <div className="mt-2 w-full flex flex-col items-start justify-start gap-y-2">
          <p className="text-black1 text-lg">First name</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="text"
              placeholder="John"
              {...register('firstName', { required: true })}
            />
          </div>
          {errors.firstName && <span className="text-orange">Firstname is required</span>}
        </div>

        <div className="w-full flex flex-col items-start justify-start gap-y-2">
          <p className="text-black1 text-lg">Last name</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="text"
              placeholder="Doe"
              {...register('lastName', { required: true })}
            />
          </div>
          {errors.lastName && <span className="text-orange">Lastname is required</span>}
        </div>

        <div className="w-full flex flex-col items-start justify-start gap-y-2">
          <p className="text-black1 text-lg">Email Address</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="email"
              placeholder="johnDoe@gmail.com"
              {...register('email', { required: true })}
            />
          </div>
          {errors.email && <span className="text-orange">Email is required</span>}
        </div>

        <div className="w-full flex flex-col items-start justify-start gap-y-2">
          <p className="text-black1 text-lg">Phone number</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="text"
              placeholder="0788302145"
              {...register('phoneNumber', { required: true })}
            />
          </div>
          {errors.phoneNumber && <span className="text-orange">Phone number is required</span>}
        </div>

        <div className="w-full flex flex-col items-start justify-start gap-y-2">
          <p className="text-black1 text-lg">Gender</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">
            <select
              className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"
              {...register('gender', { required: true })}
            >
              <option value="Male">Male</option>
              <option value="Female">Female</option>
              <option value="Others">Others</option>
            </select>
          </div>
        </div>

        <div className="w-full flex flex-col items-start justify-start gap-y-2">
          <p className="text-black1 text-lg">Create 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={showPassword ? 'text' : 'password'}
              placeholder="Password"
              {...register('password', {
                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'
                }
              })}
            />
            {showPassword ? (
              <EyeOff
                strokeWidth={1.5}
                className="text-grey2 cursor-pointer"
                onClick={() => setShowPassword(!showPassword)}
              />
            ) : (
              <Eye
                strokeWidth={1.5}
                className="text-grey2 cursor-pointer"
                onClick={() => setShowPassword(!showPassword)}
              />
            )}
          </div>
          {password && passwordRequirements}
          {errors.password && <span className="text-orange">{errors.password.message}</span>}
        </div>

        <button
          type={loading ? 'button' : 'submit'}
          className={`w-full min-h-[50px] flex items-center justify-center bg-primary text-white text-2xl font-medium mt-2 ${loading ? 'cursor-not-allowed' : 'cu'}`}
        >
          {loading ? 'Loading...' : 'Register'}
        </button>

        <p className="text-small text-black1 md:text-lg">
          Already have an account?{' '}
          <a href="/login" className="ml-1 text-orange">
            login here
          </a>
        </p>

        <p className="text-small text-black1 md:text-lg">
          <a href="/register-vendor" className="ml-1 text-orange">
            Become a vendor
          </a>
        </p>
      </form>
    </div>
  );
}

export default Register;

1	import React, { useEffect, useState } from 'react';	1✔
2	import { Eye, EyeOff } from 'lucide-react';	1✔
3	import { useForm, SubmitHandler } from 'react-hook-form';	1✔
4	import { RegisterData } from '../../types/registerType';	1✔
5	import { useSelector, useDispatch } from 'react-redux';	1✔
6	import { RootState, AppDispatch } from '../../redux/store';	1✔
7	import { registerUser } from '../../redux/actions/registerAction';	1✔
8	import { resetState } from '../../redux/reducers/registerReducer';	1✔
9	import toast from 'react-hot-toast';	1✔
10		1✔
11	function Register() {	1✔
12	const [showPassword, setShowPassword] = useState(false);	1✔
13	const {	1✔
14	register,	1✔
15	handleSubmit,	1✔
16	formState: { errors },	1✔
17	reset,	1✔
18	watch	1✔
19	} = useForm<RegisterData>();	1✔
20		1✔
21	const dispatch = useDispatch<AppDispatch>();	1✔
22	const { register: registerResponse, loading, error } = useSelector((state: RootState) => state.register);	1✔
23		1✔
24	const onSubmit: SubmitHandler<RegisterData> = (userData: RegisterData) => {	1✔
25	userData.userType = 'Buyer';	1✔
26	dispatch(registerUser(userData));	1✔
27	};	1✔
28		1✔
NEW 29	useEffect(() => {	×
NEW 30	if (error) {	×
NEW 31	toast.error(error);	×
32	dispatch(resetState());	1✔
33	}	1✔
34	if (registerResponse) {	1!
NEW 35	toast.success(registerResponse.data.message);	×
NEW 36	reset();	×
NEW 37	dispatch(resetState());	×
38	}	1!
NEW 39	}, [error, registerResponse, dispatch, reset]);	×
NEW 40		×
NEW 41	const password = watch('password', '');	×
NEW 42		×
43	const passwordRequirements = (	1✔
44	<ul className="text-grey2 text-sm mt-1">	1✔
45	<li className={password.length >= 8 ? 'text-green-600' : ''}>- At least 8 characters</li>	1✔
46	<li className={/[A-Z]/.test(password) ? 'text-green-600' : ''}>- One uppercase letter</li>	1✔
47	<li className={/[a-z]/.test(password) ? 'text-green-600' : ''}>- One lowercase letter</li>	1✔
48	<li className={/\d/.test(password) ? 'text-green-600' : ''}>- One number</li>	1✔
49	<li className={/[!@#$%^&*(),.?":{}\|<>]/.test(password) ? 'text-green-600' : ''}>- One special character</li>	1!
50	</ul>	1!
51	);	1!
52		1!
53	return (	1!
54	<div className="min-h-[100vh] h-auto w-full flex items-center justify-center py-10 px-4 bg-transparent1">	1✔
55	<form	1✔
56	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]"	1✔
57	onSubmit={handleSubmit(onSubmit)}	1✔
58	>	1✔
59	<h1 className="min-w-[100%] text-black1 text-2xl font-medium">Sign up</h1>	1✔
60		1✔
61	<div className="mt-2 w-full flex flex-col items-start justify-start gap-y-2">	1✔
62	<p className="text-black1 text-lg">First name</p>	1✔
63	<div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">	1✔
64	<input	1✔
65	className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"	1✔
66	type="text"	1✔
67	placeholder="John"	1✔
68	{...register('firstName', { required: true })}	1✔
69	/>	1✔
70	</div>	1✔
71	{errors.firstName && <span className="text-orange">Firstname is required</span>}	1✔
72	</div>	1✔
73		1✔
74	<div className="w-full flex flex-col items-start justify-start gap-y-2">	1✔
75	<p className="text-black1 text-lg">Last name</p>	1✔
76	<div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">	1✔
77	<input	1!
78	className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"	1✔
79	type="text"	1✔
80	placeholder="Doe"	1✔
81	{...register('lastName', { required: true })}	1✔
82	/>	1✔
83	</div>	1✔
84	{errors.lastName && <span className="text-orange">Lastname is required</span>}	1✔
85	</div>	1✔
86		1✔
87	<div className="w-full flex flex-col items-start justify-start gap-y-2">	1✔
88	<p className="text-black1 text-lg">Email Address</p>	1✔
89	<div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">	1✔
90	<input	1!
91	className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"	1✔
92	type="email"	1✔
93	placeholder="johnDoe@gmail.com"	1✔
94	{...register('email', { required: true })}	1✔
95	/>	1✔
96	</div>	1✔
97	{errors.email && <span className="text-orange">Email is required</span>}	1✔
98	</div>	1✔
99		1✔
100	<div className="w-full flex flex-col items-start justify-start gap-y-2">	1✔
101	<p className="text-black1 text-lg">Phone number</p>	1✔
102	<div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">	1✔
103	<input	1!
104	className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"	1✔
105	type="text"	1✔
106	placeholder="0788302145"	1✔
107	{...register('phoneNumber', { required: true })}	1✔
108	/>	1✔
109	</div>	1✔
110	{errors.phoneNumber && <span className="text-orange">Phone number is required</span>}	1✔
111	</div>	1✔
112		1✔
113	<div className="w-full flex flex-col items-start justify-start gap-y-2">	1✔
114	<p className="text-black1 text-lg">Gender</p>	1✔
115	<div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">	1✔
116	<select	1!
117	className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"	1✔
118	{...register('gender', { required: true })}	1✔
119	>	1✔
120	<option value="Male">Male</option>	1✔
121	<option value="Female">Female</option>	1✔
122	<option value="Others">Others</option>	1✔
123	</select>	1✔
124	</div>	1✔
125	</div>	1✔
126		1✔
127	<div className="w-full flex flex-col items-start justify-start gap-y-2">	1✔
128	<p className="text-black1 text-lg">Create password</p>	1✔
129	<div className="w-full min-h-[50px] flex items-center justify-between gap-x-1 px-4 py-2 border border-grey1 bg-white">	1✔
130	<input	1✔
131	className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-lg"	1✔
132	type={showPassword ? 'text' : 'password'}	1✔
133	placeholder="Password"	1✔
134	{...register('password', {	1✔
135	required: 'Password is required',	1✔
136	minLength: {	1✔
137	value: 8,	1✔
138	message: 'Password must be at least 8 characters long'	1!
139	},	1✔
140	pattern: {	1✔
141	value: /^(?=.[A-Z])(?=.[a-z])(?=.\d)(?=.[!@#$%^&*(),.?":{}\|<>]).{8,}$/,	1✔
142	message: 'Password must include uppercase, lowercase, number, and special character'	1✔
143	}	1✔
144	})}	1✔
145	/>	1✔
146	{showPassword ? (	1✔
147	<EyeOff	1✔
148	strokeWidth={1.5}	1✔
149	className="text-grey2 cursor-pointer"	1✔
150	onClick={() => setShowPassword(!showPassword)}	1✔
151	/>	1✔
152	) : (	1✔
153	<Eye	1!
NEW 154	strokeWidth={1.5}	×
NEW 155	className="text-grey2 cursor-pointer"	×
NEW 156	onClick={() => setShowPassword(!showPassword)}	×
NEW 157	/>	×
NEW 158	)}	×
159	</div>	1✔
160	{password && passwordRequirements}	1✔
161	{errors.password && <span className="text-orange">{errors.password.message}</span>}	1✔
162	</div>	1✔
163		1✔
164	<button	1✔
165	type={loading ? 'button' : 'submit'}	1✔
166	className={`w-full min-h-[50px] flex items-center justify-center bg-primary text-white text-2xl font-medium mt-2 ${loading ? 'cursor-not-allowed' : 'cu'}`}	1✔
167	>	1!
168	{loading ? 'Loading...' : 'Register'}	1!
169	</button>	1✔
170		1✔
171	<p className="text-small text-black1 md:text-lg">	1✔
172	Already have an account?{' '}	1!
173	<a href="/login" className="ml-1 text-orange">	1!
174	login here	1✔
175	</a>	1!
176	</p>	1✔
177		1✔
178	<p className="text-small text-black1 md:text-lg">	1✔
179	<a href="/register-vendor" className="ml-1 text-orange">	1✔
180	Become a vendor	1✔
181	</a>	1✔
182	</p>	1✔
183	</form>	1✔
184	</div>	1✔
185	);	1✔
186	}	1✔
187		1✔
188	export default Register;	1✔

atlp-rwanda / knights-ecomm-fe / 9587583489

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