sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add phone number verification for Whatsapp to new settings page

Browse source
This commit is contained in:
Debanjum Singh Solanky 2024-07-25 18:19:58 +05:30
parent 48548684c0
commit efcad4996d
1 changed files with 46 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/interface/web/app/settings/page.tsx
View file

@ -180,7 +180,6 @@ export default function SettingsView() {
const [userConfig, setUserConfig] = useState<UserConfig | null>(null); const [userConfig, setUserConfig] = useState<UserConfig | null>(null);
const [number, setNumber] = useState<string | undefined>(undefined); const [number, setNumber] = useState<string | undefined>(undefined);
const [otp, setOTP] = useState(""); const [otp, setOTP] = useState("");
const [isValidNumber, setIsValidNumber] = useState<boolean>(false);
const [numberValidationState, setNumberValidationState] = useState<PhoneNumberValidationState>(PhoneNumberValidationState.Verified); const [numberValidationState, setNumberValidationState] = useState<PhoneNumberValidationState>(PhoneNumberValidationState.Verified);
const { toast } = useToast(); const { toast } = useToast();
const cardClassName = "w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg"; const cardClassName = "w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg";
@ -204,6 +203,50 @@ export default function SettingsView() {
return () => window.removeEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);
}, []); }, []);
const sendOTP = async () => {
try {
const response = await fetch(`/api/phone?phone_number=${number}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) throw new Error('Failed to send OTP');
setNumberValidationState(PhoneNumberValidationState.VerifyOTP);
} catch (error) {
console.error('Error sending OTP:', error);
toast({
title: "📱 Phone",
description: "Failed to send OTP. Try again or contact us at team@khoj.dev",
});
}
};
const verifyOTP = async () => {
try {
const response = await fetch(`/api/phone/verify?code=${otp}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) throw new Error('Failed to verify OTP');
setNumberValidationState(PhoneNumberValidationState.Verified);
toast({
title: "📱 Phone",
description: "Phone number verified",
});
} catch (error) {
console.error('Error verifying OTP:', error);
toast({
title: "📱 Phone",
description: "Failed to verify OTP. Try again or contact us at team@khoj.dev",
});
}
};
const setSubscription = async (state: string) => { const setSubscription = async (state: string) => {
try { try {
const url = `/api/subscription?email=${userConfig?.username}&operation=${state}`; const url = `/api/subscription?email=${userConfig?.username}&operation=${state}`;
@ -466,7 +509,7 @@ export default function SettingsView() {
<Button <Button
variant="outline" variant="outline"
className="border border-green-400" className="border border-green-400"
onClick={() => setNumberValidationState(PhoneNumberValidationState.Verified)} onClick={verifyOTP}
> >
Verify Verify
</Button> </Button>
@ -475,7 +518,7 @@ export default function SettingsView() {
variant="outline" variant="outline"
className="border border-green-400" className="border border-green-400"
disabled={!number || number === userConfig.phone_number || !isValidPhoneNumber(number)} disabled={!number || number === userConfig.phone_number || !isValidPhoneNumber(number)}
onClick={() => setNumberValidationState(PhoneNumberValidationState.VerifyOTP)} onClick={sendOTP}
> >
{!number || number === userConfig.phone_number || !isValidPhoneNumber(number) {!number || number === userConfig.phone_number || !isValidPhoneNumber(number)
? "Update" ? "Update"