Skip to content

Commit 0945d06

Browse files
trsctrtrsctr
authored
Merge pull request #39 from abbastoof/fix/032-fix-logout-in-frontend
Fix/032 fix logout in frontend
2 parents a003cdc + d3e9bb8 commit 0945d06

18 files changed

+291
-149
lines changed

‎Backend/user_service/Dockerfile

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ ENV LANG=C.UTF-8
55

66
# Update and install dependencies
77
# trunk-ignore(hadolint/DL3018)
8+
RUN addgroup -g 1000 postgres && adduser -D -u 1000 -G postgres postgres
9+
810
RUN apk add --no-cache supervisor \
911
curl openssl bash postgresql16-client \
1012
build-base libffi-dev python3-dev
1113

1214
# Set work directory
13-
RUN mkdir /app && chown -R postgres:postgres /app
15+
RUN mkdir /app && chown -R postgres:postgres /app && mkdir -p /app/www/avatars && chown -R postgres:postgres /app/www/avatars
1416

1517
WORKDIR /app/
1618

‎Backend/user_service/user_service/user_app/models.py

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
from django.contrib.auth.models import AbstractUser
22
from django.db import models
3+
from django.conf import settings
34
# Create your models here.
45
from django.utils.text import slugify
56
import uuid

‎Backend/user_service/user_service/user_app/serializers.py

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ class UserSerializer(serializers.ModelSerializer):
4040
email = serializers.EmailField(
4141
validators=[UniqueValidator(queryset=User.objects.all())]
4242
)
43+
avatar = serializers.ImageField(required=False)
4344
friends = serializers.PrimaryKeyRelatedField(
4445
many=True, queryset=User.objects.all(), required=False # required=False means that the field is not required
4546
)

‎Frontend/Dockerfile

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ FROM alpine:3.20 AS frontend
55
RUN apk update && apk add --no-cache nginx openrc openssl openssh curl bash nodejs npm
66

77
# Set up the application directory
8-
RUN addgroup -S www && adduser -D -S -G www www && \
8+
RUN addgroup -g 1000 www && adduser -D -u 1000 -G www www && \
99
mkdir -p /www && \
10+
mkdir -p /www/avatars && chown -R www:www /www/avatars && chmod 755 /www/avatars && \
1011
chown -R www:www /var/lib/nginx && \
1112
chown -R www:www /var/lib/nginx/logs/ && \
1213
chown -R www:www /www && \

‎Frontend/src/css/body.css

+13-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ body {
1616
}
1717

1818
.ErrorMessage {
19-
font-size: 20px;
19+
font-size: 23px;
2020
font-family: "Teko", sans-serif;
2121
color: red;
2222
margin-top: -10px; /* Space between title and error message */
@@ -28,8 +28,18 @@ body {
2828
margin-left: 10px;
2929
}
3030

31-
.Form {
31+
.form {
32+
display: flex;
33+
flex-direction: column;
34+
}
35+
36+
#imageInput {
37+
display: none;
38+
}
39+
40+
#playerForm {
3241
display: flex;
33-
align-items: center;
3442
flex-direction: column;
43+
align-items: center;
44+
justify-content: center;
3545
}

‎Frontend/src/css/modal.css

+7-2
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,10 @@
4242
color:white;
4343
text-align: center;
4444
font-family: "Teko", sans-serif;
45-
border-bottom: none;
4645
}
4746

4847
.modal-header {
49-
border: none;
48+
border-bottom: none;
5049
}
5150

5251
.labelFont {
@@ -121,4 +120,10 @@
121120
font-size: 25px;
122121
margin-bottom: -5px;
123122
text-shadow: -2px 0 black, 0 2px black, 1px 0 black, 0 -2px black;
123+
}
124+
125+
.modal-footer {
126+
border-top: none;
127+
display: flex;
128+
justify-content: center;
124129
}

‎Frontend/src/html/loginModal.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<form id="loginForm" class="text-center">
1+
<form id="loginForm" class="form">
22
<div class="form-group">
33
<label class="labelFont" for="loginUsername">Username</label>
44
<input type="text" class="form-control" id="loginUsername" placeholder="Enter username" required

‎Frontend/src/html/signUpModal.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<form id="signUpForm">
1+
<form id="signUpForm" class="form">
22
<div class="form-group">
33
<label class="labelFont" for="signUpEmail">Email</label>
44
<input type="email" class="form-control" id="signUpEmail" placeholder="Enter email" required>
@@ -16,4 +16,4 @@
1616
<input type="password" class="form-control" id="signUpRePassword" placeholder="Re-enter password" required>
1717
</div>
1818
<button type="submit" class="submit">Sign up</button>
19-
</form>
19+
</form>

