Skip to content

Commit

Permalink
[Optimize][Web] Optimize the responsive layout of the login interface (…
Browse files Browse the repository at this point in the history 
…#3979)
  • Loading branch information
@zackyoungh
zackyoungh authored Nov 28, 2024
1 parent be71bc2 commit bdec795
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 47 deletions.
3 changes: 1 addition & 2 deletions dinky-web/src/components/Flink/FlinkDag/functions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@ export const buildDag = (job: Jobs.JobPlan) => {
const nodes: any = [];

if (!job) return { nodes: nodes, edges: edges };

job.nodes.forEach((node) => {
job.nodes?.forEach((node) => {
nodes.push({
id: node.id,
shape: 'data-processing-dag-node',
Expand Down
94 changes: 50 additions & 44 deletions dinky-web/src/pages/Other/Login/LoginForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,26 @@
*
*/

import { API_CONSTANTS } from '@/services/endpoints';
import { l } from '@/utils/intl';
import { GithubOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
import { DefaultFooter, ProForm, ProFormCheckbox, ProFormText } from '@ant-design/pro-components';
import { SubmitterProps } from '@ant-design/pro-form/es/components';
import { Col, Flex, Row } from 'antd';
import React, { useState } from 'react';
import {API_CONSTANTS} from '@/services/endpoints';
import {l} from '@/utils/intl';
import {GithubOutlined, LockOutlined, UserOutlined} from '@ant-design/icons';
import {DefaultFooter, ProForm, ProFormCheckbox, ProFormText} from '@ant-design/pro-components';
import {SubmitterProps} from '@ant-design/pro-form/es/components';
import {Col, Flex, Row} from 'antd';
import React, {useState} from 'react';
import style from '../../../../global.less';
import Lottie from 'react-lottie';
import DataPlatform from '../../../../../public/login_animation.json';
import { useRequest } from '@@/exports';
import { history } from '@umijs/max';
import { GLOBAL_SETTING_KEYS } from '@/types/SettingCenter/data.d';
import {useRequest} from '@@/exports';
import {history} from '@umijs/max';
import {GLOBAL_SETTING_KEYS} from '@/types/SettingCenter/data.d';

type LoginFormProps = {
onSubmit: (values: any) => Promise<void>;
};

const LoginForm: React.FC<LoginFormProps> = (props) => {
const { onSubmit } = props;
const {onSubmit} = props;

const [form] = ProForm.useForm();

Expand All @@ -55,7 +55,7 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {

const handleClickLogin = async () => {
setSubmitting(true);
await onSubmit({ ...form.getFieldsValue() });
await onSubmit({...form.getFieldsValue()});
setSubmitting(false);
};

Expand All @@ -66,7 +66,7 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
name='username'
fieldProps={{
size: 'large',
prefix: <UserOutlined />
prefix: <UserOutlined/>
}}
required
placeholder={l('login.username.placeholder')}
Expand All @@ -81,7 +81,7 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
name='password'
fieldProps={{
size: 'large',
prefix: <LockOutlined />
prefix: <LockOutlined/>
}}
placeholder={l('login.password.placeholder')}
rules={[
Expand All @@ -95,7 +95,7 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
<Col span={12}>
<ProFormCheckbox name='autoLogin'>{l('login.rememberMe')}</ProFormCheckbox>
</Col>
<Col span={12} style={{ textAlign: 'right' }}>
<Col span={12} style={{textAlign: 'right'}}>
<ProFormCheckbox name='ldapLogin' hidden={!ldapEnabled}>
{l('login.ldapLogin')}
</ProFormCheckbox>
Expand All @@ -106,15 +106,15 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
};

const proFormSubmitter: SubmitterProps = {
searchConfig: { submitText: l('menu.login') },
searchConfig: {submitText: l('menu.login')},
resetButtonProps: false,
submitButtonProps: {
loading: submitting,
autoFocus: true,
htmlType: 'submit',
size: 'large',
shape: 'round',
style: { width: '100%' }
style: {width: '100%'}
}
};

Expand All @@ -140,34 +140,40 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
}}
>
<Col
style={{ padding: '5%', backgroundColor: '#fff' }}
style={{padding: '5%', backgroundColor: '#fff',display:'flex',flexDirection:'column',justifyContent:"center"}}
xs={24}
sm={24}
md={10}
lg={8}
xl={8}
md={24}
lg={24}
xl={14}
xxl={8}
>
<Row
style={{ color: '#00b0ff', marginBottom: 60, justifyContent: 'center' }}
align={'middle'}
>
<img src={'./dinky.svg'} width={150} alt={''} />
<h1 style={{ margin: '0' }}>{l('layouts.userLayout.title')}</h1>
</Row>
<Row>
<Col xl={12} xxl={24}>
<Row
style={{color: '#00b0ff', marginBottom: 60, justifyContent: 'center'}}
align={'middle'}
>
<img src={'./dinky.svg'} width={150} alt={''}/>
<h1 style={{margin: '0'}}>{l('layouts.userLayout.title')}</h1>
</Row>
</Col>

<ProForm
className={style.loginform}
form={form}
onFinish={handleClickLogin}
initialValues={{ autoLogin: true }}
submitter={{ ...proFormSubmitter }}
>
{renderLoginForm()}
</ProForm>
<Col xl={12} xxl={24}>
<ProForm
className={style.loginform}
form={form}
onFinish={handleClickLogin}
initialValues={{autoLogin: true}}
submitter={{...proFormSubmitter}}
>
{renderLoginForm()}
</ProForm>
</Col>
</Row>
<DefaultFooter
copyright={`${new Date().getFullYear()} ` + l('app.copyright.produced')}
style={{ backgroundColor: '#fff' }}
style={{backgroundColor: '#fff'}}
links={[
{
key: 'Dinky',
Expand All @@ -177,7 +183,7 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
},
{
key: 'github',
title: <GithubOutlined />,
title: <GithubOutlined/>,
href: 'https://github.com/DataLinkDC/dinky',
blankTarget: true
}
Expand All @@ -187,17 +193,17 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
<Col
xs={0}
sm={0}
md={14}
lg={16}
xl={16}
md={0}
lg={0}
xl={10}
xxl={16}
style={{
backgroundImage: 'linear-gradient(135deg,#1fa2ff,#12d8fa,#a6ffcb)',
width: '100%',
height: '100%'
}}
>
<Flex align={'center'} style={{ width: '100%', height: '100%' }}>
<Flex align={'center'} style={{width: '100%', height: '100%'}}>
<Lottie
options={{
loop: true,
Expand All @@ -220,7 +226,7 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
src={'./icons/footer-bg.svg'}
width={'100%'}
alt={''}
style={{ position: 'absolute', bottom: 0 }}
style={{position: 'absolute', bottom: 0}}
/>
</>
);
Expand Down
1 change: 0 additions & 1 deletion dinky-web/src/pages/Other/Login/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
*
*/

import Footer from '@/components/Footer';
import ChooseModal from '@/pages/Other/Login/ChooseModal';
import { gotoRedirectUrl, initSomeThing, redirectToLogin } from '@/pages/Other/Login/function';
import LangSwitch from '@/pages/Other/Login/LangSwitch';
Expand Down

0 comments on commit bdec795

Please sign in to comment.