Rahaf/SweetHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added blocked page with api

Browse Source
This commit is contained in:
Rahaf
2026-06-14 18:04:05 +03:00
parent 71b1a71904
commit 51850b85c2
3 changed files with 243 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/ClientLayout.js
View File

@ -126,6 +126,7 @@ export default function ClientLayout({ children }) {
const isAuthPage = [
"/login",
"/blocked",
"/register",
"/forgot-password",
"/auth/choose-role",

166
app/blocked/page.js Normal file
View File

@ -0,0 +1,166 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import { ShieldAlert, LogOut, MessageSquare, Send, Loader2 } from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '../services/AuthService';
import { sendGeneralReport } from '../utils/api';
export default function BlockedPage() {
const router = useRouter();
const [form, setForm] = useState({ subject: '', body: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSent, setIsSent] = useState(false);
const handleLogout = () => {
AuthService.deleteToken();
router.replace('/');
};
const updateField = (field, value) => {
setForm((current) => ({ ...current, [field]: value }));
if (isSent) setIsSent(false);
};
const handleSubmit = async (event) => {
event.preventDefault();
if (!form.subject.trim() || !form.body.trim()) {
toast.error('يرجى تعبئة الموضوع والرسالة');
return;
}
setIsSubmitting(true);
try {
await sendGeneralReport(form.subject.trim(), form.body.trim());
setIsSent(true);
setForm({ subject: '', body: '' });
toast.success('تم إرسال طلب الدعم بنجاح');
} catch (error) {
toast.error('حدث خطأ أثناء إرسال طلب الدعم. حاول مرة أخرى');
} finally {
setIsSubmitting(false);
}
};
return (
<div className="min-h-screen bg-gradient-to-b from-red-50 via-white to-amber-50 flex items-center justify-center p-4" dir="rtl">
<Toaster position="top-center" reverseOrder={false} />
<motion.div
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
className="w-full max-w-5xl"
>
<div className="text-center mb-10">
<motion.div
initial={{ scale: 0.9 }}
animate={{ scale: 1 }}
className="w-24 h-24 bg-red-100 rounded-3xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-red-100"
>
<ShieldAlert className="w-12 h-12 text-red-600" />
</motion.div>
<h1 className="text-4xl font-bold text-gray-900 mb-3">الحساب محظور</h1>
<p className="text-gray-600 text-lg max-w-2xl mx-auto">
تم تقييد وصولك إلى التطبيق. يمكنك تسجيل الخروج أو مراسلة دعم العملاء للمساعدة في حل المشكلة.
</p>
</div>
<div className="grid md:grid-cols-2 gap-6">
<motion.div
initial={{ opacity: 0, x: -24 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.1 }}
className="bg-white rounded-3xl shadow-sm border border-gray-200 p-8 flex flex-col justify-between"
>
<div>
<div className="w-14 h-14 bg-red-50 rounded-2xl flex items-center justify-center mb-6">
<LogOut className="w-7 h-7 text-red-600" />
</div>
<h2 className="text-2xl font-bold text-gray-900 mb-3">تسجيل الخروج</h2>
<p className="text-gray-600 leading-7">
إنهاء الجلسة الحالية وإزالة بيانات الدخول من هذا الجهاز.
</p>
</div>
<button
type="button"
onClick={handleLogout}
className="mt-8 w-full bg-red-600 hover:bg-red-700 text-white rounded-2xl py-4 font-bold transition-colors flex items-center justify-center gap-3"
>
<LogOut className="w-5 h-5" />
تسجيل الخروج
</button>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 24 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.2 }}
className="bg-white rounded-3xl shadow-sm border border-gray-200 p-8"
>
<div className="flex items-center gap-4 mb-6">
<div className="w-14 h-14 bg-amber-50 rounded-2xl flex items-center justify-center">
<MessageSquare className="w-7 h-7 text-amber-600" />
</div>
<div>
<h2 className="text-2xl font-bold text-gray-900">مراسلة دعم العملاء</h2>
<p className="text-gray-600 mt-1">أرسل تفاصيل المشكلة وسنقوم بمراجعتها.</p>
</div>
</div>
<form onSubmit={handleSubmit} className="space-y-5">
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">الموضوع</label>
<input
type="text"
value={form.subject}
onChange={(event) => updateField('subject', event.target.value)}
placeholder="اكتب موضوع الرسالة"
className="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400"
/>
</div>
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">الرسالة</label>
<textarea
value={form.body}
onChange={(event) => updateField('body', event.target.value)}
rows={6}
placeholder="اشرح المشكلة بالتفصيل"
className="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400 resize-none"
/>
</div>
<button
type="submit"
disabled={isSubmitting}
className="w-full bg-amber-500 hover:bg-amber-600 text-white rounded-2xl py-4 font-bold transition-colors flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isSubmitting ? (
<>
<Loader2 className="w-5 h-5 animate-spin" />
جاري الإرسال...
</>
) : isSent ? (
<>
<Send className="w-5 h-5" />
تم الإرسال
</>
) : (
<>
<Send className="w-5 h-5" />
إرسال الرسالة
</>
)}
</button>
</form>
</motion.div>
</div>
</motion.div>
</div>
);
}

