From f3f38e1a57be345f2756eef115a7e82aaffa736f Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Fri, 24 Jan 2025 15:26:38 +0300 Subject: [PATCH] fix login --- client/src/login/Login/Form.tsx | 6 +- client/src/login/Login/index.tsx | 119 ++++++++++++------------------- client/src/login/index.tsx | 2 +- client/tests/e2e/install.spec.ts | 19 ++--- 4 files changed, 60 insertions(+), 86 deletions(-) diff --git a/client/src/login/Login/Form.tsx b/client/src/login/Login/Form.tsx index fc06e468..cff3225f 100644 --- a/client/src/login/Login/Form.tsx +++ b/client/src/login/Login/Form.tsx @@ -4,13 +4,13 @@ import { useTranslation } from 'react-i18next'; import { Input } from '../../components/ui/Controls/Input'; import { validateRequiredValue } from '../../helpers/validators'; -type FormValues = { +export type LoginFormValues = { username: string; password: string; }; type LoginFormProps = { - onSubmit: (data: FormValues) => void; + onSubmit: (data: LoginFormValues) => void; processing: boolean; }; @@ -20,7 +20,7 @@ const Form = ({ onSubmit, processing }: LoginFormProps) => { handleSubmit, control, formState: { isValid }, - } = useForm({ + } = useForm({ mode: 'onBlur', defaultValues: { username: '', diff --git a/client/src/login/Login/index.tsx b/client/src/login/Login/index.tsx index f214f5e5..cba66ae0 100644 --- a/client/src/login/Login/index.tsx +++ b/client/src/login/Login/index.tsx @@ -1,95 +1,68 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import flow from 'lodash/flow'; -import { withTranslation, Trans } from 'react-i18next'; +import React, { useState } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +import { Trans } from 'react-i18next'; import * as actionCreators from '../../actions/login'; import { Logo } from '../../components/ui/svg/logo'; - import Toasts from '../../components/Toasts'; - import Footer from '../../components/ui/Footer'; - import Icons from '../../components/ui/Icons'; - -import Form from './Form'; +import Form, { LoginFormValues } from './Form'; import './Login.css'; import '../../components/ui/Tabler.css'; +import { LoginState } from '../../initialState'; -type LoginProps = { - login: { - processingLogin: boolean; - }; - processLogin: (args: { name: string; password: string }) => unknown; -}; +export const Login = () => { + const dispatch = useDispatch(); + const { processingLogin } = useSelector((state: LoginState) => state.login); + const [isForgotPasswordVisible, setIsForgotPasswordVisible] = useState(false); -type LoginState = { - isForgotPasswordVisible: boolean; -}; - -class Login extends Component { - state = { - isForgotPasswordVisible: false, + const handleSubmit = ({ username: name, password }: LoginFormValues) => { + dispatch(actionCreators.processLogin({ name, password })); }; - handleSubmit = ({ username: name, password }: { username: string; password: string }) => { - this.props.processLogin({ name, password }); + const toggleText = () => { + setIsForgotPasswordVisible((prev) => !prev); }; - toggleText = () => { - this.setState((prevState) => ({ - isForgotPasswordVisible: !prevState.isForgotPasswordVisible, - })); - }; - - render() { - const { processingLogin } = this.props.login; - const { isForgotPasswordVisible } = this.state; - - return ( -
-
-
- -
- -
- -
- - {isForgotPasswordVisible && ( -
- - link - , - ]}> - forgot_password_desc - -
- )} -
+ return ( +
+
+
+
-
+ - +
+ - + {isForgotPasswordVisible && ( +
+ + link + , + ]}> + forgot_password_desc + +
+ )} +
- ); - } -} -const mapStateToProps = ({ login, toasts }: any) => ({ login, toasts }); - -export default flow([withTranslation(), connect(mapStateToProps, actionCreators)])(Login); +
+ + +
+ ); +}; diff --git a/client/src/login/index.tsx b/client/src/login/index.tsx index 0ae0c190..4d5bbbf2 100644 --- a/client/src/login/index.tsx +++ b/client/src/login/index.tsx @@ -8,7 +8,7 @@ import configureStore from '../configureStore'; import reducers from '../reducers/login'; import '../i18n'; -import Login from './Login'; +import { Login } from './Login'; import { LoginState } from '../initialState'; const store = configureStore(reducers, {}); diff --git a/client/tests/e2e/install.spec.ts b/client/tests/e2e/install.spec.ts index e82fd3b4..1be0e32e 100644 --- a/client/tests/e2e/install.spec.ts +++ b/client/tests/e2e/install.spec.ts @@ -1,4 +1,4 @@ -import { test, expect } from '@playwright/test'; +import { test } from '@playwright/test'; const ADMIN_USERNAME = 'admin'; const ADMIN_PASSWORD = 'superpassword'; @@ -6,12 +6,13 @@ const PORT = 3000; test('install', async ({ page }) => { await page.goto('/'); - await page.getByRole('button', { name: 'Get Started' }).click(); - await page.locator('input[name="web\\.port"]').fill(PORT.toString()); - await page.getByRole('button', { name: 'Next' }).click(); - await page.getByPlaceholder('Enter username').fill(ADMIN_USERNAME); - await page.getByPlaceholder('Enter password').fill(ADMIN_PASSWORD); - await page.getByPlaceholder('Confirm password').fill(ADMIN_PASSWORD); - await page.getByRole('button', { name: 'Next' }).click(); - await page.getByRole('button', { name: 'Next' }).click(); + await page.getByTestId('install_get_started').click(); + await page.getByTestId('install_web_port').fill(PORT.toString()); + await page.getByTestId('install_next').click(); + await page.getByTestId('install_username').fill(ADMIN_USERNAME); + await page.getByTestId('install_password').fill(ADMIN_PASSWORD); + await page.getByTestId('install_confirm_password').fill(ADMIN_PASSWORD); + await page.getByTestId('install_next').click(); + await page.getByTestId('install_next').click(); + await page.getByTestId('install_open_dashboard').click(); });