‎Frontend/src/index.html

+7-14
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>ft_transcendence</title>
88

99
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap" rel="stylesheet">
10-
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> -->
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
1111
<link rel="stylesheet" href="css/buttons.css">
1212
<link rel="stylesheet" href="css/svg.css">
1313
<link rel="stylesheet" href="css/body.css">
@@ -16,9 +16,6 @@
1616
</head>
1717

1818
<body>
19-
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> -->
20-
<script type="module" src="./js/index.js"></script>
21-
2219
<!-- Header and SVG -->
2320
<div class="headerContainer"></div>
2421
<!-- Buttons -->
@@ -31,20 +28,16 @@
3128
<button type="button" class="buttons" data-bs-toggle="modal" data-bs-target="#aboutModal">About</button>
3229
</div>
3330

31+
<!--Game Modal-->
3432
<div class="pong"></div>
33+
3534
<!-- Tournament Modal -->
36-
<canvas class="tournament"></canvas>
35+
<div class="tournament"></div>
3736

38-
<!-- Sign up Modal -->
3937
<!-- About Modal -->
40-
<canvas class="about"></canvas>
38+
<div class="about"></div>
4139

42-
<!-- Profile Modal -->
43-
<!-- <script>
44-
createModal('Profile', '<div id="userProfile"></div>')
45-
</script> -->
46-
47-
<!-- <script src="src/js/modals/signup.js"></script> -->
40+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
41+
<script type="module" src="./js/index.js"></script>
4842
</body>
49-
5043
</html>

‎Frontend/src/js/createModal.js

