-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathsignup.html
171 lines (152 loc) · 8.97 KB
/
signup.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-cover bg-center bg-no-repeat h-screen flex items-center justify-center" style="background-image: url('https://pic.re/image'); background-color: rgba(0, 0, 0, 0.7); background-blend-mode: overlay;">
<div class="bg-gray-800 p-8 rounded-lg shadow-lg w-80">
<div id="auth-container">
<!-- Sign Up Form -->
<div id="signup-form">
<h2 class="text-white text-2xl font-bold mb-6">Sign Up</h2>
<input type="text" id="signup-name" placeholder="Name" class="bg-gray-700 text-white border border-gray-600 rounded-md p-3 w-full mb-4">
<input type="text" id="signup-email" placeholder="Email" class="bg-gray-700 text-white border border-gray-600 rounded-md p-3 w-full mb-4">
<input type="password" id="signup-password" placeholder="Password" class="bg-gray-700 text-white border border-gray-600 rounded-md p-3 w-full mb-4">
<input type="file" id="profile-picture" class="bg-gray-600 text-white border border-gray-500 rounded-md p-2 w-full mb-4 cursor-pointer text-center">
<div id="upload-progress" class="bg-green-500 h-1 rounded-md mt-2 transition-width duration-300"></div>
<button onclick="window.signUp()" class="bg-gray-700 text-white p-3 rounded-md w-full mt-4 hover:bg-gray-600">Sign Up</button>
<p class="text-gray-400 mt-4 text-center">Already have an account? <a href="#" onclick="window.showLoginForm()" class="text-blue-400 hover:text-blue-300">Login</a></p>
</div>
<!-- Sign In Form -->
<div id="login-form" class="hidden">
<h2 class="text-white text-2xl font-bold mb-6">Sign In</h2>
<input type="text" id="login-email" placeholder="Email" class="bg-gray-700 text-white border border-gray-600 rounded-md p-3 w-full mb-4">
<input type="password" id="login-password" placeholder="Password" class="bg-gray-700 text-white border border-gray-600 rounded-md p-3 w-full mb-4">
<button onclick="window.signIn()" class="bg-gray-700 text-white p-3 rounded-md w-full mt-4 hover:bg-gray-600">Sign In</button>
<p class="text-gray-400 mt-4 text-center">Don't have an account? <a href="#" onclick="window.showSignupForm()" class="text-blue-400 hover:text-blue-300">Sign Up</a></p>
</div>
</div>
</div>
<div id="status-banner" class="hidden fixed top-0 left-0 w-full bg-green-600 text-white text-center p-3 z-50 transform -translate-y-full transition-transform duration-500 ease-in-out">
<span id="status-message"></span>
<div id="status-timeline" class="h-1 bg-white w-full transition-width duration-[5s]"></div>
</div>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.16.0/firebase-auth.js";
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "https://www.gstatic.com/firebasejs/9.16.0/firebase-storage.js";
import { getFirestore, doc, setDoc } from "https://www.gstatic.com/firebasejs/9.16.0/firebase-firestore.js";
import { getDatabase, ref as dbRef, set } from "https://www.gstatic.com/firebasejs/9.16.0/firebase-database.js";
// Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyBgonWKzerFz_YMUHBFIbGkGAr2de0OAQo",
authDomain: "aniteams-83c62.firebaseapp.com",
projectId: "aniteams-83c62",
storageBucket: "aniteams-83c62.appspot.com",
messagingSenderId: "571785825154",
appId: "1:571785825154:web:d8f684c660c28eab121d9b",
measurementId: "G-72YGQR0CPH"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const storage = getStorage(app);
const db = getFirestore(app);
const database = getDatabase(app);
window.showSignupForm = function() {
document.getElementById('signup-form').classList.remove('hidden');
document.getElementById('login-form').classList.add('hidden');
}
window.showLoginForm = function() {
document.getElementById('login-form').classList.remove('hidden');
document.getElementById('signup-form').classList.add('hidden');
}
function showStatusBanner(message, isSuccess) {
const banner = document.getElementById('status-banner');
const messageSpan = document.getElementById('status-message');
const timeline = document.getElementById('status-timeline');
messageSpan.innerText = message;
banner.className = isSuccess ? 'bg-green-600' : 'bg-red-600';
timeline.style.width = '100%';
banner.classList.remove('-translate-y-full');
setTimeout(() => {
banner.classList.add('-translate-y-full');
}, 5000); // Banner visible for 5 seconds
}
window.signUp = async function() {
const email = document.getElementById('signup-email').value;
const password = document.getElementById('signup-password').value;
const name = document.getElementById('signup-name').value;
const file = document.getElementById('profile-picture').files[0];
try {
// Create a user with email and password
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
const user = userCredential.user;
// Create paths in Realtime Database
await set(dbRef(database, 'users/' + user.uid), {
name: name,
email: email
});
await set(dbRef(database, 'bookmarks/' + user.uid), {});
if (file) {
const storageRef = ref(storage, 'profile_pictures/' + file.name);
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on('state_changed', (snapshot) => {
const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
document.getElementById('upload-progress').style.width = progress + '%';
}, (error) => {
console.error('Upload failed:', error);
showStatusBanner('Upload failed: ' + error.message, false);
}, async () => {
const downloadURL = await getDownloadURL(storageRef);
console.log('Upload successful!');
document.getElementById('upload-progress').style.width = '100%';
showStatusBanner('Upload complete', true);
// Save user data to Firestore
await setDoc(doc(db, 'users', user.uid), {
name: name,
email: email,
profilePictureURL: downloadURL
});
// Redirect to account.html
window.location.href = 'account.html';
});
} else {
// Save user data to Firestore without profile picture
await setDoc(doc(db, 'users', user.uid), {
name: name,
email: email,
profilePictureURL: null
});
// Redirect to account.html
window.location.href = 'account.html';
}
} catch (error) {
console.error('Error signing up:', error);
showStatusBanner('Error signing up: ' + error.message, false);
}
}
window.signIn = async function() {
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;
try {
await signInWithEmailAndPassword(auth, email, password);
showStatusBanner('Login successful!', true);
// Redirect to account.html
window.location.href = 'account.html';
} catch (error) {
console.error('Error signing in:', error);
showStatusBanner('Error signing in: ' + error.message, false);
}
}
// Check if user is already signed in
onAuthStateChanged(auth, (user) => {
if (user) {
window.location.href = 'index.html'; // Redirect to account.html if user is signed in
}
});
</script>
</body>
</html>