-
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathverify.html
More file actions
192 lines (171 loc) · 6.91 KB
/
verify.html
File metadata and controls
192 lines (171 loc) · 6.91 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
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4SP - VERIFY</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-auth-compat.js"></script>
<script src="firebase-config.js"></script>
<script src="panic-key.js"></script>
<script src="url-changer.js"></script>
<style>
.verification-container {
background-color: #fff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
max-width: 900px;
margin: 50px auto;
overflow: hidden;
padding: 60px 40px;
text-align: center;
}
.verification-container h2 {
font-family: 'PrimaryFont', sans-serif;
font-size: 2.5em;
color: #333;
margin-bottom: 20px;
}
.verification-container p {
font-family: 'SecondaryFont', sans-serif;
font-size: 1.2em;
color: #555;
line-height: 1.6;
margin-top: 0;
}
.message-area {
width: 100%;
margin-top: 25px;
min-height: 20px;
font-size: 1em;
}
.error-message {
color: #d9534f;
}
.success-message {
color: #28a745; /* Darker Green */
}
.info-message {
color: #555;
}
.message-area a {
color: #6720bd;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
.message-area a:hover {
color: #5a1aa8;
}
#countdown {
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<section class="hero-section dark-bg">
<div class="container">
<h1>VERIFY YOUR ACCOUNT</h1>
</div>
</section>
<header class="main-header light-bg">
<div class="container">
<div class="logo">
<a href="index.html"><img src="images/logo-dark.png" alt="4SP Logo"></a>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="login.html">LOGIN</a></li>
</ul>
</nav>
<div class="auth-buttons">
<a href="login.html" class="btn btn-login">LOGIN</a>
<a href="signup.html" class="btn btn-signup">SIGN UP</a>
</div>
</div>
</header>
<div class="verification-container">
<h2 id="message-title">Processing Request...</h2>
<p id="message-body" class="message-area info-message">
Please wait a moment while we process your request.
</p>
<p class="message-area" id="redirect-message"></p>
</div>
<footer>
<div class="container">
<p>© 2025 4SP. All rights reserved.</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const auth = firebase.auth();
const titleEl = document.getElementById('message-title');
const bodyEl = document.getElementById('message-body');
const redirectMessageEl = document.getElementById('redirect-message');
const showMessage = (title, message, messageClass) => {
titleEl.textContent = title;
bodyEl.innerHTML = message;
bodyEl.className = `message-area ${messageClass}`;
redirectMessageEl.innerHTML = '';
};
const startRedirectCountdown = (durationInSeconds) => {
let timer = durationInSeconds;
const countdownInterval = setInterval(() => {
if (timer <= 0) {
clearInterval(countdownInterval);
window.location.href = 'login.html';
} else {
redirectMessageEl.innerHTML = `Redirecting you to the login page in <span id="countdown">${timer}</span> seconds... <br><a href="login.html">Click here to login now.</a>`;
timer--;
}
}, 1000);
};
const handleAction = async () => {
const params = new URLSearchParams(window.location.search);
const mode = params.get('mode');
const actionCode = params.get('oobCode');
if (!mode || !actionCode) {
showMessage('Invalid Link', 'The verification link is missing information. Please use the link from your email.', 'error-message');
return;
}
try {
switch (mode) {
case 'verifyEmail':
await auth.applyActionCode(actionCode);
showMessage('Success!', 'Your email has been verified.', 'success-message');
startRedirectCountdown(5); // Start a 5-second countdown
break;
default:
showMessage('Unknown Action', 'This link corresponds to an unrecognized action.', 'error-message');
}
} catch (error) {
console.error('Firebase action error:', error);
let title = 'Action Failed';
let message = 'An unknown error occurred.';
switch (error.code) {
case 'auth/expired-action-code':
message = 'This link has expired. Please request a new one by trying to sign up again.';
break;
case 'auth/invalid-action-code':
message = 'This link is invalid or has already been used. Please log in if you have already verified.';
break;
case 'auth/user-disabled':
message = 'Your account has been disabled. Please contact support.';
break;
default:
message = 'We could not complete your request at this time. Please try again later.';
}
showMessage(title, message, 'error-message');
redirectMessageEl.innerHTML = '<br><a href="login.html">Back to Login</a>';
redirectMessageEl.className = 'message-area info-message';
}
};
handleAction();
});
</script>
</body>
</html>