Create an Account

make-this-form-in-the-best-ui-prospective--"use-client";-import-{-useState,-useEffect-}-from-"react";-import-{-useFormik-}-from-"formik";-import-{-useRouter-}-from-"next/navigation";-import-{-Container,-Box,-TextField,-Button,-Typography,-Alert,-InputLabel,-Input,-Snackbar,-InputAdornment,-IconButton,-Autocomplete,-}-from-"@mui/material";-import-*-as-Yup-from-"yup";-import-api-from-"../utils/api";-import-{-Visibility,-VisibilityOff-}-from-"@mui/icons-material";-import-{-Filter-}-from-"bad-words";-export-default-function-Register()-{-const-filter-=-new-Filter();-const-router-=-useRouter();-const-[snackbar,-setSnackbar]-=-useState({-open:-false,-message:-"",-severity:-"success",-});-const-[showPassword,-setShowPassword]-=-useState(false);-const-[showConfirmPassword,-setShowConfirmPassword]-=-useState(false);-const-[countryList,-setCountryList]-=-useState([]);-const-[stateList,-setStateList]-=-useState([]);-const-[selectedCountry,-setSelectedCountry]-=-useState(null);-const-[selectedState,-setSelectedState]-=-useState(null);-const-[phoneCodeList,-setPhoneCodeList]-=-useState([]);-const-[selectedPhoneCode,-setSelectedPhoneCode]-=-useState("");-const-togglePasswordVisibility-=-()-=>-setShowPassword(!showPassword);-const-toggleConfirmPasswordVisibility-=-()-=>-setShowConfirmPassword(!showConfirmPassword);-const-formik-=-useFormik({-initialValues:-{-name:-"",-email:-"",-mobile:-"",-country:-null,-state:-null,-phoneCode:-"",-password:-"",-confirmPassword:-"",-profileImage:-null,-},-validationSchema:-Yup.object({-name:-Yup.string()-.required("Please-enter-your-name.")-.test(-"english-characters-only",-"Name-can-only-contain-English-characters.",-(value)-=>-{-const-nonEnglishPattern-=-/[^\x00-\x7F]+/;-return-!nonEnglishPattern.test(value);-}-)-.test(-"no-bad-words",-"Name-contains-inappropriate-content.",-(value)-=>-!filter.isProfane(value)-)-.test(-"no-html",-"Name-cannot-contain-HTML-or-script-tags.",-(value)-=>-!/<\/?[^>]+(>|$)/.test(value)-)-.matches(-/^[A-Za-z\s_'`–—.-]+$/,-"Name-can-only-contain-alphabetical-characters,-underscores,-spaces,-dashes,-apostrophes,-and-dots."-)-.matches(-/^[^!@#$%^&*()<>{}[\]\\/+;]+$/,-"Name-cannot-contain-!,-@,-#,-$,-%,-^,-&,-*,-(,-),-<,->,-{,-},-[,-],-\\,-/,-+,-or-;-characters."-),-email:-Yup.string()-.trim()-.lowercase()-.email("Invalid-email-format")-.required("Please-enter-your-email."),-//-phoneCode:-Yup.string()-//-.required("Please-select-a-phone-code.")-//-.matches(/^[0-9]+$/,-"Please-enter-a-valid-phone-code."),-mobile:-Yup.string()-.required("Please-enter-your-mobile-number.")-.matches(-/^[0-9+\-\(\)\s]+$/,-"Please-enter-a-valid-mobile-number"-)-.test(-"min-digits",-"Mobile-number-must-be-at-least-10-digits",-(value)-=>-value.replace(/\D/g,-"").length->=-10-)-.test(-"max-digits",-"Mobile-number-must-not-exceed-20-digits",-(value)-=>-value.replace(/\D/g,-"").length-<=-20-),-password:-Yup.string()-.required("Password-is-required")-.min(6,-"Password-must-be-at-least-6-characters")-.matches(-/[A-Z]/,-"Password-must-contain-at-least-one-uppercase-letter"-)-.matches(/[0-9]/,-"Password-must-contain-at-least-one-number")-.matches(-/[!@#$%^&*(),.?":{}|<>]/,-"Password-must-contain-at-least-one-special-character"-),-confirmPassword:-Yup.string()-.required("Confirm-Password-is-required")-.oneOf([Yup.ref("password"),-null],-"Passwords-must-match"),-profileImage:-Yup.mixed()-.nullable()-.test(-"fileType",-"Only-JPEG,-JPG,-PNG-files-are-allowed",-(value)-=>-{-return-(-!value-||-(value-&&-[-"image/jpeg",-"image/jpg",-"image/png",-].includes(value.type))-);-}-)-.test(-"fileSize",-"File-size-must-be-less-than-2-MB",-(value)-=>-{-return-(-!value-||-(value-&&-value.size-<=-2-*-1024-*-1024)-);-}-),-}),-onSubmit:-async-(values)-=>-{-const-formData-=-new-FormData();-const-fullMobileNumber-=-`+${selectedPhoneCode}${values.mobile}`;-formData.append("name",-values.name);-formData.append("email",-values.email);-formData.append("mobile",-fullMobileNumber);-formData.append("countryId",-selectedCountry?.id);-formData.append("stateId",-selectedState?.id);-formData.append("password",-values.password);-if-(values.profileImage)-{-formData.append("profileImage",-values.profileImage);-}-try-{-console.log("values",-values);-await-api.post("/user/register",-formData,-{-headers:-{-"Content-Type":-"multipart/form-data"-},-});-setSnackbar({-open:-true,-message:-"User-created-successfully!-Please-login.",-severity:-"success",-});-setTimeout(()-=>-router.push("/login"),-2000);-}-catch-(error)-{-const-errorMessage-=-error.response?.data?.message-||-"An-unexpected-error-occurred.";-setSnackbar({-open:-true,-message:-errorMessage,-severity:-"error",-});-}-},-});-const-countriesData-=-async-()-=>-{-try-{-const-result-=-await-api.post("/country/countries-list");-const-countryData-=-result.data.data;-setCountryList(countryData);-}-catch-(error)-{-console.error(error);-}-};-useEffect(()-=>-{-countriesData();-},-[]);-const-phoneCodeData-=-async-()-=>-{-try-{-const-result-=-await-api.post("/country/phone-codes");-const-phoneCode-=-result.data.data;-setPhoneCodeList(phoneCode);-}-catch-(error)-{-console.error(error);-}-};-useEffect(()-=>-{-phoneCodeData();-},-[]);-const-handleMobileCodeChange-=-(event,-value)-=>-{-if-(value)-{-setSelectedPhoneCode(value.phonecode);-}-};-const-fetchStates-=-async-(countryId)-=>-{-try-{-const-result-=-await-api.post("/country/states-list",-{-country_id:-countryId,-});-const-stateData-=-result.data.data;-setStateList(stateData);-}-catch-(error)-{-console.error("Error-fetching-states:",-error);-}-};-const-handleCountryChange-=-(event,-value)-=>-{-if-(value)-{-const-selectedCountry-=-countryList.find(-(country)-=>-country.name-===-value-);-setSelectedCountry(selectedCountry);-formik.setFieldValue("country",-selectedCountry.id);-fetchStates(selectedCountry.id);-setSelectedState(null);-formik.setFieldValue("state",-null);-}-else-{-setSelectedCountry(null);-setStateList([]);-setSelectedState(null);-formik.setFieldValue("country",-null);-formik.setFieldValue("state",-null);-}-};-const-handleStateChange-=-(event,-value)-=>-{-if-(value)-{-const-selectedState-=-stateList.find(-(state)-=>-state.name-===-value-);-setSelectedState(selectedState);-formik.setFieldValue("state",-selectedState.id);-}-else-{-setSelectedState(null);-formik.setFieldValue("state",-null);-}-};-const-handleCloseSnackbar-=-()-=>-{-setSnackbar({-...snackbar,-open:-false-});-};-return-(-<Container-maxWidth="sm">-<Box-sx={{-mt:-8,-p:-4,-border:-"1px-solid-#e0e0e0",-borderRadius:-"8px",-boxShadow:-"0-4px-20px-rgba(0,-0,-0,-0.1)",-backgroundColor:-"#ffffff",-}}->-<Typography-variant="h4"-align="center"-gutterBottom>-Create-an-Account-</Typography>-<form-onSubmit={formik.handleSubmit}-encType="multipart/form-data"->-<TextField-fullWidth-label="Name"-name="name"-value={formik.values.name}-onChange={formik.handleChange}-onBlur={formik.handleBlur}-margin="normal"-variant="outlined"-error={-formik.touched.name-&&-Boolean(formik.errors.name)-}-helperText={formik.touched.name-&&-formik.errors.name}-sx={{-mb:-0.01-}}-/>-<TextField-fullWidth-label="Email"-name="email"-value={formik.values.email}-onChange={formik.handleChange}-onBlur={formik.handleBlur}-margin="normal"-type="email"-variant="outlined"-error={-formik.touched.email-&&-Boolean(formik.errors.email)-}-helperText={formik.touched.email-&&-formik.errors.email}-sx={{-mb:-0.1-}}-/>-<div-style={{-display:-"flex",-gap:-"10px"-}}>-<Autocomplete-sx={{-mb:-2,-width:-"250px"-}}-options={phoneCodeList}-value={-phoneCodeList.find(-(code)-=>-code.phonecode-===-selectedPhoneCode-)-||-null-}-onChange={handleMobileCodeChange}-getOptionLabel={(option)-=>-`+${option.phonecode}`}-renderInput={(params)-=>-(-<TextField-{...params}-label="Code"-variant="outlined"-margin="normal"-onChange={formik?.handleChange}-onBlur={formik?.handleBlur}-value={formik?.values.phoneCode}-error={-formik?.touched.phoneCode-&&-Boolean(formik?.errors.phoneCode)-}-helperText={-formik?.touched.phoneCode-&&-formik?.errors.phoneCode-}-/>-)}-isOptionEqualToValue={(option,-value)-=>-option.phonecode-===-value.phonecode-}-getOptionKey={(option)-=>-`${option.phonecode}-${option._id}`-}-/>-<TextField-fullWidth-label="Mobile-Number"-name="mobile"-value={formik?.values?.mobile-||-""}-onChange={formik?.handleChange}-onBlur={formik?.handleBlur}-margin="normal"-type="text"-variant="outlined"-error={-formik?.touched?.mobile-&&-Boolean(formik?.errors?.mobile)-}-helperText={-formik?.touched?.mobile-&&-formik?.errors?.mobile-}-sx={{-mb:-2-}}-/>-</div>-<TextField-fullWidth-label="Password"-name="password"-type={showPassword-?-"text"-:-"password"}-value={formik.values.password}-onChange={formik.handleChange}-onBlur={formik.handleBlur}-error={-formik.touched.password-&&-Boolean(formik.errors.password)-}-helperText={-formik.touched.password-&&-formik.errors.password-}-InputProps={{-endAdornment:-(-<InputAdornment-position="end">-<IconButton-onClick={togglePasswordVisibility}-edge="end"->-{showPassword-?-(-<VisibilityOff-/>-)-:-(-<Visibility-/>-)}-</IconButton>-</InputAdornment>-),-}}-sx={{-mb:-2-}}-/>-<TextField-fullWidth-label="Confirm-Password"-name="confirmPassword"-type={showConfirmPassword-?-"text"-:-"password"}-value={formik.values.confirmPassword}-onChange={formik.handleChange}-onBlur={formik.handleBlur}-error={-formik.touched.confirmPassword-&&-Boolean(formik.errors.confirmPassword)-}-helperText={-formik.touched.confirmPassword-&&-formik.errors.confirmPassword-}-InputProps={{-endAdornment:-(-<InputAdornment-position="end">-<IconButton-onClick={-toggleConfirmPasswordVisibility-}-edge="end"->-{showConfirmPassword-?-(-<VisibilityOff-/>-)-:-(-<Visibility-/>-)}-</IconButton>-</InputAdornment>-),-}}-sx={{-mb:-2-}}-/>-<div-style={{-display:-"flex",-gap:-"10px"-}}>-<Autocomplete-fullWidth-options={countryList.map((country)-=>-country.name)}-value={selectedCountry?.name-||-""}-onChange={handleCountryChange}-renderInput={(params)-=>-(-<TextField-{...params}-label="Country"-variant="outlined"-margin="normal"-error={-formik.touched.country-&&-Boolean(formik.errors.country)-}-helperText={-formik.touched.country-&&-formik.errors.country-}-/>-)}-sx={{-mb:-2-}}-/>-<Autocomplete-fullWidth-options={stateList.map((state)-=>-state.name)}-value={selectedState?.name-||-""}-onChange={handleStateChange}-renderInput={(params)-=>-(-<TextField-{...params}-label="State"-variant="outlined"-margin="normal"-error={-formik.touched.state-&&-Boolean(formik.errors.state)-}-helperText={-formik.touched.state-&&-formik.errors.state-}-/>-)}-sx={{-mb:-2-}}-/>-</div>-<Box-sx={{-mt:-2-}}>-<InputLabel-htmlFor="file-upload-input">-Upload-Profile-Image-</InputLabel>-<Input-id="file-upload-input"-type="file"-accept="image/jpeg,-image/jpg,-image/png"-onChange={(e)-=>-formik.setFieldValue(-"profileImage",-e.target.files[0]-)-}-onBlur={formik.handleBlur}-sx={{-display:-"block",-mt:-1,-padding:-1,-backgroundColor:-"#f5f5f5",-border:-"1px-solid-#ccc",-borderRadius:-"4px",-}}-/>-{formik.touched.profileImage-&&-formik.errors.profileImage-&&-(-<Typography-variant="body2"-color="error"-sx={{-mt:-1-}}->-{formik.errors.profileImage}-</Typography>-)}-{formik.values.profileImage-&&-!formik.errors.profileImage-&&-(-<Box-sx={{-mt:-2,-textAlign:-"center",-border:-"1px-solid-#ccc",-padding:-2,-borderRadius:-"4px",-backgroundColor:-"#f9f9f9",-}}->-<img-src={URL.createObjectURL(-formik.values.profileImage-)}-alt="Profile-Preview"-style={{-maxWidth:-"50%",-height:-"auto",-marginTop:-"8px",-}}-/>-</Box>-)}-</Box>-<Button-type="submit"-fullWidth-variant="contained"-sx={{-mt:-2-}}->-Register-</Button>-</form>-<Typography-align="center"-sx={{-mt:-2-}}>-Already-have-an-account?{"-"}-<Button-onClick={()-=>-router.push("/login")}-variant="text"->-Login-</Button>-</Typography>-</Box>-<Snackbar-open={snackbar.open}-autoHideDuration={2000}-onClose={handleCloseSnackbar}-anchorOrigin={{-vertical:-"top",-horizontal:-"right"-}}->-<Alert-onClose={handleCloseSnackbar}-severity={snackbar.severity}-sx={{-width:-"100%"-}}->-{snackbar.message}-</Alert>-</Snackbar>-</Container>-);-}