style: login modal

src/components/footer/index.tsx

@@ -3,8 +3,16 @@ import { getAtomStorage } from '@/atoms/utils';
 import VersionInfo, { modalConfig } from '@/components/version-info';
 import externalLinks from '@/constants/external-links';
 import { useIntl } from '@umijs/max';
-import { Button, Modal, Space } from 'antd';
+import { Button, Divider, Modal } from 'antd';
 import { createStyles } from 'antd-style';
+import styled from 'styled-components';
+
+const CompanyWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-inline: 0 8px;
+`;
 
 const useStyles = createStyles(({ token, css }) => ({
   footer: css`
@@ -43,24 +51,24 @@ const Footer: React.FC = () => {
         <div className="footer-content">
           <div className="footer-content-left">
             <div className={styles['footer-content-left-text']}>
-              <Space size={4}>
+              <CompanyWrapper>
                 <span>&copy;</span>
                 <span> {new Date().getFullYear()}</span>
                 <span> {intl.formatMessage({ id: 'settings.company' })}</span>
-              </Space>
+              </CompanyWrapper>
-              <Space size={8} style={{ marginLeft: 18 }}>
+              <Divider type="vertical" />
-                <Button
+              <Button
-                  type="link"
+                type="link"
-                  size="small"
+                size="small"
-                  href={externalLinks.documentation}
+                href={externalLinks.documentation}
-                  target="_blank"
+                target="_blank"
-                >
+              >
-                  {intl.formatMessage({ id: 'common.button.help' })}
+                {intl.formatMessage({ id: 'common.button.help' })}
-                </Button>
+              </Button>
-                <Button type="link" size="small" onClick={showVersion}>
+              <Divider type="vertical" />
-                  {getAtomStorage(GPUStackVersionAtom)?.version}
+              <Button type="link" size="small" onClick={showVersion}>
-                </Button>
+                {getAtomStorage(GPUStackVersionAtom)?.version}
-              </Space>
+              </Button>
             </div>
           </div>
         </div>

src/constants/external-links.ts

@@ -5,7 +5,9 @@ const externalLinks = {
   site: 'https://gpustack.ai/',
   release: 'https://github.com/gpustack/gpustack/releases',
   reportIssue: 'https://github.com/gpustack/gpustack/issues/new/choose',
-  faq: 'https://docs.gpustack.ai/latest/faq/'
+  faq: 'https://docs.gpustack.ai/latest/faq/',
+  resetPassword:
+    'https://docs.gpustack.ai/latest/troubleshooting/?h=reset#reset-admin-password'
 };
 
 export default externalLinks;

src/global.less

@@ -25,7 +25,7 @@ html {
   --layout-content-blockpadding: 32px;
   --layout-content-inlinepadding: 32px;
   --layout-content-header-inlinepadding: 40px;
-  --border-radius-modal: 6px;
+  --border-radius-modal: 12px;
   --menu-border-radius-base: 4px;
   --border-radius-base: 4px;
   --border-radius-middle: 20px;
@@ -75,6 +75,7 @@ html {
   --width-tooltip-max: 300px;
   --color-bg-tooltip: '#fff';
   --color-modal-content-bg: rgba(255, 255, 255, 90%);
+  --color-modal-box-shadow: 0 4px 16px rgba(0, 0, 0, 10%);
   // ======== input ============
   --box-shadow-base: 0 4px 6px rgba(227, 232, 240, 70%);
   --ant-border-radius-lg: 4px;
@@ -95,6 +96,7 @@ html[data-theme='realDark'] {
   --color-editor-header-bg: #292929;
   --color-progress-text: rgba(255, 255, 255, 80%);
   --color-modal-content-bg: #1f1f1f;
+  --color-modal-box-shadow: none;
 
   background: #141414;
 

src/locales/en-US/common.ts

@@ -242,5 +242,6 @@ export default {
   'common.exception.404': 'Sorry, the page you visited does not exist.',
   'common.appearance.darkmode': 'Dark Mode',
   'common.appearance.lightmode': 'Light Mode',
-  'common.appearance.tips': 'Default follows system preference.'
+  'common.appearance.tips': 'Default follows system preference.',
+  'common.button.forgotpassword': 'Forgot password?'
 };

src/locales/ja-JP/common.ts

@@ -242,7 +242,8 @@ export default {
   'common.exception.404': 'Sorry, the page you visited does not exist.',
   'common.appearance.darkmode': 'Dark Mode',
   'common.appearance.lightmode': 'Light Mode',
-  'common.appearance.tips': 'Default follows system preference.'
+  'common.appearance.tips': 'Default follows system preference.',
+  'common.button.forgotpassword': 'Forgot password?'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -254,4 +255,5 @@ export default {
 // 6. 'common.appearance.darkmode': 'Dark Mode',
 // 7. 'common.appearance.lightmode': 'Light Mode',
 // 8. 'common.appearance.tips': 'Default follows system preference.'
+// 9. 'common.button.forgotpassword': 'Forgot Password?'
 // ========== End of To-Do List ==========

src/locales/ru-RU/common.ts

@@ -240,7 +240,8 @@ export default {
   'common.exception.404': 'Sorry, the page you visited does not exist.',
   'common.appearance.darkmode': 'Dark Mode',
   'common.appearance.lightmode': 'Light Mode',
-  'common.appearance.tips': 'Default follows system preference.'
+  'common.appearance.tips': 'Default follows system preference.',
+  'common.button.forgotpassword': 'Forgot password?'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -248,4 +249,5 @@ export default {
 // 2. 'common.appearance.darkmode': 'Dark Mode',
 // 3. 'common.appearance.lightmode': 'Light Mode',
 // 4. 'common.appearance.tips': 'Default follows system preference.'
+// 5. 'common.button.forgotpassword': 'Forgot Password?'
 // ========== End of To-Do List ==========

src/locales/zh-CN/common.ts

@@ -237,5 +237,6 @@ export default {
   'common.exception.404': '抱歉，你访问的页面不存在',
   'common.appearance.darkmode': '深色模式',
   'common.appearance.lightmode': '浅色模式',
-  'common.appearance.tips': '默认跟随系统设置'
+  'common.appearance.tips': '默认跟随系统设置',
+  'common.button.forgotpassword': '忘记密码？'
 };

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

@@ -3,6 +3,7 @@ import { initialPasswordAtom, userAtom } from '@/atoms/user';
 import LangSelect from '@/components/lang-select';
 import SealInput from '@/components/seal-form/seal-input';
 import ThemeToggle from '@/components/theme-toggle';
+import externalLinks from '@/constants/external-links';
 import {
   CRYPT_TEXT,
   REMEMBER_ME_KEY,
@@ -158,7 +159,7 @@ const LoginForm = () => {
       <div>
         <Form
           form={form}
-          style={{ width: '400px', margin: '0 auto' }}
+          style={{ width: '360px', margin: '0 auto' }}
           onFinish={handleLogin}
         >
           {renderWelCome}
@@ -198,12 +199,27 @@ const LoginForm = () => {
             />
           </Form.Item>
           <Form.Item noStyle name="autoLogin" valuePropName="checked">
-            <Checkbox style={{ marginLeft: 5, marginBottom: 20 }}>
+            <div
-              <span style={{ color: 'var(--ant-color-text-secondary)' }}>
+              className="flex-center flex-between"
-                {' '}
+              style={{
-                {intl.formatMessage({ id: 'common.login.rember' })}
+                marginBottom: 24
-              </span>
+              }}
-            </Checkbox>
+            >
+              <Checkbox style={{ marginLeft: 5 }}>
+                <span style={{ color: 'var(--ant-color-text-secondary)' }}>
+                  {intl.formatMessage({ id: 'common.login.rember' })}
+                </span>
+              </Checkbox>
+              <Button
+                type="link"
+                size="small"
+                href={externalLinks.resetPassword}
+                target="_blank"
+                style={{ padding: 0 }}
+              >
+                {intl.formatMessage({ id: 'common.button.forgotpassword' })}
+              </Button>
+            </div>
           </Form.Item>
           <Button
             htmlType="submit"

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

@@ -52,7 +52,7 @@ const PasswordForm: React.FC = () => {
       </div>
       <Form
         form={form}
-        style={{ width: '400px', margin: '0 auto' }}
+        style={{ width: '360px', margin: '0 auto' }}
         onFinish={handleSubmit}
       >
         <h2 className="justify-center m-b-20 flex-column flex-center">

src/pages/login/index.tsx

@@ -44,7 +44,7 @@ const FormWrapper = styled.div`
   height: max-content;
   padding: 40px;
   background-color: var(--color-modal-content-bg);
-
+  box-shadow: var(--color-modal-box-shadow);
   .field-wrapper {
     background-color: transparent !important;
   }