From d9b026c984bf95c6466ef0752b01c99ad924b821 Mon Sep 17 00:00:00 2001
From: louer141 <louer141@su13-105.ad.liu.se>
Date: Wed, 10 Apr 2024 11:48:47 +0200
Subject: [PATCH] Login and signup links added to forms

---
 client/login.html      |  3 +++
 client/login.js        |  9 +++++++++
 client/loginsignup.css | 42 +++++++++++++++++++++++-------------------
 client/signup.html     |  3 +++
 client/signup.js       |  8 ++++++++
 5 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/client/login.html b/client/login.html
index 85f10e2..111dbfa 100644
--- a/client/login.html
+++ b/client/login.html
@@ -23,6 +23,9 @@
                             <small id="passwordError" class="text-danger"></small>
                         </div>
                     </form>
+                    <div style="text-align: center; margin-top: 10px;">
+                        <a href="#" id="signupLink">Don't have an account? Click here to create one</a>
+                    </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
diff --git a/client/login.js b/client/login.js
index 5f20e89..705dd84 100644
--- a/client/login.js
+++ b/client/login.js
@@ -2,7 +2,16 @@ function loadLogInContent() {
     console.log('Load Log in Content');
     $("#loginContainer").load("login.html #login-modal", function () {
       showLogInModal();
+      // Add event listener to the "Don't have an account?" link
+     $('#signupLink').on('click', function(event) {
+        event.preventDefault(); // Prevent the default action of the link
+        // Hide the login modal
+        $('#login-modal').modal('hide');
+        // Load and show the signup modal
+        loadSignUpContent();
     });
+    });
+    
 }
   
 function showLogInModal(){
diff --git a/client/loginsignup.css b/client/loginsignup.css
index 8ef5534..5a922cd 100644
--- a/client/loginsignup.css
+++ b/client/loginsignup.css
@@ -1,31 +1,35 @@
 /*loginsignup.css*/
 .loginContainer {
     font-family: 'Brandon Grotesque Bold', 'Helvetica', sans-serif;
-}
-
-.modal-title {
+ }
+ 
+ .modal-title {
     color: #006267; /* Change this to the color you desire */
     font-weight: 600;
-}
-
-.loginform-group label,
-.passwordform-group label,
-.signupform-group label {
+ }
+ 
+ .loginform-group label,
+ .passwordform-group label,
+ .signupform-group label {
     font-weight: bold;
-}
-
-.btn-secondary,
-.close {
+ }
+ 
+ .btn-secondary,
+ .close {
     color: #FFFFFF; /* Change this to the color you desire */
     background-color: #adbdb3; /* Change this to the background color you desire */
     border: none; /* Optionally remove the border */
-}
-
-/* Style for the Log in button */
-#logoutBtn,
-#signUpBtn,
-#logInBtn {
+ }
+ 
+ /* Style for the Log in button */
+ #logoutBtn,
+ #signUpBtn,
+ #logInBtn {
     background-color: #006267; /* Change this to the color you desire */
     color: white; /* Change this to the text color you prefer */
     border-color: transparent; /* Optionally remove button border */
-}
+ }
+ 
+ /*button[id="submitCreateAd"]:hover {
+    background-color: #adbdb3;
+ }*/
diff --git a/client/signup.html b/client/signup.html
index 93a2b7e..9e389aa 100644
--- a/client/signup.html
+++ b/client/signup.html
@@ -45,6 +45,9 @@
                             <input type="text" class="form-control" id="studentid" name="studentid" required>
                         </div>
                     </form>
+                    <div style="text-align: center; margin-top: 10px;">
+                        <a href="#" id="loginLink">Already have an account? Click here to login</a>
+                    </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
diff --git a/client/signup.js b/client/signup.js
index 80c2bd7..4c944a3 100644
--- a/client/signup.js
+++ b/client/signup.js
@@ -16,6 +16,14 @@ function showSignUpModal(){
       console.log('Signup klickat');
       postNewUser();
     });
+    // Add event listener to the "Already have an account?" link
+    $('#loginLink').on('click', function (event) {
+      event.preventDefault(); // Prevent the default action of the link
+      // Hide the signup modal
+      $('#signup-modal').modal('hide');
+      // Load and show the login modal
+      loadLogInContent();
+    });
 }
 
 function checkFormValidity(){
-- 
GitLab