Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Email verification landing page states, expiration, resend email without auth #867

Merged
merged 4 commits into from
Mar 20, 2024
+114 −42
Merged

Email verification landing page states, expiration, resend email without auth #867

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf9efff
refactor verifyEmailPage, get expired case to work again
kiwansim Mar 19, 2024
d5389b2
add endpoint for email verification with user token
kiwansim Mar 19, 2024
a63b2c7
remove commented out code
kiwansim Mar 20, 2024
d423136
Update client/src/containers/VerifyEmailPage.tsx
kiwansim Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions client/src/components/AuthClient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,13 @@ const verifyEmail = async () => {
/**
* Sends request to resend the account verification link to the user's email
*/
const resendVerifyEmail = async () => {
const resendVerifyEmail = async (token?: string) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

optional token would only be included from the "verification link has expired" flow

try {
await postAuthRequest(`${BASE_URL}auth/resend_verify_email`);
if (token) {
await postAuthRequest(`${BASE_URL}auth/resend_verification_with_token?u=${token}`);
} else {
await postAuthRequest(`${BASE_URL}auth/resend_verification`);
}
return true;
} catch {
return false;
Expand Down Expand Up @@ -237,6 +241,8 @@ const postAuthRequest = async (
try {
if (result.ok) {
return await result.json();
} else {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't know how this else clause got removed, but this is necessary for any non-200 result status code and text to be returned.

checked that returning the non-200 result json works on other AuthClient functions that use postAuthRequest.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh yeah that's great to have for error handling

return await result.json();
}
} catch {
return result;
Expand Down
116 changes: 80 additions & 36 deletions client/src/containers/VerifyEmailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,55 +2,62 @@ import { useState, useEffect } from "react";
import { withI18n, withI18nProps } from "@lingui/react";
import { Trans, t } from "@lingui/macro";
import AuthClient, { VerifyStatusCode } from "../components/AuthClient";
import { JustfixUser } from "state-machine";
import Page from "components/Page";
import { useLocation } from "react-router-dom";

const VerifyEmailPage = withI18n()((props: withI18nProps) => {
const { i18n } = props;
const [user, setUser] = useState<JustfixUser>();
const { search } = useLocation();
const [loading, setLoading] = useState(true);
const [isVerified, setIsVerified] = useState(false);
const [isAlreadyVerified, setIsAlreadyVerified] = useState(false);
const [isExpired, setIsExpired] = useState(false);
const [isEmailResent, setIsEmailResent] = useState(false);

useEffect(() => {
const asyncFetchUser = async () => {
const _user = await AuthClient.fetchUser();
if (_user) {
setUser({
..._user,
subscriptions:
_user.subscriptions?.map((s: any) => {
return { ...s };
}) || [],
});
setIsVerified(_user.verified);
}
};
asyncFetchUser();
}, []);
const [unknownError, setUnknownError] = useState(false);
const params = new URLSearchParams(search);
const token = params.get("u") || "";

useEffect(() => {
const asyncVerifyEmail = async () => {
return await AuthClient.verifyEmail();
};

asyncVerifyEmail().then((result) => {
if (
result.statusCode === VerifyStatusCode.Success ||
result.statusCode === VerifyStatusCode.AlreadyVerified
) {
setIsVerified(true);
}

if (
result.statusCode === VerifyStatusCode.Expired ||
result.statusCode === VerifyStatusCode.Unknown
) {
setIsExpired(true);
switch (result.statusCode) {
case VerifyStatusCode.Success:
setIsVerified(true);
break;
case VerifyStatusCode.AlreadyVerified:
setIsVerified(true);
setIsAlreadyVerified(true);
break;
case VerifyStatusCode.Expired:
setIsExpired(true);
break;
default:
setUnknownError(true);
}
setLoading(false);
});
}, []);

const delaySeconds = 5;
const baseUrl = window.location.origin;
const redirectUrl = `${baseUrl}/${i18n.language}`;

const updateCountdown = () => {
let timeLeft = delaySeconds;
const delayInterval = delaySeconds * 100;

setInterval(() => {
timeLeft && timeLeft--; // prevents counter from going below 0
document.getElementById("countdown")!.textContent = timeLeft.toString();
if (timeLeft <= 0) {
document.location.href = redirectUrl;
}
}, delayInterval);
};

const expiredLinkPage = () => {
const resendEmailPage = (
<div className="text-center">
Expand All @@ -59,7 +66,7 @@ const VerifyEmailPage = withI18n()((props: withI18nProps) => {
<button
className="button is-secondary"
onClick={async () => {
setIsEmailResent(await AuthClient.resendVerifyEmail());
setIsEmailResent(await AuthClient.resendVerifyEmail(token));
}}
>
<Trans>Resend verification email</Trans>
kiwansim marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -72,16 +79,28 @@ const VerifyEmailPage = withI18n()((props: withI18nProps) => {
<Trans render="h4">Check your email inbox & spam</Trans>
<br />
<Trans>
Click the link we sent to verify your email address {!!user && user.email}. It may take a
few minutes to arrive. Once your email has been verified, you’ll be signed up for Data
Updates.
Click the link we sent to verify your email address. It may take a few minutes to arrive.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removing the user email here since user could be in expired verification link flow while not logged in

Once your email has been verified, you’ll be signed up for Data Updates.
</Trans>
</div>
);

return isEmailResent ? resendEmailConfirmation : resendEmailPage;
};

// TODO add error logging
const errorPage = () => (
<div className="text-center">
<Trans render="h4">We’re having trouble verifying your email at this time.</Trans>
<br />
<Trans>
Please try again later. If you’re still having issues, contact support@justfix.org.
<br />
<br />A report about this issue has been sent to our team.
</Trans>
</div>
);

const successPage = () => (
<div className="text-center">
<Trans render="h4">Email verified</Trans>
Expand All @@ -90,11 +109,36 @@ const VerifyEmailPage = withI18n()((props: withI18nProps) => {
</div>
);

const alreadyVerifiedPage = () => (
<div className="text-center">
<Trans render="h4">Your email is already verified</Trans>
<br />
<Trans className="text-center">You will be redirected back to Who Owns What in:</Trans>
<br />
<br>{updateCountdown()}</br>
<Trans className="d-flex justify-content-center">
<span id="countdown">{delaySeconds}</span> seconds
</Trans>
<br />
<br />
<Trans className="text-center">If you are not redirected, please click this link:</Trans>
<br />
<a href={redirectUrl}>{redirectUrl}</a>
</div>
);

return (
<Page title={i18n._(t`Verify your email address`)}>
<div className="TextPage Page">
<div className="page-container">
{isVerified ? successPage() : isExpired && expiredLinkPage()}
{!loading &&
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

loading var is necessary to prevent flickering of a different state as the AuthClient async calls are getting resolved.

the nested ternary operator is gross but i didn't have any other ideas. lmk if you do!

(isVerified
? isAlreadyVerified
? alreadyVerifiedPage()
: successPage()
: isExpired
? expiredLinkPage()
: unknownError && errorPage())}
</div>
</div>
</Page>
Expand Down
7 changes: 6 additions & 1 deletion jfauthprovider/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@
path("auth_check", views.auth_check, name="auth_check"),
path("account_exists/<str:email>", views.account_exists, name="account_exists"),
path("verify_email", views.verify_email, name="verify_email"),
path("resend_verify_email", views.resend_verify_email, name="resend_verify_email"),
path("resend_verification", views.resend_verification, name="resend_verification"),
path(
"resend_verification_with_token",
views.resend_verification_with_token,
name="resend_verification_with_token",
),
path("reset_password", views.password_reset_request, name="password_reset_request"),
path("set_password", views.password_reset, name="password_reset"),
path("change_password", views.password_change, name="password_change"),
Expand Down
21 changes: 19 additions & 2 deletions jfauthprovider/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,10 @@ def verify_email(request):


@api
def resend_verify_email(request):
def resend_verification(request):
try:
return authenticated_request(
"user/resend_verify_email/",
"user/resend_verification/",
request,
{
"origin": request.headers["Origin"],
Expand All @@ -128,6 +128,23 @@ def resend_verify_email(request):
return HttpResponse(content_type="application/json", status=401)


@api
def resend_verification_with_token(request):
try:
post_data = {
"token": request.GET.get("u"),
"origin": request.headers["Origin"],
}

return auth_server_request(
"POST",
"user/resend_verification_with_token/",
post_data,
)
except KeyError:
return HttpResponse(content_type="application/json", status=401)


@api
def password_reset_request(request):
post_data = {
Expand Down