Skip to content

Fixed Issue #85: Added a login functionality #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
iamvetruvian wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed Issue #85: Added a login functionality #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2051,4 +2051,47 @@ textarea.input-field {
left: 0;
}

}

.loginLabel{
color: var(--gold-crayola);
font-weight: var(--weight-bold);
letter-spacing: var(--letterSpacing-1);
line-height: 14px;
padding-bottom: 1%;
padding-top: 3%;
}
#login-page {
width: 50%;
margin: 50px auto;
background-color: #444444;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.loginhead{
color: var(--gold-crayola);
text-align: center;
}
input, textarea {
width: 100%;
padding: 10px;
background-color: #232327;
border: 1px solid #e8c494;
color: white;
border-radius: 4px;
font-size: 2rem;
}

#password-label{
display:flex;
align-items: flex-start;
gap: 5px;
}

#submit-button{
display: flex;
justify-content: center;
padding-top: 3%;
width: 100%;
}
56 changes: 55 additions & 1 deletion assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@



/**
* PRELOAD
*
Expand All @@ -13,6 +15,56 @@ window.addEventListener("load", function () {
});



const passwordInput = document.getElementById('description');
const passwordCriteria = document.getElementById('password-criteria');
const passwordStrength = document.getElementById('password-strength');
const strengthText = document.getElementById('strength-text');

passwordInput.addEventListener('input', function() {
const password = this.value;

// Show the password criteria and strength only when user starts typing
if (password.length > 0) {
passwordCriteria.style.display = 'block';
passwordStrength.style.display = 'block';
strengthText.style.display = 'block';
} else {
passwordCriteria.style.display = 'none';
passwordStrength.style.display = 'none';
strengthText.style.display = 'none';
}

// Criteria flags
const lengthCriteria = password.length >= 8;
const uppercaseCriteria = /[A-Z]/.test(password);
const lowercaseCriteria = /[a-z]/.test(password);
const numberCriteria = /[0-9]/.test(password);
const symbolCriteria = /[!@#$%^&*(),.?":{}|<>]/.test(password);

// Update criteria list
document.getElementById('length-criteria').style.display = lengthCriteria ? 'none' : 'list-item';
document.getElementById('uppercase-criteria').style.display = uppercaseCriteria ? 'none' : 'list-item';
document.getElementById('lowercase-criteria').style.display = lowercaseCriteria ? 'none' : 'list-item';
document.getElementById('number-criteria').style.display = numberCriteria ? 'none' : 'list-item';
document.getElementById('symbol-criteria').style.display = symbolCriteria ? 'none' : 'list-item';

// Determine password strength
const criteriaMet = [lengthCriteria, uppercaseCriteria, lowercaseCriteria, numberCriteria, symbolCriteria].filter(Boolean).length;

if (criteriaMet < 2) {
strengthText.textContent = 'Weak';
strengthText.style.color = 'red';
} else if (criteriaMet >= 2 && criteriaMet < 4) {
strengthText.textContent = 'Moderate';
strengthText.style.color = 'yellow';
} else if (criteriaMet === 5) {
strengthText.textContent = 'Strong';
strengthText.style.color = 'green';
}
});


/**
* add event listener on multiple elements
*/
Expand Down Expand Up @@ -141,4 +193,6 @@ window.addEventListener("mousemove", function (event) {
parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`;
}

});
});


15 changes: 12 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,13 @@
<span class="span">Contact</span>
</a>
</li>
<li class="navbar-item">
<a href="login.html" class="navbar-link active">
<div class="separator"></div>

<span class="span">Login</span>
</a>
</li>

</ul>

Expand Down Expand Up @@ -1136,17 +1143,20 @@ <h3 class="card-title title-2 text-center">
<li>
<a href="#" class="label-2 footer-link hover-underline">About Us</a>
</li>

<li>
<a href="#" class="label-2 footer-link hover-underline">Our Chefs</a>
</li>

<li>
<a href="#" class="label-2 footer-link hover-underline">Contact</a>
</li>
<li>
<a href="#" class="label-2 footer-link hover-underline">Login</a>
</li>

</ul>

<ul class="footer-list">

<li>
Expand Down Expand Up @@ -1195,5 +1205,4 @@ <h3 class="card-title title-2 text-center">
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>
69 changes: 69 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grilli - Login</title>
<!--
- favicon
-->
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

<!--
- google font link
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Forum&display=swap" rel="stylesheet">

<!--
- custom css link
-->
<link rel="stylesheet" href="./assets/css/style.css">

<!--
- preload images
-->
<link rel="preload" as="image" href="./assets/images/hero-slider-1.jpg">
<link rel="preload" as="image" href="./assets/images/hero-slider-2.jpg">
<link rel="preload" as="image" href="./assets/images/hero-slider-3.jpg">

</head>
<body>
<section id="login-page">
<h2 class="loginhead">Login</h2>
<form id="blogForm">
<div class="form-group">
<label for="email"><span class="loginLabel">E-mail</span></label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password"><span class="loginLabel">Password</span></label>
<input type="password" id="description" name="description" pattern="[a-zA-Z0-9]{8,12}" minlength="8" maxlength="15" required></input>
</div>
<div id="password-label"><p id="password-strength" style="display: none;">Password Strength: </p><div><p ><span id="strength-text" style="display: none;">Weak</span></p></div></div>
<div id="password-criteria" style="display: none;">
<ul>
<li id="length-criteria" >• Password must be at least 8 characters long</li>
<li id="uppercase-criteria" >• Must contain at least one uppercase letter</li>
<li id="lowercase-criteria">• Must contain at least one lowercase letter</li>
<li id="number-criteria" >• Must contain at least one number</li>
<li id="symbol-criteria" >• Must contain at least one symbol</li>
</ul>
</div>



<div id="submit-button">
<button class="btn btn-secondary" type="submit">
<span class="text text-1">Login</span>
<span class="text text-2" aria-hidden="true">Submit</span>
</button>
</div>
</form>
</section>
<script src="./assets/js/script.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>