github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: reset password error handling (#4523)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-05-20 14:50:11 +05:30 committed by GitHub
parent 35f3716cb5
commit f8a443d6a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/helpers/authentication.helper.tsx
View File

@ -248,7 +248,7 @@ const errorCodeMessages: {
// Reset Password // Reset Password
[EAuthenticationErrorCodes.INVALID_PASSWORD_TOKEN]: { [EAuthenticationErrorCodes.INVALID_PASSWORD_TOKEN]: {
title: `Invalid password token`, title: `Invalid password token`,
message: () => `Invalid password token. Please try again.`, message: () => `Invalid password token.`,
}, },
[EAuthenticationErrorCodes.EXPIRED_PASSWORD_TOKEN]: { [EAuthenticationErrorCodes.EXPIRED_PASSWORD_TOKEN]: {
title: `Expired password token`, title: `Expired password token`,

25
web/pages/accounts/reset-password.tsx
View File

@ -7,10 +7,16 @@ import { Eye, EyeOff } from "lucide-react";
// ui // ui
import { Button, Input } from "@plane/ui"; import { Button, Input } from "@plane/ui";
// components // components
import { PasswordStrengthMeter } from "@/components/account"; import { AuthBanner, PasswordStrengthMeter } from "@/components/account";
import { PageHead } from "@/components/core"; import { PageHead } from "@/components/core";
// helpers // helpers
import { EPageTypes } from "@/helpers/authentication.helper"; import {
EAuthenticationErrorCodes,
EErrorAlertType,
EPageTypes,
TAuthErrorInfo,
authErrorHandler,
} from "@/helpers/authentication.helper";
import { API_BASE_URL } from "@/helpers/common.helper"; import { API_BASE_URL } from "@/helpers/common.helper";
import { getPasswordStrength } from "@/helpers/password.helper"; import { getPasswordStrength } from "@/helpers/password.helper";
// layouts // layouts
@ -43,7 +49,7 @@ const authService = new AuthService();
const ResetPasswordPage: NextPageWithLayout = () => { const ResetPasswordPage: NextPageWithLayout = () => {
// router // router
const router = useRouter(); const router = useRouter();
const { uidb64, token, email } = router.query; const { uidb64, token, email, error_code } = router.query;
// states // states
const [showPassword, setShowPassword] = useState({ const [showPassword, setShowPassword] = useState({
password: false, password: false,
@ -56,6 +62,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined); const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false); const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false); const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
// hooks // hooks
const { resolvedTheme } = useTheme(); const { resolvedTheme } = useTheme();
@ -81,6 +88,15 @@ const ResetPasswordPage: NextPageWithLayout = () => {
[resetFormData] [resetFormData]
); );
useEffect(() => {
if (error_code) {
const errorhandler = authErrorHandler(error_code?.toString() as EAuthenticationErrorCodes);
if (errorhandler) {
setErrorInfo(errorhandler);
}
}
}, [error_code]);
return ( return (
<div className="relative w-screen h-screen overflow-hidden"> <div className="relative w-screen h-screen overflow-hidden">
<PageHead title="Reset Password" /> <PageHead title="Reset Password" />
@ -106,6 +122,9 @@ const ResetPasswordPage: NextPageWithLayout = () => {
</h3> </h3>
<p className="font-medium text-onboarding-text-400">Secure your account with a strong password</p> <p className="font-medium text-onboarding-text-400">Secure your account with a strong password</p>
</div> </div>
{errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
<AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
)}
<form <form
className="mt-5 space-y-4" className="mt-5 space-y-4"
method="POST" method="POST"