refactor(login): layout style

src/locales/en-US/common.ts

@@ -261,6 +261,10 @@ export default {
   'common.login.auth': 'Authenticating...',
   'common.login.auth.failed': 'Authentication failed',
   'common.login.password': 'Log in with Password',
+  'common.login.username.holder': 'Please enter username',
+  'common.login.password.holder': 'Please enter password',
+  'common.login.newpassword.holder': 'Please enter new password',
+  'common.login.confirm.holder': 'Please enter password again',
   'common.external.login': 'Log in with {type}',
   'common.sso.noConfig':
     'Single sign-on is not enabled on this system. Please contact your administrator.',

src/locales/ja-JP/common.ts

@@ -261,6 +261,10 @@ export default {
   'common.login.auth': 'Authenticating...',
   'common.login.auth.failed': 'Authentication failed',
   'common.login.password': 'Log in with Password',
+  'common.login.username.holder': 'Please enter username',
+  'common.login.password.holder': 'Please enter password',
+  'common.login.newpassword.holder': 'Please enter new password',
+  'common.login.confirm.holder': 'Please enter password again',
   'common.external.login': 'Log in with {type}',
   'common.sso.noConfig':
     'Single sign-on is not enabled on this system. Please contact your administrator.',

src/locales/ru-RU/common.ts

@@ -260,6 +260,10 @@ export default {
   'common.login.auth': 'Аутентификация...',
   'common.login.auth.failed': 'Ошибка аутентификации',
   'common.login.password': 'Войти с паролем',
+  'common.login.username.holder': 'Введите имя пользователя',
+  'common.login.password.holder': 'Введите пароль',
+  'common.login.newpassword.holder': 'Введите новый пароль',
+  'common.login.confirm.holder': 'Введите пароль ещё раз',
   'common.external.login': 'Войти через {type}',
   'common.sso.noConfig':
     'Единый вход не настроен в этой системе. Пожалуйста, обратитесь к администратору.',

src/locales/tr-TR/common.ts

@@ -264,6 +264,10 @@ export default {
   'common.login.auth': 'Kimlik doğrulanıyor...',
   'common.login.auth.failed': 'Kimlik doğrulama başarısız',
   'common.login.password': 'Şifre ile giriş yap',
+  'common.login.username.holder': 'Lütfen kullanıcı adını girin',
+  'common.login.password.holder': 'Lütfen şifreyi girin',
+  'common.login.newpassword.holder': 'Lütfen yeni şifreyi girin',
+  'common.login.confirm.holder': 'Lütfen şifreyi tekrar girin',
   'common.external.login': '{type} ile giriş yap',
   'common.sso.noConfig':
     'Bu sistemde çoklu oturum açma etkinleştirilmemiş. Lütfen yöneticinize başvurun.',

src/locales/zh-CN/common.ts

@@ -254,6 +254,10 @@ export default {
   'common.login.auth': '认证中...',
   'common.login.auth.failed': '认证失败',
   'common.login.password': '使用密码登录',
+  'common.login.username.holder': '请输入用户名',
+  'common.login.password.holder': '请输入密码',
+  'common.login.newpassword.holder': '请输入新密码',
+  'common.login.confirm.holder': '请再次输入密码',
   'common.external.login': '使用 {type} 登录',
   'common.sso.noConfig': '该系统未启用单点登录，请联系管理员。',
   'common.button.edit.item': '编辑 {name}',

src/pages/login/components/local-user-form.tsx

@@ -4,9 +4,9 @@ import {
   LockOutlined,
   UserOutlined
 } from '@ant-design/icons';
-import { Input as CInput, HighlightCode, IconFont } from '@gpustack/core-ui';
+import { HighlightCode, IconFont } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { Button, Divider, Form, FormInstance } from 'antd';
+import { Button, Divider, Flex, Form, FormInstance, Input } from 'antd';
 import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(({ token, css }) => {
@@ -28,6 +28,23 @@ const useStyles = createStyles(({ token, css }) => {
           font-size: 14px;
         }
       }
+    `,
+    password: css`
+      .ant-input-suffix {
+        display: flex;
+        flex-direction: row-reverse;
+        .reset-link {
+          padding: 0;
+          font-size: 12px;
+          color: ${token.colorTextSecondary};
+        }
+        .ant-divider {
+          margin-left: 2px;
+        }
+        .reset-link:hover {
+          color: var(--ant-color-link-hover);
+        }
+      }
     `
   };
 });
@@ -78,11 +95,17 @@ const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
       // Same shape Buttons uses: 360px design width, capped at the
       // parent's inner width so the form doesn't overflow on the
       // enterprise cover layout (272px inner).
+      layout="vertical"
+      requiredMark={false}
       style={{ width: '360px', maxWidth: '100%', margin: '0 auto' }}
       onFinish={handleLogin}
     >
       <Form.Item
         name="username"
+        label={intl.formatMessage({ id: 'common.form.username' })}
+        style={{
+          marginBottom: 20
+        }}
         rules={[
           {
             required: true,
@@ -95,14 +118,21 @@ const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
           }
         ]}
       >
-        <CInput.Input
+        <Input
           autoComplete="username"
-          label={intl.formatMessage({ id: 'common.form.username' })}
+          placeholder={intl.formatMessage({
+            id: 'common.login.username.holder'
+          })}
           prefix={<UserOutlined />}
+          style={{ height: 44 }}
         />
       </Form.Item>
       <Form.Item
+        style={{
+          marginBottom: 20
+        }}
         name="password"
+        label={intl.formatMessage({ id: 'common.form.password' })}
         rules={[
           {
             required: true,
@@ -115,36 +145,37 @@ const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
           }
         ]}
       >
-        <CInput.Password
+        <Input.Password
+          className={styles.password}
           autoComplete="current-password"
           prefix={<LockOutlined />}
-          label={intl.formatMessage({ id: 'common.form.password' })}
+          style={{ height: 44 }}
+          placeholder={intl.formatMessage({
+            id: 'common.login.password.holder'
+          })}
+          suffix={
+            <Flex align="center" gap={0}>
+              <Button
+                type="link"
+                size="small"
+                className="reset-link"
+                href={externalLinks.resetPassword}
+                target="_blank"
+              >
+                {intl.formatMessage({ id: 'common.button.forgotpassword' })}
+              </Button>
+              <Divider orientation="vertical" />
+            </Flex>
+          }
         />
       </Form.Item>
-      <div
-        className="flex-center"
-        style={{
-          justifyContent: 'flex-end',
-          marginBottom: 20
-        }}
-      >
-        <Button
-          type="link"
-          size="small"
-          href={externalLinks.resetPassword}
-          target="_blank"
-          style={{ padding: 0 }}
-        >
-          {intl.formatMessage({ id: 'common.button.forgotpassword' })}
-        </Button>
-      </div>
       <Button
         htmlType="submit"
         type="primary"
         block
         loading={props.loading}
         icon={<IconFont type="icon-login" />}
-        style={{ height: '48px', fontSize: '14px' }}
+        style={{ height: '44px', fontSize: '14px', marginTop: 16 }}
       >
         {intl.formatMessage({ id: 'common.button.login' })}
       </Button>

src/pages/login/components/password-form.tsx

@@ -7,9 +7,8 @@ import {
   writeState
 } from '@/utils/localstore/index';
 import { LockOutlined } from '@ant-design/icons';
-import { Input as CInput } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { Button, Form, message } from 'antd';
+import { Button, Form, Input, message } from 'antd';
 import CryptoJS from 'crypto-js';
 import { useAtom } from 'jotai';
 import { updatePassword } from '../apis';
@@ -56,13 +55,14 @@ const PasswordForm: React.FC = () => {
   return (
     <div>
       <Form
+        layout="vertical"
+        requiredMark={false}
         form={form}
-        style={{ width: '360px', margin: '0 auto' }}
+        style={{ margin: '0 auto' }}
         onFinish={handleSubmit}
       >
         <h2 className="justify-center m-b-20 flex-column flex-center">
           <span>
-            {' '}
             {intl.formatMessage({ id: 'users.password.modify.title' })}
           </span>
           <span
@@ -78,6 +78,8 @@ const PasswordForm: React.FC = () => {
         </h2>
         <Form.Item
           name="new_password"
+          style={{ marginBottom: 20 }}
+          label={intl.formatMessage({ id: 'users.form.newpassword' })}
           rules={[
             {
               required: true,
@@ -88,14 +90,19 @@ const PasswordForm: React.FC = () => {
             }
           ]}
         >
-          <CInput.Password
+          <Input.Password
+            style={{ height: 44 }}
             autoComplete="new-password"
+            placeholder={intl.formatMessage({
+              id: 'common.login.newpassword.holder'
+            })}
             prefix={<LockOutlined />}
-            label={intl.formatMessage({ id: 'users.form.newpassword' })}
           />
         </Form.Item>
         <Form.Item
+          style={{ marginBottom: 20 }}
           name="confirm_password"
+          label={intl.formatMessage({ id: 'users.password.confirm' })}
           dependencies={['new_password']}
           rules={[
             {
@@ -118,10 +125,13 @@ const PasswordForm: React.FC = () => {
             })
           ]}
         >
-          <CInput.Password
+          <Input.Password
+            style={{ height: 44 }}
             autoComplete="new-password"
+            placeholder={intl.formatMessage({
+              id: 'common.login.confirm.holder'
+            })}
             prefix={<LockOutlined />}
-            label={intl.formatMessage({ id: 'users.password.confirm' })}
           />
         </Form.Item>
 
@@ -129,7 +139,7 @@ const PasswordForm: React.FC = () => {
           htmlType="submit"
           type="primary"
           block
-          style={{ height: '48px', fontSize: '14px', marginTop: 10 }}
+          style={{ height: '44px', fontSize: '14px', marginTop: 16 }}
         >
           {intl.formatMessage({ id: 'common.button.submit' })}
         </Button>

src/pages/login/index.tsx

@@ -72,12 +72,18 @@ const Box = styled.div`
   flex-direction: column;
   justify-content: space-between;
   min-height: 100vh;
+  .ant-form-item-label {
+    line-height: 1;
+  }
+  .ant-form-item-label > label {
+    height: auto !important;
+  }
 `;
 
 const FormWrapper = styled.div`
   margin: 0 auto;
   margin-top: 50vh;
-  width: 440px;
+  width: 400px;
   transform: translateY(-50%);
   position: relative;
   z-index: 999;