feat: move form into useForm from antd (#2403)

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: palashgdev <palashgdev@gmail.com>
Co-authored-by: Vishal Sharma <makeavish786@gmail.com>

frontend/src/container/Login/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, Space, Tooltip, Typography } from 'antd';
+import { Button, Form, Input, Space, Tooltip, Typography } from 'antd';
 import getUserVersion from 'api/user/getVersion';
 import loginApi from 'api/user/login';
 import loginPrecheckApi from 'api/user/loginPrecheck';
@@ -23,6 +23,8 @@ interface LoginProps {
 	withPassword: string;
 }
 
+type FormValues = { email: string; password: string };
+
 function Login({
 	jwt,
 	refreshjwt,
@@ -32,8 +34,6 @@ function Login({
 }: LoginProps): JSX.Element {
 	const { t } = useTranslation(['login']);
 	const [isLoading, setIsLoading] = useState<boolean>(false);
-	const [email, setEmail] = useState<string>('');
-	const [password, setPassword] = useState<string>('');
 
 	const [precheckResult, setPrecheckResult] = useState<PrecheckResultType>({
 		sso: false,
@@ -67,6 +67,8 @@ function Login({
 		}
 	}, [getUserVersionResponse]);
 
+	const [form] = Form.useForm<FormValues>();
+
 	useEffect(() => {
 		if (withPassword === 'Y') {
 			setPrecheckComplete(true);
@@ -94,6 +96,7 @@ function Login({
 	}, [ssoerror, t, notifications]);
 
 	const onNextHandler = async (): Promise<void> => {
+		const email = form.getFieldValue('email');
 		if (!email) {
 			notifications.error({
 				message: t('invalid_email'),
@@ -129,22 +132,11 @@ function Login({
 		setPrecheckInProcess(false);
 	};
 
-	const onChangeHandler = (
-		setFunc: React.Dispatch<React.SetStateAction<string>>,
-		value: string,
-	): void => {
-		setFunc(value);
-	};
-
 	const { sso, canSelfRegister } = precheckResult;
 
-	const onSubmitHandler: React.FormEventHandler<HTMLFormElement> = async (
-		event,
-	) => {
+	const onSubmitHandler: () => Promise<void> = async () => {
 		try {
-			event.preventDefault();
-			event.persist();
-
+			const { email, password } = form.getFieldsValue();
 			if (!precheckComplete) {
 				onNextHandler();
 				return;
@@ -208,33 +200,27 @@ function Login({
 
 	return (
 		<FormWrapper>
-			<FormContainer onSubmit={onSubmitHandler}>
+			<FormContainer form={form} onFinish={onSubmitHandler}>
 				<Title level={4}>{t('login_page_title')}</Title>
 				<ParentContainer>
 					<Label htmlFor="signupEmail">{t('label_email')}</Label>
-					<Input
-						placeholder={t('placeholder_email')}
-						type="email"
-						autoFocus
-						required
-						id="loginEmail"
-						onChange={(event): void => onChangeHandler(setEmail, event.target.value)}
-						value={email}
-						disabled={isLoading}
-					/>
+					<FormContainer.Item name="email">
+						<Input
+							type="email"
+							id="loginEmail"
+							required
+							placeholder={t('placeholder_email')}
+							autoFocus
+							disabled={isLoading}
+						/>
+					</FormContainer.Item>
 				</ParentContainer>
 				{precheckComplete && !sso && (
 					<ParentContainer>
 						<Label htmlFor="Password">{t('label_password')}</Label>
-						<Input.Password
-							required
-							id="currentPassword"
-							onChange={(event): void =>
-								onChangeHandler(setPassword, event.target.value)
-							}
-							disabled={isLoading}
-							value={password}
-						/>
+						<FormContainer.Item name="password">
+							<Input.Password required id="currentPassword" disabled={isLoading} />
+						</FormContainer.Item>
 						<Tooltip title={t('prompt_forgot_password')}>
 							<Typography.Link>{t('forgot_password')}</Typography.Link>
 						</Tooltip>

frontend/src/container/Login/styles.ts

@@ -1,4 +1,4 @@
-import { Card } from 'antd';
+import { Card, Form } from 'antd';
 import styled from 'styled-components';
 
 export const FormWrapper = styled(Card)`
@@ -22,11 +22,15 @@ export const Label = styled.label`
 	line-height: 24px;
 `;
 
-export const FormContainer = styled.form`
+export const FormContainer = styled(Form)`
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	width: 100%;
+
+	& .ant-form-item {
+		margin-bottom: 0px;
+	}
 `;
 
 export const ParentContainer = styled.div`

frontend/src/container/ResetPassword/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, Typography } from 'antd';
+import { Button, Form, Input, Typography } from 'antd';
 import resetPasswordApi from 'api/user/resetPassword';
 import { Logout } from 'api/utils';
 import WelcomeLeftContainer from 'components/WelcomeLeftContainer';
@@ -10,13 +10,13 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-use';
 
-import { ButtonContainer, FormWrapper } from './styles';
+import { ButtonContainer, FormContainer, FormWrapper } from './styles';
 
 const { Title } = Typography;
 
+type FormValues = { password: string; confirmPassword: string };
+
 function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
-	const [password, setPassword] = useState<string>('');
-	const [confirmPassword, setConfirmPassword] = useState<string>('');
 	const [confirmPasswordError, setConfirmPasswordError] = useState<boolean>(
 		false,
 	);
@@ -27,6 +27,7 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 	const token = params.get('token');
 	const { notifications } = useNotifications();
 
+	const [form] = Form.useForm<FormValues>();
 	useEffect(() => {
 		if (!token) {
 			Logout();
@@ -34,20 +35,10 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 		}
 	}, [token]);
 
-	const setState = (
-		value: string,
-		setFunction: React.Dispatch<React.SetStateAction<string>>,
-	): void => {
-		setFunction(value);
-	};
-
-	const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (
-		event,
-	): Promise<void> => {
+	const handleSubmit: () => Promise<void> = async () => {
 		try {
 			setLoading(true);
-			event.preventDefault();
-			event.persist();
+			const { password } = form.getFieldsValue();
 
 			const response = await resetPasswordApi({
 				password,
@@ -81,40 +72,38 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 			});
 		}
 	};
+	const handleValuesChange: (changedValues: FormValues) => void = (
+		changedValues,
+	) => {
+		if ('confirmPassword' in changedValues) {
+			const { confirmPassword } = changedValues;
+
+			const isSamePassword = form.getFieldValue('password') === confirmPassword;
+			setConfirmPasswordError(!isSamePassword);
+		}
+	};
 
 	return (
 		<WelcomeLeftContainer version={version}>
 			<FormWrapper>
-				<form onSubmit={handleSubmit}>
+				<FormContainer
+					form={form}
+					onValuesChange={handleValuesChange}
+					onFinish={handleSubmit}
+				>
 					<Title level={4}>Reset Your Password</Title>
 
 					<div>
 						<Label htmlFor="Password">Password</Label>
-						<Input.Password
-							value={password}
-							onChange={(e): void => {
-								setState(e.target.value, setPassword);
-							}}
-							required
-							id="currentPassword"
-						/>
+						<FormContainer.Item noStyle name="password">
+							<Input.Password required id="currentPassword" />
+						</FormContainer.Item>
 					</div>
 					<div>
 						<Label htmlFor="ConfirmPassword">Confirm Password</Label>
-						<Input.Password
-							value={confirmPassword}
-							onChange={(e): void => {
-								const updateValue = e.target.value;
-								setState(updateValue, setConfirmPassword);
-								if (password !== updateValue) {
-									setConfirmPasswordError(true);
-								} else {
-									setConfirmPasswordError(false);
-								}
-							}}
-							required
-							id="UpdatePassword"
-						/>
+						<FormContainer.Item noStyle name="confirmPassword">
+							<Input.Password required id="UpdatePassword" />
+						</FormContainer.Item>
 
 						{confirmPasswordError && (
 							<Typography.Paragraph
@@ -137,8 +126,8 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 							loading={loading}
 							disabled={
 								loading ||
-								!password ||
-								!confirmPassword ||
+								!form.getFieldValue('password') ||
+								!form.getFieldValue('confirmPassword') ||
 								confirmPasswordError ||
 								token === null
 							}
@@ -146,7 +135,7 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 							Get Started
 						</Button>
 					</ButtonContainer>
-				</form>
+				</FormContainer>
 			</FormWrapper>
 		</WelcomeLeftContainer>
 	);

frontend/src/container/ResetPassword/styles.ts

@@ -1,4 +1,4 @@
-import { Card } from 'antd';
+import { Card, Form } from 'antd';
 import styled from 'styled-components';
 
 export const FormWrapper = styled(Card)`
@@ -14,3 +14,9 @@ export const ButtonContainer = styled.div`
 	justify-content: center;
 	align-items: center;
 `;
+
+export const FormContainer = styled(Form)`
+	& .ant-form-item {
+		margin-bottom: 0px;
+	}
+`;

frontend/src/pages/SignUp/SignUp.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, Space, Switch, Typography } from 'antd';
+import { Button, Form, Input, Space, Switch, Typography } from 'antd';
 import editOrg from 'api/user/editOrg';
 import getInviteDetails from 'api/user/getInviteDetails';
 import loginApi from 'api/user/login';
@@ -16,11 +16,27 @@ import { SuccessResponse } from 'types/api';
 import { PayloadProps } from 'types/api/user/getUser';
 import * as loginPrecheck from 'types/api/user/loginPrecheck';
 
-import { ButtonContainer, FormWrapper, Label, MarginTop } from './styles';
+import {
+	ButtonContainer,
+	FormContainer,
+	FormWrapper,
+	Label,
+	MarginTop,
+} from './styles';
 import { isPasswordNotValidMessage, isPasswordValid } from './utils';
 
 const { Title } = Typography;
 
+type FormValues = {
+	firstName: string;
+	email: string;
+	organizationName: string;
+	password: string;
+	confirmPassword: string;
+	hasOptedUpdates: boolean;
+	isAnonymous: boolean;
+};
+
 function SignUp({ version }: SignUpProps): JSX.Element {
 	const { t } = useTranslation(['signup']);
 	const [loading, setLoading] = useState(false);
@@ -30,13 +46,6 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		isUser: false,
 	});
 
-	const [firstName, setFirstName] = useState<string>('');
-	const [email, setEmail] = useState<string>('');
-	const [organizationName, setOrganizationName] = useState<string>('');
-	const [hasOptedUpdates, setHasOptedUpdates] = useState<boolean>(true);
-	const [isAnonymous, setIsAnonymous] = useState<boolean>(false);
-	const [password, setPassword] = useState<string>('');
-	const [confirmPassword, setConfirmPassword] = useState<string>('');
 	const [confirmPasswordError, setConfirmPasswordError] = useState<boolean>(
 		false,
 	);
@@ -58,6 +67,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 	});
 
 	const { notifications } = useNotifications();
+	const [form] = Form.useForm<FormValues>();
 
 	useEffect(() => {
 		if (
@@ -66,9 +76,9 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		) {
 			const responseDetails = getInviteDetailsResponse.data.payload;
 			if (responseDetails.precheck) setPrecheck(responseDetails.precheck);
-			setFirstName(responseDetails.name);
-			setEmail(responseDetails.email);
-			setOrganizationName(responseDetails.organization);
+			form.setFieldValue('firstName', responseDetails.name);
+			form.setFieldValue('email', responseDetails.email);
+			form.setFieldValue('organizationName', responseDetails.organization);
 			setIsDetailsDisable(true);
 		}
 		if (
@@ -86,21 +96,17 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		getInviteDetailsResponse.status,
 		getInviteDetailsResponse,
 		notifications,
+		form,
 	]);
 
-	const setState = (
-		value: string,
-		setFunction: React.Dispatch<React.SetStateAction<string>>,
-	): void => {
-		setFunction(value);
-	};
-
 	const isPreferenceVisible = token === null;
 
 	const commonHandler = async (
+		values: FormValues,
 		callback: (e: SuccessResponse<PayloadProps>) => Promise<void> | VoidFunction,
 	): Promise<void> => {
 		try {
+			const { organizationName, password, firstName, email } = values;
 			const response = await signUpApi({
 				email,
 				name: firstName,
@@ -145,6 +151,11 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 	const onAdminAfterLogin = async (
 		userResponse: SuccessResponse<PayloadProps>,
 	): Promise<void> => {
+		const {
+			organizationName,
+			isAnonymous,
+			hasOptedUpdates,
+		} = form.getFieldsValue();
 		const editResponse = await editOrg({
 			isAnonymous,
 			name: organizationName,
@@ -159,9 +170,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 			});
 		}
 	};
-	const handleSubmitSSO = async (
-		e: React.FormEvent<HTMLFormElement>,
-	): Promise<void> => {
+	const handleSubmitSSO = async (): Promise<void> => {
 		if (!params.get('token')) {
 			notifications.error({
 				message: t('token_required'),
@@ -171,12 +180,12 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		setLoading(true);
 
 		try {
-			e.preventDefault();
+			const values = form.getFieldsValue();
 			const response = await signUpApi({
-				email,
-				name: firstName,
-				orgName: organizationName,
-				password,
+				email: values.email,
+				name: values.firstName,
+				orgName: values.organizationName,
+				password: values.password,
 				token: params.get('token') || undefined,
 				sourceUrl: encodeURIComponent(window.location.href),
 			});
@@ -207,22 +216,23 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		setLoading(false);
 	};
 
-	const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+	const handleSubmit = (): void => {
 		(async (): Promise<void> => {
 			try {
-				e.preventDefault();
+				const values = form.getFieldsValue();
 				setLoading(true);
 
-				if (!isPasswordValid(password)) {
+				if (!isPasswordValid(values.password)) {
 					setIsPasswordPolicyError(true);
 					setLoading(false);
 					return;
 				}
 
 				if (isPreferenceVisible) {
-					await commonHandler(onAdminAfterLogin);
+					await commonHandler(values, onAdminAfterLogin);
 				} else {
 					await commonHandler(
+						values,
 						async (): Promise<void> => {
 							history.push(ROUTES.APPLICATION);
 						},
@@ -239,108 +249,101 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		})();
 	};
 
-	const onSwitchHandler = (
-		value: boolean,
-		setFunction: React.Dispatch<React.SetStateAction<boolean>>,
-	): void => {
-		setFunction(value);
-	};
-
 	const getIsNameVisible = (): boolean =>
-		!(firstName.length === 0 && !isPreferenceVisible);
+		!(form.getFieldValue('firstName') === 0 && !isPreferenceVisible);
 
 	const isNameVisible = getIsNameVisible();
 
-	useEffect(() => {
-		if (!isPasswordValid(password) && password.length) {
-			setIsPasswordPolicyError(true);
-		} else {
-			setIsPasswordPolicyError(false);
-		}
+	const handleValuesChange: (changedValues: Partial<FormValues>) => void = (
+		changedValues,
+	) => {
+		if ('password' in changedValues || 'confirmPassword' in changedValues) {
+			const { password, confirmPassword } = form.getFieldsValue();
 
-		if (password !== confirmPassword) {
-			setConfirmPasswordError(true);
-		} else {
-			setConfirmPasswordError(false);
+			const isInvalidPassword = !isPasswordValid(password) && password.length > 0;
+			setIsPasswordPolicyError(isInvalidPassword);
+
+			const isSamePassword = password === confirmPassword;
+			setConfirmPasswordError(!isSamePassword);
 		}
-	}, [password, confirmPassword]);
+	};
+
+	const isValidForm: () => boolean = () => {
+		const values = form.getFieldsValue();
+		return (
+			loading ||
+			!values.email ||
+			!values.organizationName ||
+			(!precheck.sso && (!values.password || !values.confirmPassword)) ||
+			(!isDetailsDisable && !values.firstName) ||
+			confirmPasswordError ||
+			isPasswordPolicyError
+		);
+	};
 
 	return (
 		<WelcomeLeftContainer version={version}>
 			<FormWrapper>
-				<form onSubmit={!precheck.sso ? handleSubmit : handleSubmitSSO}>
+				<FormContainer
+					onFinish={!precheck.sso ? handleSubmit : handleSubmitSSO}
+					onValuesChange={handleValuesChange}
+					initialValues={{ hasOptedUpdates: true, isAnonymous: false }}
+					form={form}
+				>
 					<Title level={4}>Create your account</Title>
 					<div>
 						<Label htmlFor="signupEmail">{t('label_email')}</Label>
-						<Input
-							placeholder={t('placeholder_email')}
-							type="email"
-							autoFocus
-							value={email}
-							onChange={(e): void => {
-								setState(e.target.value, setEmail);
-							}}
-							required
-							id="signupEmail"
-							disabled={isDetailsDisable}
-						/>
+						<FormContainer.Item noStyle name="email">
+							<Input
+								placeholder={t('placeholder_email')}
+								type="email"
+								autoFocus
+								required
+								id="signupEmail"
+								disabled={isDetailsDisable}
+							/>
+						</FormContainer.Item>
 					</div>
 
 					{isNameVisible && (
 						<div>
-							<Label htmlFor="signupFirstName">{t('label_firstname')}</Label>
-							<Input
-								placeholder={t('placeholder_firstname')}
-								value={firstName}
-								onChange={(e): void => {
-									setState(e.target.value, setFirstName);
-								}}
-								required
-								id="signupFirstName"
-								disabled={isDetailsDisable}
-							/>
+							<Label htmlFor="signupFirstName">{t('label_firstname')}</Label>{' '}
+							<FormContainer.Item noStyle name="firstName">
+								<Input
+									placeholder={t('placeholder_firstname')}
+									required
+									id="signupFirstName"
+									disabled={isDetailsDisable}
+								/>
+							</FormContainer.Item>
 						</div>
 					)}
 
 					<div>
-						<Label htmlFor="organizationName">{t('label_orgname')}</Label>
-						<Input
-							placeholder={t('placeholder_orgname')}
-							value={organizationName}
-							onChange={(e): void => {
-								setState(e.target.value, setOrganizationName);
-							}}
-							required
-							id="organizationName"
-							disabled={isDetailsDisable}
-						/>
+						<Label htmlFor="organizationName">{t('label_orgname')}</Label>{' '}
+						<FormContainer.Item noStyle name="organizationName">
+							<Input
+								placeholder={t('placeholder_orgname')}
+								required
+								id="organizationName"
+								disabled={isDetailsDisable}
+							/>
+						</FormContainer.Item>
 					</div>
 					{!precheck.sso && (
 						<div>
-							<Label htmlFor="Password">{t('label_password')}</Label>
-							<Input.Password
-								value={password}
-								onChange={(e): void => {
-									setState(e.target.value, setPassword);
-								}}
-								required
-								id="currentPassword"
-							/>
+							<Label htmlFor="Password">{t('label_password')}</Label>{' '}
+							<FormContainer.Item noStyle name="password">
+								<Input.Password required id="currentPassword" />
+							</FormContainer.Item>
 						</div>
 					)}
 					{!precheck.sso && (
 						<div>
-							<Label htmlFor="ConfirmPassword">{t('label_confirm_password')}</Label>
-							<Input.Password
-								value={confirmPassword}
-								onChange={(e): void => {
-									const updateValue = e.target.value;
-									setState(updateValue, setConfirmPassword);
-								}}
-								required
-								id="confirmPassword"
-							/>
-
+							<Label htmlFor="ConfirmPassword">{t('label_confirm_password')}</Label>{' '}
+							<FormContainer.Item noStyle name="confirmPassword">
+								<Input.Password required id="confirmPassword" />
+							</FormContainer.Item>
 							{confirmPasswordError && (
 								<Typography.Paragraph
 									italic
@@ -371,20 +374,23 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 						<>
 							<MarginTop marginTop="2.4375rem">
 								<Space>
-									<Switch
-										onChange={(value): void => onSwitchHandler(value, setHasOptedUpdates)}
-										checked={hasOptedUpdates}
-									/>
+									<FormContainer.Item
+										noStyle
+										name="hasOptedUpdates"
+										valuePropName="checked"
+									>
+										<Switch />
+									</FormContainer.Item>
+
 									<Typography>{t('prompt_keepme_posted')} </Typography>
 								</Space>
 							</MarginTop>
 
 							<MarginTop marginTop="0.5rem">
 								<Space>
-									<Switch
-										onChange={(value): void => onSwitchHandler(value, setIsAnonymous)}
-										checked={isAnonymous}
-									/>
+									<FormContainer.Item noStyle name="isAnonymous" valuePropName="checked">
+										<Switch />
+									</FormContainer.Item>
 									<Typography>{t('prompt_anonymise')}</Typography>
 								</Space>
 							</MarginTop>
@@ -410,20 +416,12 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 							htmlType="submit"
 							data-attr="signup"
 							loading={loading}
-							disabled={
-								loading ||
-								!email ||
-								!organizationName ||
-								(!precheck.sso && (!password || !confirmPassword)) ||
-								(!isDetailsDisable && !firstName) ||
-								confirmPasswordError ||
-								isPasswordPolicyError
-							}
+							disabled={isValidForm()}
 						>
 							{t('button_get_started')}
 						</Button>
 					</ButtonContainer>
-				</form>
+				</FormContainer>
 			</FormWrapper>
 		</WelcomeLeftContainer>
 	);

frontend/src/pages/SignUp/styles.ts

@@ -1,4 +1,4 @@
-import { Card } from 'antd';
+import { Card, Form } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -31,3 +31,9 @@ interface Props {
 export const MarginTop = styled.div<Props>`
 	margin-top: ${({ marginTop = 0 }): number | string => marginTop};
 `;
+
+export const FormContainer = styled(Form)`
+	& .ant-form-item {
+		margin-bottom: 0px;
+	}
+`;