Added translation to all site with edit style
All checks were successful
Build frontend / build (push) Successful in 1m40s
All checks were successful
Build frontend / build (push) Successful in 1m40s
This commit is contained in:
Rahaf
@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Mail,
|
||||
Phone,
|
||||
@ -21,6 +22,7 @@ import { sendEmailOTP, sendPhoneOTP, verifyEmail, verifyPhone } from '../utils/a
|
||||
|
||||
export default function AccountVerificationPage() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const [user, setUser] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
@ -49,10 +51,10 @@ export default function AccountVerificationPage() {
|
||||
setSendingEmailOTP(true);
|
||||
try {
|
||||
await sendEmailOTP();
|
||||
toast.success('تم إرسال رمز التحقق إلى بريدك الإلكتروني');
|
||||
toast.success(t('accountVerification.emailOtpSent'));
|
||||
setShowEmailInput(true);
|
||||
} catch (err) {
|
||||
toast.error(err.message || 'فشل إرسال رمز التحقق');
|
||||
toast.error(err.message || t('accountVerification.otpSendFailed'));
|
||||
} finally {
|
||||
setSendingEmailOTP(false);
|
||||
}
|
||||
@ -60,7 +62,7 @@ export default function AccountVerificationPage() {
|
||||
|
||||
const handleVerifyEmail = async () => {
|
||||
if (!emailCode.trim()) {
|
||||
toast.error('الرجاء إدخال رمز التحقق');
|
||||
toast.error(t('accountVerification.otpRequired'));
|
||||
return;
|
||||
}
|
||||
setVerifyingEmail(true);
|
||||
@ -68,9 +70,9 @@ export default function AccountVerificationPage() {
|
||||
await verifyEmail(emailCode.trim());
|
||||
setEmailVerified(true);
|
||||
setShowEmailInput(false);
|
||||
toast.success('تم التحقق من البريد الإلكتروني بنجاح');
|
||||
toast.success(t('accountVerification.emailVerifiedSuccess'));
|
||||
} catch (err) {
|
||||
toast.error(err.message || 'رمز التحقق غير صحيح');
|
||||
toast.error(err.message || t('accountVerification.otpInvalid'));
|
||||
} finally {
|
||||
setVerifyingEmail(false);
|
||||
}
|
||||
@ -80,10 +82,10 @@ export default function AccountVerificationPage() {
|
||||
setSendingPhoneOTP(true);
|
||||
try {
|
||||
await sendPhoneOTP();
|
||||
toast.success('تم إرسال رمز التحقق إلى هاتفك');
|
||||
toast.success(t('accountVerification.phoneOtpSent'));
|
||||
setShowPhoneInput(true);
|
||||
} catch (err) {
|
||||
toast.error(err.message || 'فشل إرسال رمز التحقق');
|
||||
toast.error(err.message || t('accountVerification.otpSendFailed'));
|
||||
} finally {
|
||||
setSendingPhoneOTP(false);
|
||||
}
|
||||
@ -91,7 +93,7 @@ export default function AccountVerificationPage() {
|
||||
|
||||
const handleVerifyPhone = async () => {
|
||||
if (!phoneCode.trim()) {
|
||||
toast.error('الرجاء إدخال رمز التحقق');
|
||||
toast.error(t('accountVerification.otpRequired'));
|
||||
return;
|
||||
}
|
||||
setVerifyingPhone(true);
|
||||
@ -99,9 +101,9 @@ export default function AccountVerificationPage() {
|
||||
await verifyPhone(phoneCode.trim());
|
||||
setPhoneVerified(true);
|
||||
setShowPhoneInput(false);
|
||||
toast.success('تم التحقق من رقم الهاتف بنجاح');
|
||||
toast.success(t('accountVerification.phoneVerifiedSuccess'));
|
||||
} catch (err) {
|
||||
toast.error(err.message || 'رمز التحقق غير صحيح');
|
||||
toast.error(err.message || t('accountVerification.otpInvalid'));
|
||||
} finally {
|
||||
setVerifyingPhone(false);
|
||||
}
|
||||
@ -144,7 +146,7 @@ export default function AccountVerificationPage() {
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold text-gray-900">التحقق من الحساب</h1>
|
||||
<h1 className="text-2xl font-bold text-gray-900">{t('accountVerification.title')}</h1>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
@ -156,22 +158,22 @@ export default function AccountVerificationPage() {
|
||||
<motion.div variants={itemVariants} className="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-amber-600" />
|
||||
<h2 className="text-lg font-semibold text-gray-800">البريد الإلكتروني</h2>
|
||||
<h2 className="text-lg font-semibold text-gray-800">{t('accountVerification.emailSection')}</h2>
|
||||
{emailVerified && (
|
||||
<span className="flex items-center gap-1 text-xs text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
موثق
|
||||
{t('accountVerification.verified')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">{user?.email || 'بريد إلكتروني غير مسجل'}</p>
|
||||
<p className="text-sm text-gray-600">{user?.email || t('accountVerification.emailNotRegistered')}</p>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{emailVerified
|
||||
? 'بريدك الإلكتروني موثق ويمكنك استخدامه لتسجيل الدخول'
|
||||
: 'يرجى توثيق بريدك الإلكتروني لحماية حسابك'}
|
||||
? t('accountVerification.emailVerifiedDesc')
|
||||
: t('accountVerification.emailVerifyDesc')}
|
||||
</p>
|
||||
</div>
|
||||
{!emailVerified && !showEmailInput && (
|
||||
@ -185,7 +187,7 @@ export default function AccountVerificationPage() {
|
||||
) : (
|
||||
<Send className="w-4 h-4" />
|
||||
)}
|
||||
{sendingEmailOTP ? 'جاري الإرسال...' : 'إرسال رمز التحقق'}
|
||||
{sendingEmailOTP ? t('accountVerification.sending') : t('accountVerification.sendOtp')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@ -196,13 +198,13 @@ export default function AccountVerificationPage() {
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
className="space-y-3"
|
||||
>
|
||||
<p className="text-xs text-gray-500">أدخل الرمز المكون من 6 أرقام الذي تم إرساله إلى بريدك الإلكتروني</p>
|
||||
<p className="text-xs text-gray-500">{t('accountVerification.enter6DigitCode')}</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={emailCode}
|
||||
onChange={(e) => setEmailCode(e.target.value)}
|
||||
placeholder="رمز التحقق"
|
||||
placeholder={t('accountVerification.otpPlaceholder')}
|
||||
maxLength={6}
|
||||
className="flex-1 px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none text-center text-lg tracking-widest"
|
||||
/>
|
||||
@ -216,7 +218,7 @@ export default function AccountVerificationPage() {
|
||||
) : (
|
||||
<Key className="w-4 h-4" />
|
||||
)}
|
||||
تحقق
|
||||
{t('accountVerification.verify')}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
@ -224,7 +226,7 @@ export default function AccountVerificationPage() {
|
||||
disabled={sendingEmailOTP}
|
||||
className="text-xs text-amber-600 hover:text-amber-700"
|
||||
>
|
||||
إعادة إرسال الرمز
|
||||
{t('accountVerification.resendCode')}
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
@ -232,7 +234,7 @@ export default function AccountVerificationPage() {
|
||||
{emailVerified && (
|
||||
<div className="flex items-center gap-2 text-green-600 bg-green-50 px-4 py-3 rounded-xl">
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
<span className="text-sm font-medium">تم توثيق البريد الإلكتروني بنجاح</span>
|
||||
<span className="text-sm font-medium">{t('accountVerification.emailVerifiedSuccess')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -241,22 +243,22 @@ export default function AccountVerificationPage() {
|
||||
<motion.div variants={itemVariants} className="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-amber-600" />
|
||||
<h2 className="text-lg font-semibold text-gray-800">رقم الهاتف</h2>
|
||||
<h2 className="text-lg font-semibold text-gray-800">{t('accountVerification.phoneSection')}</h2>
|
||||
{phoneVerified && (
|
||||
<span className="flex items-center gap-1 text-xs text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
موثق
|
||||
{t('accountVerification.verified')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">{user?.phone || 'رقم هاتف غير مسجل'}</p>
|
||||
<p className="text-sm text-gray-600">{user?.phone || t('accountVerification.phoneNotRegistered')}</p>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{phoneVerified
|
||||
? 'رقم هاتفك موثق ويمكنك استخدامه لتسجيل الدخول'
|
||||
: 'يرجى توثيق رقم هاتفك لحماية حسابك'}
|
||||
? t('accountVerification.phoneVerifiedDesc')
|
||||
: t('accountVerification.phoneVerifyDesc')}
|
||||
</p>
|
||||
</div>
|
||||
{!phoneVerified && !showPhoneInput && (
|
||||
@ -270,7 +272,7 @@ export default function AccountVerificationPage() {
|
||||
) : (
|
||||
<Send className="w-4 h-4" />
|
||||
)}
|
||||
{sendingPhoneOTP ? 'جاري الإرسال...' : 'إرسال رمز التحقق'}
|
||||
{sendingPhoneOTP ? t('accountVerification.sending') : t('accountVerification.sendOtp')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@ -281,13 +283,13 @@ export default function AccountVerificationPage() {
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
className="space-y-3"
|
||||
>
|
||||
<p className="text-xs text-gray-500">أدخل الرمز المكون من 6 أرقام الذي تم إرساله إلى هاتفك</p>
|
||||
<p className="text-xs text-gray-500">{t('accountVerification.enter6DigitCodePhone')}</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={phoneCode}
|
||||
onChange={(e) => setPhoneCode(e.target.value)}
|
||||
placeholder="رمز التحقق"
|
||||
placeholder={t('accountVerification.otpPlaceholder')}
|
||||
maxLength={6}
|
||||
className="flex-1 px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none text-center text-lg tracking-widest"
|
||||
/>
|
||||
@ -301,7 +303,7 @@ export default function AccountVerificationPage() {
|
||||
) : (
|
||||
<Key className="w-4 h-4" />
|
||||
)}
|
||||
تحقق
|
||||
{t('accountVerification.verify')}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
@ -309,7 +311,7 @@ export default function AccountVerificationPage() {
|
||||
disabled={sendingPhoneOTP}
|
||||
className="text-xs text-amber-600 hover:text-amber-700"
|
||||
>
|
||||
إعادة إرسال الرمز
|
||||
{t('accountVerification.resendCode')}
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
@ -317,7 +319,7 @@ export default function AccountVerificationPage() {
|
||||
{phoneVerified && (
|
||||
<div className="flex items-center gap-2 text-green-600 bg-green-50 px-4 py-3 rounded-xl">
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
<span className="text-sm font-medium">تم توثيق رقم الهاتف بنجاح</span>
|
||||
<span className="text-sm font-medium">{t('accountVerification.phoneVerifiedSuccess')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -326,20 +328,20 @@ export default function AccountVerificationPage() {
|
||||
<motion.div variants={itemVariants} className="bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl p-6 text-white">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<Shield className="w-6 h-6" />
|
||||
<h3 className="text-lg font-semibold">لماذا يجب توثيق حسابك؟</h3>
|
||||
<h3 className="text-lg font-semibold">{t('accountVerification.whyVerify')}</h3>
|
||||
</div>
|
||||
<ul className="space-y-2 text-sm text-amber-50">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle className="w-4 h-4 flex-shrink-0" />
|
||||
حماية حسابك من الوصول غير المصرح به
|
||||
{t('accountVerification.reason1')}
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle className="w-4 h-4 flex-shrink-0" />
|
||||
استعادة كلمة المرور بسهولة في حال فقدانها
|
||||
{t('accountVerification.reason2')}
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle className="w-4 h-4 flex-shrink-0" />
|
||||
زيادة الثقة مع مالكي العقارات والمستأجرين
|
||||
{t('accountVerification.reason3')}
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user