Carina WollendorferGitHubCarinaWollizomarskodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>* first implementation of verifying phone number * add UI + logic for verifying phone number flow * check if all phone numbers are verified before submit * add numberVerification pending * only send SMS to verified numbers * fix design for mobile view * check if phone number is verified before testing action * add back message service id check * add TWILIO_VERIFY_SID to .env.example * code clean up * add TWILIO_VERIFY_SID to README.md instructions * save new verified numbers * fix wrongly thrown error for new verified numbers * use false as default value for isVerificationPending paramater * add translations * add migration file * code clean up * don't throw error if phone number is not needed * Feedback * Shows error when Twillio isn't properly setup * Type fixes Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import BasePhoneInput, { Props } from "react-phone-number-input/react-hook-form";
|
|
import "react-phone-number-input/style.css";
|
|
|
|
export type PhoneInputProps<FormValues> = Props<
|
|
{
|
|
value: string;
|
|
id: string;
|
|
placeholder: string;
|
|
required: boolean;
|
|
},
|
|
FormValues
|
|
> & { onChange?: (e: any) => void };
|
|
|
|
function PhoneInput<FormValues>({
|
|
control,
|
|
name,
|
|
className,
|
|
onChange,
|
|
...rest
|
|
}: PhoneInputProps<FormValues>) {
|
|
return (
|
|
<BasePhoneInput
|
|
{...rest}
|
|
international
|
|
name={name}
|
|
control={control}
|
|
onChange={onChange}
|
|
countrySelectProps={{ className: "text-black" }}
|
|
numberInputProps={{
|
|
className: "border-0 text-sm focus:ring-0 dark:bg-darkgray-100 dark:placeholder:text-darkgray-600",
|
|
}}
|
|
className={`${className} border-1 focus-within:border-brand dark:bg-darkgray-100 dark:border-darkgray-300 block w-full rounded-md rounded-sm border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500`}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default PhoneInput;
|