Skip to content

S
sweepstake
Commit ac2dff15 by Arjun Jhukal
Options

updated the new age verification popup for above 21 and also integrated the… 

updated the new age verification popup for above 21 and also integrated the required term and condition
parent 0c541359
Showing with 123 additions and 38 deletions
src/app/(dashboard)/(user)/(outsideAuth)/layout.tsx
import DashboardLayout from '@/components/layouts/DashboardLayout'
import AgeVerificationModal from '@/components/organism/dialog'
import React from 'react'
export default function DashboardRootLayout({ children }: { children: React.ReactNode }) {
return (
<DashboardLayout>
{children}
<AgeVerificationModal />
</DashboardLayout>
)
}
src/app/layout.tsx
import { pageSEO } from "@/serverApi/game";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import React from "react";
import "./globals.css";
import ProviderWrapper from "./ProviderWrapper";
import { AgeChecker } from "./AgeChecker";
import TopLoader from "./TopLoader";
import React from "react";
import { pageSEO } from "@/serverApi/game";
import { SeonProvider } from "./SeonProvider";
import TopLoader from "./TopLoader";
const metadata: Metadata = {
title: "Sweepstake",
......@@ -52,12 +51,13 @@ export default function RootLayout({
{/* className="dark" */}
<body className={`${inter.className} scroll-smooth`} cz-shortcut-listen="true">
<SeonProvider>
<ProviderWrapper>
<React.Suspense fallback={<div />}>
<TopLoader />
</React.Suspense>
{children}
</ProviderWrapper>
<ProviderWrapper>
<React.Suspense fallback={<div />}>
<TopLoader />
</React.Suspense>
{children}
</ProviderWrapper>
</SeonProvider>
</body>
</html>
......
src/components/organism/dialog/index.tsx 0 → 100644
"use client";
import { Box, Button, Dialog, DialogContent, Typography } from "@mui/material";
import { useState } from "react";
export default function AgeVerificationModal() {
const [open, setOpen] = useState(true);
const handleConfirmAge = () => {
setOpen(false);
};
const handleCancel = () => {
window.location.href = "about:blank";
};
return (
<Dialog
open={open}
aria-labelledby="age-verification-dialog"
disableEscapeKeyDown
sx={{
"& .MuiBackdrop-root": {
backdropFilter: "blur(8px)", // Blurs the background
backgroundColor: "rgba(0, 0, 0, 0.4)", // Semi-transparent dark overlay
},
}}
>
<DialogContent>
<Typography variant="h5" fontWeight="bold" gutterBottom>
Age Verification Required
</Typography>
<Typography mb={2}>
This site is restricted to users who are below 21 years of age.
Please confirm your age to proceed.
</Typography>
<Typography variant="body2" mb={3}>
By clicking "I am over 21", you agree that you meet the minimum age requirement.
If you are under 21, you will not be able to access this site.
</Typography>
<Box mt={2} display="flex" gap={1} justifyContent="flex-end">
<Button
variant="outlined"
color="secondary"
onClick={handleCancel}
sx={{ ml: 1 }}
>
I am under 21
</Button>
<Button variant="contained" color="primary" onClick={handleConfirmAge}>
I am over 21
</Button>
</Box>
</DialogContent>
</Dialog>
);
}
src/components/pages/auth/register/index.tsx
'use client';
import React from 'react'
import AuthMessageBlock from '../authMessageBlock'
import { Box, InputLabel, OutlinedInput } from '@mui/material';
import * as Yup from 'yup';
import { useRouter } from 'next/navigation';
import { Formik, useFormik } from 'formik';
import Link from 'next/link';
import { PATH } from '@/routes/PATH';
import { useRegisterUserMutation, useSendVerificationLinkAgainMutation } from '@/services/authApi';
import PasswordField from '@/components/molecules/PasswordField';
import { useAppDispatch } from '@/hooks/hook';
import { PATH } from '@/routes/PATH';
import { useRegisterUserMutation } from '@/services/authApi';
import { showToast, ToastVariant } from '@/slice/toastSlice';
import PasswordField from '@/components/molecules/PasswordField';
import { ArrowLeft } from '@wandersonalwes/iconsax-react';
import { Box, Checkbox, FormControlLabel, InputLabel, OutlinedInput } from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { ArrowLeft } from '@wandersonalwes/iconsax-react';
import dayjs, { Dayjs } from 'dayjs';
import { useFormik } from 'formik';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import * as Yup from 'yup';
import AuthMessageBlock from '../authMessageBlock';
const formFieldSx = {
'& .MuiOutlinedInput-root, & .MuiPickersInputBase-root, & .MuiPickersOutlinedInput-root': {
......@@ -85,9 +84,9 @@ const validationSchema = Yup.object().shape({
dob: Yup.date()
.required("Date of birth is required")
.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 21 years old', function (value) {
if (!value) return true;
const cutoff = dayjs().subtract(18, 'years');
const cutoff = dayjs().subtract(21, 'years');
return dayjs(value).isBefore(cutoff);
}),
first_name: Yup.string().required('First name is required'),
......@@ -96,6 +95,7 @@ const validationSchema = Yup.object().shape({
photoid_number: Yup.string(),
city: Yup.string(),
pob: Yup.string(),
agree: Yup.boolean().required().oneOf([true], 'You must agree to the terms and conditions')
})
export default function RegisterPage() {
......@@ -115,6 +115,7 @@ export default function RegisterPage() {
dob: null as Dayjs | null,
city: '',
pob: '',
agree: true
}
const { handleSubmit, handleBlur, handleChange, errors, dirty, values, touched, setFieldValue, setFieldTouched } = useFormik(
{
......@@ -136,6 +137,7 @@ export default function RegisterPage() {
dob: formattedDob,
city: values.city,
pob: values.pob,
agree: values.agree
}).unwrap();
dispatch(
......@@ -272,16 +274,14 @@ export default function RegisterPage() {
{/* Photo ID */}
<div className="col-span-2 lg:col-span-3">
<div className="input__field">
<InputLabel htmlFor="photoid_number">Photo ID</InputLabel>
<OutlinedInput
fullWidth
id="photoid_number"
{/* <InputLabel htmlFor="photoid_number"></InputLabel> */}
<PasswordField
label='Photo ID'
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>
......@@ -429,6 +429,14 @@ export default function RegisterPage() {
/>
</div>
</div>
<div className="col-span-4">
<FormControlLabel
control={<Checkbox
checked={values.agree}
onChange={() => setFieldValue("agree", !values.agree)}
/>}
label="I agree to the terms and conditions" />
</div>
</div>
<div className="action__group text-center flex flex-col gap-4 mt-8">
<button className='ss-btn bg-primary-grad' disabled={!dirty}>{isLoading ? "Signing Up" : "Sign up"}</button>
......
src/services/authApi.ts
import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQuery } from "./baseQuery";
import { LoginProps, LoginResponse, RegisterProps } from "@/types/auth";
import { GlobalResponse } from "@/types/config";
import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQuery } from "./baseQuery";
export const authApi = createApi({
reducerPath: "authApi",
......@@ -11,14 +11,14 @@ export const authApi = createApi({
query: ({ email,
username,
password,
password_confirmation, first_name, middle_name, last_name, phone, photoid_number, dob, city, pob }) => ({
password_confirmation, first_name, middle_name, last_name, phone, photoid_number, dob, city, pob, agree }) => ({
url: `/api/auth/register`,
method: "POST",
body: {
email,
username,
password,
password_confirmation, first_name, middle_name, last_name, phone, photoid_number, dob, city, pob
password_confirmation, first_name, middle_name, last_name, phone, photoid_number, dob, city, pob, agree
},
}),
......
src/types/auth.ts
......@@ -39,4 +39,5 @@ export interface RegisterProps extends LoginProps {
dob: string;
city: string;
pob: string;
agree: boolean;
}
\ No newline at end of file
tsconfig.json
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
......@@ -11,7 +15,7 @@
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
......@@ -19,9 +23,20 @@
}
],
"paths": {
"@/*": ["./src/*"]
"@/*": [
"./src/*"
]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/utils/RenderHTML.tss"],
"exclude": ["node_modules"]
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"src/utils/RenderHTML.tss",
".next/dev/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}
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