Enable resending verification emails

This commit is contained in:
Luke Vella 2022-04-12 11:04:55 +01:00
parent e9ac2a8e71
commit a6e39cc2c3
5 changed files with 87 additions and 21 deletions

View file

@ -1,14 +1,25 @@
import { formatRelative } from "date-fns";
import * as React from "react";
import { Trans, useTranslation } from "next-i18next";
import Tooltip from "../tooltip";
import Button from "../button";
import { usePoll } from "../use-poll";
import Popover from "../popover";
import { useMutation } from "react-query";
import axios from "axios";
export interface PollSubheaderProps {}
const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
const poll = usePoll();
const { t } = useTranslation("app");
const {
mutate: sendVerificationEmail,
isLoading: isSendingVerificationEmail,
isSuccess: didSendVerificationEmail,
} = useMutation(async () => {
await axios.post(`/api/poll/${poll.urlId}/verify`);
});
return (
<div className="text-slate-500">
<div className="md:inline">
@ -37,22 +48,40 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
Verified
</span>
) : (
<Tooltip
content={
<div className="max-w-sm">
<Popover
trigger={
<button className="badge transition-colors hover:text-indigo-500 hover:border-slate-300 hover:bg-slate-100 cursor-pointer text-slate-400">
Unverified
</button>
}
>
<div className="max-w-sm">
<div className="mb-4">
<Trans
t={t}
i18nKey="unverifiedMessage"
values={{ email: poll.user.email }}
components={{
b: <span className="email" />,
b: (
<span className="text-indigo-500 font-medium font-mono whitespace-nowrap" />
),
}}
/>
</div>
}
>
<span className="badge text-slate-400">Unverified</span>
</Tooltip>
{didSendVerificationEmail ? (
<div className="text-green-500">Verification email sent.</div>
) : (
<Button
onClick={() => {
sendVerificationEmail();
}}
loading={isSendingVerificationEmail}
>
Resend verification email
</Button>
)}
</div>
</Popover>
)
) : null}
</div>