-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
181 lines (174 loc) · 11.2 KB
/
Copy pathindex.html
File metadata and controls
181 lines (174 loc) · 11.2 KB
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login / Register</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" type="image/png" href="brgy.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
// Logout function: clears currentUser and reloads page
function logout() {
localStorage.removeItem('currentUser');
window.location.href = 'index.html';
}
// If coming from logout, ensure no auto-login
document.addEventListener('DOMContentLoaded', function() {
if (localStorage.getItem('currentUser')) {
// Optionally, you can redirect to dashboard2.html if you want to keep user logged in
// window.location.href = 'dashboard2.html';
// Or, just clear the session to force login
localStorage.removeItem('currentUser');
}
});
</script>
<section id="loginSection" class="flex justify-center items-center" style="min-height:100vh; background: url('bg2.png') center center/cover no-repeat, linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);">
<div class="bg-white rounded-lg shadow-md" style="width:340px; min-height: 480px; padding: 32px 18px; display: flex; flex-direction: column; align-items: center;">
<div style="display:flex; justify-content:center; margin-bottom:1.5rem;">
<img src="brgy.png" alt="Barangay logo" style="height:70px; width:70px; border-radius:50%; object-fit:cover;">
</div>
<ul style="display:flex; border-bottom:1px solid #e5e7eb; margin-bottom:1.5rem; width:100%; justify-content:center;">
<li style="margin-right:0.5rem;">
<button id="loginTab" style="background:#2563eb; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem 0.5rem 0 0; font-weight:600;">Login</button>
</li>
<li>
<button id="registerTab" style="background:#fff; color:#2563eb; padding:0.5rem 1rem; border-radius:0.5rem 0.5rem 0 0; font-weight:600; border:1px solid #e5e7eb; border-bottom:none;">Register</button>
</li>
</ul>
<!-- Login Form -->
<div id="loginFormContainer">
<h2 class="text-2xl font-bold text-center text-gray-800 mb-6" style="font-weight: bold;">Login to Your Account</h2>
<form id="loginForm" class="space-y-4">
<div>
<label for="loginUsername" class="block text-white mb-2 font-bold">Username</label>
<input type="text" id="loginUsername" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-bold text-white bg-gray-700 placeholder-gray-300" required>
</div>
<div>
<label for="loginPassword" class="block text-white mb-2 font-bold">Password</label>
<div class="relative">
<input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-bold text-white bg-gray-700 placeholder-gray-300" required>
<button type="button" id="toggleLoginPassword" class="absolute right-3 text-gray-500" style="top: 56%; transform: translateY(-50%);" onclick="togglePasswordVisibility('loginPassword')">
👁️
</button>
</div>
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300">Login</button>
</form>
</div>
<!-- Register Form -->
<div id="registerFormContainer" class="hidden">
<h2 class="text-2xl font-bold text-center text-gray-800 mb-6">Create New Account</h2>
<form id="registerForm" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="firstName" class="block text-white mb-2 font-bold">First Name</label>
<input type="text" id="firstName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-bold text-white bg-gray-700 placeholder-gray-300" required>
</div>
<div>
<label for="lastName" class="block text-white mb-2 font-bold">Last Name</label>
<input type="text" id="lastName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-bold text-white bg-gray-700 placeholder-gray-300" required>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="contact" class="block text-white mb-2 font-bold">Contact Number</label>
<input type="text" id="contact" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-bold text-white bg-gray-700 placeholder-gray-300">
</div>
<div>
<label for="birthday" class="block text-white mb-2 font-bold">Birthday</label>
<input type="date" id="birthday" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div>
<label for="gender" class="block text-white mb-2 font-bold">Gender</label>
<select id="gender" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div id="idNumberContainer" class="hidden">
<label for="idNumber" class="block text-white mb-2 font-bold">ID Number <span class="text-xs text-gray-500">(Required for Chairman/Official)</span></label>
<input type="text" id="idNumber" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<div id="idNumberError" class="text-red-600 text-xs mt-1"></div>
</div>
<div>
<label for="registerUsername" class="block text-white mb-2 font-bold">Username</label>
<input type="text" id="registerUsername" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div>
<label for="email" class="block text-white mb-2 font-bold">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div>
<label for="registerPassword" class="block text-white mb-2 font-bold">Password</label>
<div class="relative">
<input type="password" id="registerPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<button type="button" class="absolute right-3 text-gray-500" style="top: 56%; transform: translateY(-50%);" onclick="togglePasswordVisibility('registerPassword')">
👁️
</button>
</div>
</div>
<div>
<label for="confirmPassword" class="block text-white mb-2 font-bold">Confirm Password</label>
<div class="relative">
<input type="password" id="confirmPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<button type="button" class="absolute right-3 text-gray-500" style="top: 56%; transform: translateY(-50%);" onclick="togglePasswordVisibility('confirmPassword')">
👁️
</button>
</div>
</div>
<div>
<label for="userRole" class="block text-white mb-2 font-bold">Account Type</label>
<select id="userRole" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="resident">Resident</option>
<option value="kagawad">KAGAWAD</option>
<option value="chairman">Chairman</option>
<option value="official">Barangay Official</option>
</select>
</div>
<button type="submit" class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition duration-300">Register</button>
<div id="registerError" class="text-red-600 text-xs mt-2"></div>
</form>
</div>
</div>
</section>
<script src="script.js"></script>
<script>
// Show/hide ID Number field based on role
document.getElementById('userRole').addEventListener('change', function() {
var role = this.value;
var idContainer = document.getElementById('idNumberContainer');
if (role === 'chairman' || role === 'official') {
idContainer.classList.remove('hidden');
} else {
idContainer.classList.add('hidden');
document.getElementById('idNumberError').textContent = '';
}
});
// Registration validation for ID Number
document.getElementById('registerForm').addEventListener('submit', function(e) {
var role = document.getElementById('userRole').value;
var idNumber = document.getElementById('idNumber').value.trim();
var idError = document.getElementById('idNumberError');
var regError = document.getElementById('registerError');
idError.textContent = '';
regError.textContent = '';
if (role === 'chairman' && idNumber !== '223012422') {
e.preventDefault();
idError.textContent = 'Chairman ID must be 223012422.';
return;
}
if (role === 'official' && idNumber !== '00212293') {
e.preventDefault();
idError.textContent = 'Official ID must be 00212293.';
return;
}
});
</script>
</body>
</html>