-
Notifications
You must be signed in to change notification settings - Fork 0
/
login.html
128 lines (118 loc) · 5.95 KB
/
login.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!-- Login Form -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Log in</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="auth-wrapper">
<nav>
<div class="nav__logo">
<h1><a href="./index.html">CeLibrary</a> </h1>
<!--Logo SVG-->
<?xml version="1.0" encoding="UTF-8"?>
<svg width="45" height="45" version="1.1" viewBox="0 0 491.52 491.52" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg">
<path
d="m411.85 0h-288.56c-33.185 0-60.085 26.901-60.085 60.084v372.04c0.946-31.538 28.461-55.852 60.012-55.852h297.25c4.346 0 7.869 3.523 7.869 7.869v-367.66c0-9.104-7.381-16.484-16.485-16.484z"
fill="#27A2DB" />
<rect x="123.29" width="9.871" height="385.84" fill="#2D93BA" />
<path
d="m120.81 475.78c-24.475 0-44.116-21.105-41.679-46.071 2.124-21.759 21.685-37.699 43.547-37.699h297.79c4.346 0 7.869-3.523 7.869-7.869s-3.523-7.869-7.869-7.869h-297.25c-31.552 0-59.066 24.314-60.012 55.853-0.979 32.635 25.184 59.396 57.597 59.396h299.66c4.346 0 7.869-3.523 7.869-7.869v-5e-3c0-4.345-3.523-7.868-7.869-7.868h-299.66z"
fill="#1C75A1" />
<path
d="m79.131 429.71c-2.438 24.965 17.203 46.072 41.679 46.072h298.17c-12.996-27.924-12.996-55.846 0-83.77h-296.3c-21.863 0-41.423 15.94-43.546 37.698z"
fill="#EBF0F3" />
<g fill="#E1E6E9">
<path d="m104.84 411.12h307.36c0.28-1.107 0.644-2.213 0.966-3.319h-308.32v3.319z" />
<path d="m104.84 423.33h305.01c0.131-1.107 0.41-2.214 0.58-3.32h-305.59v3.32z" />
<path d="m104.84 435.55h304.48c-0.022-1.107-0.022-2.213 0-3.32h-304.48v3.32z" />
<path d="m104.84 447.78h305.59c-0.17-1.107-0.449-2.213-0.58-3.319h-305.01v3.319z" />
<path d="m104.84 459.99h308.32c-0.322-1.107-0.687-2.215-0.966-3.32h-307.36v3.32z" />
</g>
<polygon points="292.74 484.3 259.89 465.44 227.04 484.3 227.04 407.8 292.74 407.8" fill="#E56353" />
</svg>
<!--Logo-->
</div>
<ul class="nav__link">
<!-- Other navigation links -->
<li id="logout-link" style="display: none;"><a href="#">Logout</a></li>
<li id="login-link"><a href="./login.html">Log in</a></li>
<li id="signup-link"><a href="./signup.html">Sign up</a></li>
</ul>
</nav>
<div class="auth-container">
<div class="auth-card">
<div class="auth-card__body">
<form id="login-form">
<h2>Log in</h2>
<label for="email">Email:</label>
<input type="email" id="email" required><br>
<label for="password">Password:</label>
<input type="password" id="password" required><br>
<div class="error-message"></div>
<button type="submit">Sign in</button>
</form>
</div>
</div>
</div>
<footer>
Cedogithub copyright © 2023 | Click to see code ->
<a href="https://github.com/cedogithub/library-app" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
</footer>
</div>
<script type="module">
// Import the necessary Firebase modules
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js";
import {
getAuth,
signInWithEmailAndPassword,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";
const firebaseConfig = {
apiKey: "AIzaSyDoopnPXcNbdwxDKpIT9AB6wA-D8rX_bRE",
authDomain: "celibrary-3d96f.firebaseapp.com",
projectId: "celibrary-3d96f",
storageBucket: "celibrary-3d96f.appspot.com",
messagingSenderId: "214869933074",
appId: "1:214869933074:web:f857b20f5d36a53a2faccb",
measurementId: "G-BHC3LTYS0C",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const loginForm = document.querySelector("#login-form");
loginForm.addEventListener("submit", (e) => {
e.preventDefault();
const email = loginForm.email.value;
const password = loginForm.password.value;
const errorMessageElement = document.querySelector(".error-message");
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// Redirect to home page after successful login
window.location.href = "index.html";
// Display welcome message on index.html
const welcomeMessage = document.querySelector(".welcome-message");
welcomeMessage.textContent = `Hi, ${user.email}! Welcome to CeLibrary!`;
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.error(errorCode, errorMessage);
errorMessageElement.textContent = "Invalid email or password.";
errorMessageElement.style.display = "block";
});
});
</script>
</body>
</html>