cross_loading

code/web/client/src/sections/auth/containers/login.jsx

@@ -8,90 +8,90 @@ import { IconLock, IconUser } from '@douyinfe/semi-icons';
 import '../style.less'
 
 const Login = props => {
-   const { dispatch, user, error, actions, apiRoot, isRequesting } = props
-   const form = useRef();
+    const { dispatch, user, error, actions, apiRoot, isRequesting } = props
+    const form = useRef();
 
-   useEffect(() => {
-      if (error) {
-         Toast.error(error);
-         form.current.setValue('password', '')
-      }
-   }, [error])
+    useEffect(() => {
+        if (error) {
+            Toast.error(error);
+            form.current.setValue('password', '')
+        }
+    }, [error])
 
-   useEffect(() => {
-      if (user && user.authorized) {
-         dispatch(push('/'));
-         localStorage.setItem('fs_iot_auth_selected_sider', JSON.stringify([]))
-         localStorage.setItem('fs_iot_auth_open_sider', JSON.stringify([]))
-      }
-   }, [user])
+    useEffect(() => {
+        if (user && user.authorized) {
+            dispatch(push('/'));
+            localStorage.setItem('fs_iot_auth_selected_sider', JSON.stringify([]))
+            localStorage.setItem('fs_iot_auth_open_sider', JSON.stringify([]))
+        }
+    }, [user])
 
-   return (
-      <div style={{
-         height: '100vh',
-         backgroundImage: "url('/assets/images/background/loginBackground.png')",
-         backgroundSize: 'cover',
-         backgroundRepeat: 'no-repeat',
-         position: 'relative',
-      }}>
-         <div style={{
-            width: 446,
-            height: 348,
-            padding: '45px 60px',
-            backgroundImage: "url('/assets/images/background/loginbg.png')",
-            backgroundSize: '100% 100%',
+    return (
+        <div style={{
+            height: '100vh',
+            backgroundImage: "url('/assets/images/background/loginBackground.png')",
+            backgroundSize: 'cover',
             backgroundRepeat: 'no-repeat',
-            position: 'absolute',
-            top: '33.89%',
-            right: '16.43%',
-         }}>
-            <div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}>
-               <img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} />
+            position: 'relative',
+        }}>
+            <div style={{
+                width: 446,
+                height: 348,
+                padding: '45px 60px',
+                backgroundImage: "url('/assets/images/background/loginbg.png')",
+                backgroundSize: '100% 100%',
+                backgroundRepeat: 'no-repeat',
+                position: 'absolute',
+                top: '33.89%',
+                right: '16.43%',
+            }}>
+                <div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}>
+                    <img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} />
+                </div>
+                <Form
+                    onSubmit={values => {
+                        dispatch(login(values.username, values.password)).then(res => {
+                            const data = res.payload.user
+                            dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token }))
+                        })
+                    }}
+                    getFormApi={formApi => form.current = formApi}
+                >
+                    <Form.Input
+                        className='inputbgc'
+                        field='username'
+                        noLabel={true}
+                        label='用户名'
+                        placeholder='请输入账号'
+                        prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
+                        style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
+                    />
+                    <Form.Input
+                        field='password'
+                        noLabel={true}
+                        mode="password"
+                        autoComplete=""
+                        placeholder='请输入密码'
+                        label='密码'
+                        prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
+                        style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
+                    />
+                    <Button htmlType='submit' block theme="solid" style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
+                </Form>
             </div>
-            <Form
-               onSubmit={values => {
-                  dispatch(login(values.username, values.password)).then(res => {
-                     const data = res.payload.user
-                     dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token }))
-                  })
-               }}
-               getFormApi={formApi => form.current = formApi}
-            >
-               <Form.Input
-                  className='inputbgc'
-                  field='username'
-                  noLabel={true}
-                  label='用户名'
-                  placeholder='请输入账号'
-                  prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
-                  style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
-               />
-               <Form.Input
-                  field='password'
-                  noLabel={true}
-                  mode="password"
-                  autoComplete=""
-                  placeholder='请输入密码'
-                  label='密码'
-                  prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
-                  style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
-               />
-               <Button htmlType='submit' block theme="solid" style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
-            </Form>
-         </div>
-      </div>
-   );
+        </div>
+    );
 }
 
 function mapStateToProps (state) {
-   const { auth, global } = state;
-   return {
-      user: auth.user,
-      error: auth.error,
-      actions: global.actions,
-      apiRoot: global.apiRoot,
-      isRequesting: auth.isRequesting
-   }
+    const { auth, global } = state;
+    return {
+        user: auth.user,
+        error: auth.error,
+        actions: global.actions,
+        apiRoot: global.apiRoot,
+        isRequesting: auth.isRequesting
+    }
 }
 
 export default connect(mapStateToProps)(Login);