Refactor verification pending page

pull/3813/head
Kamran Ahmed 2 years ago
parent 3dfaad8704
commit d29aeaf000
  1. 80
      src/pages/verification-pending.astro

@ -1,5 +1,4 @@
---
import AstroIcon from '../components/AstroIcon.astro';
import SettingLayout from '../layouts/SettingLayout.astro';
import { VerificationEmailMessage } from '../components/RegistrationFlow/VerificationEmailMessage';
---
@ -9,82 +8,3 @@ import { VerificationEmailMessage } from '../components/RegistrationFlow/Verific
<VerificationEmailMessage client:load />
</section>
</SettingLayout>
<script>
import Cookies from 'js-cookie';
import { TOKEN_COOKIE_NAME } from '../lib/constants';
const emailTo = document.querySelector('[data-email-to]');
const resendButton = document.querySelector('button[data-resend-button]');
as;
HTMLButtonElement | null;
const message = document.querySelector('[data-message]');
as;
HTMLDivElement | null;
const token = Cookies.get(TOKEN_COOKIE_NAME);
let email = '';
window.addEventListener('load', () => {
// Get all query params and send them to v1-github-callback
const urlParams = new URLSearchParams(window.location.search);
email = urlParams.get('email');
as;
string;
if (!email || token) {
// TODO: redirect to home page
return window.location.replace('/');
}
if (emailTo?.textContent) {
// Make resend button clickable
resendButton?.removeAttribute('disabled');
emailTo.textContent = email;
}
});
// Handle resend button click
resendButton?.addEventListener('click', async () => {
// Disable button
resendButton.setAttribute('disabled', 'true');
// Send request to resend email
try {
const res = await fetch(
'http://localhost:8080/v1-send-verification-email',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
}),
}
);
const json = await res.json();
// If the response isn't ok, we'll throw an error
console.log(res);
if (!res.ok) {
throw new Error(json.message);
}
// If the response is ok, we'll show a success message
if (message?.innerHTML === '' || message?.innerHTML) {
message.innerHTML = `<div class="mt-2 rounded-lg p-2 bg-green-100 text-green-800">Verification instructions have been sent to your email.</div>`;
}
resendButton.removeAttribute('disabled');
} catch (error: any) {
console.error(error);
if (message?.innerHTML === '' || message?.innerHTML) {
message.innerHTML = `<div class="mt-2 rounded-lg p-2 bg-red-100 text-red-800">${error?.message}</div>`;
}
// Enable the resend button
resendButton.removeAttribute('disabled');
}
});
</script>

Loading…
Cancel
Save