From 179a3dcc4392e9c02a447c99832549e0b855f62d Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Wed, 28 May 2025 00:49:25 -0700 Subject: [PATCH] Phone entry --- frontend/package-lock.json | 52 +++++++++++++++++++++++++++ frontend/package.json | 1 + frontend/src/NewApp/PhoneInput.css | 57 ++++++++++++++++++++++++++++++ frontend/src/NewApp/TestApp.tsx | 23 ++++++++++-- 4 files changed, 131 insertions(+), 2 deletions(-) create mode 100644 frontend/src/NewApp/PhoneInput.css diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 40feeec..eaa0c09 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -39,6 +39,7 @@ "react-dom": "^19.0.0", "react-markdown": "^10.1.0", "react-markdown-it": "^1.0.2", + "react-phone-number-input": "^3.4.12", "react-plotly.js": "^2.6.0", "react-router-dom": "^7.6.0", "react-scripts": "5.0.1", @@ -7954,6 +7955,11 @@ "integrity": "sha512-kgMuFyE78OC6Dyu3Dy7vcx4uy97EIbVxJB/B0eJ3bUNAkwdNcxYzgKltnyADiYwsR7SEqkkUPsEUT//OVS6XMA==", "peer": true }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -8499,6 +8505,11 @@ "typescript": ">=3" } }, + "node_modules/country-flag-icons": { + "version": "1.5.19", + "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.5.19.tgz", + "integrity": "sha512-D/ZkRyj+ywJC6b2IrAN3/tpbReMUqmuRLlcKFoY/o0+EPQN9Ev/e8tV+D3+9scvu/tarxwLErNwS73C3yzxs/g==" + }, "node_modules/country-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/country-regex/-/country-regex-1.1.0.tgz", @@ -13463,6 +13474,26 @@ "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz", "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==" }, + "node_modules/input-format": { + "version": "0.3.14", + "resolved": "https://registry.npmjs.org/input-format/-/input-format-0.3.14.tgz", + "integrity": "sha512-gHMrgrbCgmT4uK5Um5eVDUohuV9lcs95ZUUN9Px2Y0VIfjTzT2wF8Q3Z4fwLFm7c5Z2OXCm53FHoovj6SlOKdg==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">=18.1.0", + "react-dom": ">=18.1.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/internal-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz", @@ -15489,6 +15520,11 @@ "node": ">= 0.8.0" } }, + "node_modules/libphonenumber-js": { + "version": "1.12.8", + "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.8.tgz", + "integrity": "sha512-f1KakiQJa9tdc7w1phC2ST+DyxWimy9c3g3yeF+84QtEanJr2K77wAmBPP22riU05xldniHsvXuflnLZ4oysqA==" + }, "node_modules/lilconfig": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", @@ -19962,6 +19998,22 @@ "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" }, + "node_modules/react-phone-number-input": { + "version": "3.4.12", + "resolved": "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.4.12.tgz", + "integrity": "sha512-Raob77KdtLGm49iC6nuOX9qy6Mg16idkgC7Y1mHmvG2WBYoauHpzxYNlfmFskQKeiztrJIwPhPzBhjFwjenNCA==", + "dependencies": { + "classnames": "^2.5.1", + "country-flag-icons": "^1.5.17", + "input-format": "^0.3.10", + "libphonenumber-js": "^1.11.20", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-plotly.js": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/react-plotly.js/-/react-plotly.js-2.6.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 497cf1c..0a5b23b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -34,6 +34,7 @@ "react-dom": "^19.0.0", "react-markdown": "^10.1.0", "react-markdown-it": "^1.0.2", + "react-phone-number-input": "^3.4.12", "react-plotly.js": "^2.6.0", "react-router-dom": "^7.6.0", "react-scripts": "5.0.1", diff --git a/frontend/src/NewApp/PhoneInput.css b/frontend/src/NewApp/PhoneInput.css new file mode 100644 index 0000000..adb4cce --- /dev/null +++ b/frontend/src/NewApp/PhoneInput.css @@ -0,0 +1,57 @@ + +.PhoneInput:disabled { + opacity: 0.38; +} + +/* .PhoneInput:not(:active):not(:focus):not(:hover) { +} */ + +.PhoneInput::placeholder { + color: rgba(46, 46, 46, 0.38); +} + +.PhoneInput:focus, +.PhoneInput:active { + outline: 2px solid black; +} + +.PhoneInput:hover:not(:active):not(:focus) { + outline: 1px solid black; +} + +.PhoneInputInput { + font: inherit; + letter-spacing: inherit; + color: currentColor; + padding: 4px 0 5px; + border: 0; + box-sizing: content-box; + background: none; + height: 1.4375em; + margin: 0; + -webkit-tap-highlight-color: transparent; + display: block; + min-width: 0; + width: 100%; + -webkit-animation-name: mui-auto-fill-cancel; + animation-name: mui-auto-fill-cancel; + -webkit-animation-duration: 10ms; + animation-duration: 10ms; + padding: 16.5px 14px; + } + +.PhoneInputCountry { + min-width: 64px; + justify-content: center; +} + +.PhoneInputCountry:focus, +.PhoneInputCountry:active { + outline: 2px solid black; +} + +.PhoneInput { + display: flex; + outline: 1px solid rgba(46, 46, 46, 0.38); + border: none; +} \ No newline at end of file diff --git a/frontend/src/NewApp/TestApp.tsx b/frontend/src/NewApp/TestApp.tsx index b0d8629..2c7d1bc 100644 --- a/frontend/src/NewApp/TestApp.tsx +++ b/frontend/src/NewApp/TestApp.tsx @@ -19,6 +19,10 @@ import { Avatar } from '@mui/material'; import { Person, PersonAdd, AccountCircle, ExitToApp } from '@mui/icons-material'; +import 'react-phone-number-input/style.css'; +import PhoneInput from 'react-phone-number-input'; +import { E164Number } from 'libphonenumber-js/core'; +import './PhoneInput.css'; // Import conversion utilities import { @@ -59,6 +63,7 @@ const BackstoryTestApp: React.FC = () => { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(null); + const [phone, setPhone] = useState(null); // Login form state const [loginForm, setLoginForm] = useState({ @@ -82,6 +87,13 @@ const BackstoryTestApp: React.FC = () => { checkExistingAuth(); }, []); + useEffect(() => { + if (phone !== registerForm.phone && phone) { + console.log({ phone }); + setRegisterForm({ ...registerForm, phone }); + } + }, [phone, registerForm]); + const createGuestSession = () => { const sessionId = `guest_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; const guest: Guest = { @@ -508,7 +520,14 @@ const BackstoryTestApp: React.FC = () => { variant="outlined" /> - setPhone(v as E164Number)} /> + {/* { margin="normal" disabled={loading} variant="outlined" - /> + /> */}