388ddb7b-21e0-4c31-b9ea-283143a55413

Committed 26 Jun 2024 09:33AM UTC coverage: 96.101% (-1.6%) from 97.727%

Build # 388ddb7b-21e0-4c31-b9ea-283143a55413

Build Type

Pull #18

circleci

Committed by

UwizeyimamaFurahaJustine

Commit Message

Feature: User registration and send email verification

Pull Request Pull Request #18: [#187364678] Feature: User registration and send email verification

Run Details

123 of 135 branches covered (91.11%)

Branch coverage included in aggregate %.

90 of 96 new or added lines in 10 files covered. (93.75%)

1 existing line in 1 file now uncovered.

370 of 378 relevant lines covered (97.88%)

6.87 hits per line

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

86.67

/src/views/signup.tsx

import React, {useState} from 'react';
import { useDispatch } from 'react-redux';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { signupUser } from '../redux/userSlice';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { Link } from "react-router-dom";
import { FcGoogle } from 'react-icons/fc';
import { IoEyeOutline, IoEyeOffOutline } from 'react-icons/io5';
import { AppDispatch } from '../redux/store';

const SignupForm: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const [showPassword, setShowPassword] = useState(false);

  return (
    <>
      <Formik
        initialValues={{ username: '',email: '', password: ''  }}
        validationSchema={Yup.object({
          username: Yup.string().required('Required'),
          email: Yup.string().email('Invalid email address').required('Required'),
          password: Yup.string().min(6, 'Must be at least 8 characters').required('Required'),
          
        })}
        onSubmit={async (values, { setSubmitting, resetForm }) => {
          try {
            await dispatch(signupUser(values)).unwrap();
            toast.success('Account created successfully! Check your email to verify.');
            resetForm();
          } catch (error: any) {
            toast.error(error.message ?? 'Signup failed. Please try again.');
          } finally {
            setSubmitting(false);
          }
        }}
      >
        {({ isSubmitting, errors, touched }) => (
          <Form>
            <section>
              <div className="bg-white relative laptop:py-0">
                <div className="flex flex-col items-center justify-between pt-0 pr-10 pb-0 pl-10 mt-0 mr-auto mb-0 ml-auto max-w-7xl xl:px-0 lg:flex-row">
                  <div className="flex flex-col items-center w-full pt-5 lg:pr-10 pb-10 lg:pl-10 xs:pr-0 xs:pl-0 lg:pt-20 lg:flex-row">
                    <div className="w-full bg-cover relative max-w-md lg:max-w-2xl lg:w-7/12">
                      <div className="flex flex-col items-center justify-center w-full h-full relative lg:pr-10">
                        <img src="bg0.svg" alt="Background" className="btn-" />
                      </div>
                    </div>

                    <div className="w-full mt-20 mr-0 mb-0 ml-0 relative z-10 max-w-4xl lg:mt-0 lg:w-8/12">
                      <div className="flex flex-col items-start justify-start pt-0 lg:pr-10 pb-10 lg:pl-10 xs:pr-0 xs:pl-0 bg-white rounded-xl relative z-10">
                        <p className="w-full laptop:text-2xl font-medium phone:text-xl text-center leading-snug">CREATE ACCOUNT</p>

                        <span className="py-6 laptop:text-2xl font-medium phone:text-lg text-center ">Enter the details below</span>
                        <div className="w-full mt-6 mr-0 mb-0 ml-0 relative space-y-8">
                          <div className="relative">
                            <p className="bg-white pt-0 pr-2 pb-0 pl-2 -mt-3 mr-0 mb-0 ml-2 font-medium text-gray-600 absolute">Name</p>
                            <Field
                              name="username"
                              type="text"
                              placeholder="John"
                              className={`border placeholder-gray-400 focus:outline-none w-full pt-4 pr-4 pb-4 pl-4 mt-2 mr-0 mb-0 ml-0 text-base block bg-white rounded-sm ${touched.username && errors.username ? 'border-red-500' : 'border-gray_100'}`}
                              />
                            <ErrorMessage name="username" component="div" className="text-red-500 mt-2 " />
                          </div>
                          <div className="relative">
                            <p className="font-sans bg-white pt-0 pr-2 pb-0 pl-2 -mt-3 mr-0 mb-0 ml-2 font-medium text-gray-600 absolute">Email</p>
                            <Field
                              name="email"
                              type="email"
                              placeholder="123@ex.com"
                              className={`border placeholder-gray-400 focus:outline-none w-full pt-4 pr-4 pb-4 pl-4 mt-2 mr-0 mb-0 ml-0 text-base block bg-white rounded-sm ${touched.email && errors.email ? 'border-red-500' : 'border-gray_100'}`}
                              />
                            <ErrorMessage name="email" component="div" className="text-red-500 mt-2" />
                          </div>
                          <div className="relative">
                            <p className="bg-white pt-0 pr-2 pb-0 pl-2 -mt-3 mr-0 mb-0 ml-2 font-medium text-gray-600 absolute">Password</p>
                            <Field
                              name="password"
                              type={showPassword ? 'text' : 'password'}
                              placeholder="Password"
                              className={`border placeholder-gray-400 focus:outline-none w-full pt-4 pr-4 pb-4 pl-4 mt-2 mr-0 mb-0 ml-0 text-base block bg-white rounded-sm ${touched.password && errors.password ? 'border-red-500' : 'border-gray_100'}`}
                              />
                              <div className="eye absolute top-[30%] right-[5%]">
                              <button onClick={() => setShowPassword(!showPassword)} type="button" className="" aria-label={showPassword ? "Hide password" : "Show password"}>
                                {showPassword ? <IoEyeOffOutline aria-hidden="true" /> : <IoEyeOutline aria-hidden="true" />}
                                </button>
                            </div>
                            <ErrorMessage name="password" component="div" className="text-red-500 mt-2" />
                          </div>
                          <div className="relative mt-3">
                            <button
                              type="submit"
                              className="w-full inline-block pt-4 pr-5 pb-4 pl-5 laptop:text-xl phone:text-lg font-medium text-center text-white bg-black rounded-lg transition duration-200 hover:bg-gray-700 ease"
                              disabled={isSubmitting}
                            >
                              {isSubmitting ? 'Signing Up...' : 'Sign Up'}
                            </button>
                            <p className="text-gray-800 py-5 text-2xl text-center">OR</p>

                            <a
                              href="#"
                              className="w-full inline-flex pt-4 pr-5 pb-4 pl-5 laptop:text-xl phone:text-lg justify-center items-center text-center text-white bg-black rounded-lg transition duration-200 hover:bg-gray-700 ease"
                            >
                              <FcGoogle className="mr-2" size={24} /> Signup with Google
                            </a>
                          </div>

                          <p className="text-gray-800 py-2 text-xl phone:text-lg ">
                            Have an account? <Link to="/login"className="text-blue-500 no-underline">Sign In</Link> 
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </Form>
        )}
      </Formik>
      <ToastContainer />
    </>
  );
};

