feat: get initial password

src/components/highlight-code/styles/index.less

@@ -46,7 +46,7 @@
     white-space: pre-wrap;
 
     code {
-      line-height: 1.5;
+      line-height: 1.6;
     }
 
     &.copyable {

src/locales/en-US/users.ts

@@ -37,5 +37,7 @@ export default {
   'users.settings.title': 'User Settings',
   'users.status.activate': 'Activate Account',
   'users.status.deactivate': 'Deactivate Account',
-  'users.status.inactiveAccount': 'Inactive Account'
+  'users.status.inactiveAccount': 'Inactive Account',
+  'users.login.getInitialPassword':
+    'Run the following command on your server to retrieve the initial admin password.'
 };

src/locales/ja-JP/users.ts

@@ -38,12 +38,15 @@ export default {
   'users.settings.title': 'User Settings',
   'users.status.activate': 'Activate Account',
   'users.status.deactivate': 'Deactivate Account',
-  'users.status.inactiveAccount': 'Inactive Account'
+  'users.status.inactiveAccount': 'Inactive Account',
+  'users.login.getInitialPassword':
+    'Run the following command on your server to retrieve the initial admin password.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
 // 1. 'users.settings.title': 'User Settings',
 // 2. 'users.status.activate': 'Activate Account',
 // 3. 'users.status.deactivate': 'Deactivate Account',
-// 4. 'users.status.inactiveAccount': 'Inactive Account'
+// 4. 'users.status.inactiveAccount': 'Inactive Account',
+// 5. 'users.login.getInitialPassword': 'Run the following command on your server to retrieve the initial admin password.'
 // ========== End of To-Do List ==========

src/locales/ru-RU/users.ts

@@ -38,9 +38,11 @@ export default {
   'users.settings.title': 'Настройки пользователя',
   'users.status.activate': 'Активировать аккаунт',
   'users.status.deactivate': 'Деактивировать аккаунт',
-  'users.status.inactiveAccount': 'Неактивный аккаунт'
+  'users.status.inactiveAccount': 'Неактивный аккаунт',
+  'users.login.getInitialPassword':
+    'Run the following command on your server to retrieve the initial admin password.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-
+// 1. 'users.login.getInitialPassword': 'Run the following command on your server to retrieve the initial admin password.'
 // ========== End of To-Do List ==========

src/locales/zh-CN/users.ts

@@ -36,5 +36,7 @@ export default {
   'users.settings.title': '用户设置',
   'users.status.activate': '启用账户',
   'users.status.deactivate': '停用账户',
-  'users.status.inactiveAccount': '停用账户'
+  'users.status.inactiveAccount': '停用账户',
+  'users.login.getInitialPassword':
+    '在服务器端运行以下命令以获取初始管理员密码。'
 };

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

@@ -1,8 +1,38 @@
+import HighlightCode from '@/components/highlight-code';
 import SealInput from '@/components/seal-form/seal-input';
 import externalLinks from '@/constants/external-links';
-import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import {
+  InfoCircleOutlined,
+  LockOutlined,
+  UserOutlined
+} from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Checkbox, Form, FormInstance } from 'antd';
+import { Button, Checkbox, Divider, Form, FormInstance } from 'antd';
+import { createStyles } from 'antd-style';
+import { GET_INITIAL_PASSWORD } from '../../login/config';
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    commandInfo: css`
+      .content {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        margin-bottom: 12px;
+        .icon {
+          padding-top: 2px;
+          color: ${token.colorInfo};
+          font-size: 16px;
+        }
+        .info {
+          line-height: 1.5;
+          color: ${token.colorTextSecondary};
+          font-size: 14px;
+        }
+      }
+    `
+  };
+});
 
 interface LocalUserFormProps {
   handleLogin: (values: any) => void;
@@ -12,6 +42,27 @@ interface LocalUserFormProps {
 const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
   const { handleLogin, form } = props;
   const intl = useIntl();
+  const { styles } = useStyles();
+
+  const renderCommandInfo = () => {
+    return (
+      <div className={styles.commandInfo}>
+        <Divider />
+        <div className="content">
+          <InfoCircleOutlined className="icon" />
+          <span className="info">
+            {intl.formatMessage({ id: 'users.login.getInitialPassword' })}
+          </span>
+        </div>
+        <HighlightCode
+          theme="dark"
+          code={GET_INITIAL_PASSWORD}
+          copyValue={GET_INITIAL_PASSWORD}
+          lang="bash"
+        ></HighlightCode>
+      </div>
+    );
+  };
 
   return (
     <Form

src/pages/login/config/index.ts

@@ -0,0 +1 @@
+export const GET_INITIAL_PASSWORD = `sudo docker exec -it \${SERVER_CONTAINER_NAME} cat /var/lib/gpustack/initial_admin_password`;

src/pages/login/index.tsx

@@ -63,19 +63,19 @@ const Box = styled.div`
 `;
 
 const FormWrapper = styled.div`
-  position: relative;
   margin: 0 auto;
+  margin-top: 50vh;
+  max-width: 440px;
+  transform: translateY(-50%);
+  position: relative;
   z-index: 999;
   border-radius: var(--border-radius-modal);
   width: max-content;
   height: max-content;
-  max-width: 800px;
-  max-height: 600px;
+  max-height: 660px;
   padding: 40px;
   background-color: var(--color-modal-content-bg);
   box-shadow: var(--color-modal-box-shadow);
-  margin-top: 50vh;
-  transform: translateY(-50%);
   .field-wrapper {
     background-color: transparent !important;
   }
@@ -91,6 +91,8 @@ const Login = () => {
   const [userInfo, setUserInfo] = useAtom(userAtom);
   const { initialState, setInitialState } = useModel('@@initialState') || {};
 
+  console.log('useSettings==========', userSettings);
+
   const gotoDefaultPage = async (userInfo: any) => {
     if (!userInfo || userInfo?.require_password_change) {
       return;