diff --git a/package-lock.json b/package-lock.json index 1fcb73f7..466d6bf5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@types/react-dom": "^18.0.11", "@types/react-router-dom": "^5.3.3", "antd": "^5.4.0", + "antd-img-crop": "^4.18.0", "antd-mobile": "^5.29.0", "axios": "^1.4.0", "cors": "^2.8.5", @@ -6296,6 +6297,26 @@ "react-dom": ">=16.9.0" } }, + "node_modules/antd-img-crop": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/antd-img-crop/-/antd-img-crop-4.18.0.tgz", + "integrity": "sha512-K9GJYg0F1tE9Q+TWuHX8QOeH52Z8OA+WAXAUWjJkPHeHAWlnIh538RpuHYgogP7LN4U1qU7TQKRCwkrUPNMdGA==", + "dependencies": { + "compare-versions": "6.1.0", + "react-easy-crop": "^5.0.2", + "tslib": "^2.6.2" + }, + "peerDependencies": { + "antd": ">=4.0.0", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/antd-img-crop/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/antd-mobile": { "version": "5.29.1", "resolved": "https://registry.npmjs.org/antd-mobile/-/antd-mobile-5.29.1.tgz", @@ -7532,6 +7553,11 @@ "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==" }, + "node_modules/compare-versions": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.0.tgz", + "integrity": "sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg==" + }, "node_modules/compressible": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", @@ -14447,6 +14473,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/normalize-wheel": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", + "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==" + }, "node_modules/npm-run-path": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", @@ -17295,6 +17326,24 @@ "react": "^18.2.0" } }, + "node_modules/react-easy-crop": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.0.4.tgz", + "integrity": "sha512-JfzSk4cBHoksgAtgWUHR/jDYretebMxS0rpAlltP1LeELGMj4WTa420m4PsYFpgQXoJZV0DXmINUlBWAoAD/PQ==", + "dependencies": { + "normalize-wheel": "^1.0.1", + "tslib": "2.0.1" + }, + "peerDependencies": { + "react": ">=16.4.0", + "react-dom": ">=16.4.0" + } + }, + "node_modules/react-easy-crop/node_modules/tslib": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz", + "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==" + }, "node_modules/react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", @@ -25648,6 +25697,23 @@ "throttle-debounce": "^5.0.0" } }, + "antd-img-crop": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/antd-img-crop/-/antd-img-crop-4.18.0.tgz", + "integrity": "sha512-K9GJYg0F1tE9Q+TWuHX8QOeH52Z8OA+WAXAUWjJkPHeHAWlnIh538RpuHYgogP7LN4U1qU7TQKRCwkrUPNMdGA==", + "requires": { + "compare-versions": "6.1.0", + "react-easy-crop": "^5.0.2", + "tslib": "^2.6.2" + }, + "dependencies": { + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + } + } + }, "antd-mobile": { "version": "5.29.1", "resolved": "https://registry.npmjs.org/antd-mobile/-/antd-mobile-5.29.1.tgz", @@ -26572,6 +26638,11 @@ "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==" }, + "compare-versions": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.0.tgz", + "integrity": "sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg==" + }, "compressible": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", @@ -31699,6 +31770,11 @@ "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz", "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==" }, + "normalize-wheel": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", + "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==" + }, "npm-run-path": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", @@ -33550,6 +33626,22 @@ "scheduler": "^0.23.0" } }, + "react-easy-crop": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.0.4.tgz", + "integrity": "sha512-JfzSk4cBHoksgAtgWUHR/jDYretebMxS0rpAlltP1LeELGMj4WTa420m4PsYFpgQXoJZV0DXmINUlBWAoAD/PQ==", + "requires": { + "normalize-wheel": "^1.0.1", + "tslib": "2.0.1" + }, + "dependencies": { + "tslib": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz", + "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==" + } + } + }, "react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", diff --git a/package.json b/package.json index e4496a98..2dd1d6ac 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/react-dom": "^18.0.11", "@types/react-router-dom": "^5.3.3", "antd": "^5.4.0", + "antd-img-crop": "^4.18.0", "antd-mobile": "^5.29.0", "axios": "^1.4.0", "cors": "^2.8.5", diff --git a/src/Pages/Profile/MyAccount.tsx b/src/Pages/Profile/MyAccount.tsx index 77bcd129..8d92f73b 100644 --- a/src/Pages/Profile/MyAccount.tsx +++ b/src/Pages/Profile/MyAccount.tsx @@ -9,10 +9,12 @@ import { useTranslation } from 'react-i18next'; import ProfilePageLayout from '../Layouts/ProfilePagesLayout'; import { Button, Form } from 'antd-mobile'; import { Upload, Input, message } from 'antd'; +import ImgCrop from 'antd-img-crop'; const MyAccount: React.FC = () => { const { t } = useTranslation(); // Setting the generic type to string - const [name, setName] = useState(null); + const [firstName, setFirstName] = useState(null); + const [lastName, setLastName] = useState(null); const [imageUrl, setImageUrl] = useState(null); const [email, setEmail] = useState(null); const [photo, setPhoto] = useState(null); @@ -21,7 +23,21 @@ const MyAccount: React.FC = () => { useEffect(() => { if (user) { - setName(user.displayName); + if (user.displayName) { + const nameRegex = /^(?\S+)\s+(?\S+)$/; + const match = user.displayName.match(nameRegex); + + if (match) { + const firstName: string = match.groups?.firstName || ''; + const lastName: string = match.groups?.lastName || ''; + + setFirstName(firstName); + setLastName(lastName); + } else { + console.log('Invalid name format'); + } + } + // setName(user.displayName); setEmail(user.email); setImageUrl(user.photoURL); } @@ -30,8 +46,11 @@ const MyAccount: React.FC = () => { const uploadProfilePicture = async (imgURL: any) => { setImageUrl(imgURL); }; - const onNameChange = (e: any) => { - setName(e.target.value); + const onFirstNameChange = (e: any) => { + setFirstName(e.target.value); + }; + const onLastNameChange = (e: any) => { + setLastName(e.target.value); }; const onEmailChange = (e: any) => { @@ -47,11 +66,11 @@ const MyAccount: React.FC = () => { updateProfile(currentUser, { photoURL }); setLoading(false); - alert(t('accountPage.uploadedImageAlert')); } const onFinish = () => { if (user && photo) { + const name: string = firstName + ' ' + lastName; upload(photo, user, setLoading); updateProfile(user, { displayName: name, @@ -104,33 +123,52 @@ const MyAccount: React.FC = () => { } > - { - setPhoto(file); - const imgURL = URL.createObjectURL(file); - uploadProfilePicture(imgURL); - return false; // Prevent default upload behavior - }} + - {' '} - {imageUrl ? ( - avatar - ) : ( - uploadButton - )} - + { + setPhoto(file); + const imgURL = URL.createObjectURL(file); + uploadProfilePicture(imgURL); + return false; // Prevent default upload behavior + }} + > + {' '} + {imageUrl ? ( + avatar + ) : ( + uploadButton + )} + + {t('accountPage.name')} + } > - + + + + {t('accountPage.lastName')} + + } + > + { > + + {t('signIn.placeholderPhone')} + + } + > + + diff --git a/src/Translation/English/translation.json b/src/Translation/English/translation.json index 0268d0c7..77ee4608 100644 --- a/src/Translation/English/translation.json +++ b/src/Translation/English/translation.json @@ -260,7 +260,8 @@ "validate": "Validate", "myAccount": "My Account", "profilePicture": "Profile Picture", - "name": "Name", + "firstName": "First Name", + "lastName": "Last Name", "emailAddress": "Email Address", "uploadedImageAlert": "Uploaded image!" }, diff --git a/src/Translation/French/translation.json b/src/Translation/French/translation.json index cc7d1646..1d42427e 100644 --- a/src/Translation/French/translation.json +++ b/src/Translation/French/translation.json @@ -260,7 +260,8 @@ "validate": "Valider", "myAccount": "Mon Compte", "profilePicture": "Photo de Profil", - "name": "Nom", + "firstName": "Prénom", + "lastName": "Nom", "emailAddress": "Adresse Email", "uploadedImageAlert": "Image téléchargée!" }, @@ -392,7 +393,7 @@ "placeholderLastName": "Nom de famille", "successSmsSent": "SMS envoyé avec succès", "emailAlreadyUsed": "E-mail déjà utilisé", - "errorPhoneCountryCode": "Veuillez saisir l'indicatif du pays dans votre numéro de téléphone", + "errorPhoneCountryCode": "Veuillez saisir l'indicatif du pays dans votre numéro de téléphone", "acceptTermsText": "Veuillez accepter ces ", "acceptTermsLink": "conditions générales" } diff --git a/src/Translation/German/translation.json b/src/Translation/German/translation.json index 6050c732..acc4f075 100644 --- a/src/Translation/German/translation.json +++ b/src/Translation/German/translation.json @@ -260,7 +260,8 @@ "validate": "Bestätigen", "myAccount": "Mein Konto", "profilePicture": "Profilbild", - "name": "Name", + "firstName": "Vorname", + "lastName": "Nachname", "emailAddress": "E-Mail Adresse", "uploadedImageAlert": "Bild hochgeladen!" }, @@ -382,17 +383,17 @@ "smsSendingFailedMessage": "SMS konnte nicht gesendet werden.", "otpVerificationFailedMessage": "Verifizierung der OTP fehlgeschlagen.", "forgotPassword": "Passwort vergessen", - "forgotPasswordText": "Bitte geben Sie Ihre E-Mail-Adresse ein und wir senden Ihnen einen Wiederherstellungslink.", - "forgotPasswordTitle": "Passwortwiederherstellung", - "resetPasswordButton": "Passwort zurücksetzen", - "resetPasswordConfirmation": "E-Mail zum Zurücksetzen des Passworts erfolgreich gesendet", - "resetPasswordError": "Kein Konto entspricht dieser E-Mail-Adresse", - "enterEmailError": "Bitte geben Sie Ihre E-Mail-Adresse ein", - "placeholderFirstName": "Vorname", - "placeholderLastName": "Nachname", - "successSmsSent": "SMS erfolgreich gesendet", - "emailAlreadyUsed": "E-Mail bereits verwendet", - "errorPhoneCountryCode": "Bitte geben Sie die Landesvorwahl in Ihrer Telefonnummer ein", + "forgotPasswordText": "Bitte geben Sie Ihre E-Mail-Adresse ein und wir senden Ihnen einen Wiederherstellungslink.", + "forgotPasswordTitle": "Passwortwiederherstellung", + "resetPasswordButton": "Passwort zurücksetzen", + "resetPasswordConfirmation": "E-Mail zum Zurücksetzen des Passworts erfolgreich gesendet", + "resetPasswordError": "Kein Konto entspricht dieser E-Mail-Adresse", + "enterEmailError": "Bitte geben Sie Ihre E-Mail-Adresse ein", + "placeholderFirstName": "Vorname", + "placeholderLastName": "Nachname", + "successSmsSent": "SMS erfolgreich gesendet", + "emailAlreadyUsed": "E-Mail bereits verwendet", + "errorPhoneCountryCode": "Bitte geben Sie die Landesvorwahl in Ihrer Telefonnummer ein", "acceptTermsText": "Bitte akzeptieren Sie diese ", "acceptTermsLink": "Geschäftsbedingungen" }