klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-04 13:20:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use an intl phone input number field and fix the whole verification flow

Browse Source 
- There were some state mismatches in configuring a whatsapp number. This commit fixes those issues and uses an external library for phone number validation
This commit is contained in:
sabaimran
2024-08-01 16:44:17 +05:30
parent 60870a7a3e
commit 84dd1b57fe
4 changed files with 56 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/interface/web/app/settings/page.tsx
View File

@@ -1,6 +1,7 @@
'use client'
import styles from "./settings.module.css";
import "intl-tel-input/styles";
import { Suspense, useEffect, useState } from "react";
import { useToast } from "@/components/ui/use-toast"
@@ -74,6 +75,8 @@ import NavMenu from "../components/navMenu/navMenu";
import SidePanel from "../components/sidePanel/chatHistorySidePanel";
import Loading from "../components/loading/loading";
import IntlTelInput from 'intl-tel-input/react';
const ManageFilesModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
const [syncedFiles, setSyncedFiles] = useState<string[]>([]);
@@ -349,7 +352,7 @@ export default function SettingsView() {
const [userConfig, setUserConfig] = useState<UserConfig | null>(null);
const [name, setName] = useState<string | undefined>(undefined);
const [notionToken, setNotionToken] = useState<string | null>(null);
const [number, setNumber] = useState<string | undefined>(undefined);
const [phoneNumber, setPhoneNumber] = useState<string | undefined>(undefined);
const [otp, setOTP] = useState("");
const [numberValidationState, setNumberValidationState] = useState<PhoneNumberValidationState>(PhoneNumberValidationState.Verified);
const [isManageFilesModalOpen, setIsManageFilesModalOpen] = useState(false);
@@ -358,7 +361,7 @@ export default function SettingsView() {
useEffect(() => {
setUserConfig(initialUserConfig);
setNumber(initialUserConfig?.phone_number);
setPhoneNumber(initialUserConfig?.phone_number);
setNumberValidationState(
initialUserConfig?.is_phone_number_verified
? PhoneNumberValidationState.Verified
@@ -379,7 +382,7 @@ export default function SettingsView() {
const sendOTP = async () => {
try {
const response = await fetch(`/api/phone?phone_number=${number}`, {
const response = await fetch(`/api/phone?phone_number=${phoneNumber}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -942,15 +945,25 @@ export default function SettingsView() {
Connect your number to chat with Khoj on WhatsApp. Learn more about the integration <a href="https://docs.khoj.dev/clients/whatsapp">here</a>.
</p>
<div>
<IntlTelInput
initialValue={phoneNumber || ""}
onChangeNumber={setPhoneNumber}
disabled={numberValidationState === PhoneNumberValidationState.Verified || numberValidationState === PhoneNumberValidationState.VerifyOTP}
initOptions={{
separateDialCode: true,
initialCountry: "us",
utilsScript: "https://assets.khoj.dev/intl-tel-input%4023.8.0_build_js_utils.js",
}}
/>
{numberValidationState === PhoneNumberValidationState.VerifyOTP && (
<>
<p>{`Enter the OTP sent to your WhatsApp number: ${number}`}</p>
<p>{`Enter the OTP sent to your number: ${phoneNumber}`}</p>
<InputOTP
autoFocus={true}
maxLength={6}
value={otp || ""}
onChange={setOTP}
onComplete={() => setNumberValidationState(PhoneNumberValidationState.Verified)}
onComplete={() => setNumberValidationState(PhoneNumberValidationState.VerifyOTP)}
>
<InputOTPGroup>
<InputOTPSlot index={0} />
@@ -962,16 +975,6 @@ export default function SettingsView() {
</InputOTPGroup>
</InputOTP>
</>
) || (
<>
<Input
type="tel"
onChange={(e) => setNumber(e.target.value)}
value={number || ""}
placeholder="Enter phone number (e.g. +911234567890)"
className="w-full border border-gray-300 rounded-lg px-4 py-6"
/>
</>
)}
</div>
</CardContent>
@@ -986,14 +989,14 @@ export default function SettingsView() {
) || (
<Button
variant="outline"
disabled={!number || number === userConfig.phone_number || !isValidPhoneNumber(number)}
disabled={!phoneNumber || (phoneNumber === userConfig.phone_number && numberValidationState === PhoneNumberValidationState.Verified) || !isValidPhoneNumber(phoneNumber)}
onClick={sendOTP}
>
{!userConfig.phone_number
? (<><Plugs className="inline mr-2" />Setup Whatsapp</>)
: !number || number === userConfig.phone_number || !isValidPhoneNumber(number)
: !phoneNumber || (phoneNumber === userConfig.phone_number && numberValidationState === PhoneNumberValidationState.Verified) || !isValidPhoneNumber(phoneNumber)
? (<><PlugsConnected className="inline mr-2 text-green-400" />Switch Number</>)
: (<>Send OTP to Whatsapp <ArrowRight className="inline ml-2" weight="bold"/></>)
: (<>Send OTP <ArrowRight className="inline ml-2" weight="bold"/></>)
}
</Button>
)}