Skip to content

S
sweepstake
Commit 39855230 by Arjun Jhukal
Options

updated the new fixes

parent 92ba34b9
Showing with 202 additions and 51 deletions
src/app/globals.css
...@@ -459,3 +459,7 @@ input[type=number]::-webkit-outer-spin-button { ...@@ -459,3 +459,7 @@ input[type=number]::-webkit-outer-spin-button {
input[type=number] { input[type=number] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
.MuiPickersSectionList-root {
padding: 12px 16px !important;
}
\ No newline at end of file
src/components/pages/auth/register/index.tsx
...@@ -69,8 +69,8 @@ const validationSchema = Yup.object().shape({ ...@@ -69,8 +69,8 @@ const validationSchema = Yup.object().shape({
.max(14, "Display Name must be less than 14 characters") .max(14, "Display Name must be less than 14 characters")
.min(6, "Display Name must be at least 6 characters long") .min(6, "Display Name must be at least 6 characters long")
.matches(/^\S+$/, "Display Name cannot contain spaces"), .matches(/^\S+$/, "Display Name cannot contain spaces"),
// phone: Yup.string() phone: Yup.string()
// .required("Phone number is required"), .required("Phone number is required"),
password: Yup.string() password: Yup.string()
.required('Password is required') .required('Password is required')
.test( .test(
...@@ -82,14 +82,20 @@ const validationSchema = Yup.object().shape({ ...@@ -82,14 +82,20 @@ const validationSchema = Yup.object().shape({
confirmPassword: Yup.string() confirmPassword: Yup.string()
.oneOf([Yup.ref('password')], 'Passwords must match') .oneOf([Yup.ref('password')], 'Passwords must match')
.required('Confirm Password is required'), .required('Confirm Password is required'),
// dob: Yup.date() dob: Yup.date()
// .required("Date of birth is required") .required("Date of birth is required")
// .max(new Date(), 'Date of birth cannot be in the future') .max(new Date(), 'Date of birth cannot be in the future')
// .test('age', 'You must be at least 18 years old', function (value) { .test('age', 'You must be at least 18 years old', function (value) {
// if (!value) return true; if (!value) return true;
// const cutoff = dayjs().subtract(18, 'years'); const cutoff = dayjs().subtract(18, 'years');
// return dayjs(value).isBefore(cutoff); return dayjs(value).isBefore(cutoff);
// }) }),
first_name: Yup.string().required('First name is required'),
middle_name: Yup.string(),
last_name: Yup.string().required('Last name is required'),
photoid_number: Yup.string().required('Photo ID is required'),
city: Yup.string(),
pob: Yup.string(),
}) })
export default function RegisterPage() { export default function RegisterPage() {
...@@ -97,24 +103,39 @@ export default function RegisterPage() { ...@@ -97,24 +103,39 @@ export default function RegisterPage() {
const router = useRouter(); const router = useRouter();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const initialValues = { const initialValues = {
first_name: '',
middle_name: '',
last_name: '',
emailAddress: "", emailAddress: "",
displayName: "", displayName: "",
password: "", password: "",
confirmPassword: "", confirmPassword: "",
// phone: "", phone: "",
// dob: null as Dayjs | null photoid_number: '',
dob: null as Dayjs | null,
city: '',
pob: '',
} }
const { handleSubmit, handleBlur, handleChange, errors, dirty, values, touched, setFieldValue, setFieldTouched } = useFormik( const { handleSubmit, handleBlur, handleChange, errors, dirty, values, touched, setFieldValue, setFieldTouched } = useFormik(
{ {
initialValues, initialValues,
validationSchema, validationSchema,
onSubmit: async (values) => { onSubmit: async (values) => {
const formattedDob = values.dob ? dayjs(values.dob).format('MM-DD-YYYY') : '';
try { try {
const response = await registerUser({ const response = await registerUser({
email: values.emailAddress, email: values.emailAddress,
username: values.displayName, username: values.displayName,
password: values.password, password: values.password,
password_confirmation: values.confirmPassword, password_confirmation: values.confirmPassword,
first_name: values.first_name,
middle_name: values.middle_name,
last_name: values.last_name,
phone: values.phone,
photoid_number: values.photoid_number,
dob: formattedDob,
city: values.city,
pob: values.pob,
}).unwrap(); }).unwrap();
dispatch( dispatch(
...@@ -145,17 +166,72 @@ export default function RegisterPage() { ...@@ -145,17 +166,72 @@ export default function RegisterPage() {
title="Welcome Back. Ready to rock today?" title="Welcome Back. Ready to rock today?"
features={["Fun & Fair Gameplay", "Exciting Prizes", "Accessible Anytime, Anywhere", "Trusted & Secure"]} features={["Fun & Fair Gameplay", "Exciting Prizes", "Accessible Anytime, Anywhere", "Trusted & Secure"]}
/> />
<Box className="auth__form__wrapper lg:w-[50%] p-8"> <Box className="auth__form__wrapper lg:w-[50%] p-8 max-h-screen overflow-auto">
<div className="section__title mb-4 lg:mb-6"> <div className="section__title mb-4 lg:mb-6">
<Link href={PATH.DASHBOARD.ROOT} className='text-[12px] leading-[120%] font-bold lg:text-[16px] hover:text-primary flex gap-2 items-center'><ArrowLeft />Back to Homepage</Link> <Link href={PATH.DASHBOARD.ROOT} className='text-[12px] leading-[120%] font-bold lg:text-[16px] hover:text-primary flex gap-2 items-center'><ArrowLeft />Back to Homepage</Link>
<h1 className='text-[24px] leading-[120%] font-bold lg:text-[48px]'>Setup an account</h1> <h1 className='text-[24px] leading-[120%] font-bold lg:text-[48px]'>Setup an account</h1>
</div> </div>
<form action="" onSubmit={handleSubmit}> <form action="" onSubmit={handleSubmit}>
<div className="grid md:grid-cols-2 gap-x-3 gap-y-5"> <div className="grid md:grid-cols-2 lg:grid-cols-6 gap-x-3 gap-y-5">
<div className="col-span-2"> {/* First Name */}
<div className="col-span-2 lg:col-span-2">
<div className="input__field">
<InputLabel htmlFor="first_name">First Name<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="first_name"
name="first_name"
placeholder="Enter first name"
value={values.first_name}
onChange={handleChange}
onBlur={handleBlur}
sx={formFieldSx}
/>
<span className="error">{touched.first_name && errors.first_name}</span>
</div>
</div>
{/* Middle Name */}
<div className="col-span-2 lg:col-span-2">
<div className="input__field">
<InputLabel htmlFor="middle_name">Middle Name</InputLabel>
<OutlinedInput
fullWidth
id="middle_name"
name="middle_name"
placeholder="Enter middle name"
value={values.middle_name}
onChange={handleChange}
onBlur={handleBlur}
sx={formFieldSx}
/>
<span className="error">{touched.middle_name && errors.middle_name}</span>
</div>
</div>
{/* Last Name */}
<div className="col-span-2 lg:col-span-2">
<div className="input__field">
<InputLabel htmlFor="last_name">Last Name<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="last_name"
name="last_name"
placeholder="Enter last name"
value={values.last_name}
onChange={handleChange}
onBlur={handleBlur}
sx={formFieldSx}
/>
<span className="error">{touched.last_name && errors.last_name}</span>
</div>
</div>
{/* EMAIL */}
<div className="col-span-2 lg:col-span-6">
<div className="input_field"> <div className="input_field">
<InputLabel htmlFor="emailAddress">Email Address*</InputLabel> <InputLabel htmlFor="emailAddress">Email Address<span className="text-red-500">*</span></InputLabel>
<OutlinedInput <OutlinedInput
name='emailAddress' name='emailAddress'
id='emailAddress' id='emailAddress'
...@@ -171,9 +247,11 @@ export default function RegisterPage() { ...@@ -171,9 +247,11 @@ export default function RegisterPage() {
} }
</div> </div>
</div> </div>
<div className="col-span-2">
{/* DISPLAY NAME */}
<div className="col-span-2 lg:col-span-3">
<div className="input_field"> <div className="input_field">
<InputLabel htmlFor="displayName">Display Name*</InputLabel> <InputLabel htmlFor="displayName">Display Name<span className="text-red-500">*</span></InputLabel>
<OutlinedInput <OutlinedInput
name='displayName' name='displayName'
id='displayName' id='displayName'
...@@ -189,7 +267,65 @@ export default function RegisterPage() { ...@@ -189,7 +267,65 @@ export default function RegisterPage() {
} }
</div> </div>
</div> </div>
{/* <div className="col-span-2">
{/* Photo ID */}
<div className="col-span-2 lg:col-span-3">
<div className="input__field">
<InputLabel htmlFor="photoid_number">Photo ID<span className="text-red-500">*</span></InputLabel>
<OutlinedInput
fullWidth
id="photoid_number"
name="photoid_number"
placeholder="Enter photo ID"
value={values.photoid_number}
onChange={handleChange}
onBlur={handleBlur}
sx={formFieldSx}
/>
<span className="error">{touched.photoid_number && errors.photoid_number}</span>
</div>
</div>
{/* Address */}
<div className="col-span-2 lg:col-span-3">
<div className="input__field">
<InputLabel htmlFor="city">City</InputLabel>
<OutlinedInput
fullWidth
id="city"
name="city"
placeholder="Enter city"
value={values.city}
onChange={handleChange}
onBlur={handleBlur}
sx={formFieldSx}
/>
<span className="error">{touched.city && errors.city}</span>
</div>
</div>
{/* Country */}
<div className="col-span-2 lg:col-span-3">
<div className="input__field">
<InputLabel htmlFor="pob">Place of Birth</InputLabel>
<OutlinedInput
fullWidth
id="pob"
name="pob"
placeholder="Enter Place of Birth"
value={values.pob}
onChange={handleChange}
onBlur={handleBlur}
sx={formFieldSx}
/>
<span className="error">{touched.pob && errors.pob}</span>
</div>
</div>
<div className="col-span-2 lg:col-span-3">
<div className="input__field"> <div className="input__field">
<InputLabel htmlFor="phone">Phone</InputLabel> <InputLabel htmlFor="phone">Phone</InputLabel>
<OutlinedInput <OutlinedInput
...@@ -206,7 +342,7 @@ export default function RegisterPage() { ...@@ -206,7 +342,7 @@ export default function RegisterPage() {
</span> </span>
</div> </div>
</div> </div>
<div className="col-span-2"> <div className="col-span-2 lg:col-span-3">
<div className="input__field"> <div className="input__field">
<InputLabel htmlFor="dob">Date of Birth</InputLabel> <InputLabel htmlFor="dob">Date of Birth</InputLabel>
<LocalizationProvider dateAdapter={AdapterDayjs}> <LocalizationProvider dateAdapter={AdapterDayjs}>
...@@ -266,8 +402,8 @@ export default function RegisterPage() { ...@@ -266,8 +402,8 @@ export default function RegisterPage() {
/> />
</LocalizationProvider> </LocalizationProvider>
</div> </div>
</div> */} </div>
<div className="col-span-2 lg:col-span-1"> <div className="col-span-2 lg:col-span-3">
<div className="input_field"> <div className="input_field">
<PasswordField <PasswordField
name="password" name="password"
...@@ -280,7 +416,7 @@ export default function RegisterPage() { ...@@ -280,7 +416,7 @@ export default function RegisterPage() {
/> />
</div> </div>
</div> </div>
<div className="col-span-2 lg:col-span-1"> <div className="col-span-2 lg:col-span-3">
<div className="input_field"> <div className="input_field">
<PasswordField <PasswordField
name="confirmPassword" name="confirmPassword"
......
src/components/pages/dashboard/userDashboard/verifyKyc/index.tsx
...@@ -170,22 +170,6 @@ export default function VerifyKYCPage() { ...@@ -170,22 +170,6 @@ export default function VerifyKYCPage() {
<span className="error">{formik.touched.last_name && formik.errors.last_name}</span> <span className="error">{formik.touched.last_name && formik.errors.last_name}</span>
</div> </div>
{/* Address */}
<div className="input__field">
<InputLabel htmlFor="address">Address</InputLabel>
<OutlinedInput
fullWidth
id="address"
name="address"
placeholder="Enter address"
value={formik.values.address}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
sx={formFieldSx}
/>
<span className="error">{formik.touched.address && formik.errors.address}</span>
</div>
{/* User ID */} {/* User ID */}
<div className="input__field"> <div className="input__field">
<InputLabel htmlFor="user_id">User ID<span className="text-red-500">*</span></InputLabel> <InputLabel htmlFor="user_id">User ID<span className="text-red-500">*</span></InputLabel>
...@@ -217,6 +201,22 @@ export default function VerifyKYCPage() { ...@@ -217,6 +201,22 @@ export default function VerifyKYCPage() {
/> />
<span className="error">{formik.touched.photo_id && formik.errors.photo_id}</span> <span className="error">{formik.touched.photo_id && formik.errors.photo_id}</span>
</div> </div>
{/* Address */}
<div className="input__field">
<InputLabel htmlFor="address">Address</InputLabel>
<OutlinedInput
fullWidth
id="address"
name="address"
placeholder="Enter address"
value={formik.values.address}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
sx={formFieldSx}
/>
<span className="error">{formik.touched.address && formik.errors.address}</span>
</div>
</div> </div>
<Stack mt={4} direction="row" justifyContent="flex-end"> <Stack mt={4} direction="row" justifyContent="flex-end">
......
src/services/authApi.ts
...@@ -11,16 +11,17 @@ export const authApi = createApi({ ...@@ -11,16 +11,17 @@ export const authApi = createApi({
query: ({ email, query: ({ email,
username, username,
password, password,
password_confirmation }) => ({ password_confirmation, first_name, middle_name, last_name, phone, photoid_number, dob, city, pob }) => ({
url: `/api/auth/register`, url: `/api/auth/register`,
method: "POST", method: "POST",
body: { body: {
email, email,
username, username,
password, password,
password_confirmation password_confirmation, first_name, middle_name, last_name, phone, photoid_number, dob, city, pob
}, },
}) }),
}), }),
login: builder.mutation<LoginResponse, LoginProps>({ login: builder.mutation<LoginResponse, LoginProps>({
query: ({ email, password }) => ({ query: ({ email, password }) => ({
......
src/types/auth.ts
...@@ -6,16 +6,16 @@ export type LoginProps = { ...@@ -6,16 +6,16 @@ export type LoginProps = {
} }
export interface User { export interface User {
id: string, id: string;
name: string, name: string;
email: string, email: string;
first_name: string, first_name: string;
last_name: string, last_name: string;
profile_image: string, profile_image: string;
wallet_address: string, wallet_address: string;
address: string, address: string;
city: string city: string
role: RoleProps, role: RoleProps;
} }
export interface LoginResponse { export interface LoginResponse {
...@@ -30,4 +30,12 @@ export interface LoginResponse { ...@@ -30,4 +30,12 @@ export interface LoginResponse {
export interface RegisterProps extends LoginProps { export interface RegisterProps extends LoginProps {
username: string; username: string;
password_confirmation: string; password_confirmation: string;
first_name: string;
middle_name: string;
last_name: string;
phone: string;
photoid_number: string;
dob: string;
city: string;
pob: string;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment