-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaccount.html
131 lines (122 loc) · 4.58 KB
/
account.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delete Account</title>
<!-- Include Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background: #ff4d4d;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #cc0000;
}
.confirmation-dialog {
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Delete Account</h2>
<input type="email" id="email" placeholder="Enter your email">
<input type="password" id="password" placeholder="Enter your password">
<button onclick="verifyUser()">Verify</button>
<!-- Confirmation Dialog -->
<div id="confirmation-dialog" class="confirmation-dialog">
<p>Are you sure you want to delete your account? This action cannot be undone.</p>
<button onclick="deleteAccount()">Yes, Delete My Account</button>
<button onclick="cancelDelete()">Cancel</button>
</div>
<p id="message" style="color: red; margin-top: 10px;"></p>
</div>
<script>
// Firebase configuration
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();
// Verify user credentials
function verifyUser() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// Sign in with email and password
auth.signInWithEmailAndPassword(email, password)
.then((userCredential) => {
const user = userCredential.user;
document.getElementById('confirmation-dialog').style.display = 'block';
document.getElementById('message').textContent = '';
})
.catch((error) => {
document.getElementById('message').textContent = 'Invalid email or password.';
});
}
// Delete account
function deleteAccount() {
const user = auth.currentUser;
// Delete user from Firebase Authentication
user.delete()
.then(() => {
// Delete user data from Firestore
db.collection('users').doc(user.uid).delete()
.then(() => {
document.getElementById('message').textContent = 'Account deleted successfully.';
document.getElementById('confirmation-dialog').style.display = 'none';
})
.catch((error) => {
document.getElementById('message').textContent = 'Error deleting user data.';
});
})
.catch((error) => {
document.getElementById('message').textContent = 'Error deleting account.';
});
}
// Cancel delete
function cancelDelete() {
document.getElementById('confirmation-dialog').style.display = 'none';
}
</script>
</body>
</html>