mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-24 11:47:24 +02:00
Enable resending verification emails
This commit is contained in:
parent
e9ac2a8e71
commit
a6e39cc2c3
5 changed files with 87 additions and 21 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue