Minor fixes and improvements

Author: lucasdillmann

frontend/src/domain/authentication/LoginPage.tsx

@@ -1,7 +1,7 @@
 import React, { createRef } from "react"
 import { ArrowLeftOutlined, LockOutlined, SafetyOutlined, UserOutlined } from "@ant-design/icons"
 import { Navigate } from "react-router-dom"
-import { Button, Input, Typography } from "antd"
+import { Button, Form, Input, Typography } from "antd"
 import type { OTPRef } from "antd/es/input/OTP"
 import AppContext from "../../core/components/context/AppContext"
 import Preloader from "../../core/components/preloader/Preloader"
@@ -10,7 +10,7 @@ import "./LoginPage.css"
 import UserService from "../user/UserService"
 import LoginOutcome from "../user/model/LoginOutcome"
 import { navigateTo, queryParams } from "../../core/components/router/AppRouter"
-import { LoginFormPage, ProFormText } from "@ant-design/pro-components"
+import { LoginFormPage } from "@ant-design/pro-components"
 import ThemeContext from "../../core/components/context/ThemeContext"
 import LightBackground from "./background/light.jpg"
 import DarkBackground from "./background/dark.jpg"
@@ -205,28 +205,24 @@ export default class LoginPage extends React.Component<any, LoginPageState> {
     private renderCredentialFields() {
         return (
             <>
-                <ProFormText
+                <Form.Item
                     name="username"
-                    placeholder={i18n(MessageKey.CommonUsername)}
-                    fieldProps={{
-                        size: "large",
-                        prefix: <UserOutlined />,
-                    }}
-                    style={{
-                        marginLeft: 20,
-                    }}
-                />
-                <ProFormText.Password
+                    validateStatus={this.state.attemptFailed ? "error" : undefined}
+                    style={{ marginLeft: 20 }}
+                >
+                    <Input placeholder={i18n(MessageKey.CommonUsername)} size="large" prefix={<UserOutlined />} />
+                </Form.Item>
+                <Form.Item
                     name="password"
-                    placeholder={i18n(MessageKey.CommonPassword)}
-                    fieldProps={{
-                        size: "large",
-                        prefix: <LockOutlined />,
-                    }}
-                    style={{
-                        marginLeft: 20,
-                    }}
-                />
+                    validateStatus={this.state.attemptFailed ? "error" : undefined}
+                    style={{ marginLeft: 20 }}
+                >
+                    <Input.Password
+                        placeholder={i18n(MessageKey.CommonPassword)}
+                        size="large"
+                        prefix={<LockOutlined />}
+                    />
+                </Form.Item>
             </>
         )
     }

frontend/src/domain/onboarding/OnboardingPage.tsx

@@ -1,8 +1,8 @@
 import React from "react"
-import { Button, Steps } from "antd"
+import { Button, Form, Input, Steps } from "antd"
 import { IdcardOutlined, LockOutlined, SafetyOutlined, UserOutlined } from "@ant-design/icons"
 import { Navigate } from "react-router-dom"
-import { LoginFormPage, ProFormText } from "@ant-design/pro-components"
+import { LoginFormPage } from "@ant-design/pro-components"
 import AppContext from "../../core/components/context/AppContext"
 import Preloader from "../../core/components/preloader/Preloader"
 import Notification from "../../core/components/notification/Notification"
@@ -125,48 +125,37 @@ export default class OnboardingPage extends React.Component<any, OnboardingPageS
 
         return (
             <>
-                <ProFormText
+                <Form.Item
                     name="name"
-                    placeholder={i18n(MessageKey.CommonName)}
                     initialValue={values.name}
-                    fieldProps={{
-                        size: "large",
-                        prefix: <IdcardOutlined />,
-                    }}
-                    formItemProps={{
-                        validateStatus: validationResult.getStatus("name"),
-                        help: validationResult.getMessage("name"),
-                    }}
+                    validateStatus={validationResult.getStatus("name")}
+                    help={validationResult.getMessage("name")}
                     style={{ marginLeft: 20 }}
-                />
-                <ProFormText
+                >
+                    <Input placeholder={i18n(MessageKey.CommonName)} size="large" prefix={<IdcardOutlined />} />
+                </Form.Item>
+                <Form.Item
                     name="username"
-                    placeholder={i18n(MessageKey.CommonUsername)}
                     initialValue={values.username}
-                    fieldProps={{
-                        size: "large",
-                        prefix: <UserOutlined />,
-                    }}
-                    formItemProps={{
-                        validateStatus: validationResult.getStatus("username"),
-                        help: validationResult.getMessage("username"),
-                    }}
+                    validateStatus={validationResult.getStatus("username")}
+                    help={validationResult.getMessage("username")}
                     style={{ marginLeft: 20 }}
-                />
-                <ProFormText.Password
+                >
+                    <Input placeholder={i18n(MessageKey.CommonUsername)} size="large" prefix={<UserOutlined />} />
+                </Form.Item>
+                <Form.Item
                     name="password"
-                    placeholder={i18n(MessageKey.CommonPassword)}
                     initialValue={values.password}
-                    fieldProps={{
-                        size: "large",
-                        prefix: <LockOutlined />,
-                    }}
-                    formItemProps={{
-                        validateStatus: validationResult.getStatus("password"),
-                        help: validationResult.getMessage("password"),
-                    }}
+                    validateStatus={validationResult.getStatus("password")}
+                    help={validationResult.getMessage("password")}
                     style={{ marginLeft: 20 }}
-                />
+                >
+                    <Input.Password
+                        placeholder={i18n(MessageKey.CommonPassword)}
+                        size="large"
+                        prefix={<LockOutlined />}
+                    />
+                </Form.Item>
             </>
         )
     }