Merge pull request #184 from TheSecretOrganization/148-redesign-login…

…-page 148 redesign login page
TheSecretOrganization · Oct 2, 2024 · 760afd5 · 760afd5
2 parents 07a01dd + 6ad5dc1
commit 760afd5
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 43 deletions.
diff --git a/django/src/ft_auth/templates/login.html b/django/src/ft_auth/templates/login.html
@@ -1,35 +1,91 @@
 {% extends "./extends/base.html" %}
 
 {% block content %}
-<h1>Login</h1>
-
-<form id="login-form" data-url="/api/auth/login/">
-	<div id="login-error"></div>
-	{% csrf_token %}
-	<div>
-		<label for="username">Username</label>
-		<input id="username" type="text" autocomplete="username" />
-	</div>
-	<div>
-		<label for="password">Password</label>
-		<input id="password" type="password" />
-	</div>
-	<button id="form-btn">Login</button>
-</form>
 
-<h2>Or</h2>
+<div id="register-side">
+	<h1>Bottom text</h1>
+</div>
+<div id="login-side" class="container">
+	<div class="column">
+		<form id="login-form" data-url="/api/auth/login/">
+			<div class="row">
+				<h1 class="text-center">Login</h1>
+			</div>
+			<div id="login-error"></div>
+			{% csrf_token %}
+			<div class="form-floating mb-3 row">
+				<input type="text" class="form-control" id="username" placeholder="Username" autocomplete="username">
+				<label for="username">Username</label>
+			</div>
+
+			<div class="form-floating mb-3 row">
+				<input type="password" class="form-control" id="password" placeholder="Password">
+				<label for="password">Password</label>
+			</div>
 
-<div>
-	<a href="{{ oauth_url }}">Login with 42</a>
+			<button id="login-btn" type="submit" class="btn btn-success row w-100 m-0">Login</button>
+		</form>
+		<hr class="row border-bottom border-1 border-dark my-2">
+		</hr>
+		<div class="row">
+			<p class="fw-light" style="margin-bottom: 0px;">Don't have an account yet ? Try <a data-route
+					href="/register" class="text-decoration-none text-success">registering</a></p>
+		</div>
+		<div class="row">
+			<p class="fw-light text-center">or
+				<a id="login-42-btn" class="btn btn-sm rounded-pill rounded-5 text-decoration-none"
+					href="{{ oauth_url }}">Login with <img class="image-text" src="/assets/42.svg" alt="42 logo"></a>
+			</p>
+		</div>
+	</div>
 </div>
 
 <script>
-	document.getElementById('form-btn').onclick = function(e) {
+	document.getElementById('login-btn').onclick = function (e) {
 		document.getElementById('login-error').textContent = '';
 		e.preventDefault();
 		submitForm('login-form', () => route('/'), (json) => {
 			document.getElementById('login-error').textContent = json.error;
 		});
 	};
 </script>
-{% endblock %}
+
+<style>
+	#page-container-wrapper {
+		display: flex;
+		height: calc(100vh - 67.5px);
+	}
+
+	#register-side,
+	#login-side {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#register-side {
+		background-color: #e0e0e0;
+	}
+
+	#login-side {
+		background-color: #f5f5f5;
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+	}
+
+	.image-text {
+		height: 1rem;
+		width: 1rem;
+	}
+
+	#login-42-btn {
+		background-color: #dfbac8;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		padding-left: 4px;
+		padding-right: 4px;
+	}
+</style>
+{% endblock %}
diff --git a/django/src/ft_auth/templates/register.html b/django/src/ft_auth/templates/register.html
@@ -31,14 +31,24 @@ <h1 class="text-center">Register</h1>
 		<hr class="row border-bottom border-1 border-dark my-2">
 		</hr>
 		<div class="row">
-			<p class="fw-light">Already have an account ? Try <a data-route href="/login"
+			<p class="fw-light" style="margin-bottom: 0px;">Already have an account ? Try <a data-route href="/login"
 					class="text-decoration-none text-success">logging in</a></p>
 		</div>
+		<div class="row">
+			<p class="fw-light text-center">or
+				<a id="login-42-btn" class="btn btn-sm rounded-pill rounded-5 text-decoration-none"
+					href="{{ oauth_url }}">Login with <img class="image-text" src="/assets/42.svg" alt="42 logo"></a>
+			</p>
+		</div>
 	</div>
 </div>
 <div id="login-side">
 	<h1>Right Side</h1>
 </div>
+<div id="slider-div" class="slider-div-default">
+	<h1>Right Side</h1>
+	<button id="toggle-slider" class="btn btn-primary mt-3">toggle slider</button>
+</div>
 
 <script>
 	function validate() {
@@ -61,5 +71,83 @@ <h1>Right Side</h1>
 			document.getElementById('register-error').textContent = json.error;
 		});
 	};
+
+	document.getElementById('toggle-slider').addEventListener('click', function() {
+        let element = document.getElementById('slider-div');
+        element.classList.toggle('slider-div-default');
+        element.classList.toggle('slider-div-animation');
+        let btn = document.getElementById('toggle-slider');
+        btn.classList.toggle('active');
+    });
 </script>
+
+<style>
+	#page-container-wrapper {
+		display: flex;
+		height: calc(100vh - 67.5px);
+	}
+
+	#register-side,
+	#login-side {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#register-side {
+		background-color: #f5f5f5;
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+	}
+
+	#login-side {
+		background-color: #f5f5f5;
+	}
+
+	.image-text {
+		height: 1rem;
+		width: 1rem;
+	}
+
+	#login-42-btn {
+		background-color: #dfbac8;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		padding-left: 4px;
+		padding-right: 4px;
+	}
+
+	.slider-div-default {
+		z-index: 9000;
+		width: 50%;
+		height: calc(100vh - 67.5px);
+		background-color: #e0e0e0;
+		position: absolute;
+		top: 67.5px;
+		left: 50%;
+	}
+
+	.slider-div-animation {
+		z-index: 9000;
+		width: 50%;
+		height: calc(100vh - 67.5px);
+		background-color: #e0e0e0;
+		position: absolute;
+		top: 67.5px;
+		left: 0;
+		animation: moveRight 4s;
+		animation-fill-mode: forwards;
+    }
+
+    @keyframes moveRight {
+      0% {
+        left: 0;
+      }
+      100% {
+        left: 50%;
+      }
+    }
+</style>
 {% endblock %}
diff --git a/nginx/src/assets/42.svg b/nginx/src/assets/42.svg
diff --git a/nginx/src/css/register.css b/nginx/src/css/register.css
diff --git a/nginx/src/index.html b/nginx/src/index.html
@@ -11,7 +11,6 @@
 	<link rel="stylesheet" type="text/css" href="/css/styles.css">
 	<link rel="stylesheet" type="text/css" href="/css/sidebar.css">
 	<link rel="stylesheet" type="text/css" href="/css/navbar.css">
-	<link rel="stylesheet" type="text/css" href="/css/register.css">
 	<link rel="stylesheet" type="text/css" href="/css/games.css">
 	<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
 </head>