feat(project): base smatec's frontend
This commit is contained in:
Tran Anh Tuan
212
src/pages/Auth/index.tsx
Normal file
212
src/pages/Auth/index.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import Footer from '@/components/Footer';
|
||||
import LangSwitches from '@/components/Lang/LanguageSwitcherAuth';
|
||||
import ThemeSwitcherAuth from '@/components/Theme/ThemeSwitcherAuth';
|
||||
import { ROUTER_HOME } from '@/constants/routes';
|
||||
import { apiLogin, apiQueryProfile } from '@/services/master/AuthController';
|
||||
import { parseJwt } from '@/utils/jwt';
|
||||
import { getLogoImage } from '@/utils/logo';
|
||||
import { getBrowserId, getToken, removeToken, setToken } from '@/utils/storage';
|
||||
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { LoginFormPage, ProFormText } from '@ant-design/pro-components';
|
||||
import { history, useIntl, useModel } from '@umijs/max';
|
||||
import { Image, theme } from 'antd';
|
||||
import { useEffect } from 'react';
|
||||
import { flushSync } from 'react-dom';
|
||||
import mobifontLogo from '../../../public/mobifont-logo.png';
|
||||
const LoginPage = () => {
|
||||
const { token } = theme.useToken();
|
||||
const urlParams = new URL(window.location.href).searchParams;
|
||||
const redirect = urlParams.get('redirect');
|
||||
const intl = useIntl();
|
||||
const { setInitialState } = useModel('@@initialState');
|
||||
const getDomainTitle = () => {
|
||||
switch (process.env.DOMAIN_ENV) {
|
||||
case 'gms':
|
||||
return 'gms.title';
|
||||
case 'sgw':
|
||||
return 'sgw.title';
|
||||
case 'spole':
|
||||
return 'spole.title';
|
||||
default:
|
||||
return 'Smatec Master';
|
||||
}
|
||||
};
|
||||
|
||||
const checkLogin = async () => {
|
||||
const token = getToken();
|
||||
if (!token) {
|
||||
return;
|
||||
}
|
||||
const parsed = parseJwt(token);
|
||||
const { exp } = parsed;
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const oneHour = 60 * 60;
|
||||
if (exp - now < oneHour) {
|
||||
removeToken();
|
||||
} else {
|
||||
const userInfo = await apiQueryProfile();
|
||||
if (userInfo) {
|
||||
flushSync(() => {
|
||||
setInitialState((s: any) => ({
|
||||
...s,
|
||||
currentUserProfile: userInfo,
|
||||
}));
|
||||
});
|
||||
}
|
||||
if (redirect) {
|
||||
history.push(redirect);
|
||||
} else {
|
||||
history.push(ROUTER_HOME);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
checkLogin();
|
||||
}, []);
|
||||
|
||||
const handleLogin = async (values: MasterModel.LoginRequestBody) => {
|
||||
try {
|
||||
const { email, password } = values;
|
||||
const resp = await apiLogin({
|
||||
guid: getBrowserId(),
|
||||
email,
|
||||
password,
|
||||
});
|
||||
if (resp?.token) {
|
||||
setToken(resp.token);
|
||||
const userInfo = await apiQueryProfile();
|
||||
if (userInfo) {
|
||||
flushSync(() => {
|
||||
setInitialState((s: any) => ({
|
||||
...s,
|
||||
currentUserProfile: userInfo,
|
||||
}));
|
||||
});
|
||||
}
|
||||
if (redirect) {
|
||||
history.push(redirect);
|
||||
} else {
|
||||
history.push(ROUTER_HOME);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
height: '100vh',
|
||||
}}
|
||||
>
|
||||
<LoginFormPage
|
||||
backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
|
||||
logo={getLogoImage()}
|
||||
backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
|
||||
title={
|
||||
<span style={{ color: token.colorBgContainer }}>
|
||||
{intl.formatMessage({
|
||||
id: getDomainTitle(),
|
||||
defaultMessage: 'Smatec',
|
||||
})}
|
||||
</span>
|
||||
}
|
||||
containerStyle={{
|
||||
backgroundColor: 'rgba(0, 0, 0,0.65)',
|
||||
backdropFilter: 'blur(4px)',
|
||||
}}
|
||||
subTitle={<Image preview={false} src={mobifontLogo} />}
|
||||
submitter={{
|
||||
searchConfig: {
|
||||
submitText: intl.formatMessage({
|
||||
id: 'master.auth.login.title',
|
||||
defaultMessage: 'Đăng nhập',
|
||||
}),
|
||||
},
|
||||
}}
|
||||
onFinish={async (values: MasterModel.LoginRequestBody) =>
|
||||
handleLogin(values)
|
||||
}
|
||||
>
|
||||
<>
|
||||
<ProFormText
|
||||
name="email"
|
||||
fieldProps={{
|
||||
autoComplete: 'email',
|
||||
autoFocus: true,
|
||||
size: 'large',
|
||||
prefix: (
|
||||
<UserOutlined
|
||||
style={{
|
||||
color: token.colorText,
|
||||
}}
|
||||
className={'prefixIcon'}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'master.auth.login.email',
|
||||
defaultMessage: 'Email',
|
||||
})}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage({
|
||||
id: 'master.auth.validation.email',
|
||||
defaultMessage: 'Email không được để trống!',
|
||||
}),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText.Password
|
||||
name="password"
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
autoComplete: 'current-password',
|
||||
prefix: (
|
||||
<LockOutlined
|
||||
style={{
|
||||
color: token.colorText,
|
||||
}}
|
||||
className={'prefixIcon'}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'master.auth.password',
|
||||
defaultMessage: 'Mật khẩu',
|
||||
})}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: intl.formatMessage({
|
||||
id: 'master.auth.validation.password',
|
||||
defaultMessage: 'Mật khẩu không được để trống!',
|
||||
}),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
</LoginFormPage>
|
||||
<div className="absolute top-5 right-5 z-50 flex gap-4">
|
||||
<ThemeSwitcherAuth />
|
||||
<LangSwitches />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
zIndex: 99,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default LoginPage;
|
||||
Reference in New Issue
Block a user