AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Update: update confirm user, user account page

Browse Source
This commit is contained in:
Aaron William Po
2023-05-31 21:00:01 -04:00
parent 06ae380b8f
commit 49565d0533
8 changed files with 293 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/pages/users/confirm.tsx
View File

@@ -1,125 +1,73 @@
import UserContext from '@/contexts/UserContext';
import useConfirmUser from '@/hooks/auth/useConfirmUser';
import createErrorToast from '@/util/createErrorToast';
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { FC, useContext, useState } from 'react';
import { FC, useState } from 'react';
import { toast } from 'react-hot-toast';
import useSWR from 'swr';
const useSendConfirmUserRequest = () => {
const router = useRouter();
const token = router.query.token as string | undefined;
const { data, error } = useSWR(`/api/users/confirm?token=${token}`, async (url) => {
if (!token) {
throw new Error('Token must be provided.');
}
const response = await fetch(url);
if (!response.ok) {
throw new Error(response.statusText);
}
const json = await response.json();
const parsed = APIResponseValidationSchema.safeParse(json);
if (!parsed.success) {
throw new Error('API response validation failed.');
}
return parsed.data;
});
return { data, error: error as unknown };
};
const ConfirmUserPage: FC = () => {
const router = useRouter();
const { error, data } = useSendConfirmUserRequest();
const { user } = useContext(UserContext);
const { needsToLogin, tokenInvalid } = useConfirmUser();
const needsToLogin =
error instanceof Error && error.message === 'Unauthorized' && !user;
const tokenExpired = error instanceof Error && error.message === 'Unauthorized' && user;
const [confirmationResent, setConfirmationResent] = useState(false);
const onClick = async () => {
const resentConfirmationLoadingToast = toast.loading(
'Resending your confirmation email.',
);
try {
const response = await fetch('/api/users/resend-confirmation', {
method: 'POST',
});
if (!response.ok) {
throw new Error('Something went wrong.');
}
if (user?.accountIsVerified) {
router.push('/users/current');
return null;
}
toast.remove(resentConfirmationLoadingToast);
toast.success('Sent a new confirmation email.');
if (data) {
router.push('/users/current');
return null;
}
setConfirmationResent(true);
} catch (err) {
createErrorToast(err);
}
};
if (needsToLogin) {
return (
<>
<Head>
<title>Confirm User | The Biergarten App</title>
</Head>
<div className="flex h-full flex-col items-center justify-center">
return (
<>
<Head>
<title>Confirm User | The Biergarten App</title>
</Head>
<div className="flex h-full flex-col items-center justify-center space-y-4">
{needsToLogin && (
<p className="text-center text-xl font-bold">
Please login to confirm your account.
</p>
</div>
</>
);
}
if (tokenExpired) {
const onClick = async () => {
const loadingToast = toast.loading('Resending your confirmation email.');
try {
const response = await fetch('/api/users/resend-confirmation', {
method: 'POST',
});
if (!response.ok) {
throw new Error('Something went wrong.');
}
)}
toast.remove(loadingToast);
toast.success('Sent a new confirmation email.');
{!needsToLogin && tokenInvalid && !confirmationResent && (
<>
<p className="text-center text-2xl font-bold">
Your confirmation token is invalid or is expired.
</p>
<button
className="btn-outline btn-sm btn normal-case"
onClick={onClick}
type="button"
>
Click here to request a new token.
</button>
</>
)}
setConfirmationResent(true);
} catch (err) {
createErrorToast(err);
}
};
return (
<>
<Head>
<title>Confirm User | The Biergarten App</title>
</Head>
<div className="flex h-full flex-col items-center justify-center space-y-4">
{!confirmationResent ? (
<>
<p className="text-center text-2xl font-bold">
Your confirmation token is expired.
</p>
<button
className="btn-outline btn-sm btn normal-case"
onClick={onClick}
type="button"
>
Click here to request a new token.
</button>
</>
) : (
<>
<p className="text-center text-2xl font-bold">
Resent your confirmation link.
</p>
<p className="font-xl text-center">Please check your email.</p>
</>
)}
</div>
</>
);
}
return null;
{!needsToLogin && tokenInvalid && confirmationResent && (
<>
<p className="text-center text-2xl font-bold">
Resent your confirmation link.
</p>
<p className="font-xl text-center">Please check your email.</p>
</>
)}
</div>
</>
);
};
export default ConfirmUserPage;

2
src/pages/users/current.tsx
View File

@@ -20,7 +20,7 @@ const ProtectedPage: NextPage = () => {
return (
<>
<Head>
<title>Hello, {user?.firstName}! | The Biergarten App</title>
<title>Hello! | The Biergarten App</title>
</Head>
<div className="flex h-full flex-col items-center justify-center space-y-3 bg-primary text-center">
{isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />}