diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 5917286..cd0d164 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -11,6 +11,7 @@ import { } from '../api/notifications'; import { referralApi } from '../api/referral'; import { brandingApi, type EmailAuthEnabled } from '../api/branding'; +import ChangeEmailModal from '../components/ChangeEmailModal'; // Icons const CopyIcon = () => ( @@ -42,6 +43,16 @@ const ArrowRightIcon = () => ( ); +const PencilIcon = () => ( + + + +); + export default function Profile() { const { t } = useTranslation(); const { user, setUser } = useAuthStore(); @@ -53,6 +64,7 @@ export default function Profile() { const [error, setError] = useState(null); const [success, setSuccess] = useState(null); const [copied, setCopied] = useState(false); + const [showChangeEmailModal, setShowChangeEmailModal] = useState(false); // Referral data const { data: referralInfo } = useQuery({ @@ -311,7 +323,16 @@ export default function Profile() { )} {user.email_verified && ( - {t('profile.canLoginWithEmail')} + + {t('profile.canLoginWithEmail')} + setShowChangeEmailModal(true)} + className="flex items-center gap-2 text-sm text-accent-400 transition-colors hover:text-accent-300" + > + + {t('profile.changeEmail.button')} + + )} ) : ( @@ -618,6 +639,14 @@ export default function Profile() { {t('profile.notifications.unavailable')} )} + + {/* Change Email Modal */} + {showChangeEmailModal && user?.email && ( + setShowChangeEmailModal(false)} + currentEmail={user.email} + /> + )} ); }
{t('profile.canLoginWithEmail')}
{t('profile.notifications.unavailable')}