Site :

- Add register page, button for comeback to login page doesnt work.

docker-compose/docker-compose.yml

@@ -14,13 +14,13 @@ services:
       - djangoserver
     build: requirements/nginx
     ports:
-      - "443:443"
+      - "8000:8000"
     restart: always 
 
   djangoserver:
     container_name: djangoserver
-#    volumes:
+    # volumes:
-#      - website_data:/var/www/djangoserver
+    #   - website_data:/var/www/djangoserver
     networks:
       - transcendence
     develop:

docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html

@@ -37,7 +37,30 @@
 					<button type="button" class="login-42-btn">Log with <span>42</span></button>
 				</form>
 			</div>
+			<div class="right-side-register">
+				<h1>Welcome to a new WORLD</h1>
+				<form id="registerForm">
+					<!-- <span id="closePopupBtn" class="close">&times;</span> -->
+					<label for="username">Username</label>
+					<input type="username" id="username" name="username">
+
+					<label for="email">Email</label>
+					<input type="email" id="email-register" name="email">
+	
+					<label for="password">Password</label>
+					<input type="password" id="password-register" name="password">
+	
+					<label for="password">Confirm password</label>
+					<input type="password" id="password-confirm" name="password">
+
+					<button type="submit" class="login-btn">REGISTER</button>
+					<div class="old-player">
+						Already have an account? <a href="#">Log in</a>
 					</div>
+				</form>
+			</div>
+		</div>
+		
 	</div>
 <div id="chatButton">
 	<p>CHAT</p>

docker-compose/requirements/nginx/nginx.conf

@@ -16,7 +16,7 @@ http {
 		access_log /dev/stdout;
 		error_log  /dev/stdout;
 		server_name ptme.com;
-		listen 443 ssl;
+		listen 8000 ssl;
 	
 		ssl_protocols TLSv1.2 TLSv1.3;
 		ssl_certificate /etc/nginx/ssl/inception.crt;

docker-compose/requirements/nginx/static/javascript/login/main.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:40:15 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/25 18:54:51 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/26 18:10:12 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -22,7 +22,9 @@ class Login
 		const	pLoginButton	= loginButton.getElementsByTagName('p')[0];
 		const	form			= document.getElementById('loginForm');
 		let		nodeText		= null;
+		const	registerButton  = document.getElementsByClassName('new-player')[0];
 
+		registerButton.addEventListener('click', changeWindowLogin);
 		waitForLogin().then(() => {
 			if (userMeInfo.id !== -1)
 			{
@@ -42,13 +44,34 @@ class Login
 	{
 		const	loginButton		= document.getElementById('loginButton');
 		const	form			= document.getElementById('loginForm');
+		const   registerButton  = document.getElementById('new-player');
+		const   loginBackButton = document.getElementById('old-player');
 
 		loginButton.removeEventListener('click', showLoginDiv);
 		form.removeEventListener('submit', connect);
-
+		registerButton.removeEventListener('click', changeWindowLogin);
+		loginBackButton.removeEventListener('click', changeWindowLoginBack);
 	}
 }
 
+function	changeWindowLogin(e)
+{
+	const	registerWindow	= document.getElementsByClassName('right-side-register')[0];
+	const	loginWindow		= document.getElementsByClassName('right-side')[0];
+	e.preventDefault();
+	loginWindow.style.display = 'none';
+	registerWindow.style.display = 'flex';
+}
+
+function   changeWindowLoginBack(e)
+{
+	const	registerWindow	= document.getElementsByClassName('right-side-register')[0];
+	const	loginWindow		= document.getElementsByClassName('right-side')[0];
+	e.preventDefault();
+	loginWindow.style.display = 'flex';
+	registerWindow.style.display = 'none';
+}
+
 function	showLoginDiv()
 {
 	const popout = document.getElementById('loginPopup');

docker-compose/requirements/nginx/static/style/homePage/home.css

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   home.css                                           :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/26 11:09:03 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/26 18:21:45 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -160,6 +160,32 @@ body {
     color: white;
 }
 
+.right-side-register{
+	flex: 1;
+	display: none;
+	flex-direction: column;
+	justify-content: center;
+	padding: 0;
+	padding-inline: 180px;
+	color: white;
+}
+
+.right-side-register h1 {
+    font-size: 2rem;
+    margin-bottom: 30px;
+	align-items: center;
+	justify-content: center;
+}
+
+.close {
+    position: absolute;
+    top: 110px;
+    right: 250px;
+	font-size: 2rem;
+    cursor: pointer;
+	color: white;
+}
+
 .right-side h1 {
     font-size: 2rem;
     margin-bottom: 30px;
@@ -223,6 +249,21 @@ button {
 	color: #f0f0f0e1;
 }
 
+.old-player {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.old-player a {
+    color: white;
+    text-decoration: underline;
+	transition: color 0.3s ease;
+}
+
+.old-player a:hover {
+	color: #f0f0f0e1;
+}
+
 .divider {
     display: flex;
     align-items: center;
@@ -258,14 +299,6 @@ button {
 	background-color: #f0f0f0e1;
 }
 
-.close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 20px;
-    cursor: pointer;
-}
-
 .homeSection{
 	min-height: 100svh;
 	overflow: hidden;