feat: Implement email change functionality
This commit introduces the following changes:
- Added new API endpoints for email change requests and
verification.
- Updated the backend code to support email change workflow,
including validation, code generation, and email sending.
- Updated the frontend to include components for initiating and
verifying email changes.
- Added new dependencies to support email change functionality.
- Updated the existing components to include email change
functionality.
https://codeberg.org/mapleopentech/monorepo/issues/1
This commit is contained in:
parent
480a2b557d
commit
598a7d3fad
19 changed files with 1213 additions and 65 deletions
18
web/maplefile-frontend/package-lock.json
generated
18
web/maplefile-frontend/package-lock.json
generated
|
|
@ -88,7 +88,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.4.tgz",
|
||||
"integrity": "sha512-bXYxrXFubeYdvB0NhD/NBB3Qi6aZeV20GOWVI47t2dkecCEoneR4NPVcb7abpXDEvejgrUfFtG6vG/zxAKmg+g==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@ampproject/remapping": "^2.2.0",
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
|
|
@ -1772,7 +1771,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
|
||||
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
|
||||
"devOptional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
|
|
@ -1816,7 +1814,6 @@
|
|||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -2020,7 +2017,6 @@
|
|||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"caniuse-lite": "^1.0.30001718",
|
||||
"electron-to-chromium": "^1.5.160",
|
||||
|
|
@ -2570,7 +2566,6 @@
|
|||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.29.0.tgz",
|
||||
"integrity": "sha512-GsGizj2Y1rCWDu6XoEekL3RLilp0voSePurjZIkxL3wlm5o5EC9VpgaP7lrCvjnkuLvzFBQWB3vWB3K5KQTveQ==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.2.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
|
|
@ -3998,7 +3993,6 @@
|
|||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
|
|
@ -4187,7 +4181,6 @@
|
|||
"version": "19.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
|
||||
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -4196,7 +4189,6 @@
|
|||
"version": "19.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
|
||||
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.26.0"
|
||||
},
|
||||
|
|
@ -4214,7 +4206,6 @@
|
|||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
|
|
@ -4313,8 +4304,7 @@
|
|||
"node_modules/redux": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"peer": true
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
|
|
@ -4327,8 +4317,7 @@
|
|||
"node_modules/reflect-metadata": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
|
||||
"integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
|
||||
"peer": true
|
||||
"integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q=="
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "5.1.1",
|
||||
|
|
@ -4790,7 +4779,6 @@
|
|||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
|
||||
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
|
|
@ -4907,7 +4895,6 @@
|
|||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
|
||||
"integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.4.4",
|
||||
|
|
@ -4994,7 +4981,6 @@
|
|||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
|
||||
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -64,7 +64,6 @@ const MeDetail = () => {
|
|||
const [editLoading, setEditLoading] = useState(false);
|
||||
const [editError, setEditError] = useState("");
|
||||
const [formData, setFormData] = useState({
|
||||
email: "",
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
phone: "",
|
||||
|
|
@ -73,6 +72,14 @@ const MeDetail = () => {
|
|||
share_notifications_enabled: true,
|
||||
});
|
||||
|
||||
// Email change states
|
||||
const [showEmailChangeModal, setShowEmailChangeModal] = useState(false);
|
||||
const [emailChangeStep, setEmailChangeStep] = useState(1); // 1 = request, 2 = verify
|
||||
const [newEmail, setNewEmail] = useState("");
|
||||
const [verificationCode, setVerificationCode] = useState("");
|
||||
const [emailChangeLoading, setEmailChangeLoading] = useState(false);
|
||||
const [emailChangeError, setEmailChangeError] = useState("");
|
||||
const [emailChangeSuccess, setEmailChangeSuccess] = useState("");
|
||||
|
||||
// Note: Delete account functionality moved to dedicated /me/delete-account page
|
||||
|
||||
|
|
@ -135,7 +142,6 @@ const MeDetail = () => {
|
|||
if (isMountedRef.current) {
|
||||
setUserProfile(profile);
|
||||
setFormData({
|
||||
email: profile.email || "",
|
||||
first_name: profile.first_name || "",
|
||||
last_name: profile.last_name || "",
|
||||
phone: profile.phone || "",
|
||||
|
|
@ -232,7 +238,6 @@ const MeDetail = () => {
|
|||
const handleCancelEdit = () => {
|
||||
if (userProfile) {
|
||||
setFormData({
|
||||
email: userProfile.email || "",
|
||||
first_name: userProfile.first_name || "",
|
||||
last_name: userProfile.last_name || "",
|
||||
phone: userProfile.phone || "",
|
||||
|
|
@ -248,6 +253,64 @@ const MeDetail = () => {
|
|||
|
||||
// Delete account handler removed - now using dedicated /me/delete-account page
|
||||
|
||||
// Email change handlers
|
||||
const handleEmailChangeRequest = async (e) => {
|
||||
e.preventDefault();
|
||||
setEmailChangeLoading(true);
|
||||
setEmailChangeError("");
|
||||
|
||||
try {
|
||||
await meManager.apiService.requestEmailChange(newEmail);
|
||||
setEmailChangeStep(2);
|
||||
setEmailChangeSuccess(`Verification code sent to ${newEmail}. Please check your email.`);
|
||||
} catch (err) {
|
||||
if (import.meta.env.DEV) {
|
||||
console.error("Failed to request email change:", err);
|
||||
}
|
||||
setEmailChangeError(err.message || "Failed to request email change");
|
||||
} finally {
|
||||
setEmailChangeLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEmailChangeVerify = async (e) => {
|
||||
e.preventDefault();
|
||||
setEmailChangeLoading(true);
|
||||
setEmailChangeError("");
|
||||
|
||||
try {
|
||||
const result = await meManager.apiService.verifyEmailChange(verificationCode);
|
||||
setEmailChangeSuccess("Email changed successfully! Refreshing your profile...");
|
||||
|
||||
// Refresh profile to get updated email
|
||||
setTimeout(async () => {
|
||||
await loadUserProfile(true);
|
||||
setShowEmailChangeModal(false);
|
||||
setEmailChangeStep(1);
|
||||
setNewEmail("");
|
||||
setVerificationCode("");
|
||||
setEmailChangeSuccess("");
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
if (import.meta.env.DEV) {
|
||||
console.error("Failed to verify email change:", err);
|
||||
}
|
||||
setEmailChangeError(err.message || "Failed to verify email change");
|
||||
} finally {
|
||||
setEmailChangeLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelEmailChange = () => {
|
||||
setShowEmailChangeModal(false);
|
||||
setEmailChangeStep(1);
|
||||
setNewEmail("");
|
||||
setVerificationCode("");
|
||||
setEmailChangeError("");
|
||||
setEmailChangeSuccess("");
|
||||
setEmailChangeLoading(false);
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return "N/A";
|
||||
try {
|
||||
|
|
@ -485,19 +548,6 @@ const MeDetail = () => {
|
|||
disabled={editLoading}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(value) => {
|
||||
setFormData((prev) => ({ ...prev, email: value }));
|
||||
if (editError) setEditError("");
|
||||
}}
|
||||
disabled={editLoading}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
|
|
@ -688,6 +738,151 @@ const MeDetail = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Change Email Section */}
|
||||
<div className={`${getThemeClasses("bg-card")} rounded-xl shadow-lg border ${getThemeClasses("border-secondary")} p-6`}>
|
||||
<h3 className={`text-lg font-semibold ${getThemeClasses("text-primary")} mb-2`}>
|
||||
Email Address
|
||||
</h3>
|
||||
<p className={`text-sm ${getThemeClasses("text-secondary")} mb-4`}>
|
||||
Update your email address. You'll need to verify your new email.
|
||||
</p>
|
||||
|
||||
{!showEmailChangeModal ? (
|
||||
<div className={`flex items-center justify-between p-4 ${getThemeClasses("bg-muted")} rounded-lg border ${getThemeClasses("border-secondary")}`}>
|
||||
<div className="flex items-start">
|
||||
<EnvelopeIcon className={`h-5 w-5 ${getThemeClasses("text-muted")} mr-3 mt-0.5`} aria-hidden="true" />
|
||||
<div>
|
||||
<p className={`font-medium ${getThemeClasses("text-primary")}`}>
|
||||
Current Email
|
||||
</p>
|
||||
<p className={`text-sm ${getThemeClasses("text-secondary")}`}>
|
||||
{userProfile?.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setShowEmailChangeModal(true)}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
icon={PencilIcon}
|
||||
>
|
||||
Change Email
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className={`p-4 ${getThemeClasses("bg-muted")} rounded-lg border ${getThemeClasses("border-secondary")}`}>
|
||||
{emailChangeStep === 1 ? (
|
||||
<form onSubmit={handleEmailChangeRequest} className="space-y-4">
|
||||
<div>
|
||||
<h4 className={`text-md font-semibold ${getThemeClasses("text-primary")} mb-2`}>
|
||||
Step 1: Enter New Email
|
||||
</h4>
|
||||
<p className={`text-sm ${getThemeClasses("text-secondary")} mb-3`}>
|
||||
We'll send a verification code to your new email address.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{emailChangeError && (
|
||||
<Alert type="error" onClose={() => setEmailChangeError("")}>
|
||||
{emailChangeError}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Input
|
||||
id="new_email"
|
||||
name="new_email"
|
||||
label="New Email Address"
|
||||
type="email"
|
||||
value={newEmail}
|
||||
onChange={(value) => {
|
||||
setNewEmail(value);
|
||||
if (emailChangeError) setEmailChangeError("");
|
||||
}}
|
||||
disabled={emailChangeLoading}
|
||||
required
|
||||
placeholder="your.new@email.com"
|
||||
/>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleCancelEmailChange}
|
||||
variant="secondary"
|
||||
disabled={emailChangeLoading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={emailChangeLoading}
|
||||
>
|
||||
{emailChangeLoading ? "Sending..." : "Send Code"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleEmailChangeVerify} className="space-y-4">
|
||||
<div>
|
||||
<h4 className={`text-md font-semibold ${getThemeClasses("text-primary")} mb-2`}>
|
||||
Step 2: Verify New Email
|
||||
</h4>
|
||||
<p className={`text-sm ${getThemeClasses("text-secondary")} mb-3`}>
|
||||
Enter the 8-digit code sent to <strong>{newEmail}</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{emailChangeSuccess && (
|
||||
<Alert type="success" onClose={() => setEmailChangeSuccess("")}>
|
||||
{emailChangeSuccess}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{emailChangeError && (
|
||||
<Alert type="error" onClose={() => setEmailChangeError("")}>
|
||||
{emailChangeError}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Input
|
||||
id="verification_code"
|
||||
name="verification_code"
|
||||
label="Verification Code"
|
||||
type="text"
|
||||
value={verificationCode}
|
||||
onChange={(value) => {
|
||||
setVerificationCode(value);
|
||||
if (emailChangeError) setEmailChangeError("");
|
||||
}}
|
||||
disabled={emailChangeLoading}
|
||||
required
|
||||
placeholder="12345678"
|
||||
maxLength="8"
|
||||
/>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleCancelEmailChange}
|
||||
variant="secondary"
|
||||
disabled={emailChangeLoading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={emailChangeLoading}
|
||||
>
|
||||
{emailChangeLoading ? "Verifying..." : "Verify Email"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Notification Preferences Section */}
|
||||
<div className={`${getThemeClasses("bg-card")} rounded-xl shadow-lg border ${getThemeClasses("border-secondary")} p-6`}>
|
||||
<h3 className={`text-lg font-semibold ${getThemeClasses("text-primary")} mb-2`}>
|
||||
|
|
|
|||
|
|
@ -110,6 +110,75 @@ class MeAPIService {
|
|||
}
|
||||
}
|
||||
|
||||
// Request email change (Step 1: Send verification code to new email)
|
||||
async requestEmailChange(newEmail) {
|
||||
if (!this.authManager.isAuthenticated()) {
|
||||
throw new Error("User not authenticated via AuthManager");
|
||||
}
|
||||
|
||||
if (!newEmail || !newEmail.trim()) {
|
||||
throw new Error("New email address is required");
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(
|
||||
"[MeAPIService] Requesting email change to:",
|
||||
newEmail,
|
||||
);
|
||||
|
||||
const apiClient = await this.getApiClient();
|
||||
const response = await apiClient.postMapleFile("/me/email/change-request", {
|
||||
new_email: newEmail.trim().toLowerCase(),
|
||||
});
|
||||
|
||||
console.log(
|
||||
"[MeAPIService] Email change request sent successfully:",
|
||||
response,
|
||||
);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[MeAPIService] Failed to request email change:",
|
||||
error,
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Verify email change (Step 2: Verify with code sent to new email)
|
||||
async verifyEmailChange(verificationCode) {
|
||||
if (!this.authManager.isAuthenticated()) {
|
||||
throw new Error("User not authenticated via AuthManager");
|
||||
}
|
||||
|
||||
if (!verificationCode || !verificationCode.trim()) {
|
||||
throw new Error("Verification code is required");
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(
|
||||
"[MeAPIService] Verifying email change with code",
|
||||
);
|
||||
|
||||
const apiClient = await this.getApiClient();
|
||||
const response = await apiClient.postMapleFile("/me/email/change-verify", {
|
||||
verification_code: verificationCode.trim(),
|
||||
});
|
||||
|
||||
console.log(
|
||||
"[MeAPIService] Email changed successfully:",
|
||||
response,
|
||||
);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[MeAPIService] Failed to verify email change:",
|
||||
error,
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Get debug information
|
||||
getDebugInfo() {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue