{"id":21507813,"url":"https://github.com/learncodingeasy/facebook","last_synced_at":"2026-01-21T05:09:19.642Z","repository":{"id":251739189,"uuid":"838194982","full_name":"LearnCodingEasy/Facebook","owner":"LearnCodingEasy","description":"Facebook","archived":false,"fork":false,"pushed_at":"2024-10-03T03:16:39.000Z","size":42226,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T15:56:45.176Z","etag":null,"topics":["axios","django","django-cors-headers","django-rest-framework","facebook","font-awesome","pillow","primevue","scss","tailwind","vue","vueuse"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LearnCodingEasy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-05T06:28:53.000Z","updated_at":"2024-10-03T03:16:43.000Z","dependencies_parsed_at":"2025-04-09T16:01:14.199Z","dependency_job_id":null,"html_url":"https://github.com/LearnCodingEasy/Facebook","commit_stats":null,"previous_names":["learncodingeasy/facebook"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LearnCodingEasy/Facebook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnCodingEasy%2FFacebook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnCodingEasy%2FFacebook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnCodingEasy%2FFacebook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnCodingEasy%2FFacebook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LearnCodingEasy","download_url":"https://codeload.github.com/LearnCodingEasy/Facebook/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LearnCodingEasy%2FFacebook/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28627388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","django","django-cors-headers","django-rest-framework","facebook","font-awesome","pillow","primevue","scss","tailwind","vue","vueuse"],"created_at":"2024-11-23T20:39:32.485Z","updated_at":"2026-01-21T05:09:19.621Z","avatar_url":"https://github.com/LearnCodingEasy.png","language":"Python","readme":"# Facebook\n👋 Hello! 🗣️ Design presentation about online Social project named “Facebook”.\n\n🎨 Design motivation for an online Facebook project.\n\n💖 Please click like and appreciate.\n\n🙏 Thank you for supporting and appreciating my efforts\n\n## Website Build\n\n\n# Preview Login\n![This is an image](https://raw.githubusercontent.com/learncodingeasy/Facebook/main/facebook_vue/src/assets/image/Login.png)\n\n# Preview Signup\n![This is an image](https://raw.githubusercontent.com/learncodingeasy/Facebook/main/facebook_vue/src/assets/image/Signup.png)\n\n# Facebook\n👋 Hello! 🗣️ Design presentation about online Social project named “Faceb ook”.\n\n🎨 Design motivation for an online Facebook project.\n\n💖 Please click like and appreciate.\n\n🙏 Thank you for supporting and appreciating my efforts\n\n## Website Build\n\n\n### 1 Git Clone Project\n```\ngit clone https://github.com/LearnCodingEasy/Facebook.git\n``` \n__________________________________________________\n### 2 Create File [ LICENSE ]\n```\nLICENSE\n``` \n#### In Side File [ LICENSE ]\n```\nMIT License\nCopyright (c) 2024 Hossam Rashad\n```\n__________________________________________________\n### 3 Create Virtual Environment\n```cmd\npython -m venv facebook_virtual_environment\n```\n#### Activate Virtual Environment\n```cmd\nfacebook_virtual_environment\\Scripts\\activate\n```\n__________________________________________________\n### 4 Install Django\n```cmd\npip install django\n```\n__________________________________________________\n### 5 Install Django Libraries [ 1 - djangorestframework | 2 - djangorestframework-simplejwt | 3 - django-cors-headers | 4 - pillow ]\n```cmd\npip install djangorestframework djangorestframework-simplejwt django-cors-headers pillow\n```\n__________________________________________________\n### 6 Create Django Project\n```cmd\ndjango-admin startproject facebook_django\n```\n__________________________________________________\n### 7 Create Django App\n```cmd\ncd facebook_django\n```\n```python\npython manage.py startapp account\n```\n__________________________________________________\n### 8 Setup Djang Libraries\n```python\n# Page [facebook/facebook_django/facebook_django/settings.py]\n\n# استيراد مكتبة timedelta عشان نحدد مدة صلاحية التوكين\nfrom datetime import timedelta\n\n# ALLOWED_HOSTS ده المتغير اللي بنحدد فيه الدومينات أو الآيبيهات اللي مسموح لها تشغل المشروع\nALLOWED_HOSTS = []\n\n# URL أو على سيرفر حقيقي (localhost) الموقع اللي بنشتغل عليه سواء كان محلي\nWEBSITE_URL = \"http://127.0.0.1:8000\"\n\n# EMAIL_BACKEND ده اللي بيحدد طريقة إرسال الإيميلات من خلال \n# Django، هنا مختار انه يطبع الإيميلات في الكونسل\n# EMAIL_BACKEND = \"django.core.mail.backends.console.EmailBackend\"\n# Django، هنا سيتم إرسال الرسائل الإيميلات الى الإيميلات\nEMAIL_BACKEND = \"django.core.mail.backends.smtp.EmailBackend\"\n# مزود SMTP الخاص بك (في هذه الحالة Gmail)\nEMAIL_HOST = \"smtp.gmail.com\"\nEMAIL_PORT = 587\nEMAIL_USE_TLS = True\n# البريد الإلكتروني الذي سيتم إرسال الرسائل منه\nEMAIL_HOST_USER = \"learncodingeasy0100@gmail.com\"\n# كلمة مرور البريد الإلكتروني\nEMAIL_HOST_PASSWORD = \"uxcg nuae kfjq txre\"\nDEFAULT_FROM_EMAIL = \"learncodingeasy0100@gmail.com\"\n\n\n# AUTH_USER_MODEL ده اللي بنحدد فيه موديل المستخدمين اللي شغالين عليه\nAUTH_USER_MODEL = \"account.User\"\n\n# SIMPLE_JWT دي إعدادات مكتبة JWT اللي بنستخدمها لإدارة التوكينات\nSIMPLE_JWT = {\n # ACCESS_TOKEN_LIFETIME ده اللي بيحدد مدة صلاحية توكين الدخول\n # (Access Token)، هنا مدته 30 يوم\n \"ACCESS_TOKEN_LIFETIME\": timedelta(days=30),\n # REFRESH_TOKEN_LIFETIME ده اللي بيحدد مدة صلاحية توكين التحديث\n # (Refresh Token)، هنا مدته 180 يوم\n \"REFRESH_TOKEN_LIFETIME\": timedelta(days=180),\n # ROTATE_REFRESH_TOKENS ده اللي بيحدد لو التوكين بيتجدد مع كل تحديث للتوكين ولا لأ، هنا مش بيتجدد\n \"ROTATE_REFRESH_TOKENS\": False,\n}\n\n# REST_FRAMEWORK دي إعدادات مكتبة Django Rest Framework\nREST_FRAMEWORK = {\n # DEFAULT_AUTHENTICATION_CLASSES دي اللي بتحدد نوع المصادقة الافتراضية اللي هتكون JWT\n \"DEFAULT_AUTHENTICATION_CLASSES\": (\n \"rest_framework_simplejwt.authentication.JWTAuthentication\",\n ),\n # DEFAULT_PERMISSION_CLASSES دي بتحدد الإذن الافتراضي اللي هو أن المستخدم لازم يكون مصدق عليه (Authenticated)\n \"DEFAULT_PERMISSION_CLASSES\": (\"rest_framework.permissions.IsAuthenticated\",),\n}\n\n# CORS_ALLOWED_ORIGINS دي بنحدد فيها الأصول المسموح لها تتواصل مع السيرفر بتاعنا\nCORS_ALLOWED_ORIGINS = [\n # أصل خاص بـ Vue.js على بورت 5173\n \"http://localhost:5173\",\n # أصل خاص بـ Vue.js على بورت 5174\n \"http://localhost:5174\",\n]\n\n# CSRF_TRUSTED_ORIGINS دي بنحدد فيها الأصول الموثوقة اللي بنسمح لها تستخدم\n# CSRF مع السيرفر\nCSRF_TRUSTED_ORIGINS = [\n # أصل خاص بـ Vue.js على بورت 5173\n \"http://localhost:5173\",\n # أصل خاص بـ Vue.js على بورت 5174\n \"http://localhost:5174\",\n]\n\n# Django اللي متضافه لمشروع (Libraries) والمكتبات (Apps) دي قائمة بالتطبيقات \nINSTALLED_APPS = [\n # ...\n # Apps\n \"account\",\n # Libraries\n \"rest_framework\",\n \"rest_framework_simplejwt\",\n \"corsheaders\",\n]\n\n# 🛡️ (requests) هي عبارة عن مكونات أو طبقات بتتعامل مع الطلبات Middleware الـ\n# اللي بتجيلك من المستخدمين قبل ما توصل لوجهتها النهائية في السرفر\nMIDDLEWARE = [\n # ...\n \"corsheaders.middleware.CorsMiddleware\",\n # ...\n]\n\n# - 🌐 `STATIC_URL` بيحدد الرابط اللي هتعرض عليه الملفات الثابتة.\nSTATIC_URL = \"static/\"\n# - 📷 `MEDIA_URL` بيحدد الرابط اللي هتعرض عليه ملفات الميديا اللي بيرفعها المستخدمين.\nMEDIA_URL = \"media/\"\n# - 💾 `MEDIA_ROOT` بيحدد مكان تخزين ملفات الميديا الفعلي على جهاز السيرفر\nMEDIA_ROOT = BASE_DIR / \"media\"\n```\n__________________________________________________\n### 9 Setup App [ Account ]\n```python\n# Page [ facebook/facebook_django/account/models.py ]\n# uuid: يُستخدم لإنشاء معرّفات فريدة عالمياً\n# (UUID) التي يمكن استخدامها لتعريف المستخدمين\nimport uuid\n\n# settings: لاستيراد إعدادات\n# Django الخاصة بالمشروع\nfrom django.conf import settings\n\n# AbstractBaseUser, PermissionsMixin: لإنشاء نموذج مستخدم مخصص\n# UserManager: لإدارة إنشاء المستخدمين\nfrom django.contrib.auth.models import AbstractBaseUser, PermissionsMixin, UserManager\n\n# models: Django لإنشاء نماذج\nfrom django.db import models\n\n# timezone: للتعامل مع التوقيتات\nfrom django.utils import timezone\n\n# 🔧 لإدارة المستخدمين المخصص CustomUserManager تم إنشاء كلاس باسم\n# Django المتوفر افتراضيًا في UserManager وهو يرث من كلاس\nclass CustomUserManager(UserManager):\n \"\"\"\n _create_user دالة داخلية لإنشاء مستخدم جديد\n name: اسم المستخدم\n email: البريد الإلكتروني للمستخدم\n password: كلمة المرور\n **extra_fields: أي حقول إضافية\n \"\"\"\n\n def _create_user(self, name, email, password, **extra_fields):\n # الجزء ده بيتأكد إن الإيميل مش فاضي، ولو كان فاضي سيتم رفع خطأ\n if not email:\n raise ValueError(\"You have not provided a valid e-mail address\")\n # ومظبوط small letters هنا بنعمل عملية تنسيق للإيميل بحيث يبقى كله\n # normalize_email باستخدام\n email = self.normalize_email(email)\n # هنا بنعمل إنشاء للمستخدم نفسه وبنمرر الاسم والإيميل وبقية الحقول الإضافية\n user = self.model(email=email, name=name, **extra_fields)\n # هنا بنعمل إعداد كلمة السر للمستخدم\n user.set_password(password)\n # database وأخيرًا هنا بنحفظ المستخدم في قاعدة البيانات باستخدام الـ\n # اللي إحنا شغالين عليها\n user.save(using=self._db)\n # وبعدين بنرجع المستخدم اللي اتعمله إنشاء\n return user\n\n # عشان تعمل إنشاء مستخدم عادي create_user هنا بنعرف ميثود جديدة اللي هي\n def create_user(self, name=None, email=None, password=None, **extra_fields):\n # هنا بنحدد أن المستخدم العادي مش هيبقى\n # staff ومش هيبقى superuser\n extra_fields.setdefault(\"is_staff\", False)\n extra_fields.setdefault(\"is_superuser\", False)\n # _create_user وبعدين بننادي على الميثود اللي عملناها فوق\n # عشان تكمل عملية الإنشاء\n return self._create_user(name, email, password, **extra_fields)\n\n # create_superuser هنا بنعرف ميثود جديدة اللي هي\n # superuser عشان تعمل إنشاء للمستخدم اللي هو\n def create_superuser(self, name=None, email=None, password=None, **extra_fields):\n # هنا بنحدد أن المستخدم ده هيبقى\n # staff وكمان هيبقى superuser\n extra_fields.setdefault(\"is_staff\", True)\n extra_fields.setdefault(\"is_superuser\", True)\n # _create_user وبعدين برضه بننادي على الميثود\n # superuse عشان تكمل عملية الإنشاء بس للمستخدم اللي هو\n return self._create_user(name, email, password, **extra_fields)\n\n\n # اللي هو المستخدم User بنعمل كلاس اسمه\n # AbstractBaseUser و PermissionsMixin وده بيورث من\n # Djangoاللي فيهم أساسيات المستخدم في\n class User(AbstractBaseUser, PermissionsMixin):\n # id: اللي بيكون مفتاح أساسي للمستخدم، عشان يكون فريد لكل مستخدم UUID ده الـ\n id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)\n # ___________________\n # حقل يتم تعبئة من المستخدام\n # ___________________\n # تسجيل الدخول\n # name: الاسم الخاص بالمستخدم\n name = models.CharField(max_length=255, blank=True, default=\"\")\n # surname: الاسم العائلةالخاص بالمستخدم\n surname = models.CharField(max_length=255, blank=True, default=\"\")\n # email: البريد الإلكتروني الخاص بالمستخدم\n email = models.EmailField(unique=True)\n # Date of birth تاريخ الميلاد\n date_of_birth = models.DateField(default=timezone.now)\n # Gender الجنس المستخدم\n gender = models.CharField(max_length=15, blank=True, null=True)\n # avatar: الصورة الشخصية للمستخدم\n avatar = models.ImageField(upload_to=\"avatars\", blank=True, null=True)\n # cover: الصورة الغلاف للمستخدم\n cover = models.ImageField(upload_to=\"covers\", blank=True, null=True)\n \n # is_active: حالة تفعيل المستخدم\n is_active = models.BooleanField(default=True)\n # is_superuser: حالة المستخدم كمشرف\n is_superuser = models.BooleanField(default=False)\n # is_staff: حالة المستخدم كموظف\n is_staff = models.BooleanField(default=False)\n \n # ___________________\n # حقل يتم تعبئة تلقائي\n # ___________________\n # date_joined: تاريخ انضمام المستخدم\n date_joined = models.DateTimeField(default=timezone.now)\n # last_login: تاريخ آخر تسجيل دخول للمستخدم\n last_login = models.DateTimeField(blank=True, null=True)\n \n # تخصيص السلوك في إدارة المستخدمين بشكل مرن ومنظم\n objects = CustomUserManager()\n \n # email يحدد الحقل الذي سيتم استخدامه لتسجيل الدخول. في هذه الحالة، هو\n USERNAME_FIELD = \"email\"\n # يحدد الحقل الذي يتم استخدامه كالبريد الإلكتروني الرئيسي للمستخدم. في هذه الحالة، هو email.\n EMAIL_FIELD = \"email\"\n # 📝 لا توجد حقول إضافية مطلوبة بجانب البريد الإلكتروني وكلمة المرور عند إنشاء مستخدم جديد عبر الأوامر الإدارية.\n REQUIRED_FIELDS = []\n\n# اللي هو المستخدم User بنعمل كلاس اسمه\n# AbstractBaseUser و PermissionsMixin وده بيورث من\n# Djangoاللي فيهم أساسيات المستخدم في\nclass User(AbstractBaseUser, PermissionsMixin):\n # id: اللي بيكون مفتاح أساسي للمستخدم، عشان يكون فريد لكل مستخدم UUID ده الـ\n id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)\n # ___________________\n # حقل يتم تعبئة من المستخدام\n # ___________________\n # تسجيل الدخول\n # name: الاسم الخاص بالمستخدم\n name = models.CharField(max_length=255, blank=True, default=\"\")\n # surname: الاسم العائلةالخاص بالمستخدم\n surname = models.CharField(max_length=255, blank=True, default=\"\")\n # email: البريد الإلكتروني الخاص بالمستخدم\n email = models.EmailField(unique=True)\n # Date of birth تاريخ الميلاد\n date_of_birth = models.DateField(default=timezone.now)\n # Gender الجنس المستخدم\n gender = models.CharField(max_length=15, blank=True, null=True)\n # avatar: الصورة الشخصية للمستخدم\n avatar = models.ImageField(upload_to=\"avatars\", blank=True, null=True)\n # cover: الصورة الغلاف للمستخدم\n cover = models.ImageField(upload_to=\"covers\", blank=True, null=True)\n\n # is_active: حالة تفعيل المستخدم\n is_active = models.BooleanField(default=True)\n # is_superuser: حالة المستخدم كمشرف\n is_superuser = models.BooleanField(default=False)\n # is_staff: حالة المستخدم كموظف\n is_staff = models.BooleanField(default=False)\n\n # ___________________\n # حقل يتم تعبئة تلقائي\n # ___________________\n # date_joined: تاريخ انضمام المستخدم\n date_joined = models.DateTimeField(default=timezone.now)\n # last_login: تاريخ آخر تسجيل دخول للمستخدم\n last_login = models.DateTimeField(blank=True, null=True)\n\n # تخصيص السلوك في إدارة المستخدمين بشكل مرن ومنظم\n objects = CustomUserManager()\n\n # email يحدد الحقل الذي سيتم استخدامه لتسجيل الدخول. في هذه الحالة، هو\n USERNAME_FIELD = \"email\"\n # يحدد الحقل الذي يتم استخدامه كالبريد الإلكتروني الرئيسي للمستخدم. في هذه الحالة، هو email.\n EMAIL_FIELD = \"email\"\n # 📝 لا توجد حقول إضافية مطلوبة بجانب البريد الإلكتروني وكلمة المرور عند إنشاء مستخدم جديد عبر الأوامر الإدارية.\n REQUIRED_FIELDS = []\n \n \n```\n* Create Page [ serializers.py ] Inside App Account \n```cmd\nserializers.py\n```\n```python\n# Page [ facebook/facebook_django/account/serializers.py ]\n# Django Rest Framework من serializers هنا بنستورد مكتبة\n# JSON اللي بتساعدنا في تحويل البيانات لأنواع مختلفة زي\nfrom rest_framework import serializers\n\n# اللي بنستخدمه في تكوين البيانات User هنا بنستورد الموديل الخاص بـ\nfrom .models import User\n\n# UserSerializer بنعمل كلاس اسمه\n# اللي هو هيكون مسؤول عن تحويل البيانات من وإلى شكل مناسب للاستخدام\nclass UserSerializer(serializers.ModelSerializer):\n # Serializer هنا بنحدد الميتا كلاس اللي بيحتوي على إعدادات الـ\n class Meta:\n # User هو موديل الـ Serializer بنحدد ان الموديل اللي هنستخدمه في الـ\n model = User\n # API بنحدد الحقول اللي عايزين نحولها أو نرجعها عند التعامل مع الـ\n fields = (\n # الخاص بالمستخدم ID الحقل ده بيخزن الـ\n \"id\",\n # الحقل ده بيخزن الاسم الأول للمستخدم\n \"name\",\n # الحقل ده بيخزن اسم العائلة للمستخدم\n \"surname\",\n # الحقل ده بيخزن البريد الإلكتروني للمستخدم\n \"email\",\n # الحقل ده بيخزن تاريخ الميلاد للمستخدم\n \"date_of_birth\",\n # الحقل ده بيخزن الجنس الخاص بالمستخدم\n \"gender\",\n )\n\n```\n* Create Page [ forms.py ] Inside App Account \n```cmd\nforms.py\n```\n```python\n# Page [ facebook/facebook_django/account/forms.py ]\n\n# UserCreationForm خاص بإنشاء المستخدمين اللي هو Django هنا بنستورد فورم جاهز من\nfrom django.contrib.auth.forms import UserCreationForm\n\n# اللي بتساعدنا في إنشاء الفورمات Django من forms هنا بنستورد مكتبة\nfrom django import forms\n\n# app من الموديلز الخاصة بالـ User هنا بنستورد الموديل الخاص بالمستخدم اللي هو\nfrom .models import User\n\n# UserCreationForm اللي بيرث من SignupForm بنعمل كلاس اسمه\n# الكلاس ده هيستخدم لإنشاء فورم لتسجيل المستخدمين الجدد\nclass SignupForm(UserCreationForm):\n # بنحدد الميتا كلاس اللي بيحتوي على إعدادات الفورم\n class Meta:\n # User بنحدد ان الموديل اللي الفورم ده هيشتغل عليه هو موديل الـ\n model = User\n fields = (\n # الاسم الأول للمستخدم\n \"name\",\n # اسم العائلة للمستخدم\n \"surname\",\n # البريد الإلكتروني للمستخدم\n \"email\",\n # تاريخ ميلاد المستخدم\n \"date_of_birth\",\n # الجنس الخاص بالمستخدم\n \"gender\",\n # كلمة المرور الأولى اللي المستخدم هيكتبها\n \"password1\",\n # تأكيد كلمة المرور اللي المستخدم هيكتبها للمطابقة\n \"password2\",\n )\n\n```\n```python\n# Page [ facebook/facebook_django/account/views.py ]\n\n# بسيطة HTTP عشان نستخدمها في إرجاع استجابات Django من HttpResponse إستيراد دالة\nfrom django.http import HttpResponse\n\n# (لو احتجناها) HTML عشان نستخدمها في عرض الصفحات Django من render إستيراد دالة\nfrom django.shortcuts import render\n\n# إستيراد نموذج المستخدم من الموديلات\nfrom .models import User\n\ndef activateemail(request):\n # (اللي جايين في الرابط) request من الـ ID الحصول على البريد الإلكتروني و\n email = request.GET.get(\"email\", \"\")\n id = request.GET.get(\"id\", \"\")\n # ( ID الإيميل و ) هنا بنتأكد إن البيانات المطلوبة موجودة\n if email and id:\n\n # بنجيب المستخدم من قاعدة البيانات اللي ليه الـ ID والإيميل دول\n user = User.objects.get(id=id, email=email)\n # بنفعّل حساب المستخدم\n user.is_active = True\n # بنحفظ التغييرات في قاعدة البيانات\n user.save()\n\n # بنرجع رد نصي بيقول إن المستخدم تم تفعيله ويقدر يسجل دخول\n return HttpResponse(\"The user is now activated. You can go ahead and log in!\")\n else:\n # لو البيانات مش كاملة أو مش صحيحة، بنرجع رد نصي بيقول إن البارامترات غير صحيحة\n return HttpResponse(\"The parameters is not valid!\")\n\n```\n* Create Page [ api.py ] Inside App Account \n```cmd\napi.py\n```\n```python\n# Page [ facebook/facebook_django/account/api.py ]\n# Django إستيراد إعدادات المشروع عشان نستخدمها في الكود\nfrom django.conf import settings\n\n# إستيراد نموذج تغيير كلمة المرور\n# هنا بنستورد نموذج تغيير كلمة المرور الجاهز من Django\n\nfrom django.contrib.auth.forms import PasswordChangeForm\n\n# إستيراد دالة إرسال البريد الإلكتروني\n# هنا بنستورد دالة إرسال البريد الإلكتروني عشان نستخدمها في إرسال إيميل التفعيل\nfrom django.core.mail import send_mail\n\n# JSON لإرجاع استجابات JsonResponse إستيراد\nfrom django.http import JsonResponse\n\n# إستيراد الديكورات لتعريف وحدات الواجهة البرمجية\nfrom rest_framework.decorators import (\n api_view,\n authentication_classes,\n permission_classes,\n)\n\n# إستيراد دالة إنشاء الإشعارات\n# from notification.utils import create_notification\n\n# إستيراد النماذج المخصصة لتسجيل المستخدم وتعديل الملف الشخصي\nfrom .forms import SignupForm\n\n# إستيراد النماذج المخصصة للمستخدم وطلبات الصداقة\nfrom .models import User\n\n# FriendshipRequest\n\n# إستيراد المسلسلات للمستخدم وطلبات الصداقة\nfrom .serializers import UserSerializer\n\n# FriendshipRequestSerializer\n\n\n@api_view([\"POST\"])\n# لا توجد فئات مصادقة مطلوبة لهذه العملية\n@authentication_classes([])\n# لا توجد أذونات مطلوبة لهذه العملية\n@permission_classes([])\ndef signup(request):\n\n data = request.data\n # القيمة الافتراضية للرسالة هي نجاح\n message = \"success\"\n\n form = SignupForm(\n {\n \"name\": data.get(\"name\"),\n \"surname\": data.get(\"surname\"),\n \"email\": data.get(\"email\"),\n \"date_of_birth\": data.get(\"date_of_birth\"),\n \"gender\": data.get(\"gender\"),\n \"password1\": data.get(\"password1\"),\n \"password2\": data.get(\"password2\"),\n }\n )\n\n if form.is_valid():\n # حفظ النموذج إذا كان صالحًا واسترجاع كائن المستخدم\n user = form.save()\n # تعيين حالة المستخدم على غير نشط\n user.is_active = False\n user.save()\n\n url = f\"{settings.WEBSITE_URL}/activateemail/?email={user.email}\u0026id={user.id}\"\n\n send_mail(\n \"Please verify your email\",\n f\"The url for activating your account is: {url}\",\n \"learncodingeasy@yahoo.com\",\n [user.email],\n fail_silently=False,\n )\n # إضافة رسالة تأكيد إرسال البريد الإلكتروني\n return JsonResponse({\"message\": message, \"email_sent\": True}, safe=False)\n else:\n # JSON إذا كان النموذج غير صالح، استرجاع الأخطاء كرسالة\n message = form.errors.as_json()\n\n # طباعة حالة العملية (نجاح أو الأخطاء) إلى وحدة التحكم\n print(message)\n\n # تحتوي على حالة العملية JSON إرجاع رسالة\n return JsonResponse({\"message\": message}, safe=False)\n\n\n# JSON إرجاع بيانات المستخدم الحالي كاستجابة\n@api_view([\"GET\"])\ndef me(request):\n return JsonResponse(\n {\n \"id\": request.user.id,\n \"name\": request.user.name,\n \"surname\": request.user.surname,\n \"email\": request.user.email,\n \"date_of_birth\": request.user.date_of_birth,\n \"gender\": request.user.gender,\n }\n )\n\n```\n* Create Page [ urls.py ] Inside App Account \n```cmd\nurls.py\n```\n```python\n# Page [ facebook/facebook_django/account/urls.py ]\n# URLs عشان أستخدمهم في تعريف مسارات الـ path بستورد\nfrom django.urls import path\n\n# Simple JWT من مكتبة TokenObtainPairView و TokenRefreshView بستورد\n# login والـ token refresh عشان أستخدمهم في الـ DRF الخاصة بالـ\nfrom rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView\n\n# اللى في نفس المجلد عشان أستخدم الفيوهات اللى فيه api بستورد كل حاجة من ملف\nfrom . import api\n\n# هنا بقوم بتعريف كل المسارات الـ\n# URLs الخاصة بالـ app دي\nurlpatterns = [\n # لما يتطلب loginالمسار ده بيعرض معلومات المستخدم اللى عامل\n path(\"me/\", api.me, name=\"me\"),\n # المسار ده مسئول عن عملية تسجيل حساب جديد\n path(\"signup/\", api.signup, name=\"signup\"),\n # tokens (access و refresh) وإصدار الـ login المسار ده مسئول عن عملية الـ\n path(\"login/\", TokenObtainPairView.as_view(), name=\"token_obtain\"),\n # refresh token باستخدام الـ access token المسار ده مسئول عن تجديد الـ\n path(\"refresh/\", TokenRefreshView.as_view(), name=\"token_refresh\"),\n]\n```\n```python\n# Page [ facebook/facebook_django/facebook_django/urls.py ]\n# djangoمن admin بعمل استيراد لـ\n# Django عشان اقدر أستخدم لوحة التحكم الخاصة بـ\nfrom django.contrib import admin\n\n# URLs عشان أستخدمهم في تعريف مسارات الـ path و include بستورد\nfrom django.urls import path, include\n\n# بستورد الإعدادات\n# `settings` و`static`\n# عشان أستخدمهم في إضافة مسارات الملفات الثابتة زي الصور\nfrom django.conf import settings\nfrom django.conf.urls.static import static\n\n# بستورد الفيو اللى هستخدمه لتفعيل الإيميل\nfrom account.views import activateemail\n\n# هنا بقوم بتعريف كل المسارات الـ\n# URLs اللي الموقع هيستخدمها\nurlpatterns = [\n # include وبستخدم /api/،و اللى كل حاجة فيه هتبقى تحت API مسار الـ\n # account اللى اسمها app عشان أضيف كل المسارات الخاصة بالـ\n path(\"api/\", include(\"account.urls\")),\n # اللي هيكون شغال لما حد يضغط على لينك التفعيل في الإيميل activateemail مسار الـ\n path(\"activateemail/\", activateemail, name=\"activateemail\"),\n # Django اللى بيدخلني على لوحة التحكم بتاعة admin المسار الخاص بالـ\n path(\"admin/\", admin.site.urls),\n # ده لإضافة مسارات الملفات الثابتة زي الصور،\n # وبيبقى شغال بس لما الموقع بيكون في وضع التطوير (development)\n] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)\n```\n\n- 🛠️ جاهز migration عشان يبقى في ملف models أمر ده بيعمل تحضير للتعديلات اللى حصلت في الـ \n```cmd\npython manage.py makemigrations\n```\n- 💾 على الداتابيس migrations أمر ده بيطبق التعديلات اللي اتحضرت في ملفات الـ \n```cmd\npython manage.py migrate\n```\n- عشان تقدر تجرب المشروع على جهازك local server وصف: 🚀 أمر ده بيشغل الـ \n```cmd\npython manage.py runserver\n```\n__________________________________________________\n__________________________________________________\n__________________________________________________\n__________________________________________________\n__________________________________________________\n__________________________________________________\n__________________________________________________\n__________________________________________________\n__________________________________________________\n\n### 10 Create Vue Project\n```\nnpm create vue@latest\n```\n__________________________________________________\n\n### 11 Choose Vite [ Project name \u0026 Select a framework ]\n```\n√ Project name: ... facebook_vue\n√ Add TypeScript? ... No / Yes\n√ Add JSX Support? ... No / Yes\n√ Add Vue Router for Single Page Application development? ... No / Yes\n√ Add Pinia for state management? ... No / Yes\n√ Add Vitest for Unit Testing? ... No / Yes\n√ Add an End-to-End Testing Solution? » No\n√ Add ESLint for code quality? ... No / Yes\n√ Add Prettier for code formatting? ... No / Yes\n√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes\n\nScaffolding project in E:\\Projects\\Facebook\\facebook_vue...\n\nDone. Now run:\n cd facebook_vue\n npm install\n npm run format\n npm run dev\n```\n__________________________________________________\n\n### 12 Go To Project [ Install \u0026 Run Dev ]\n```\ncd facebook_vue\nnpm install\nnpm run format\nnpm run build\nnpm run dev\n```\n\n__________________________________________________\n### 13 Install Vue Libraries [ 1 - Tailwind | 2 - PrimeVue | 3 - scss | 4 - Axios | 5 - Font Awesome | 6 - Pwa | 7 - | 8 - | 9 - | ]\n```\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n\nnpm install primevue primeicons\nnpm install @primevue/themes\n\nnpm install -D sass\n\nnpm install axios\n\nnpm i --save @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome@latest @fortawesome/vue-fontawesome@prerelease @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons\n\nnpm install -D vite-plugin-pwa\n\nnpm i swiper\n```\n__________________________________________________\n\n### 14 Configure Tailwind\n* tailwind.config.js\n```js\n// Page [ facebook/facebook_vue/tailwind.config.js ]\ncontent: [\n\"./index.html\",\n\"./src/**/*.{vue,js,ts,jsx,tsx}\",\n],\n```\n* style.css\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n__________________________________________________\n\n### 15 Import Font Awesome\n```js\n// Page [ facebook/facebook_vue/src/main.js ]\n// Font Awesome\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { fab } from \"@fortawesome/free-brands-svg-icons\";\nimport { far } from \"@fortawesome/free-regular-svg-icons\";\n// Add Free Icons Styles To SVG Core\nlibrary.add(fas, far, fab);\n\n// eslint-disable-next-line vue/multi-word-component-names\napp.component(\"fa\", FontAwesomeIcon)\n```\n\n\n__________________________________________________\n### 16 Add Pwa To Vue \n```js\n// Page [ facebook/facebook_vue/vite.config.js ]\n\nimport { fileURLToPath, URL } from 'node:url'\n\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// For Pwa\n// https://vite-pwa-org.netlify.app/guide/\nimport { VitePWA } from 'vite-plugin-pwa'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n vue(),\n // For Pwa\n VitePWA({ \n // ليكون \"تحديث تلقائي\" Service Worker إعداد نوع التسجيل لـ \n registerType: 'autoUpdate',\n workbox: {\n // Service Worker أنماط الملفات التي سيتم تخزينها مسبقًا في الـ \n globPatterns: ['**/*.{js,css,html,ico,png,svg}'],\n // يتحكم في كل العملاء الحاليين دون الحاجة لإعادة التحميل Service Worker يجعل الـ \n clientsClaim: true,\n // Service Worker يتجاوز فترة الانتظار وينشط الـ \n skipWaiting: true,\n // ولا يُنظفها Cache يُبقي على النسخ القديمة من الـ \n cleanupOutdatedCaches: false,\n // للعمل أثناء عدم الاتصال بالإنترنت Google يتيح تحليلات \n offlineGoogleAnalytics: true,\n // (الخرائط المصدرية) لتسهيل تتبع الأخطاء sourcemaps تفعيل \n sourcemap: true,\n runtimeCaching: [\n {\n // أو نوع الطلبات التي سيتم تخزينها أثناء التشغيل URL تحديد نمط \n urlPattern: ({ request }) =\u003e \n request.destination === 'document' || \n request.destination === 'script' || \n request.destination === 'style' || \n request.destination === 'image' || \n request.destination === 'font',\n // استراتيجية التخزين المؤقت التي تعرض النسخة المخزنة مؤقتًا أثناء الحصول على نسخة جديدة من الشبكة\n handler: 'StaleWhileRevalidate',\n options: {\n // المستخدم لتخزين هذه الملفات (cache) اسم الكاش \n cacheName: 'assets-cache',\n expiration: {\n // عدد الملفات التي يمكن تخزينها في الكاش كحد أقصى\n maxEntries: 100,\n // مدة التخزين المؤقت لهذه الملفات (30 يومًا)\n maxAgeSeconds: 60 * 60 * 24 * 30 \n }\n }\n }\n ],\n },\n devOptions: {\n // PWA تمكين خيارات التطوير أثناء تطوير \n enabled: true\n },\n injectRegister: 'auto',\n includeAssets: [\"**/*\"],\n manifest: {\n name: 'Facebook',\n short_name: 'Facebook',\n description: 'My Awesome App Facebook',\n theme_color: '#ffffff',\n icons: [\n {\n \"src\": \"./images/icons/facebook_icon_72x72.png\",\n \"type\": \"image/png\",\n \"sizes\": \"72x72\",\n \"purpose\": \"any maskable\"\n },\n {\n \"src\": \"./images/icons/facebook_icon_96x96.png\",\n \"type\": \"image/png\",\n \"sizes\": \"96x96\",\n \"purpose\": \"any maskable\"\n },\n {\n \"src\": \"./images/icons/facebook_icon_128x128.png\",\n \"type\": \"image/png\",\n \"sizes\": \"128x128\",\n \"purpose\": \"any maskable\"\n },\n {\n \"src\": \"./images/icons/facebook_icon_144x144.png\",\n \"type\": \"image/png\",\n \"sizes\": \"144x144\",\n \"purpose\": \"any maskable\"\n },\n {\n \"src\": \"./images/icons/facebook_icon_152x152.png\",\n \"type\": \"image/png\",\n \"sizes\": \"152x152\",\n \"purpose\": \"any maskable\"\n },\n {\n \"src\": \"./images/icons/facebook_icon_192x192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\",\n \"purpose\": \"any maskable\"\n },\n {\n \"src\": \"./images/icons/facebook_icon_384x384.png\",\n \"type\": \"image/png\",\n \"sizes\": \"384x384\",\n \"purpose\": \"any maskable\"\n },\n {\n \"src\": \"./images/icons/facebook_icon_512x512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\",\n \"purpose\": \"any maskable\"\n }\n ],\n screenshots: [\n {\n \"src\": \"./images/screenshots/screenshots.png\",\n \"sizes\": \"640x480\",\n \"type\": \"image/png\",\n \"form_factor\": \"wide\"\n // \"form_factor\": \"narrow\"\n }\n ]\n },\n })\n ],\n resolve: {\n alias: {\n '@': fileURLToPath(new URL('./src', import.meta.url))\n }\n }\n})\n```\n* Add Image Inside Public\n```\n├── public/\n│ ├── images/\n│ | ├── icons/\n│ │ | ├── 🖼️ facebook_icon_72x72.png\n│ │ | ├── 🖼️ facebook_icon_96x96.png\n│ │ | ├── 🖼️ facebook_icon_128x128.png\n│ │ | ├── 🖼️ facebook_icon_144x144.png\n│ │ | ├── 🖼️ facebook_icon_152x152.png\n│ │ | ├── 🖼️ facebook_icon_192x192.png\n│ │ | ├── 🖼️ facebook_icon_384x384.png\n│ │ | ├── 🖼️ facebook_icon_512x512.png\n│ | ├── screenshots/\n│ │ | ├── 🖼️ screenshots.png\n```\n__________________________________________________\n\n### 17 Setup Axios\n```js\n// Axios\n// axios استيراد\nimport axios from \"axios\"\naxios.defaults.baseURL = \"http://127.0.0.1:8000\"\n\napp.use(router, axios)\n```\n\n__________________________________________________\n### 18 Setup PrimeVue\n```js\n// Page [ facebook/facebook_vue/src/main.js ]\n// Prime Vue \nimport PrimeVue from \"primevue/config\";\n// Popup\nimport ConfirmationService from 'primevue/confirmationservice'\nimport DialogService from 'primevue/dialogservice'\n// Button\nimport Button from 'primevue/button';\n// Form\nimport Fluid from 'primevue/fluid';\nimport InputText from 'primevue/inputtext';\nimport Password from 'primevue/password';\nimport FloatLabel from 'primevue/floatlabel';\nimport Checkbox from 'primevue/checkbox';\nimport DatePicker from 'primevue/datepicker';\nimport InputGroup from 'primevue/inputgroup';\nimport InputGroupAddon from 'primevue/inputgroupaddon';\n// Menu\nimport Menubar from 'primevue/menubar';\nimport TieredMenu from 'primevue/tieredmenu';\n// Image\nimport Avatar from 'primevue/avatar';\nimport AvatarGroup from 'primevue/avatargroup';\n// Popup\nimport Popover from 'primevue/popover';\nimport Dialog from 'primevue/dialog';\n// Card\nimport Card from 'primevue/card';\n// Theme\nimport Noir from './presets/Noir.js';\nimport ThemeSwitcher from './components/Theme/ThemeSwitcher.vue';\n// Toast\nimport Toast from 'primevue/toast';\nimport ToastService from 'primevue/toastservice';\n// Message\nimport Message from 'primevue/message';\n// PrimeIcons أيقونات \nimport 'primeicons/primeicons.css'\nimport 'tailwindcss/tailwind.css'\n\n// Prime Vue \napp.use(PrimeVue, {\n theme: {\n preset: Noir,\n options: {\n prefix: 'p',\n darkModeSelector: '.p-dark',\n cssLayer: false,\n }\n }\n});\napp.use(ConfirmationService);\napp.use(DialogService);\n// Prime Theme Switcher\napp.component('ThemeSwitcher', ThemeSwitcher);\n// Prime Button\napp.component('prime_button', Button);\n// Prime Form\napp.component('prime_fluid', Fluid);\napp.component('prime_input_text', InputText);\napp.component('prime_input_password', Password);\napp.component('prime_float_label', FloatLabel);\napp.component('prime_check_box', Checkbox);\napp.component('prime_date_picker', DatePicker);\napp.component('prime_input_group', InputGroup);\napp.component('prime_input_group_addon', InputGroupAddon);\n// Prime Menu\napp.component('prime_menubar', Menubar);\napp.component('prime_tiered_menu', TieredMenu);\napp.component('prime_avatar', Avatar);\napp.component('prime_avatar_group', AvatarGroup);\napp.component('prime_popover', Popover);\napp.component('prime_card', Card);\napp.component('prime_dialog', Dialog);\n// Toast\n// app.use(Toast);\napp.component('prime_toast', Toast);\napp.use(ToastService);\n// Message\n// app.use(Message);\napp.component('prime_message', Message);\n```\n* Setup Prime Theme\n- Create Page [ primeTheme.js ] Inside stores\n```js\n// Page [ facebook/facebook_vue/src/stores/primeTheme.js ]\n\nimport { reactive } from 'vue';\nexport default {\n install: (app) =\u003e {\n const _appState = reactive({ theme: 'Aura', darkTheme: false });\n app.config.globalProperties.$appState = _appState;\n }\n};\n```\n- Create Page [ ThemeSwitcher.vue ] components/Theme/\n```html\n\u003ctemplate\u003e\n \u003cspan class=\"\"\u003e\n \u003cul class=\"flex list-none m-0 p-0 gap-2 items-center\"\u003e\n \u003cli\u003e\n \u003cbutton\n type=\"button\"\n class=\"inline-flex w-8 h-8 p-0 items-center justify-center surface-0 dark:surface-800 border border-surface-200 dark:border-surface-600 rounded-full\"\n @click=\"onThemeToggler\"\n \u003e\n \u003ci :class=\"`dark:text-white pi ${iconClass}`\" /\u003e\n \u003c/button\u003e\n \u003c/li\u003e\n \u003c/ul\u003e\n \u003c/span\u003e\n\u003c/template\u003e\n```\n```js\n\u003cscript\u003e\n import { updatePreset, updateSurfacePalette } from '@primevue/themes'\n \n export default {\n data() {\n return {\n iconClass: 'pi-moon',\n selectedPrimaryColor: 'noir',\n selectedSurfaceColor: null\n }\n },\n methods: {\n onThemeToggler() {\n const root = document.getElementsByTagName('html')[0]\n root.classList.toggle('p-dark')\n this.iconClass = this.iconClass === 'pi-moon' ? 'pi-sun' : 'pi-moon'\n },\n \n updateColors(type, color) {\n if (type === 'primary') this.selectedPrimaryColor = color.name\n else if (type === 'surface') this.selectedSurfaceColor = color.name\n \n this.applyTheme(type, color)\n },\n applyTheme(type, color) {\n if (type === 'primary') {\n updatePreset(this.getPresetExt())\n } else if (type === 'surface') {\n updateSurfacePalette(color.palette)\n }\n },\n onRippleChange(value) {\n this.$primevue.config.ripple = value\n }\n },\n computed: {\n rippleActive() {\n return this.$primevue.config.ripple\n }\n }\n }\n\u003c/script\u003e\n```\n* Setup Prime Theme\n- Create Page [ Noir.js ] Inside src/presets \n```js\nimport { definePreset } from '@primevue/themes';\nimport Aura from '@primevue/themes/aura';\n\nconst Noir = definePreset(Aura, {\n semantic: {\n primary: {\n 50: '{surface.50}',\n 100: '{surface.100}',\n 200: '{surface.200}',\n 300: '{surface.300}',\n 400: '{surface.400}',\n 500: '{surface.500}',\n 600: '{surface.600}',\n 700: '{surface.700}',\n 800: '{surface.800}',\n 900: '{surface.900}',\n 950: '{surface.950}'\n },\n colorScheme: {\n light: {\n primary: {\n color: '{primary.950}',\n contrastColor: '#ffffff',\n hoverColor: '{primary.900}',\n activeColor: '{primary.800}'\n },\n highlight: {\n background: '{primary.950}',\n focusBackground: '{primary.700}',\n color: '#ffffff',\n focusColor: '#ffffff'\n },\n },\n dark: {\n primary: {\n color: '{primary.50}',\n contrastColor: '{primary.950}',\n hoverColor: '{primary.100}',\n activeColor: '{primary.200}'\n },\n highlight: {\n background: '{primary.50}',\n focusBackground: '{primary.300}',\n color: '{primary.950}',\n focusColor: '{primary.950}'\n }\n }\n }\n }\n});\n\nexport default Noir;\n\n```\n__________________________________________________\n### 19 Setup Vuex\n* Creat Page [ user.js ] Inside Store\n```js\n// Page [ facebook/facebook_vue/src/stores/user.js ]\n// `pinia`من مكتبة `defineStore` استيراد \nimport { defineStore } from 'pinia'\n// HTTP للتعامل مع طلبات `axios` استيراد \nimport axios from 'axios'\n// `defineStore` باستخدام `useUserStore` تعريف وتصدير\nexport const useUserStore = defineStore({\n // (store) تعيين معرّف فريد للمخزن \n id: 'user',\n // (store) تعيين معرّف فريد للمخزن \n state: () =\u003e ({\n // تحديد الخصائص الافتراضية للمستخدم\n user: {\n // هل المستخدم مسجل دخول أم لا\n isAuthenticated: false, \n // معرّف المستخدم\n id: null,\n // اسم المستخدم\n name: null,\n // لقب المستخدم\n surname: null,\n // بريد المستخدم الإلكتروني\n email: null,\n // تاريخ ميلاد المستخدم\n date_of_birth: null,\n // رمز الوصول (Access Token)\n access: null,\n // رمز التجديد (Refresh Token)\n refresh: null,\n // personal_phone: null, // هاتف المستخدم الشخصي (غير مستخدم حالياً)\n // public_phone: null, // هاتف المستخدم العام (غير مستخدم حالياً)\n // address: null, // عنوان المستخدم (غير مستخدم حالياً)\n // workplace_company: null, // شركة العمل (غير مستخدم حالياً)\n // workplace_position: null, // منصب العمل (غير مستخدم حالياً)\n // workplace_city_town: null, // مدينة أو بلدة العمل (غير مستخدم حالياً)\n // workplace_description: null, // وصف العمل (غير مستخدم حالياً)\n // workplace_time_period: null, // فترة العمل (غير مستخدم حالياً)\n // avatar: null, // صورة المستخدم الرمزية (غير مستخدم حالياً)\n // cover: null // صورة غلاف المستخدم (غير مستخدم حالياً)\n }\n }),\n // (store) في المخزن (actions) تعريف الإجراءات \n actions: {\n // إجراء لتهيئة المخزن واستعادة بيانات المستخدم من التخزين المحلي\n initStore() {\n // console.log('initStore', localStorage.getItem('user.access'))\n // إذا كان هناك رمز وصول محفوظ في التخزين المحلي\n if (localStorage.getItem('user.access')) {\n console.log('User has access!')\n // تعيين خصائص المستخدم باستخدام البيانات المخزنة محلياً\n this.user.isAuthenticated = true\n this.user.id = localStorage.getItem('user.id')\n this.user.name = localStorage.getItem('user.name')\n this.user.surname = localStorage.getItem('user.surname')\n this.user.email = localStorage.getItem('user.email')\n this.user.date_of_birth = localStorage.getItem('user.date_of_birth')\n this.user.access = localStorage.getItem('user.access')\n this.user.refresh = localStorage.getItem('user.refresh')\n // this.user.personal_phone = localStorage.getItem('user.personal_phone')\n // this.user.public_phone = localStorage.getItem('user.public_phone')\n // this.user.address = localStorage.getItem('user.address')\n // this.user.workplace_company = localStorage.getItem('user.workplace_company')\n // this.user.workplace_position = localStorage.getItem('user.workplace_position')\n // this.user.workplace_city_town = localStorage.getItem('user.workplace_city_town')\n // this.user.workplace_description = localStorage.getItem('user.workplace_description')\n // this.user.workplace_time_period = localStorage.getItem('user.workplace_time_period')\n // this.user.avatar = localStorage.getItem('user.avatar')\n // this.user.cover = localStorage.getItem('user.cover')\n // تحديث رمز الوصول\n this.refreshToken()\n // console.log('Initialized user:', this.user)\n }\n },\n // إجراء لتعيين رموز الوصول والتجديد في المخزن وفي التخزين المحلي\n setToken(data) {\n console.log('setToken', data)\n // تعيين الرموز في المخزن\n this.user.access = data.access\n this.user.refresh = data.refresh\n this.user.isAuthenticated = true\n // تخزين الرموز في التخزين المحلي\n localStorage.setItem('user.access', data.access)\n localStorage.setItem('user.refresh', data.refresh)\n\n console.log('user.access: ', localStorage.getItem('user.access'))\n },\n // إجراء لإزالة الرموز وتفريغ بيانات المستخدم\n removeToken() {\n console.log('removeToken')\n // إعادة تعيين بيانات المستخدم إلى قيمها الافتراضية\n this.user.refresh = null\n this.user.access = null\n this.user.isAuthenticated = false\n this.user.id = null\n this.user.name = null\n this.user.surname = null\n this.user.email = null\n this.user.date_of_birth = null\n // this.user.personal_phone = null\n // this.user.public_phone = null\n // this.user.address = null\n // this.user.workplace_company = null\n // this.user.workplace_position = null\n // this.user.workplace_city_town = null\n // this.user.workplace_description = null\n // this.user.workplace_time_period = null\n // this.user.avatar = null\n // this.user.cover = null\n // إزالة البيانات المخزنة في التخزين المحلي\n localStorage.setItem('user.access', '')\n localStorage.setItem('user.refresh', '')\n localStorage.setItem('user.id', '')\n localStorage.setItem('user.name', '')\n localStorage.setItem('user.surname', '')\n localStorage.setItem('user.email', '')\n localStorage.setItem('user.date_of_birth', '')\n // localStorage.setItem('user.personal_phone', '')\n // localStorage.setItem('user.public_phone', '')\n // localStorage.setItem('user.address', '')\n // localStorage.setItem('user.workplace_company', '')\n // localStorage.setItem('user.workplace_position', '')\n // localStorage.setItem('user.workplace_city_town', '')\n // localStorage.setItem('user.workplace_description', '')\n // localStorage.setItem('user.workplace_time_period', '')\n // localStorage.setItem('user.avatar', '')\n // localStorage.setItem('user.cover', '')\n },\n // إجراء لتحديث بيانات المستخدم وتخزينها في التخزين المحلي\n setUserInfo(user) {\n console.log('setUserInfo', user)\n // تعيين بيانات المستخدم في المخزن\n this.user.id = user.id\n this.user.name = user.name\n this.user.surname = user.surname\n this.user.email = user.email\n this.user.date_of_birth = user.date_of_birth\n // this.user.personal_phone = user.personal_phone\n // this.user.public_phone = user.public_phone\n // this.user.address = user.address\n // this.user.workplace_company = user.workplace_company\n // this.user.workplace_position = user.workplace_position\n // this.user.workplace_city_town = user.workplace_city_town\n // this.user.workplace_description = user.workplace_description\n // this.user.workplace_time_period = user.workplace_time_period\n // this.user.avatar = user.avatar\n // this.user.cover = user.cover\n\n localStorage.setItem('user.id', this.user.id)\n localStorage.setItem('user.name', this.user.name)\n localStorage.setItem('user.surname', this.user.surname)\n localStorage.setItem('user.email', this.user.email)\n localStorage.setItem('user.date_of_birth', this.user.date_of_birth)\n // localStorage.setItem('user.personal_phone', this.user.personal_phone)\n // localStorage.setItem('user.public_phone', this.user.public_phone)\n // localStorage.setItem('user.address', this.user.address)\n // localStorage.setItem('user.workplace_company', this.user.workplace_company)\n // localStorage.setItem('user.workplace_position', this.user.workplace_position)\n // localStorage.setItem('user.workplace_city_town', this.user.workplace_city_town)\n // localStorage.setItem('user.workplace_description', this.user.workplace_description)\n // localStorage.setItem('user.workplace_time_period', this.user.workplace_time_period)\n // localStorage.setItem('user.avatar', this.user.avatar)\n // localStorage.setItem('user.cover', this.user.cover)\n // console.log('User', this.user)\n },\n // إجراء لتحديث رمز الوصول باستخدام رمز التجديد\n refreshToken() {\n // لتحديث رمز الوصول HTTP إرسال طلب \n axios.post('/api/refresh/', {\n refresh: this.user.refresh\n })\n .then((response) =\u003e {\n // تحديث رمز الوصول في المخزن والتخزين المحلي\n this.user.access = response.data.access\n localStorage.setItem('user.access', response.data.access)\n // للطلبات المستقبلية Authorization تعيين رأس \n axios.defaults.headers.common[\"Authorization\"] = \"Bearer \" + response.data.access\n })\n .catch((error)=\u003e{\n // في حالة وجود خطأ، إزالة الرموز\n console.log(error)\n this.removeToken()\n })\n },\n }\n})\n```\n\n__________________________________________________\n### 20 Edite Page [ App ]\n```js\n\u003cscript setup\u003e\n import { RouterLink, RouterView } from 'vue-router'\n \n import { ref } from 'vue'\n //\n import { onMounted } from 'vue'\n import { useUserStore } from '@/stores/user'\n import { useRouter } from 'vue-router'\n \n const userStore = useUserStore()\n userStore.initStore()\n const router = useRouter()\n \n onMounted(() =\u003e {\n // Perform any necessary operations on component mount\n if (!userStore.user.access) {\n console.log('User Data: ', userStore.user.access)\n // Replace '/login' with your actual login route\n router.push('/login')\n } else {\n // Set default Authorization header for axios\n axios.defaults.headers.common['Authorization'] = `Bearer ${userStore.user.access}`\n // console.log('User Data: ', userStore.user)\n }\n })\n \n // For Toggle Theme\n const op = ref(null)\n const toggle = (event) =\u003e {\n op.value.toggle(event)\n }\n // Log Out\n let logout = () =\u003e {\n console.log('User Log out')\n userStore.removeToken()\n // توجيه المستخدم إلى صفحة تسجيل الدخول\n setTimeout(() =\u003e {\n router.push('/login').then(() =\u003e {})\n }, 10)\n }\n \u003c/script\u003e\n```\n```html\n\u003ctemplate\u003e\n \u003c!-- Header --\u003e\n \u003cprime_card class=\"header_wrapper\" v-if=\"userStore.user.isAuthenticated\"\u003e\n \u003ctemplate #content\u003e\n \u003cheader class=\"card shadow-md fixed top-0 left-0 right-0\"\u003e\n \u003cdiv class=\"container mx-auto flex justify-between items-center\"\u003e\n \u003c!-- Left Section (Logo and Search Bar) --\u003e\n \u003cdiv class=\"header_left_section flex items-center space-x-1 basis-1/4\"\u003e\n \u003c!-- Logo --\u003e\n \u003cRouterLink to=\"/\" class=\"logo\"\u003e\n \u003c!-- \u003ci class=\"fab fa-facebook fa-fw\"\u003e\u003c/i\u003e --\u003e\n \u003cfa :icon=\"['fab', 'facebook']\" /\u003e\n \u003c/RouterLink\u003e\n \u003c!-- Search Bar --\u003e\n \u003cdiv class=\"search_bar w-full\"\u003e\n \u003cspan class=\"icon\"\u003e\n \u003c!-- \u003ci class=\"fas fa-search fa-fw\"\u003e\u003c/i\u003e --\u003e\n \u003cfa :icon=\"['fas', 'search']\" /\u003e\n \u003c/span\u003e\n \u003cinput\n type=\"text\"\n class=\"w-full p-2 rounded-full focus:outline-none\"\n placeholder=\"Search Facebook\"\n /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003c!-- Center Section (Navigation Icons) --\u003e\n \u003cdiv class=\"header_center_section flex items-center justify-center space-x-1 basis-1/2\"\u003e\n \u003cRouterLink to=\"/\" class=\"header_center_section_link_home grow\"\u003e\n \u003cspan class=\"header_center_section_link_home_span\"\u003e\n \u003csvg\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n class=\"header_center_section_link_home_svg\"\n \u003e\n \u003cpath\n d=\"M9.464 1.286C10.294.803 11.092.5 12 .5c.908 0 1.707.303 2.537.786.795.462 1.7 1.142 2.815 1.977l2.232 1.675c1.391 1.042 2.359 1.766 2.888 2.826.53 1.059.53 2.268.528 4.006v4.3c0 1.355 0 2.471-.119 3.355-.124.928-.396 1.747-1.052 2.403-.657.657-1.476.928-2.404 1.053-.884.119-2 .119-3.354.119H7.93c-1.354 0-2.471 0-3.355-.119-.928-.125-1.747-.396-2.403-1.053-.656-.656-.928-1.475-1.053-2.403C1 18.541 1 17.425 1 16.07v-4.3c0-1.738-.002-2.947.528-4.006.53-1.06 1.497-1.784 2.888-2.826L6.65 3.263c1.114-.835 2.02-1.515 2.815-1.977zM10.5 13A1.5 1.5 0 0 0 9 14.5V21h6v-6.5a1.5 1.5 0 0 0-1.5-1.5h-3z\"\n \u003e\u003c/path\u003e\n \u003c/svg\u003e\n \u003c/span\u003e\n \u003c/RouterLink\u003e\n \u003cRouterLinka to=\"/\" class=\"text-white text-xl grow header_center_section_link_friends\"\u003e\n \u003cspan class=\"header_center_section_link_friends_span\"\u003e\n \u003csvg\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n class=\"header_center_section_link_friends_svg\"\n \u003e\n \u003cpath\n d=\"M12.496 5a4 4 0 1 1 8 0 4 4 0 0 1-8 0zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-9 2.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm-2 4a2 2 0 1 1 4 0 2 2 0 0 1-4 0zM5.5 15a5 5 0 0 0-5 5 3 3 0 0 0 3 3h8.006a3 3 0 0 0 3-3 5 5 0 0 0-5-5H5.5zm-3 5a3 3 0 0 1 3-3h4.006a3 3 0 0 1 3 3 1 1 0 0 1-1 1H3.5a1 1 0 0 1-1-1zm12-9.5a5.04 5.04 0 0 0-.37.014 1 1 0 0 0 .146 1.994c.074-.005.149-.008.224-.008h4.006a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-3.398a1 1 0 1 0 0 2h3.398a3 3 0 0 0 3-3 5 5 0 0 0-5-5H14.5z\"\n \u003e\u003c/path\u003e\n \u003c/svg\u003e\n \u003c/span\u003e\n \u003c/RouterLinka\u003e\n \u003cRouterLink to=\"/\" class=\"text-white text-xl grow header_center_section_link_videos\"\u003e\n \u003cspan class=\"header_center_section_link_videos_span\"\u003e\n \u003csvg\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n class=\"header_center_section_link_videos_svg\"\n \u003e\n \u003cpath\n d=\"M10.996 8.132A1 1 0 0 0 9.5 9v4a1 1 0 0 0 1.496.868l3.5-2a1 1 0 0 0 0-1.736l-3.5-2z\"\n \u003e\u003c/path\u003e\n \u003cpath\n d=\"M14.573 2H9.427c-1.824 0-3.293 0-4.45.155-1.2.162-2.21.507-3.013 1.31C1.162 4.266.817 5.277.655 6.477.5 7.634.5 9.103.5 10.927v.146c0 1.824 0 3.293.155 4.45.162 1.2.507 2.21 1.31 3.012.802.803 1.813 1.148 3.013 1.31C6.134 20 7.603 20 9.427 20h5.146c1.824 0 3.293 0 4.45-.155 1.2-.162 2.21-.507 3.012-1.31.803-.802 1.148-1.813 1.31-3.013.155-1.156.155-2.625.155-4.449v-.146c0-1.824 0-3.293-.155-4.45-.162-1.2-.507-2.21-1.31-3.013-.802-.802-1.813-1.147-3.013-1.309C17.866 2 16.397 2 14.573 2zM3.38 4.879c.369-.37.887-.61 1.865-.741C6.251 4.002 7.586 4 9.5 4h5c1.914 0 3.249.002 4.256.138.978.131 1.496.372 1.865.74.37.37.61.888.742 1.866.135 1.007.137 2.342.137 4.256 0 1.914-.002 3.249-.137 4.256-.132.978-.373 1.496-.742 1.865-.369.37-.887.61-1.865.742-1.007.135-2.342.137-4.256.137h-5c-1.914 0-3.249-.002-4.256-.137-.978-.132-1.496-.373-1.865-.742-.37-.369-.61-.887-.741-1.865C2.502 14.249 2.5 12.914 2.5 11c0-1.914.002-3.249.138-4.256.131-.978.372-1.496.74-1.865zM8 21.5a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8z\"\n \u003e\u003c/path\u003e\n \u003c/svg\u003e\n \u003c/span\u003e\n \u003c/RouterLink\u003e\n \u003cRouterLink\n to=\"/\"\n class=\"text-white text-xl grow header_center_section_link_marketplace\"\n \u003e\n \u003cspan class=\"header_center_section_link_marketplace_span\"\u003e\n \u003csvg\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n class=\"header_center_section_link_marketplace_svg\"\n \u003e\n \u003cpath\n d=\"M1.588 3.227A3.125 3.125 0 0 1 4.58 1h14.84c1.38 0 2.597.905 2.993 2.227l.816 2.719a6.47 6.47 0 0 1 .272 1.854A5.183 5.183 0 0 1 22 11.455v4.615c0 1.355 0 2.471-.119 3.355-.125.928-.396 1.747-1.053 2.403-.656.657-1.475.928-2.403 1.053-.884.12-2 .119-3.354.119H8.929c-1.354 0-2.47 0-3.354-.119-.928-.125-1.747-.396-2.403-1.053-.657-.656-.929-1.475-1.053-2.403-.12-.884-.119-2-.119-3.354V11.5l.001-.045A5.184 5.184 0 0 1 .5 7.8c0-.628.092-1.252.272-1.854l.816-2.719zM10 21h4v-3.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5V21zm6-.002c.918-.005 1.608-.025 2.159-.099.706-.095 1.033-.262 1.255-.485.223-.222.39-.55.485-1.255.099-.735.101-1.716.101-3.159v-3.284a5.195 5.195 0 0 1-1.7.284 5.18 5.18 0 0 1-3.15-1.062A5.18 5.18 0 0 1 12 13a5.18 5.18 0 0 1-3.15-1.062A5.18 5.18 0 0 1 5.7 13a5.2 5.2 0 0 1-1.7-.284V16c0 1.442.002 2.424.1 3.159.096.706.263 1.033.486 1.255.222.223.55.39 1.255.485.551.074 1.24.094 2.159.1V17.5a2.5 2.5 0 0 1 2.5-2.5h3a2.5 2.5 0 0 1 2.5 2.5v3.498zM4.581 3c-.497 0-.935.326-1.078.802l-.815 2.72A4.45 4.45 0 0 0 2.5 7.8a3.2 3.2 0 0 0 5.6 2.117 1 1 0 0 1 1.5 0A3.19 3.19 0 0 0 12 11a3.19 3.19 0 0 0 2.4-1.083 1 1 0 0 1 1.5 0A3.2 3.2 0 0 0 21.5 7.8c0-.434-.063-.865-.188-1.28l-.816-2.72A1.125 1.125 0 0 0 19.42 3H4.58z\"\n \u003e\u003c/path\u003e\n \u003c/svg\u003e\n \u003c/span\u003e\n \u003c/RouterLink\u003e\n \u003cRouterLink to=\"/\" class=\"text-white text-xl grow header_center_section_link_groups\"\u003e\n \u003cspan class=\"header_center_section_link_groups_span\"\u003e\n \u003csvg\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n class=\"header_center_section_link_groups_svg\"\n \u003e\n \u003cpath\n d=\"M12 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm-2 4a2 2 0 1 1 4 0 2 2 0 0 1-4 0z\"\n \u003e\u003c/path\u003e\n \u003cpath\n d=\"M12 .5C5.649.5.5 5.649.5 12S5.649 23.5 12 23.5 23.5 18.351 23.5 12 18.351.5 12 .5zM2.5 12c0-.682.072-1.348.209-1.99a2 2 0 0 1 0 3.98A9.539 9.539 0 0 1 2.5 12zm4 0a4.001 4.001 0 0 0-3.16-3.912A9.502 9.502 0 0 1 12 2.5a9.502 9.502 0 0 1 8.66 5.588 4.001 4.001 0 0 0 0 7.824 9.514 9.514 0 0 1-1.755 2.613A5.002 5.002 0 0 0 14 14.5h-4a5.002 5.002 0 0 0-4.905 4.025 9.515 9.515 0 0 1-1.755-2.613A4.001 4.001 0 0 0 6.5 12zm13 0a2 2 0 0 1 1.791-1.99 9.538 9.538 0 0 1 0 3.98A2 2 0 0 1 19.5 12zm-2.51 8.086A9.455 9.455 0 0 1 12 21.5c-1.83 0-3.54-.517-4.99-1.414a1.004 1.004 0 0 1-.01-.148V19.5a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v.438a1 1 0 0 1-.01.148z\"\n \u003e\u003c/path\u003e\n \u003c/svg\u003e\n \u003c/span\u003e\n \u003c/RouterLink\u003e\n \u003c/div\u003e\n \u003c!-- --\u003e\n \u003cdiv class=\"toggle_header_left_section\"\u003e\n \u003cspan class=\"icon\"\u003e \u003ci class=\"fas fa-bars\"\u003e\u003c/i\u003e \u003c/span\u003e\n \u003c/div\u003e\n \u003c!-- Right Section (Profile and Notifications) --\u003e\n \u003cdiv class=\"header_right_section flex items-center justify-end space-x-1 basis-1/4\"\u003e\n \u003cRouterLinka to=\"/\" class=\"header_right_section_link\"\u003e\n \u003cspan class=\"header_right_section_link_span\"\u003e\n \u003csvg\n viewBox=\"0 0 24 24\"\n width=\"20\"\n height=\"20\"\n fill=\"currentColor\"\n class=\"header_right_section_link_svg\"\n \u003e\n \u003cpath\n d=\"M18.5 1A1.5 1.5 0 0 0 17 2.5v3A1.5 1.5 0 0 0 18.5 7h3A1.5 1.5 0 0 0 23 5.5v-3A1.5 1.5 0 0 0 21.5 1h-3zm0 8a1.5 1.5 0 0 0-1.5 1.5v3a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 21.5 9h-3zm-16 8A1.5 1.5 0 0 0 1 18.5v3A1.5 1.5 0 0 0 2.5 23h3A1.5 1.5 0 0 0 7 21.5v-3A1.5 1.5 0 0 0 5.5 17h-3zm8 0A1.5 1.5 0 0 0 9 18.5v3a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5v-3a1.5 1.5 0 0 0-1.5-1.5h-3zm8 0a1.5 1.5 0 0 0-1.5 1.5v3a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5v-3a1.5 1.5 0 0 0-1.5-1.5h-3zm-16-8A1.5 1.5 0 0 0 1 10.5v3A1.5 1.5 0 0 0 2.5 15h3A1.5 1.5 0 0 0 7 13.5v-3A1.5 1.5 0 0 0 5.5 9h-3zm0-8A1.5 1.5 0 0 0 1 2.5v3A1.5 1.5 0 0 0 2.5 7h3A1.5 1.5 0 0 0 7 5.5v-3A1.5 1.5 0 0 0 5.5 1h-3zm8 0A1.5 1.5 0 0 0 9 2.5v3A1.5 1.5 0 0 0 10.5 7h3A1.5 1.5 0 0 0 15 5.5v-3A1.5 1.5 0 0 0 13.5 1h-3zm0 8A1.5 1.5 0 0 0 9 10.5v3a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 13.5 9h-3z\"\n \u003e\u003c/path\u003e\n \u003c/svg\u003e\n \u003c/span\u003e\n \u003c/RouterLinka\u003e\n \u003cRouterLinka to=\"/\" class=\"header_right_section_link\"\u003e\n \u003cspan class=\"header_right_section_link_span\"\u003e\n \u003csvg\n viewBox=\"0 0 12 13\"\n width=\"20\"\n height=\"20\"\n fill=\"currentColor\"\n class=\"header_right_section_link_svg\"\n \u003e\n \u003cg fill-rule=\"evenodd\" transform=\"translate(-450 -1073)\"\u003e\n \u003cpath\n d=\"m459.603 1077.948-1.762 2.851a.89.89 0 0 1-1.302.245l-1.402-1.072a.354.354 0 0 0-.433.001l-1.893 1.465c-.253.196-.583-.112-.414-.386l1.763-2.851a.89.89 0 0 1 1.301-.245l1.402 1.072a.354.354 0 0 0 .434-.001l1.893-1.465c.253-.196.582.112.413.386M456 1073.5c-3.38 0-6 2.476-6 5.82 0 1.75.717 3.26 1.884 4.305.099.087.158.21.162.342l.032 1.067a.48.48 0 0 0 .674.425l1.191-.526a.473.473 0 0 1 .32-.024c.548.151 1.13.231 1.737.231 3.38 0 6-2.476 6-5.82 0-3.344-2.62-5.82-6-5.82\"\n \u003e\u003c/path\u003e\n \u003c/g\u003e\n \u003c/svg\u003e\n \u003c/span\u003e\n \u003c/RouterLinka\u003e\n \u003cRouterLink to=\"/\" class=\"header_right_section_link\"\u003e\n \u003cspan class=\"header_right_section_link_span\"\u003e\n \u003csvg\n viewBox=\"0 0 24 24\"\n width=\"20\"\n height=\"20\"\n fill=\"currentColor\"\n class=\"header_right_section_link_svg\"\n \u003e\n \u003cpath\n d=\"M3 9.5a9 9 0 1 1 18 0v2.927c0 1.69.475 3.345 1.37 4.778a1.5 1.5 0 0 1-1.272 2.295h-4.625a4.5 4.5 0 0 1-8.946 0H2.902a1.5 1.5 0 0 1-1.272-2.295A9.01 9.01 0 0 0 3 12.43V9.5zm6.55 10a2.5 2.5 0 0 0 4.9 0h-4.9z\"\n \u003e\u003c/path\u003e\n \u003c/svg\u003e\n \u003c/span\u003e\n \u003c/RouterLink\u003e\n \u003c!-- Avatar --\u003e\n \u003cprime_avatar\n image=\"./src/assets/image/user.png\"\n size=\"large\"\n shape=\"circle\"\n alt=\"Profile Picture\"\n class=\"w-10 h-10 rounded-full\"\n @click=\"toggle\"\n type=\"button\"\n aria-haspopup=\"true\"\n aria-controls=\"overlay_tmenu\"\n /\u003e\n \u003c!-- Popup User Option --\u003e\n \u003cprime_popover ref=\"op\"\u003e\n \u003cdiv class=\"w-[25rem]\"\u003e\n \u003c!-- User Profile --\u003e\n \u003cdiv class=\"div_wrapper_profile\"\u003e\n \u003cRouterLink\n class=\"flex align-middle\"\n v-if=\"userStore.user.id\"\n :to=\"{ name: 'profile', params: { id: userStore.user.id } }\"\n \u003e\n \u003cspan class=\"user_img\"\u003e\n \u003c!-- v-if=\"userStore.user.avatar\" --\u003e\n \u003cimg\n v-if=\"userStore.user.avatar\"\n :src=\"userStore.user.avatar\"\n class=\"rounded-full\"\n alt=\"\"\n /\u003e\n \u003c!-- v-else --\u003e\n \u003cimg v-else src=\"./assets/image/user.png\" class=\"rounded-full\" alt=\"\" /\u003e\n \u003c/span\u003e\n \u003cspan class=\"user_name\"\u003e{{ userStore.user.name }}\u003c/span\u003e\n \u003c/RouterLink\u003e\n \u003c/div\u003e\n \u003c!-- Log Out --\u003e\n \u003cdiv class=\"div_wrapper_logout flex align-middle cursor-pointer\" @click=\"logout\"\u003e\n \u003cdiv class=\"icon_logout flex justify-center align-middle\"\u003e\n \u003ci class=\"pi pi-sign-out\" style=\"font-size: 1rem\" shape=\"circle\"\u003e\u003c/i\u003e\n \u003c/div\u003e\n \u003cbutton class=\"font-bold\"\u003eLog out\u003c/button\u003e\n \u003c/div\u003e\n \u003c!-- Toggle Theme --\u003e\n \u003cdiv class=\"flex div_wrapper_toggle_theme cursor-pointer\"\u003e\n \u003cThemeSwitcher /\u003e\n \u003cspan class=\"font-medium mb-2\"\u003eToggle theme\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/prime_popover\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/header\u003e\n \u003c/template\u003e\n \u003c/prime_card\u003e\n\n \u003cprime_toast /\u003e\n\n \u003cRouterView /\u003e\n\u003c/template\u003e\n```\n```js\n\u003cscript\u003e\n import axios from 'axios'\n \n export default {\n setup() {\n return {}\n },\n methods: {}\n }\n\u003c/script\u003e\n```\n__________________________________________________\n### 21 Create Page [ Signup \u0026 Login ]\n* Create Page [ Authentication/LoginView.vue ] Inside views/Authentication\n```html\n\u003ctemplate\u003e\n \u003cdiv class=\"wrapper_login_page\"\u003e\n \u003cdiv class=\"inner_login_page\"\u003e\n \u003cdiv class=\"container\"\u003e\n \u003cdiv class=\"flex justify-center align-middle w_80 m-auto\"\u003e\n \u003cdiv class=\"grid grid-cols-3 gap-4 w_95\"\u003e\n \u003cdiv class=\"wrapper_text_login col-span-2\"\u003e\n \u003cdiv class=\"inner\"\u003e\n \u003cdiv class=\"title\"\u003efacebook\u003c/div\u003e\n \u003cdiv class=\"subtitle\"\u003e\n Facebook helps you connect and share \u003cbr /\u003e\n with the people in your life.\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"wrapper_form_login shadow-2xl rounded-lg\"\u003e\n \u003c!-- Log in --\u003e\n \u003cform class=\"form_login\" v-on:submit.prevent=\"submitFormLogin\"\u003e\n \u003cprime_card class=\"p-3\"\u003e\n \u003ctemplate #header\u003e\n \u003cdiv class=\"my-5 font-bold text-3xl\"\u003eLog in\u003c/div\u003e\n \u003c/template\u003e\n \u003ctemplate #title\u003e\n \u003cprime_float_label class=\"mt-5\"\u003e\n \u003cprime_input_text\n id=\"emailAddress\"\n v-model=\"formLogin.email\"\n class=\"block w_100\"\n /\u003e\n \u003clabel for=\"emailAddress\" class=\"text-base\"\u003eYour E-mail Address\u003c/label\u003e\n \u003c/prime_float_label\u003e\n \u003c/template\u003e\n \u003ctemplate #content\u003e\n \u003cprime_float_label class=\"mt-5\"\u003e\n \u003cprime_input_password\n id=\"password\"\n v-model=\"formLogin.password\"\n :feedback=\"false\"\n /\u003e\n \u003clabel for=\"password\"\u003epassword\u003c/label\u003e\n \u003c/prime_float_label\u003e\n \u003c/template\u003e\n \u003ctemplate #footer\u003e\n \u003cdiv class=\"row\"\u003e\n \u003c!-- Errors --\u003e\n \u003ctemplate v-if=\"errorsLogin.length \u003e 0\"\u003e\n \u003cprime_toast\u003e\u003c/prime_toast\u003e\n \u003c/template\u003e\n \u003c!-- Login --\u003e\n \u003cdiv class=\"mt-3\"\u003e\n \u003cbutton\n type=\"submit\"\n class=\"d_block_important mt-5 mb-3 mx-auto w_100 bg-blue-500 py-3 px-5 rounded text-white\"\n @click.prevent=\"submitFormLogin\"\n \u003e\n Log In\n \u003c/button\u003e\n \u003ca href=\"#\" class=\"text-blue-600 mx-auto my-4 block text-center\"\n \u003eForgotten password?\u003c/a\n \u003e\n \u003chr /\u003e\n \u003c!-- Button Signup --\u003e\n \u003cprime_button\n label=\"Create new account\"\n severity=\"success\"\n @click=\"visible = true\"\n class=\"d_block_important my-5 mx-auto\"\n /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/template\u003e\n \u003c/prime_card\u003e\n \u003c/form\u003e\n \u003c!-- Signup --\u003e\n \u003cdiv class=\"card flex justify-center\"\u003e\n \u003c!-- @submit.prevent=\"submitFormSignup\" --\u003e\n \u003cform class=\"space-y-6\"\u003e\n \u003c!-- \u003cform class=\"space-y-6\" @submit.prevent=\"submitFormSignup\"\u003e --\u003e\n \u003cprime_dialog\n v-model:visible=\"visible\"\n modal\n header=\"Sign Up\"\n :style=\"{ width: '25rem' }\"\n \u003e\n \u003cspan class=\"text-surface-500 dark:text-surface-400 block mb-8\"\n \u003eIt's quick and easy.\u003c/span\n \u003e\n \u003cprime_fluid\u003e\n \u003cdiv class=\"grid grid-cols-2 gap-4\"\u003e\n \u003c!-- First name --\u003e\n \u003cdiv\u003e\n \u003cprime_input_text placeholder=\"First name\" v-model=\"formSignup.name\" /\u003e\n \u003c/div\u003e\n \u003c!-- Surname --\u003e\n \u003cdiv\u003e\n \u003cprime_input_text placeholder=\"Surname\" v-model=\"formSignup.surname\" /\u003e\n \u003c/div\u003e\n \u003c!-- Mobile number or email address --\u003e\n \u003cdiv class=\"col-span-full\"\u003e\n \u003cprime_input_text\n placeholder=\"Mobile number or email address\"\n v-model=\"formSignup.email\"\n /\u003e\n \u003c/div\u003e\n \u003c!-- password1 --\u003e\n \u003cdiv class=\"col-span-full\"\u003e\n \u003cprime_input_password\n placeholder=\"New Password\"\n v-model=\"formSignup.password1\"\n /\u003e\n \u003c/div\u003e\n \u003c!-- password2 --\u003e\n \u003cdiv class=\"col-span-full\"\u003e\n \u003cprime_input_password\n placeholder=\"Repeat password\"\n v-model=\"formSignup.password2\"\n /\u003e\n \u003c/div\u003e\n \u003c!-- Date of birth --\u003e\n \u003cdiv class=\"col-span-full\"\u003eDate of birth\u003c/div\u003e\n \u003cdiv class=\"col-span-full\"\u003e\n \u003cdiv class=\"flex flex-col md:flex-row gap-2\"\u003e\n \u003c!-- Day --\u003e\n \u003cprime_input_group\u003e\n \u003cprime_date_picker v-model=\"day\" view=\"day\" dateFormat=\"dd\" /\u003e\n \u003c/prime_input_group\u003e\n \u003c!-- Month --\u003e\n \u003cprime_input_group\u003e\n \u003cprime_date_picker v-model=\"month\" view=\"month\" dateFormat=\"mm\" /\u003e\n \u003c/prime_input_group\u003e\n \u003c!-- Year --\u003e\n \u003cprime_input_group\u003e\n \u003cprime_date_picker v-model=\"year\" view=\"year\" dateFormat=\"yy\" /\u003e\n \u003c/prime_input_group\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c!-- Gender --\u003e\n \u003cdiv class=\"col-span-full\"\u003eGender\u003c/div\u003e\n \u003cdiv class=\"flex flex-col md:flex-row gap-2\"\u003e\n \u003cprime_input_group\u003e\n \u003cprime_check_box\n v-model=\"formSignup.gender\"\n inputId=\"ingredient1\"\n name=\"gender\"\n value=\"Female\"\n /\u003e\n \u003clabel for=\"ingredient1\" class=\"ml-2\"\u003e Female \u003c/label\u003e\n \u003c/prime_input_group\u003e\n \u003cprime_input_group\u003e\n \u003cprime_check_box\n v-model=\"formSignup.gender\"\n inputId=\"ingredient2\"\n name=\"gender\"\n value=\"Male\"\n /\u003e\n \u003clabel for=\"ingredient2\" class=\"ml-2\"\u003e Male \u003c/label\u003e\n \u003c/prime_input_group\u003e\n\n \u003cprime_input_group\u003e\n \u003cprime_check_box\n v-model=\"formSignup.gender\"\n inputId=\"ingredient3\"\n name=\"gender\"\n value=\"Custom\"\n /\u003e\n \u003clabel for=\"ingredient3\" class=\"ml-2\"\u003e Custom \u003c/label\u003e\n \u003c/prime_input_group\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/prime_fluid\u003e\n \u003cdiv class=\"flex justify-center gap-2\"\u003e\n \u003cbutton\n type=\"submit\"\n class=\"d_block_important mt-5 mb-3 mx-auto w_50 bg-green-500 py-3 px-5 rounded text-white\"\n @click.prevent=\"submitFormSignup\"\n \u003e\n Submit\n \u003c/button\u003e\n \u003c/div\u003e\n \u003c/prime_dialog\u003e\n \u003c!-- Errors --\u003e\n \u003ctemplate v-if=\"errorsSignup.length \u003e 0\"\u003e\n \u003cprime_toast /\u003e\n \u003c/template\u003e\n \u003c/form\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cprime_toast /\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n```\n```js\n\u003cscript\u003e\n import axios from 'axios'\n // eslint-disable-next-line no-unused-vars\n import { RouterLink } from 'vue-router'\n import { useUserStore } from '@/stores/user'\n export default {\n name: 'loginView',\n setup() {\n const userStore = useUserStore()\n return {\n userStore\n }\n },\n data() {\n return {\n formLogin: {\n email: '',\n password: ''\n },\n errorsLogin: [],\n // visible Signup\n visible: false,\n // Signup\n formSignup: {\n name: '',\n surname: '',\n email: '',\n date_of_birth: null,\n gender: '',\n password1: '',\n password2: ''\n },\n day: '',\n month: '',\n year: '',\n errorsSignup: []\n }\n },\n methods: {\n async submitFormLogin() {\n this.errorsLogin = []\n if (this.formLogin.email === '') {\n this.$toast.add({\n severity: 'error',\n summary: 'User Name missing',\n detail: 'Your name is missing',\n life: 3000\n })\n this.errorsLogin.push('Your e-mail is missing')\n }\n if (this.formLogin.password === '') {\n this.$toast.add({\n severity: 'error',\n summary: 'User password is missing',\n detail: 'Your password is missing',\n life: 3000\n })\n this.errorsLogin.push('Your password is missing')\n }\n if (this.errorsLogin.length === 0) {\n await axios\n .post('/api/login/', this.formLogin)\n .then((response) =\u003e {\n this.userStore.setToken(response.data)\n console.log('response.data: ', response.data)\n axios.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.access\n })\n .catch((error) =\u003e {\n console.log('error', error)\n if (error.response.data.detail) {\n // Code If True\n this.$toast.add({\n severity: 'error',\n summary: 'Error Message',\n detail: `${error.response.data.detail}`,\n life: 6000\n })\n }\n \n this.errorsLogin.push(\n 'The email or password is incorrect! Or the user is not activated!'\n )\n })\n }\n if (this.errorsLogin.length === 0) {\n await axios\n .get('/api/me/')\n .then((response) =\u003e {\n this.userStore.setUserInfo(response.data)\n this.$router.push('/')\n })\n .catch((error) =\u003e {\n console.log('error', error)\n })\n }\n },\n submitFormSignup() {\n this.errorsSignup = []\n \n // استخراج اليوم، الشهر، والسنة من كائنات Date وتنسيقها\n const day = this.day.getDate().toString().padStart(2, '0')\n const month = (this.month.getMonth() + 1).toString().padStart(2, '0')\n const year = this.year.getFullYear()\n \n const formattedDate = `${year}-${month}-${day}`\n this.formSignup.date_of_birth = formattedDate\n \n if (this.formSignup.name === '') {\n this.$toast.add({\n severity: 'error',\n summary: 'User Name missing',\n detail: 'Your name is missing',\n life: 3000\n })\n this.errorsSignup.push('Your name is missing')\n }\n if (this.formSignup.surname === '') {\n this.$toast.add({\n severity: 'error',\n summary: 'User Surname missing',\n detail: 'Your Surname is missing',\n life: 3000\n })\n this.errorsSignup.push('Your surname is missing')\n }\n if (this.formSignup.email === '') {\n this.$toast.add({\n severity: 'error',\n summary: 'User Is missing',\n detail: 'Your e-mail is missing',\n life: 3000\n })\n this.errorsSignup.push('Your e-mail is missing')\n }\n if (this.formSignup.password1 === '') {\n this.$toast.add({\n severity: 'error',\n summary: 'User passwordIs missing',\n detail: 'Your password is missing',\n life: 3000\n })\n this.errorsSignup.push('Your password is missing')\n }\n if (this.formSignup.password1 !== this.formSignup.password2) {\n this.$toast.add({\n severity: 'error',\n summary: 'User password does not match',\n detail: 'Your password does not match',\n life: 3000\n })\n this.errorsSignup.push('The password does not match')\n }\n if (this.errorsSignup.length === 0) {\n axios\n .post('/api/signup/', this.formSignup)\n .then((response) =\u003e {\n if (response.data.message === 'success') {\n if (response.data.email_sent) {\n this.$toast.add({\n severity: 'success',\n summary: 'User Registered',\n detail: 'Please activate your account by clicking the link sent to your email.',\n life: 3000\n })\n }\n this.$toast.add({\n severity: 'success',\n summary: 'User Is Registered',\n detail: 'Please activate your account by clicking your email link',\n life: 3000\n })\n this.formSignup.name = ''\n this.formSignup.surname = ''\n this.formSignup.email = ''\n this.formSignup.date_of_birth = ''\n this.formSignup.gender = ''\n this.formSignup.password1 = ''\n this.formSignup.password2 = ''\n // this.$router.push('/loginView')\n window.location.reload()\n } else {\n const data = JSON.parse(response.data.message)\n this.$toast.add({\n severity: 'error',\n summary: 'Error Message',\n detail: 'Message Content Something went wrong. Please try again',\n life: 6000\n })\n for (const key in data) {\n this.errors.push(data[key][0].message)\n }\n console.log(`Bad`, this.formSignup.date_of_birth)\n console.log(`Day`, this.day)\n console.log(`month`, this.month)\n console.log(`year`, this.year)\n }\n })\n .catch((error) =\u003e {\n console.log('error', error)\n })\n }\n }\n }\n }\n\u003c/script\u003e\n```\n\n__________________________________________________\n### 22 Create Page [ Account/LoginView.vue ] Inside views/Account\n```html\n\u003ctemplate\u003e\n \u003cdiv class=\"Component-Name\"\u003ePage Profile View\u003c/div\u003e\n\u003c/template\u003e\n```\n```js\n\u003cscript\u003e\nexport default { name: 'ProfileView' }\n\u003c/script\u003e\n```\n__________________________________________________\n### 23 Edite Page [ index.js ] Inside router\n```js\n// index.js\nimport { createRouter, createWebHistory } from 'vue-router'\nimport HomeView from '../views/HomeView.vue'\n\n// Authentication\nimport LoginView from '../views/Authentication/LoginView.vue'\n\n// Account\nimport ProfileView from '../views/Account/ProfileView.vue'\nconst router = createRouter({\n history: createWebHistory(import.meta.env.BASE_URL),\n routes: [\n {\n path: '/',\n name: 'home',\n component: HomeView\n },\n // Authentication \n // Login\n {\n path: '/login',\n name: 'login',\n component: LoginView\n },\n // Account\n {\n path: '/profile/:id',\n name: 'profile',\n component: ProfileView,\n meta: {\n requireLogin: true\n }\n },\n {\n path: '/about',\n name: 'about',\n // route level code-splitting\n // this generates a separate chunk (About.[hash].js) for this route\n // which is lazy-loaded when the route is visited.\n component: () =\u003e import('../views/AboutView.vue')\n }\n ]\n})\n\nexport default router\n\n```\n\n__________________________________________________\n### 23 Edite Page [ style.scss ] Inside src/assets/Scss\n* Import Css Style To Use It Inside Glopal [ index.js ]\n```js\n// Page [ facebook/facebook_vue/src/main.js ]\nimport './assets/main.css'\nimport './assets/Scss/Style.scss'\n```\n* Project Structure\n```\n├── src/\n│ ├── assets/\n│ | ├── Scss/\n│ | | ├── Authentication/\n│ │ | | ├── 📝 _login.scss\n│ | | ├── Header/\n│ │ | | ├── 📝 _header.scss\n│ | | ├── Style.scss\n```\n* Creat This Pages\n```cmd\nScss/Authentication/_login.scss\nHeader/_header.scss\nStyle.scss\n```\n* style\n```css\n// Global Color Light Theme\n:root {\n /* Body */\n --body-bg-hr: #f0f2f5;\n --body-bg: #f8fafc;\n // Header Style\n --header-height: 4rem;\n --header-bg: #fff;\n // Logo\n --header-facebook-icon-color: #0866ff;\n --header-facebook-icon-font-size: 2.5rem;\n // search\n --header-search-icon-color: #65676b;\n --header-search-input-text-color: #050505;\n --header-search-input-placeholder-color: #0505059e;\n // placeholder\n --header-search-input-color: #f0f2f5;\n // Linke Center\n --header_center_section_link_home_border: #0866ff;\n --header_center_section_link_home_active_color: #0866ff;\n --header_center_section_link_home_color: #65676b;\n --header_center_section_link_home_hover_bg: #f2f2f2;\n //\n --header-center-section-icon-size: 1.5rem;\n --header-link-border-color: #0866ff;\n --header-link-background-color: #d8dadf;\n --header-user-option-btn-bg-light: #e4e6eb;\n //\n // Index Style\n //\n\n /* Fore Content Page Index Center Content */\n --page-index-content-center: #fff;\n --page-index-post-bg: #fff;\n --page-index-post-button-hover: #f0f2f5;\n --page-index-post-icon-trand: #65676b;\n /* For Scrollbar Page Index Lift Sidebar */\n --page-index-sidebar-lift-scrollbar: #e6e8eb;\n --page-index-sidebar-lift-scrollbar-thumb: #bcc0c4;\n\n /* For Scrollbar Page Index right Sidebar */\n --page-index-sidebar-right-scrollbar: #e6e8eb;\n --page-index-sidebar-right-scrollbar-thumb: #bcc0c4;\n --page-index-sidebar-right-border-user-control: #bcc0c4;\n --page-index-sidebar-right-text-color: #65676b;\n --page-index-sidebar-right-icon-bg: #65676b;\n //\n}\n\n// Header\n@import 'Header/header';\n// Authentication\n@import 'Authentication/login';\n// Style For Dark Mode\nhtml.dark,\nhtml.p-dark {\n /* Body */\n // --body-bg: #0d121b;\n --body-bg: #09090b;\n --header-user-option-btn-bg-light: #09090b;\n --header-bg: #18181b;\n}\nbody {\n // background-color: var(--body-bg-hr);\n background-color: var(--body-bg);\n transition:\n background-color 0.95s linear,\n color 0.95s linear;\n}\n\n```\n* login\n```css\n.wrapper_login_page {\n padding-top: 60px;\n .inner_login_page {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 94vh;\n .container,\n .container {\n .flex {\n .wrapper_text_login {\n .inner {\n .title {\n color: #0866ff;\n font-size: 8vh;\n font-weight: bold;\n }\n .subtitle {\n font-family: SFProDisplay-Regular, Helvetica, Arial, sans-serif;\n font-size: 28px;\n font-weight: normal;\n line-height: 32px;\n width: 500px;\n }\n }\n }\n .wrapper_form_login {\n // background-color: #fff;\n // padding: 1rem;\n // border-radius: 1rem;\n .form_login {\n .p-card-body {\n padding: 0 !important;\n .p-password {\n display: block !important;\n input[type='password'] {\n width: 100% !important;\n }\n }\n }\n }\n .button_signup {\n // background-color: #42b72a;\n // color: #fff;\n // width: 50%;\n display: block;\n margin: 2rem auto;\n }\n }\n }\n }\n }\n}\n```\n* header\n```css\n.header_wrapper {\n \u003e div {\n padding: 0;\n header {\n height: var(--header-height);\n background-color: var(--header-bg);\n width: 100%;\n z-index: 1000;\n padding: 0 0.5rem;\n .container {\n height: var(--header-height);\n // Left Section (Logo and Search Bar)\n .header_left_section {\n .logo {\n color: var(--header-facebook-icon-color);\n font-size: var(--header-facebook-icon-font-size);\n }\n .search_bar {\n position: relative;\n span.icon {\n position: absolute;\n left: 7px;\n top: 7px;\n i,\n svg {\n font-size: 16px;\n color: var(--header-search-icon-color);\n font-weight: 700;\n }\n /* Console Devices */\n /* Mobil S, Less Than 320px */\n @media screen and (max-width: 320px) {\n left: 10px;\n }\n /* Mobil M, Less Than 375px */\n @media screen and (min-width: 321px) and (max-width: 375px) {\n left: 10px;\n }\n /* Mobil L, Less Than 425px */\n @media screen and (min-width: 376px) and (max-width: 425px) {\n left: 10px;\n }\n }\n input {\n background-color: var(--header-search-input-color);\n padding-left: 2rem;\n color: var(--header-search-input-text-color);\n \u0026::placeholder {\n color: var(--header-search-input-placeholder-color);\n // font-weight: 500;\n font-size: 15px;\n }\n /* Console Devices */\n /* Mobil S, Less Than 320px */\n @media screen and (max-width: 320px) {\n width: 35px;\n }\n /* Mobil M, Less Than 375px */\n @media screen and (min-width: 321px) and (max-width: 375px) {\n width: 35px;\n }\n /* Mobil L, Less Than 425px */\n @media screen and (min-width: 376px) and (max-width: 425px) {\n width: 35px;\n }\n /* Tablet , Less Than 768px */\n @media screen and (min-width: 426px) and (max-width: 768px) {\n width: 35px;\n }\n /* Laptop , Less Than 1024px */\n @media screen and (min-width: 769px) and (max-width: 1024px) {\n }\n /* Laptop L, Less Than 1440px */\n @media screen and (min-width: 1025px) and (max-width: 1440px) {\n }\n /* 4K , Less Than 2560px */\n @media screen and (min-width: 1441px) and (max-width: 2560px) {\n }\n }\n }\n }\n .toggle_header_left_section {\n // border: 0.5rem solid #f00;\n font-size: 1.5rem;\n padding: 0.5rem 1rem;\n margin: 5px 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n \u0026:hover {\n background-color: var(--header_center_section_link_home_hover_bg);\n }\n /* Console Devices */\n /* Mobil S, Less Than 320px */\n @media screen and (max-width: 320px) {\n display: flex;\n align-items: center;\n justify-content: end;\n position: relative;\n left: -25px;\n display: none;\n }\n /* Mobil M, Less Than 375px */\n @media screen and (min-width: 321px) and (max-width: 375px) {\n display: flex;\n align-items: center;\n justify-content: end;\n position: relative;\n left: -40px;\n }\n /* Mobil L, Less Than 425px */\n @media screen and (min-width: 376px) and (max-width: 425px) {\n display: flex;\n align-items: center;\n justify-content: end;\n position: relative;\n left: -60px;\n }\n /* Tablet , Less Than 768px */\n @media screen and (min-width: 426px) and (max-width: 768px) {\n display: flex;\n align-items: center;\n justify-content: end;\n position: relative;\n left: -10px;\n }\n /* Laptop , Less Than 1024px */\n @media screen and (min-width: 769px) and (max-width: 1024px) {\n }\n /* Laptop L, Less Than 1440px */\n @media screen and (min-width: 1025px) and (max-width: 1440px) {\n }\n /* 4K , Less Than 2560px */\n @media screen and (min-width: 1441px) and (max-width: 2560px) {\n }\n }\n // Center Section (Navigation Icons)\n .header_center_section {\n height: var(--header-height);\n /* Console Devices */\n /* Mobil S, Less Than 320px */\n @media screen and (max-width: 320px) {\n position: fixed;\n left: 100%;\n top: 0;\n width: 100%;\n height: 100%;\n }\n /* Mobil M, Less Than 375px */\n @media screen and (min-width: 321px) and (max-width: 375px) {\n position: fixed;\n left: 100%;\n top: 0;\n width: 100%;\n height: 100%;\n }\n /* Mobil L, Less Than 425px */\n @media screen and (min-width: 376px) and (max-width: 425px) {\n position: fixed;\n left: 100%;\n top: 0;\n width: 100%;\n height: 100%;\n }\n /* Tablet , Less Than 768px */\n @media screen and (min-width: 426px) and (max-width: 768px) {\n }\n /* Laptop , Less Than 1024px */\n @media screen and (min-width: 769px) and (max-width: 1024px) {\n }\n /* Laptop L, Less Than 1440px */\n @media screen and (min-width: 1025px) and (max-width: 1440px) {\n }\n /* 4K , Less Than 2560px */\n @media screen and (min-width: 1441px) and (max-width: 2560px) {\n }\n .header_center_section_link_home,\n .header_center_section_link_friends,\n .header_center_section_link_videos,\n .header_center_section_link_marketplace,\n .header_center_section_link_groups {\n height: 100%;\n border-bottom: 4px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n \u0026:hover {\n background-color: var(--header_center_section_link_home_hover_bg);\n border-radius: 5px;\n }\n span {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: var(--header-center-section-icon-size);\n width: var(--header-center-section-icon-size);\n color: var(--header_center_section_link_home_color);\n }\n }\n }\n .header_center_section_link_home {\n border-bottom: 3px solid var(--header_center_section_link_home_active_color);\n span {\n svg {\n color: var(--header_center_section_link_home_active_color);\n }\n }\n }\n }\n //\n .header_right_section {\n .header_right_section_link {\n border-radius: 50%;\n padding: 10px;\n\n .header_right_section_link_span {\n .header_right_section_link_svg {\n height: var(--header-center-section-icon-size);\n width: var(--header-center-section-icon-size);\n }\n }\n }\n // Avater\n div.p-avatar {\n img {\n width: 40px;\n height: 40px;\n }\n }\n }\n }\n }\n }\n}\n\n// Popup User Option\n.div_wrapper_profile {\n a {\n align-items: center;\n margin-bottom: 1rem;\n .user_img {\n margin-right: 12px;\n }\n .user_name {\n }\n }\n}\n.div_wrapper_logout {\n align-items: center;\n .icon_logout {\n background-color: var(--header-user-option-btn-bg-light);\n border-radius: 50%;\n padding: 5px;\n height: 36px;\n width: 36px;\n margin-right: 12px;\n display: flex;\n justify-items: center;\n align-items: center;\n }\n}\n.div_wrapper_toggle_theme {\n align-items: center;\n margin-top: 1rem;\n span:first-child {\n margin-right: 12px;\n }\n}\n```\n__________________________________________________\n__________________________________________________\n__________________________________________________\n_____________________ Start Profile ______________\n__________________________________________________\n__________________________________________________\n__________________________________________________\n* Create Function Profile In Side Page [ api.py ]\n```\n# Profile\n@api_view([\"GET\"])\ndef profile(request, id):\n # (primary key) استرجاع معلومات المستخدم بناءً على معرفه الفريد\n user = User.objects.get(pk=id)\n # تسلسل بيانات المستخدم باستخدام السيريالايزر المخصص\n user_serializer = UserSerializer(user)\n # JSON إرجاع البيانات كاستجابة\n return JsonResponse(\n {\n \"user\": user_serializer.data,\n },\n safe=False,\n )\n\n```\n* Create Url Profile In Side Page [ url.py ]\n```\nurlpatterns = [\n path(\"profile/\u003cuuid:id\u003e/\", api.profile, name=\"profile\"),\n]\n```\n__________________________________________________\n__________________________________________________\n__________________________________________________\n_____________________ Start Doker ________________\n__________________________________________________\n__________________________________________________\n__________________________________________________\n\n### Start Doker\n* \n```\n├── 📁 Facebook/\n│ ├── 📁 facebook_django/\n│ ├── 📁 facebook_virtual_environment/\n│ ├── 📁 facebook_vue/\n│ ├── 📁 templates/\n│ ├── 📝 .gitignore\n│ ├── 📝 Build.md\n│ ├── 📝 desktop.ini\n│ ├── 📝 LICENSE\n│ ├── 📝 README.md\n```\n```\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearncodingeasy%2Ffacebook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearncodingeasy%2Ffacebook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearncodingeasy%2Ffacebook/lists"}