77
app/utils/api.js
View File

@ -450,13 +450,43 @@
// }
import AuthService from '../services/AuthService';
const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api';
const REPORT_API_BASE = process.env.NEXT_PUBLIC_REPORT_API_URL || 'http://45.93.137.91/api';
function isFormData(value) {
return typeof FormData !== 'undefined' && value instanceof FormData;
}
class ApiBlockedError extends Error {
constructor(message = 'Your account is blocked') {
super(message);
this.name = 'ApiBlockedError';
this.status = 451;
}
}
export function isApiBlockedError(error) {
return error instanceof ApiBlockedError || error?.status === 451;
}
function redirectToBlockedPage() {
if (typeof window !== 'undefined' && window.location.pathname !== '/blocked') {
window.location.replace('/blocked');
}
}
function assertNotBlocked(response) {
if (response.status === 451) {
redirectToBlockedPage();
throw new ApiBlockedError();
}
}
function buildApiUrl(base, endpoint) {
return `${base.replace(/\/$/, '')}${endpoint.startsWith('/') ? endpoint : `/${endpoint}`}`;
}
/**
* Generic API fetch — attaches auth token, unwraps { data } envelope
*/
@ -484,6 +514,8 @@ async function apiFetch(endpoint, options = {}) {
: options.body,
});
assertNotBlocked(res);
if (!res.ok && res.status !== 206) {
const text = await res.text().catch(() => '');
throw new Error(`API ${res.status}: ${text || res.statusText}`);
@ -524,6 +556,36 @@ async function authFetch(endpoint, body, token = null) {
body: bodyIsFormData ? body : JSON.stringify(body),
});
assertNotBlocked(res);
const text = await res.text();
let data = null;
try {
data = text ? JSON.parse(text) : null;
if (data && typeof data === 'object' && 'data' in data) {
data = data.data;
}
} catch {
data = text;
}
const message = typeof data === 'object' && data?.message ? data.message : null;
return { status: res.status, data, ok: res.ok || res.status === 206, message };
}
async function reportFetch(endpoint, body) {
const res = await fetch(buildApiUrl(REPORT_API_BASE, endpoint), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(body),
});
assertNotBlocked(res);
const text = await res.text();
let data = null;
@ -721,6 +783,8 @@ export async function uploadPicture(file) {
body: formData,
});
assertNotBlocked(res);
const text = await res.text();
if (!res.ok) throw new Error(`Upload failed: ${res.status} ${text}`);
@ -746,6 +810,8 @@ async function multipartAuthFetch(endpoint, formData) {
body: formData,
});
assertNotBlocked(res);
const text = await res.text();
let data = null;
@ -948,6 +1014,8 @@ export async function registerRealEstateAgent(formData) {
body: formData,
});
assertNotBlocked(res);
const text = await res.text();
let data = null;
@ -1028,6 +1096,13 @@ export async function filterRentProperties(params = {}) {
// ─── Reports ───
export async function sendGeneralReport(subject, reportBody) {
return reportFetch('/Reports/SendGeneralReport', {
subject,
body: reportBody,
});
}
export async function submitReport(subject, body) {
return apiFetch('/Reports', {
method: 'POST',