Fix: Implement email masking functionality for privacy in ForgotInfo component

Author: abdulkarim1422

src/frontend/pages/ForgotInfo.tsx

@@ -4,6 +4,7 @@ import { Card } from '../components/Card';
 import { Select } from '../components/Select';
 import { Input } from '../components/Input';
 import { Button } from '../components/Button';
+import { maskEmail } from '../utils/auth';
 
 interface ForgotInfoProps {
   onNavigate: (page: string) => void;
@@ -15,6 +16,7 @@ export function ForgotInfo({ onNavigate }: ForgotInfoProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState('');
+  const [submittedEmail, setSubmittedEmail] = useState('');
 
   const typeOptions = [
     { value: 'email', label: 'البريد الإلكتروني' },
@@ -27,6 +29,7 @@ export function ForgotInfo({ onNavigate }: ForgotInfoProps) {
     setIsLoading(true);
     setError('');
     setSuccess(false);
+    setSubmittedEmail('');
 
     try {
       const response = await fetch('/api/auth/forgot-password', {
@@ -43,6 +46,10 @@ export function ForgotInfo({ onNavigate }: ForgotInfoProps) {
       const data = await response.json();
 
       if (data.success) {
+        // Store the email for masking in success message if type is email
+        if (type === 'email') {
+          setSubmittedEmail(value);
+        }
         setSuccess(true);
       } else {
         setError(data.error || 'Request failed');
@@ -87,7 +94,15 @@ export function ForgotInfo({ onNavigate }: ForgotInfoProps) {
               <div className="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
                 <h3 className="font-medium mb-2">تم إرسال الطلب</h3>
                 <p className="text-sm">
-                  إذا كانت المعلومات المقدمة صحيحة، سيتم إرسال تفاصيل العضوية إلى عنوان بريدك الإلكتروني.
+                  إذا كانت المعلومات المقدمة صحيحة، سيتم إرسال تفاصيل العضوية إلى عنوان بريدك الإلكتروني
+                  {submittedEmail && (
+                    <>
+                      <br />
+                      <span className="font-mono text-xs mt-1 block">
+                        {maskEmail(submittedEmail)}
+                      </span>
+                    </>
+                  )}
                 </p>
               </div>
 

src/frontend/utils/auth.ts

@@ -50,3 +50,24 @@ export function getMemberInfo(): any {
   const state = loadAuthState();
   return state?.memberInfo || null;
 }
+
+/**
+ * Masks an email address for privacy while keeping it recognizable
+ * Example: john.doe@gmail.com -> joh****oe@gmail.com
+ */
+export function maskEmail(email: string): string {
+  if (!email || !email.includes('@')) {
+    return email;
+  }
+
+  const [localPart, domain] = email.split('@');
+  
+  if (localPart.length <= 3) {
+    // For very short emails, show first and last character
+    return `${localPart[0]}****${localPart[localPart.length - 1]}@${domain}`;
+  }
+  
+  // For longer emails, show first 3 and last 2 characters
+  const maskedLocal = `${localPart.slice(0, 3)}****${localPart.slice(-2)}`;
+  return `${maskedLocal}@${domain}`;
+}