export default SignupForm;

1	import React, {useState} from 'react';	2✔
2	import { useDispatch } from 'react-redux';	2✔
3	import { Formik, Field, Form, ErrorMessage } from 'formik';	2✔
4	import * as Yup from 'yup';	2✔
5	import { signupUser } from '../redux/userSlice';	2✔
6	import { ToastContainer, toast } from 'react-toastify';	2✔
7	import 'react-toastify/dist/ReactToastify.css';	2✔
8	import { Link } from "react-router-dom";	2✔
9	import { FcGoogle } from 'react-icons/fc';	2✔
10	import { IoEyeOutline, IoEyeOffOutline } from 'react-icons/io5';	2✔
11	import { AppDispatch } from '../redux/store';
12
13	const SignupForm: React.FC = () => {	2✔
14	const dispatch = useDispatch<AppDispatch>();	6✔
15	const [showPassword, setShowPassword] = useState(false);	6✔
16
17	return (	6✔
18	<>
19	<Formik
20	initialValues={{ username: '',email: '', password: '' }}
21	validationSchema={Yup.object({
22	username: Yup.string().required('Required'),
23	email: Yup.string().email('Invalid email address').required('Required'),
24	password: Yup.string().min(6, 'Must be at least 8 characters').required('Required'),
25
26	})}
27	onSubmit={async (values, { setSubmitting, resetForm }) => {
28	try {	2✔
29	await dispatch(signupUser(values)).unwrap();	2✔
NEW 30	toast.success('Account created successfully! Check your email to verify.');	×
NEW 31	resetForm();	×
32	} catch (error: any) {
33	toast.error(error.message ?? 'Signup failed. Please try again.');	2!
34	} finally {
35	setSubmitting(false);	2✔
36	}
37	}}
38	>
39	{({ isSubmitting, errors, touched }) => (
40	<Form>	16✔
41	<section>
42	<div className="bg-white relative laptop:py-0">
43	<div className="flex flex-col items-center justify-between pt-0 pr-10 pb-0 pl-10 mt-0 mr-auto mb-0 ml-auto max-w-7xl xl:px-0 lg:flex-row">
44	<div className="flex flex-col items-center w-full pt-5 lg:pr-10 pb-10 lg:pl-10 xs:pr-0 xs:pl-0 lg:pt-20 lg:flex-row">
45	<div className="w-full bg-cover relative max-w-md lg:max-w-2xl lg:w-7/12">
46	<div className="flex flex-col items-center justify-center w-full h-full relative lg:pr-10">
47	<img src="bg0.svg" alt="Background" className="btn-" />
48	</div>
49	</div>
50
51	<div className="w-full mt-20 mr-0 mb-0 ml-0 relative z-10 max-w-4xl lg:mt-0 lg:w-8/12">
52	<div className="flex flex-col items-start justify-start pt-0 lg:pr-10 pb-10 lg:pl-10 xs:pr-0 xs:pl-0 bg-white rounded-xl relative z-10">
53	<p className="w-full laptop:text-2xl font-medium phone:text-xl text-center leading-snug">CREATE ACCOUNT</p>
54
55	<span className="py-6 laptop:text-2xl font-medium phone:text-lg text-center ">Enter the details below</span>
56	<div className="w-full mt-6 mr-0 mb-0 ml-0 relative space-y-8">
57	<div className="relative">
58	<p className="bg-white pt-0 pr-2 pb-0 pl-2 -mt-3 mr-0 mb-0 ml-2 font-medium text-gray-600 absolute">Name</p>
59	<Field
60	name="username"
61	type="text"
62	placeholder="John"
63	className={`border placeholder-gray-400 focus:outline-none w-full pt-4 pr-4 pb-4 pl-4 mt-2 mr-0 mb-0 ml-0 text-base block bg-white rounded-sm ${touched.username && errors.username ? 'border-red-500' : 'border-gray_100'}`}	36!
64	/>
65	<ErrorMessage name="username" component="div" className="text-red-500 mt-2 " />
66	</div>
67	<div className="relative">
68	<p className="font-sans bg-white pt-0 pr-2 pb-0 pl-2 -mt-3 mr-0 mb-0 ml-2 font-medium text-gray-600 absolute">Email</p>
69	<Field
70	name="email"
71	type="email"
72	placeholder="123@ex.com"
73	className={`border placeholder-gray-400 focus:outline-none w-full pt-4 pr-4 pb-4 pl-4 mt-2 mr-0 mb-0 ml-0 text-base block bg-white rounded-sm ${touched.email && errors.email ? 'border-red-500' : 'border-gray_100'}`}	36!
74	/>
75	<ErrorMessage name="email" component="div" className="text-red-500 mt-2" />
76	</div>
77	<div className="relative">
78	<p className="bg-white pt-0 pr-2 pb-0 pl-2 -mt-3 mr-0 mb-0 ml-2 font-medium text-gray-600 absolute">Password</p>
79	<Field
80	name="password"
81	type={showPassword ? 'text' : 'password'}	16✔
82	placeholder="Password"
83	className={`border placeholder-gray-400 focus:outline-none w-full pt-4 pr-4 pb-4 pl-4 mt-2 mr-0 mb-0 ml-0 text-base block bg-white rounded-sm ${touched.password && errors.password ? 'border-red-500' : 'border-gray_100'}`}	36!
84	/>
85	<div className="eye absolute top-[30%] right-[5%]">
86	<button onClick={() => setShowPassword(!showPassword)} type="button" className="" aria-label={showPassword ? "Hide password" : "Show password"}>	2✔
87	{showPassword ? <IoEyeOffOutline aria-hidden="true" /> : <IoEyeOutline aria-hidden="true" />}	16✔
88	</button>
89	</div>
90	<ErrorMessage name="password" component="div" className="text-red-500 mt-2" />
91	</div>
92	<div className="relative mt-3">
93	<button
94	type="submit"
95	className="w-full inline-block pt-4 pr-5 pb-4 pl-5 laptop:text-xl phone:text-lg font-medium text-center text-white bg-black rounded-lg transition duration-200 hover:bg-gray-700 ease"
96	disabled={isSubmitting}
97	>
98	{isSubmitting ? 'Signing Up...' : 'Sign Up'}	16✔
99	</button>
100	<p className="text-gray-800 py-5 text-2xl text-center">OR</p>
101
102	<a
103	href="#"
104	className="w-full inline-flex pt-4 pr-5 pb-4 pl-5 laptop:text-xl phone:text-lg justify-center items-center text-center text-white bg-black rounded-lg transition duration-200 hover:bg-gray-700 ease"
105	>
106	<FcGoogle className="mr-2" size={24} /> Signup with Google
107	</a>
108	</div>
109
110	<p className="text-gray-800 py-2 text-xl phone:text-lg ">
111	Have an account? <Link to="/login"className="text-blue-500 no-underline">Sign In</Link>
112	</p>
113	</div>
114	</div>
115	</div>
116	</div>
117	</div>
118	</div>
119	</section>
120	</Form>
121	)}
122	</Formik>
123	<ToastContainer />
124	</>
125	);
126	};
127
128	export default SignupForm;	2✔

atlp-rwanda / e-commerce-bitcrafters-fn / 388ddb7b-21e0-4c31-b9ea-283143a55413

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