+5-13
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,13 @@
1-
import '../scss/styles.scss'
2-
import * as bootstrap from 'bootstrap'
3-
41
export function createModal(modalId, modalTitle, content) {
52
const modalHTML = `
63
<div class="modal fade" id="${modalId}Modal" role="dialog" aria-labelledby="${modalId}ModalLabel" aria-hidden="true">
74
<div class="modal-dialog" role="document">
85
<div class="modal-content">
9-
<div class="modal-header row col-md-12">
10-
<div class="col-md-4"></div>
11-
<div class="col-md-4">
12-
<h2 class="modal-title" id="${modalId}Label">${modalTitle}</h2>
13-
</div>
14-
<div class="col-md-4">
15-
<button type="button" data-bs-dismiss="modal" class="close" aria-label="Close">
16-
<span aria-hidden="true">&times;</span>
17-
</button>
18-
</div>
6+
<div class="modal-header">
7+
<h2 class="modal-title" id="${modalId}Label">${modalTitle}</h2>
8+
<button type="button" data-bs-dismiss="modal" class="close" aria-label="Close">
9+
<span aria-hidden="true">&times;</span>
10+
</button>
1911
</div>
2012
<div class="modal-body" id="${modalId}Content">
2113
${content}

‎Frontend/src/js/index.js

+43-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
// Import our custom CSS
2-
import '../scss/styles.scss'
31
import { createModal, createGameModal } from './createModal.js'
42
import { insert, insertModal } from './insert.js'
53
import { startGame } from './pong/pong.js'
64

7-
// Import all of Bootstrap's JS
8-
import * as bootstrap from 'bootstrap'
9-
105
insert('.headerContainer', 'headerSVG.html');
11-
insertModal('.tournament', 'tournamentModal.html', 'tournament', 'Tournament');
6+
//insertModal('.tournament', 'tournamentModal.html', 'tournament', 'Tournament');
127

138
const gameModal = createGameModal();
149
// Select the button that should open the game modal
@@ -36,8 +31,44 @@ document.getElementById('pongModal').addEventListener('shown.bs.modal', function
3631
setTimeout(startGame(), 0);
3732
});
3833

39-
createModal('signUp', 'Sign Up', `
40-
<form id="signUpForm">
34+
createModal('tournament', 'Tournament', `
35+
<form id="playerForm" class="form">
36+
<p class="font">Select number of players:</p>
37+
<div class="row justify-content-center">
38+
<div class="col-md-3">
39+
<div class="form-check">
40+
<input class="form-check-input" type="radio" name="playerCount" id="2vs2" value="2">
41+
<label class="form-check-label font" for="2vs2">2</label>
42+
</div>
43+
</div>
44+
<div class="col-md-3">
45+
<div class="form-check">
46+
<input class="form-check-input" type="radio" name="playerCount" id="4vs4" value="4">
47+
<label class="form-check-label font" for="4vs4">4</label>
48+
</div>
49+
</div>
50+
<div class="col-md-3">
51+
<div class="form-check">
52+
<input class="form-check-input" type="radio" name="playerCount" id="6vs6" value="6">
53+
<label class="form-check-label font" for="6vs6">6</label>
54+
</div>
55+
</div>
56+
<div class="col-md-3">
57+
<div class="form-check">
58+
<input class="form-check-input" type="radio" name="playerCount" id="8vs8" value="8">
59+
<label class="form-check-label font" for="8vs8">8</label>
60+
</div>
61+
</div>
62+
</div>
63+
<div id="playerAliasInputs" style="display: none;">
64+
<!-- Player alias inputs will be dynamically added here -->
65+
</div>
66+
<button type="submit" class="submit">Play</button>
67+
</form>`)
68+
import './modals/tournament.js';
69+
70+
createModal('signUp', 'Sign up', `
71+
<form id="signUpForm" class="form">
4172
<div class="form-group">
4273
<label class="labelFont" for="signUpEmail">Email</label>
4374
<input type="email" class="form-control" id="signUpEmail" placeholder="Enter email"
@@ -64,7 +95,7 @@ import './modals/signup.js';
6495

6596
import './modals/profile.js';
6697
createModal('login', 'Log in', `
67-
<form id="loginForm" class="text-center">
98+
<form id="loginForm" class="form">
6899
<div class="form-group">
69100
<label class="labelFont" for="loginUsername">Username</label>
70101
<input type="text" class="form-control" id="loginUsername" placeholder="Enter username" required>
@@ -82,16 +113,16 @@ createModal('login', 'Log in', `
82113
</p>`);
83114
import './modals/signup.js';
84115

85-
createModal('logout', `
116+
createModal('logout', 'Log out', `
86117
<div class="modal-body">
87118
<p class="ErrorMessage">Are you sure you want to log out?</p>
88119
</div>
89-
<div class="submitContainer">
120+
<div class="modal-footer">
90121
<button type="button" class="submit" data-bs-dismiss="modal">Cancel</button>
91122
<button type="button" class="submit" onclick="confirmLogout()">Yes, Log out</button>
92123
</div>`);
93124
import './modals/login.js';
94125

95126
insertModal('.about', 'aboutModal.html', 'about', 'About');
96127

97-
createModal('Profile', '<div id="userProfile"></div>')
128+
createModal('Profile', 'Profile', '<div id="userProfile"></div>')

‎Frontend/src/js/modals/friends.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import '../../scss/styles.scss';
2-
31
document.addEventListener('DOMContentLoaded', function () {
42
const userData = JSON.parse(localStorage.getItem('userData'));
53
if (!userData || !userData.id || !userData.token) {

‎Frontend/src/js/modals/login.js

+32-18
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
// Import our custom CSS
2-
import '../../scss/styles.scss';
3-
41
import { updateUserProfile } from './profile.js';
52

6-
// Import all of Bootstrap's JS
7-
import * as bootstrap from 'bootstrap'
8-
93
document.addEventListener('DOMContentLoaded', function () {
104
var loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
115
var logoutModal = new bootstrap.Modal(document.getElementById('logoutModal'));
@@ -137,18 +131,38 @@ import * as bootstrap from 'bootstrap'
137131
}
138132

139133
// Function to handle logout confirmation
140-
window.confirmLogout = function () {
141-
// Simulating a successful logout response
142-
console.log('Logout successful: Simulated response');
134+
window.confirmLogout = function () {
135+
var userData = JSON.parse(localStorage.getItem('userData'));
136+
if (!userData) {
137+
console.error('No user data found in localStorage.');
138+
return;
139+
}
140+
141+
fetch(`/user/${userData.id}/logout/`, {
142+
method: 'POST',
143+
headers: {
144+
'Content-Type': 'application/json',
145+
'Authorization': 'Bearer ' + userData.token
146+
}
147+
})
148+
.then(response => {
149+
if (!response.ok) {
150+
throw new Error('Logout failed');
151+
}
152+
console.log('Logout successful');
143153

144-
localStorage.clear('userData'); // Clear all localStorage items
154+
localStorage.clear(); // Clear all localStorage items
145155

146-
isLoggedIn = false; // Update login state
147-
localStorage.setItem('isLoggedIn', 'false'); // Save login state to localStorage
148-
updateAuthButton();
149-
logoutModal.hide();
150-
};
156+
isLoggedIn = false; // Update login state
157+
localStorage.setItem('isLoggedIn', 'false'); // Save login state to localStorage
158+
updateAuthButton();
159+
logoutModal.hide();
160+
})
161+
.catch(error => {
162+
console.error('Error:', error);
163+
});
164+
};
151165

152-
// Initially update the button and profile button
153-
updateAuthButton();
154-
});
166+
// Initially update the button and profile button
167+
updateAuthButton();
168+
});

0 commit comments

Comments
 (0)