Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: move form into useForm from antd #2403

Merged
merged 9 commits into from
Mar 7, 2023
Merged

feat: move form into useForm from antd #2403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0a6bcd3
feat: move form into useForm from antd
gitstart Feb 27, 2023
294e4a2
Merge branch 'develop' into SGNZOSS-37
gitstart Feb 28, 2023
6d9a98a
Merge branch 'develop' into SGNZOSS-37
palashgdev Feb 28, 2023
c6d5b1e
Merge branch 'develop' into SGNZOSS-37
gitstart Mar 1, 2023
dc8a592
Merge branch 'develop' into SGNZOSS-37
palashgdev Mar 2, 2023
fa60dfb
Merge branch 'develop' into SGNZOSS-37
palashgdev Mar 3, 2023
6d7d24e
Merge branch 'develop' into SGNZOSS-37
makeavish Mar 3, 2023
594eb5e
Merge branch 'develop' into SGNZOSS-37
gitstart Mar 6, 2023
2ee185b
Merge branch 'develop' into SGNZOSS-37
palashgdev Mar 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 22 additions & 36 deletions frontend/src/container/Login/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -23,6 +23,8 @@ interface LoginProps {
withPassword: string;
}

type FormValues = { email: string; password: string };

function Login({
jwt,
refreshjwt,
Expand All @@ -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,
Expand Down Expand Up @@ -67,6 +67,8 @@ function Login({
}
}, [getUserVersionResponse]);

const [form] = Form.useForm<FormValues>();

useEffect(() => {
if (withPassword === 'Y') {
setPrecheckComplete(true);
Expand Down Expand Up @@ -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'),
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 6 additions & 2 deletions frontend/src/container/Login/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Card } from 'antd';
import { Card, Form } from 'antd';
import styled from 'styled-components';

export const FormWrapper = styled(Card)`
Expand All @@ -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`
Expand Down
73 changes: 31 additions & 42 deletions frontend/src/container/ResetPassword/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
);
Expand All @@ -27,27 +27,18 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
const token = params.get('token');
const { notifications } = useNotifications();

const [form] = Form.useForm<FormValues>();
useEffect(() => {
if (!token) {
Logout();
history.push(ROUTES.LOGIN);
}
}, [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,
Expand Down Expand Up @@ -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
Expand All @@ -137,16 +126,16 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
loading={loading}
disabled={
loading ||
!password ||
!confirmPassword ||
!form.getFieldValue('password') ||
!form.getFieldValue('confirmPassword') ||
confirmPasswordError ||
token === null
}
>
Get Started
</Button>
</ButtonContainer>
</form>
</FormContainer>
</FormWrapper>
</WelcomeLeftContainer>
);
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/container/ResetPassword/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Card } from 'antd';
import { Card, Form } from 'antd';
import styled from 'styled-components';

export const FormWrapper = styled(Card)`
Expand All @@ -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;
}
`;
Loading