Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dev/additional settings #323

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+184 −41
Open

Dev/additional settings #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ba22b57
Merge pull request #317 from portato-io/feature/termsandconditions
hugo2410 Dec 9, 2023
583c6c9
display first last name/phone number and add cropping to profile picture
mAkeddar Dec 18, 2023
65c1359
Update src/Pages/Profile/MyAccount.tsx
hugo2410 Dec 21, 2023
f7722c1
Update src/Pages/Profile/MyAccount.tsx
hugo2410 Dec 21, 2023
2df6d94
Update src/Pages/Profile/MyAccount.tsx
hugo2410 Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 92 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
99 changes: 73 additions & 26 deletions src/Pages/Profile/MyAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string>(); // Setting the generic type to string
const [name, setName] = useState<string | null>(null);
const [firstName, setFirstName] = useState<string | null>(null);
const [lastName, setLastName] = useState<string | null>(null);
const [imageUrl, setImageUrl] = useState<string | null>(null);
const [email, setEmail] = useState<string | null>(null);
const [photo, setPhoto] = useState<File | null>(null);
Expand All @@ -21,7 +23,21 @@ const MyAccount: React.FC = () => {

useEffect(() => {
if (user) {
setName(user.displayName);
if (user.displayName) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I see this correctly, you're dealing with the names stored in the previous format (before the first/last name split) by splitting them on the fly.

Would it make sense to "bake" this process into our database? Essentially going through all names we currently have, split them and store them correctly? Tagging @hugo2410 as well, since it might relate to his territory ^^

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe in the previous set up, the user should have written FirstName followed by the last name, so ideally the outcome should be similar. I tried to check on the DB but i can't see it directly...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the super delayed response - I hope you had an awesome Christmas! :PP

Totally; I just wonder whether we want to split those names from the previous setup (stored as displayName) and run a process over our database, which splits those names in the same way, but then stores the result as firstName, lastName into the DB, so all users are stored the same way and we don't have to have an if/else when fetching the names.

That way we don't have to worry about it again, for example if we want to use the name in other areas.

const nameRegex = /^(?<firstName>\S+)\s+(?<lastName>\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);
}
Expand All @@ -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) => {
Expand All @@ -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,
Expand Down Expand Up @@ -104,33 +123,52 @@ const MyAccount: React.FC = () => {
</label>
}
>
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
//action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
beforeUpload={(file: File) => {
setPhoto(file);
const imgURL = URL.createObjectURL(file);
uploadProfilePicture(imgURL);
return false; // Prevent default upload behavior
}}
<ImgCrop
cropShape="round"
modalTitle=" "
quality={0.6}
showReset
showGrid
>
{' '}
{imageUrl ? (
<img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
) : (
uploadButton
)}
</Upload>
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
//action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
beforeUpload={(file: File) => {
setPhoto(file);
const imgURL = URL.createObjectURL(file);
uploadProfilePicture(imgURL);
return false; // Prevent default upload behavior
}}
>
{' '}
{imageUrl ? (
<img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
) : (
uploadButton
)}
</Upload>
</ImgCrop>
</Form.Item>
<Form.Item
label={
<label className="item-form-label">{t('accountPage.name')}</label>
<label className="item-form-label">
{t('accountPage.firstName')}
</label>
}
>
<Input onChange={onNameChange} value={name || ''} />
<Input onChange={onFirstNameChange} value={firstName || ''} />
</Form.Item>
<Form.Item
label={
<label className="item-form-label">
{t('accountPage.lastName')}
</label>
}
>
<Input onChange={onLastNameChange} value={lastName || ''} />
</Form.Item>
<Form.Item
label={
Expand All @@ -141,6 +179,15 @@ const MyAccount: React.FC = () => {
>
<Input onChange={onEmailChange} value={email || ''} />
</Form.Item>
<Form.Item
label={
<label className="item-form-label">
{t('signIn.placeholderPhone')}
</label>
}
>
<Input value={user?.phoneNumber || ''} disabled />
</Form.Item>
</Form>
</div>
</ProfilePageLayout>
Expand Down
3 changes: 2 additions & 1 deletion src/Translation/English/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!"
},
Expand Down
5 changes: 3 additions & 2 deletions src/Translation/French/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!"
},
Expand Down Expand Up @@ -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"
}
Expand Down
25 changes: 13 additions & 12 deletions src/Translation/German/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!"
},
Expand Down Expand Up @@ -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"
}
Expand Down