Phone entry
This commit is contained in:
parent
71c8cb0ac8
commit
179a3dcc43
52
frontend/package-lock.json
generated
52
frontend/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
57
frontend/src/NewApp/PhoneInput.css
Normal file
57
frontend/src/NewApp/PhoneInput.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
const [phone, setPhone] = useState<E164Number | null>(null);
|
||||
|
||||
// Login form state
|
||||
const [loginForm, setLoginForm] = useState<LoginRequest>({
|
||||
@ -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"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
<PhoneInput
|
||||
label="Phone (Optional)"
|
||||
placeholder="Enter phone number"
|
||||
defaultCountry='US'
|
||||
value={registerForm.phone}
|
||||
disabled={loading}
|
||||
onChange={(v) => setPhone(v as E164Number)} />
|
||||
{/* <TextField
|
||||
fullWidth
|
||||
label="Phone (Optional)"
|
||||
type="tel"
|
||||
@ -517,7 +536,7 @@ const BackstoryTestApp: React.FC = () => {
|
||||
margin="normal"
|
||||
disabled={loading}
|
||||
variant="outlined"
|
||||
/>
|
||||
/> */}
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user