diff --git a/web/package-lock.json b/web/package-lock.json index 7707526..bf59716 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -30,6 +30,7 @@ "graphql": "^16.8.1", "graphql-tag": "^2.12.6", "jwt-decode": "^4.0.0", + "libphonenumber-js": "^1.10.58", "next": "^14.1.0", "next-mdx-remote": "^4.4.1", "nprogress": "^0.2.0", @@ -5283,6 +5284,11 @@ "node": ">=6" } }, + "node_modules/libphonenumber-js": { + "version": "1.10.58", + "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.58.tgz", + "integrity": "sha512-53A0IpJFL9LdHbpeatwizf8KSwPICrqn9H0g3Y7WQ+Jgeu9cQ4Ew3WrRtrLBu/CX2lXd5+rgT01/tGlkbkzOjw==" + }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", diff --git a/web/package.json b/web/package.json index 759c3b7..1154635 100644 --- a/web/package.json +++ b/web/package.json @@ -31,6 +31,7 @@ "graphql": "^16.8.1", "graphql-tag": "^2.12.6", "jwt-decode": "^4.0.0", + "libphonenumber-js": "^1.10.58", "next": "^14.1.0", "next-mdx-remote": "^4.4.1", "nprogress": "^0.2.0", diff --git a/web/src/components/profile/UserForm.jsx b/web/src/components/profile/UserForm.jsx index 2f7fdb6..7467ede 100644 --- a/web/src/components/profile/UserForm.jsx +++ b/web/src/components/profile/UserForm.jsx @@ -10,6 +10,10 @@ import { useToast } from "components/Toast"; import { LoadingButton } from "@mui/lab"; import { Button, Grid, TextField, Typography } from "@mui/material"; +import { + isValidPhoneNumber, + parsePhoneNumberWithError, +} from "libphonenumber-js"; import FileUpload from "components/FileUpload"; import ConfirmDialog from "components/ConfirmDialog"; @@ -148,10 +152,20 @@ export default function UserForm({ defaultValues = {}, action = "log" }) { name="phone" control={control} rules={{ - pattern: { - value: - /(\+\d{1,3}\s?)?((\(\d{3}\)\s?)|(\d{3})(\s|-?))(\d{3}(\s|-?))(\d{4})(\s?(([E|e]xt[:|.|]?)|x|X)(\s?\d+))?/g, - message: "Invalid phone number!", + validate: { + checkPhoneNumber: (value) => { + if (!value || value === "") return true; + try { + const phoneNumber = parsePhoneNumberWithError(value, { + defaultCountry: "IN", + }); + return ( + isValidPhoneNumber(value, "IN") || "Invalid Phone Number!" + ); + } catch (error) { + return error.message; + } + }, }, }} render={({ field, fieldState: { error, invalid } }) => (