lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

Login page added to user icon in nav bar

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-10 01:44:44 -06:00
parent ea555155c9
commit 28c98518b2
6 changed files with 54 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
ProjectSourceCode/src/views/partials/navigation-bar/login.hbs Normal file
View File

@@ -0,0 +1,29 @@
<!-- Linking forms.css -->
<div class="login-page" id="login-page">
<div class="form-container" id="login-form">
<h1 class="mt-5 mb-4">Login</h1>
<!-- Check if message variable is present to display message partial -->
{{#if message}}
{{> message}}
{{/if}}
<form action="/login" method="POST" class="mt-3">
<div class="mb-3">
<label for="username" class="form-label">Username:</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<p class="mt-3">Don't have an account? <a href="/register">Register</a></p>
</div>
</div>

33
ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs
View File

@@ -1,17 +1,17 @@
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- HTML structure -->
<nav class="navbar navbar-expand-lg navbar-dark" id="navigation-bar-container">
<div class="container-fluid d-flex justify-content-between align-items-center"> <!-- Added container-fluid for full-width -->
<div> <!-- Wrapped navbar brand and toggler in a div -->
<div class="container-fluid d-flex justify-content-between align-items-center">
<div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation" style="margin-right: 20px;">
<span class="navbar-toggler-icon"></span>
</button>
<a class="logo" id="logo" href="/home">ScoreSpot</a>
<div id="line"></div>
</div>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
@@ -40,11 +40,26 @@
</ul>
</div>
<!-- Right-aligned image outside collapsing area -->
<div id="user" class="d-sm-flex">
<img src="img/navigation-bar/user.png" alt="Your Image" class="img-fluid" style="width: 30px;">
</div>
</div>
</nav>
<!-- Container for login section -->
<div id="login-container" class="container">
{{> navigation-bar/login}}
</div>
<!-- JavaScript to handle click event -->
<script>
$(document).ready(function() {
// When #user is clicked
$('#user').click(function() {
// Toggle the visibility of the login container
$('#login-container').toggle();
});
});
</script>