+
+ );
+};
+
+export default ErrorIcon;
diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts
index 3097ae17..1a86fbc3 100644
--- a/src/locales/en-US/common.ts
+++ b/src/locales/en-US/common.ts
@@ -5,9 +5,10 @@ export default {
'common.button.editmode': 'Edit mode',
'common.button.shortcut': 'Keyboard Shortcut',
'common.button.add': 'Add',
- 'common.button.login': 'Use a local user',
- 'common.button.oidclogin': 'Log In With OIDC',
- 'common.button.samllogin': 'Log In With SAML',
+ 'common.button.login': 'Log in',
+ 'common.button.login.local': 'Log in with local user',
+ 'common.button.oidclogin': 'Log in with OIDC',
+ 'common.button.samllogin': 'Log in with SAML',
'common.button.select': 'Select',
'common.button.selected': 'Selected',
'common.button.continue': 'Continue',
@@ -253,5 +254,8 @@ export default {
'common.tips.escape.disable':
'Click Cancel or the X at the top right to close.',
'common.button.clearSelection': 'Clear Selection',
- 'common.select.count': '{count} selected'
+ 'common.select.count': '{count} selected',
+ 'common.login.auth': 'Authenticating...',
+ 'common.login.auth.failed': 'Authentication failed',
+ 'common.login.thirdparty': 'or login with'
};
diff --git a/src/locales/ja-JP/common.ts b/src/locales/ja-JP/common.ts
index 1276a5f9..488f0398 100644
--- a/src/locales/ja-JP/common.ts
+++ b/src/locales/ja-JP/common.ts
@@ -6,8 +6,9 @@ export default {
'common.button.shortcut': 'キーボードショートカット',
'common.button.add': '追加',
'common.button.login': 'ログイン',
- 'common.button.oidclogin': 'OIDCでログイン',
- 'common.button.samllogin': 'SAMLでログイン',
+ 'common.button.login.local': 'ローカルユーザーでログイン',
+ 'common.button.oidclogin': 'OIDC でログイン',
+ 'common.button.samllogin': 'SAML でログイン',
'common.button.select': '選択',
'common.button.selected': '選択済み',
'common.button.continue': '続行',
@@ -253,7 +254,10 @@ export default {
'common.tips.escape.disable':
'Click Cancel or the X at the top right to close.',
'common.button.clearSelection': 'Clear Selection',
- 'common.select.count': '{count} selected'
+ 'common.select.count': '{count} selected',
+ 'common.login.auth': 'Authenticating...',
+ 'common.login.auth.failed': 'Authentication failed',
+ 'common.login.thirdparty': 'or login with'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -271,5 +275,8 @@ export default {
// 12. 'common.page.refresh.tips': 'Oops! Something went wrong. Try refreshing the page.'
// 13. 'common.tips.escape.disable': 'Click Cancel or the X at the top right to close.'
// 14. 'common.button.clearSelection': 'Clear Selection',
-// 15. 'common.select.count': '{count} selected'
+// 15. 'common.select.count': '{count} selected',
+// 16. 'common.login.auth': 'Authenticating...',
+// 17. 'common.login.auth.failed': 'Authentication failed'
+// 18. 'common.login.thirdparty': 'or login with'
// ========== End of To-Do List ==========
diff --git a/src/locales/ru-RU/common.ts b/src/locales/ru-RU/common.ts
index d865cdd9..6ac9f537 100644
--- a/src/locales/ru-RU/common.ts
+++ b/src/locales/ru-RU/common.ts
@@ -6,6 +6,7 @@ export default {
'common.button.shortcut': 'Сочетания клавиш',
'common.button.add': 'Добавить',
'common.button.login': 'Войти',
+ 'common.button.login.local': 'Войти с локальным пользователем',
'common.button.oidclogin': 'Войти с OIDC',
'common.button.samllogin': 'Войти с SAML',
'common.button.select': 'Выбрать',
@@ -252,9 +253,12 @@ export default {
'common.tips.escape.disable':
'Чтобы закрыть, нажмите "Отмена" или крестик (X) в правом верхнем углу.',
'common.button.clearSelection': 'Сбросить выбор',
- 'common.select.count': '{count} Выбрано'
+ 'common.select.count': '{count} Выбрано',
+ 'common.login.auth': 'Аутентификация...',
+ 'common.login.auth.failed': 'Ошибка аутентификации',
+ 'common.login.thirdparty': 'or login with'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
-
+// 1. 'common.login.thirdparty': 'or login with'
// ========== End of To-Do List ==========
diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts
index 2981e9cd..e1a723ac 100644
--- a/src/locales/zh-CN/common.ts
+++ b/src/locales/zh-CN/common.ts
@@ -5,9 +5,10 @@ export default {
'common.button.editmode': '编辑模式',
'common.button.shortcut': '快捷键',
'common.button.add': '添加',
- 'common.button.login': 'Use a local user',
- 'common.button.oidclogin': 'Log In With OIDC',
- 'common.button.samllogin': 'Log In With SAML',
+ 'common.button.login': '登录',
+ 'common.button.login.local': '本地用户登录',
+ 'common.button.oidclogin': '使用 OIDC 登录',
+ 'common.button.samllogin': '使用 SAML 登录',
'common.button.select': '选择',
'common.button.selected': '已选择',
'common.button.continue': '继续',
@@ -246,5 +247,8 @@ export default {
'common.page.refresh.tips': '出了点问题，试试刷新页面吧！',
'common.tips.escape.disable': '请点击「取消」按钮或右上角 X 关闭窗口',
'common.button.clearSelection': '清除选择',
- 'common.select.count': '已选 {count} 项'
+ 'common.select.count': '已选 {count} 项',
+ 'common.login.auth': '认证中...',
+ 'common.login.auth.failed': '认证失败',
+ 'common.login.thirdparty': '或使用以下方式登录'
};
diff --git a/src/pages/login/components/login-form.tsx b/src/pages/login/components/login-form.tsx
index 938d3bff..52e461d6 100644
--- a/src/pages/login/components/login-form.tsx
+++ b/src/pages/login/components/login-form.tsx
@@ -1,27 +1,47 @@
import LogoIcon from '@/assets/images/gpustack-logo.png';
-import { initialPasswordAtom, userAtom } from '@/atoms/user';
+import OIDCIcon from '@/assets/images/oidc.svg';
+import SAMLIcon from '@/assets/images/saml.svg';
+import { userAtom } from '@/atoms/user';
import LangSelect from '@/components/lang-select';
import SealInput from '@/components/seal-form/seal-input';
import ThemeDropActions from '@/components/theme-toggle/theme-drop-actions';
import externalLinks from '@/constants/external-links';
-import {
- CRYPT_TEXT,
- REMEMBER_ME_KEY,
- getRememberMe,
- rememberMe,
- removeRememberMe
-} from '@/utils/localstore/index';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
-import { history, useIntl, useModel } from '@umijs/max';
-import { Button, Checkbox, Form } from 'antd';
+import { useIntl, useModel } from '@umijs/max';
+import { Button, Checkbox, Divider, Form, Spin, Tooltip, message } from 'antd';
import { createStyles } from 'antd-style';
-import CryptoJS from 'crypto-js';
import { useAtom } from 'jotai';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
import { flushSync } from 'react-dom';
-import { login } from '../apis';
+import styled from 'styled-components';
+import { useLocalAuth } from '../hooks/use-local-auth';
+import { useSSOAuth } from '../hooks/use-sso-auth';
import { checkDefaultPage } from '../utils';
+const Buttons = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 32px;
+`;
+
+const ButtonWrapper = styled(Button).attrs({
+ shape: 'circle',
+ size: 'large',
+ color: 'default',
+ variant: 'filled'
+})`
+ height: 42px;
+ width: 42px;
+`;
+
+const DividerWrapper = styled(Divider)`
+ margin-block: 24px !important;
+ .ant-divider-inner-text {
+ color: var(--ant-color-text-secondary);
+ }
+`;
+
const useStyles = createStyles(({ token, css }) => ({
header: css`
display: flex;
@@ -38,40 +58,28 @@ const useStyles = createStyles(({ token, css }) => ({
.anticon:hover {
color: ${token.colorTextTertiary};
}
+ `,
+ errorMessage: css`
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ color: ${token.colorText};
+ .title {
+ font-weight: bold;
+ }
`
}));
-// function authentication configuration method
-async function fetchAuthConfig(url: string) {
- try {
- const response = await fetch(url);
- if (!response.ok) throw new Error(`HTTP ${response.status}`);
- return response.json();
- } catch (error) {
- console.error('OIDC config error:', error);
- throw error;
- }
-}
const LoginForm = () => {
- type LoginOption = {
- saml?: boolean;
- oidc?: boolean;
- };
-
- const [err, setErr] = useState {
);
}, [intl]);
+
const gotoDefaultPage = async (userInfo: any) => {
checkDefaultPage(userInfo, true);
};
@@ -112,121 +121,97 @@ const LoginForm = () => {
return userInfo;
};
- const encryptPassword = (password: string) => {
- const psw = CryptoJS.AES?.encrypt?.(password, CRYPT_TEXT).toString();
- return psw;
- };
- const decryptPassword = (password: string) => {
- const bytes = CryptoJS.AES?.decrypt?.(password, CRYPT_TEXT);
- const res = bytes.toString(CryptoJS.enc.Utf8);
- return res;
- };
-
- const callRememberMe = async (values: any) => {
- const { autoLogin } = values;
- if (autoLogin) {
- await rememberMe(REMEMBER_ME_KEY, {
- um: encryptPassword(values.username),
- pw: encryptPassword(values.password),
- f: true
- });
- } else {
- await removeRememberMe(REMEMBER_ME_KEY);
- }
- };
-
- const callGetRememberMe = async () => {
- const rememberMe = await getRememberMe(REMEMBER_ME_KEY);
-
- if (rememberMe?.f) {
- const username = decryptPassword(rememberMe?.um);
- const password = decryptPassword(rememberMe?.pw);
- form.setFieldsValue({ username, password, autoLogin: true });
- }
- };
-
- // OIDC certification
- const handleOidcLogin = async () => {
- window.location.href = '/auth/oidc/login';
- };
- // SAML certification
- const handleSamlLogin = async () => {
- window.location.href = '/auth/saml/login';
+ // error handling for authentication
+ const handleOnError = (error: Error) => {
+ setAuthError(error);
+ messageApi.error({
+ duration: 5,
+ content: (
+
+
+ )
+ });
};
- // Handling SSO callbacks
- useEffect(() => {
- fetchAuthConfig('/auth_config')
- .then((authConfig) => {
- if (authConfig.is_oidc) {
- setLoginOption({
- oidc: true
- });
- } else if (authConfig.is_saml) {
- if (authConfig.is_saml) {
- setLoginOption({
- saml: true
- });
- }
- }
- })
- .catch((error) => {
- setLoginOption({ oidc: false, saml: false });
- });
- if (sso) {
- fetchUserInfo()
- .then((userInfo) => {
- setUserInfo(userInfo);
- gotoDefaultPage({});
- })
- .catch((error) => {
- console.log(error);
- setErr(error);
- });
- }
- }, []);
- const handleLogin = async (values: any) => {
- try {
- await login({
- username: values.username,
- password: values.password
- });
-
- const userInfo = await fetchUserInfo();
+ // local user authentication
+ const { handleLogin } = useLocalAuth({
+ fetchUserInfo,
+ form,
+ onSuccess: async (userInfo) => {
setUserInfo(userInfo);
- if (values.autoLogin) {
- await callRememberMe(values);
- } else {
- await removeRememberMe(REMEMBER_ME_KEY);
- }
if (!userInfo?.require_password_change) {
gotoDefaultPage(userInfo);
- } else {
- setInitialPassword(encryptPassword(values.password));
}
- } catch (error) {
- // to do something
+ },
+ onError: (error) => {
+ // gpustack handle in the interceptor
}
- };
+ });
+
+ // SSO hook
+ const SSOAuth = useSSOAuth({
+ fetchUserInfo,
+ onSuccess: (userInfo) => {
+ setUserInfo(userInfo);
+ gotoDefaultPage({});
+ },
+ onError: handleOnError
+ });
- useEffect(() => {
- callGetRememberMe();
- }, []);
+ const hasThirdPartyLogin = useMemo(() => {
+ return SSOAuth.options.oidc || SSOAuth.options.saml;
+ }, [SSOAuth.options]);
- if (sso && !err) {
- return
+ {intl.formatMessage({ id: 'common.login.auth.failed' })}
+
+ {error?.message || 'Unknown error'}
+ Handle SSO callback...
;
- } else if (err) {
+ const renderThirdPartyLoginButtons = () => {
+ if (!hasThirdPartyLogin) return null;
return (
- Error to log in by SSO: {err.message}
+ <>
+
+ {contextHolder}
+
- );
- }
+
+
-
+ )}
-
-
+ {isThirdPartyAuthHandling ? (
+
+
+ {intl.formatMessage({ id: 'common.login.auth' })}
+
+
+ ) : (
-
-
+ {renderThirdPartyLoginButtons()}
-