Добавлено поле подтверждение пароля в окне смены

Добавлена информация о пользователе в окне смены

src/components/ChangePassword.tsx

@@ -2,23 +2,25 @@ import { memo, useState } from 'react'
 import { useForm } from 'antd/lib/form/Form'
 import { Form, Input, Modal, FormProps } from 'antd'
 
-import { AuthService } from '../services/api'
-import { passwordRules } from '../utils/validationRules'
+import { AuthService, UserDto } from '../services/api'
+import { passwordRules, createPasswordRules } from '../utils/validationRules'
 
 import LoaderPortal from './LoaderPortal'
 import { invokeWebApiWrapperAsync } from './factory'
+import { UserView } from './Views'
 
 const formLayout: FormProps = { labelCol: { span: 11 }, wrapperCol: { span: 16 } }
 
 export type ChangePasswordProps = {
-    userId?: number
+    user?: UserDto
     visible?: boolean
     onCancel?: () => void
     onOk?: () => void
 }
 
+const fieldRules = [...passwordRules, ...createPasswordRules]
 
-export const ChangePassword = memo<ChangePasswordProps>(({ userId, visible, onCancel, onOk }) => {
+export const ChangePassword = memo<ChangePasswordProps>(({ user, visible, onCancel, onOk }) => {
     const [showLoader, setShowLoader] = useState<boolean>(false)
     const [password, setPassword] = useState<string>('')
 
@@ -31,7 +33,7 @@ export const ChangePassword = memo<ChangePasswordProps>(({ userId, visible, onCa
 
     const onFormFinish = () => invokeWebApiWrapperAsync(
         async() => {
-            await AuthService.changePassword(userId ?? localStorage['userId'], `"${password}"`)
+            await AuthService.changePassword(user?.id ?? localStorage['userId'], `"${password}"`)
             onOk?.()
         },
         setShowLoader,
@@ -41,7 +43,12 @@ export const ChangePassword = memo<ChangePasswordProps>(({ userId, visible, onCa
     return (
         <Modal
             centered
-            title={'Сменить пароль'}
+            title={(
+                <>
+                    Сменить пароль
+                    {user && <>&nbsp;(<UserView user={user} />)</>}
+                </>
+            )}
             visible={visible}
             onCancel={onModalCancel}
             onOk={() => form.submit()}
@@ -53,9 +60,26 @@ export const ChangePassword = memo<ChangePasswordProps>(({ userId, visible, onCa
                     name={'change-password'}
                     onFinish={onFormFinish}
                 >
-                    <Form.Item label={'Новый пароль'} name={'new-password'} rules={passwordRules}>
+                    <Form.Item
+                        label={'Новый пароль'}
+                        name={'new-password'}
+                        required={true}
+                        rules={fieldRules}
+                    >
                         <Input.Password onChange={(e) => setPassword(e.target.value)} value={password} />
                     </Form.Item>
+                    <Form.Item
+                        label={'Подтверждение пароля'}
+                        name={'confirm-password'}
+                        required={true}
+                        rules={[() => ({ validator(_, value: string) {
+                            if (value !== password)
+                                return Promise.reject('Пароли не совпадают!')
+                            return Promise.resolve()
+                        }})]}
+                    >
+                        <Input.Password />
+                    </Form.Item>
                 </Form>
             </LoaderPortal>
         </Modal>

src/components/Views/TelemetryView.tsx

@@ -41,5 +41,5 @@ export const TelemetryView = memo<TelemetryViewProps>(({ telemetry }) => telemet
         {getTelemetryLabel(telemetry)}
     </Tooltip>
 ) : (
-    <Tooltip title={'нет данных'}>{getTelemetryLabel()}</Tooltip>
+    <Tooltip title={'нет данных'}>-</Tooltip>
 ))

src/pages/AdminPanel/UserController.jsx

@@ -47,12 +47,12 @@ export default function UserController() {
     const [users, setUsers] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [columns, setColumns] = useState([])
-    const [selectedId, setSelectedId] = useState(null)
+    const [selectedUser, setSelectedUser] = useState(null)
 
     const additionalButtons = (record, editingKey) => (
         <Button
             icon={<UserSwitchOutlined />}
-            onClick={() => setSelectedId(record.id)}
+            onClick={() => setSelectedUser(record)}
             title={'Сменить пароль'}
             disabled={editingKey !== ''}
         />
@@ -168,10 +168,10 @@ export default function UserController() {
                 />
             </LoaderPortal>
             <ChangePassword
-                userId={selectedId}
-                visible={selectedId > 0}
-                onCancel={() => setSelectedId(null)}
-                onOk={() => setSelectedId(null)}
+                user={selectedUser}
+                visible={selectedUser}
+                onCancel={() => setSelectedUser(null)}
+                onOk={() => setSelectedUser(null)}
             />
         </>
     )