logout process finish

berat-samli · Apr 23, 2024 · e76a7a7 · e76a7a7
1 parent ab2145d
commit e76a7a7
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 7 deletions.
diff --git a/API/API/settings.py b/API/API/settings.py
@@ -53,6 +53,7 @@
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'rest_framework',
+    'rest_framework_simplejwt.token_blacklist',
     'corsheaders',
     "Apps.Auth.apps.AuthConfig",
     "Apps.Profile.apps.ProfileConfig",
@@ -61,7 +62,7 @@
     "Apps.Chat.apps.ChatConfig",
     "Apps.UserStatus.apps.OnlineusersConfig",
     "Apps.Request.apps.RequestConfig",
-    "Apps.Game.apps.GameConfig"
+    "Apps.Game.apps.GameConfig",
 ]
 
 MIDDLEWARE = [
@@ -184,7 +185,7 @@
 
 SIMPLE_JWT = {
     'ACCESS_TOKEN_LIFETIME': datetime.timedelta(days=1),
-    'REFRESH_TOKEN_LIFETIME': datetime.timedelta(days=50),
+    'REFRESH_TOKEN_LIFETIME': datetime.timedelta(days=30),
     'ROTATE_REFRESH_TOKENS': True,
     'BLACKLIST_AFTER_ROTATION': True,
     'UPDATE_LAST_LOGIN': False,

diff --git a/API/Apps/Auth/api/urls.py b/API/Apps/Auth/api/urls.py
@@ -1,5 +1,5 @@
 from django.urls import path
-from rest_framework_simplejwt.views import TokenRefreshView, TokenObtainPairView
+from rest_framework_simplejwt.views import TokenRefreshView, TokenObtainPairView, TokenBlacklistView
 from Apps.Auth.api.views import *
 from rest_framework_simplejwt.views import TokenRefreshView
 
@@ -11,4 +11,5 @@
     path('change-password', change_password, name='change_password'),
     path('token/refresh', TokenRefreshView.as_view(), name='token_refresh'),
     path('token/temp-token', TokenObtainPairView.as_view(), name='temp_token'),
+    path('token/blacklist', TokenBlacklistView.as_view(), name='token_blacklist'),
 ]
diff --git a/Backend/static/public/inbox.svg b/Backend/static/public/inbox.svg
diff --git a/Backend/static/public/logout.svg b/Backend/static/public/logout.svg
diff --git a/Backend/static/scripts/matchmaking.js b/Backend/static/scripts/matchmaking.js
@@ -50,4 +50,5 @@ async function connectToSocket() {
 async function App() {
   await connectToSocket();
 }
+
 App();
diff --git a/Backend/static/scripts/spa.js b/Backend/static/scripts/spa.js
@@ -758,4 +758,18 @@ window.addEventListener('popstate', (event) => {
     }
 );
 
-document.addEventListener('DOMContentLoaded', App);
+document.addEventListener('DOMContentLoaded', App);
+
+document.getElementById('logout-wrapper').addEventListener('click', async () => {
+    const refresh_token = getCookie('refresh_token')
+    await request(`${API_URL}/token/blacklist`, {
+        method: 'POST',
+        body: JSON.stringify({
+            refresh: refresh_token
+        }),
+    });
+    localStorage.clear()
+    setCookie('access_token', null, 1);
+    setCookie('refresh_token', null, 1);
+    loadPage('/auth/login/')
+})
diff --git a/Backend/static/styles/main.css b/Backend/static/styles/main.css
@@ -346,11 +346,23 @@ pong-redirect{
   transform: translateX(100%);
 }
 .main-profile-data {
-  max-width: 112px;
+  max-width: 180px;
   max-height: 80px;
   display: flex;
   position: absolute;
-  right: 0;
+  right: 30px;
   top: 0;
   z-index: 10;
+  gap: 5px;
+}
+
+.logout-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logout-wrapper label {
+  cursor: pointer;
 }
diff --git a/Backend/templates/Game/Game.html b/Backend/templates/Game/Game.html
@@ -34,6 +34,11 @@
           <ul class="inbox-list" id="inbox-list">
           </ul>
         </div>
+        <div class="logout-wrapper" id="logout-wrapper">
+            <label id="logout-button">
+                <img src="{% static 'public/logout.svg' %}" alt="cannot load">
+            </label>
+        </div>
       </div>
     <main class="main" id="main">
         <div

diff --git a/Backend/templates/home/home.html b/Backend/templates/home/home.html
@@ -32,6 +32,11 @@
           <ul class="inbox-list" id="inbox-list">
           </ul>
         </div>
+        <div class="logout-wrapper" id="logout-wrapper">
+            <label id="logout-button">
+                <img src="{% static 'public/logout.svg' %}" alt="cannot load">
+            </label>
+        </div>
       </div>
     <main class="main" id="main">
       <div

diff --git a/Backend/templates/matchmaking/matchmaking.html b/Backend/templates/matchmaking/matchmaking.html
@@ -33,6 +33,11 @@
           <ul class="inbox-list" id="inbox-list">
           </ul>
         </div>
+        <div class="logout-wrapper" id="logout-wrapper">
+            <label id="logout-button">
+                <img src="{% static 'public/logout.svg' %}" alt="cannot load">
+            </label>
+        </div>
       </div>
       <div
         class="container-fluid position-relative matchmaking-wrapper"

diff --git a/Backend/templates/profile/profile.html b/Backend/templates/profile/profile.html
@@ -33,6 +33,11 @@
           <ul class="inbox-list" id="inbox-list">
           </ul>
         </div>
+          <div class="logout-wrapper" id="logout-wrapper">
+              <label id="logout-button">
+                  <img src="{% static 'public/logout.svg' %}" alt="cannot load">
+              </label>
+          </div>
       </div>
 
     <main class="main" id="main">

diff --git a/Backend/templates/social/social.html b/Backend/templates/social/social.html
@@ -34,6 +34,11 @@
           <ul class="inbox-list" id="inbox-list">
           </ul>
         </div>
+        <div class="logout-wrapper" id="logout-wrapper">
+            <label id="logout-button">
+                <img src="{% static 'public/logout.svg' %}" alt="cannot load">
+            </label>
+        </div>
       </div>
     <main class="main" id="main">
       <ul class="chat-options" id="chat-options">
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,4 +50,5 @@ async function connectToSocket() { @@
     async function App() {
       await connectToSocket();
     }
     App();