Skip to content
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

"Remember Password" Option #987

Merged
merged 1 commit into from
Nov 6, 2024
Merged

"Remember Password" Option #987

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
70 changes: 36 additions & 34 deletions client/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -9,27 +10,29 @@
<!-- Font Awesome CDN for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.go-home-button {
padding: 10px 20px;
font-size: 16px;
color: white;
/* background-color: #8e3106ee; */
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
.go-home-button {
padding: 10px 20px;
font-size: 16px;
color: white;
/* background-color: #8e3106ee; */
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}

/* .go-home-button:hover {
/* .go-home-button:hover {
background-color: #0056b3;
} */
</style>
</head>

<body class="bg-white">
<div class="relative flex items-top justify-center min-h-screen bg-white sm:items-center sm:pt-0">
<div class="absolute top-4 left-4">
<!-- Left arrow icon with background, positioned at the top left corner -->
<a href="../index.html" class="py-3 px-3 bg-gray-200 rounded-full text-gray-700 hover:bg-gray-300 transition duration-300">
<a href="../index.html"
class="py-3 px-3 bg-gray-200 rounded-full text-gray-700 hover:bg-gray-300 transition duration-300">
<i class="fas fa-arrow-left fa-lg"></i>
</a>
</div>
Expand All @@ -46,7 +49,7 @@ <h1 class="text-3xl sm:text-4xl text-gray-800 font-extrabold tracking-tight">
Don't Have an Account?
</p><br />
<a href="/client/register.html"
class="md:w-32 bg-orange-700 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-lg mt-3 transition ease-in-out duration-300">
class="md:w-32 bg-orange-700 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-lg mt-3 transition ease-in-out duration-300">
Register
</a>
</div>
Expand All @@ -57,42 +60,40 @@ <h2 class="text-3xl sm:text-4xl text-gray-800 font-extrabold tracking-tight">
Log in
</h2>
<br />
<input
type="email"
name="email"
id="email"
placeholder="Email"
<input type="email" name="email" id="email" placeholder="Email"
class="w-full mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none"
required
/>
required />
<p id="emailError" class="text-red-500 mt-1"></p> <!-- Email Error Message -->

<div class="relative flex items-center">
<input
type="password"
name="password"
id="password"
placeholder="Password"
<input type="password" name="password" id="password" placeholder="Password"
class="w-full mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none"
required
/>
<button type="button" id="togglePassword" class="absolute right-3 top-5 text-black-500 hover:text-orange-700">
required />
<button type="button" id="togglePassword"
class="absolute right-3 top-5 text-black-500 hover:text-orange-700">
<!-- Icons for password visibility toggle here -->
</button>
</div>
<p id="passwordError" class="text-red-500 mt-1"></p> <!-- Password Error Message -->
<div class="mt-3">
<input type="checkbox" id="rememberMe" name="rememberMe" class="mr-2">
<label for="rememberMe" class="text-gray-800 font-semibold">Remember Me</label>
</div>
<button type="submit"
class="md:w-32 bg-orange-700 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-lg mt-3 transition ease-in-out duration-300">
class="md:w-32 bg-orange-700 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-lg mt-3 transition ease-in-out duration-300">
SignIn
</button>
<a href="/client/forgot_password.html" class="text-orange-700 ml-0 py-5 hover:underline mt-0">Forgot Password?</a>
<button id="googleSignin" class="w-full mt-2 flex items-center justify-center bg-white border border-gray-400 text-gray-800 font-semibold py-3 px-6 rounded-lg transition ease-in-out duration-300 hover:bg-gray-100">
<a href="/client/forgot_password.html"
class="text-orange-700 ml-0 py-5 hover:underline mt-0">Forgot Password?</a>
<button id="googleSignin"
class="w-full mt-2 flex items-center justify-center bg-white border border-gray-400 text-gray-800 font-semibold py-3 px-6 rounded-lg transition ease-in-out duration-300 hover:bg-gray-100">
<img src="../images/googleLogo.png" alt="Google Logo" class="w-5 h-5 mr-2">
Continue with Google
</button>

</form>
<a href="../index.html" class="go-home-button bg-orange-700 hover:bg-orange-600 ">Back to Home</a>
<a href="../index.html" class="go-home-button bg-orange-700 hover:bg-orange-600 ">Back to
Home</a>
</div>
</div>
</div>
Expand All @@ -104,4 +105,5 @@ <h2 class="text-3xl sm:text-4xl text-gray-800 font-extrabold tracking-tight">
// Your JavaScript code here
</script>
</body>
</html>

</html>
Loading