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