Login page, router

cvat-ai · nmanovic · Oct 14, 2019 · Sep 24, 2019 · Sep 26, 2019 · Sep 26, 2019
commit 7ce803800061d0320f90bcda80afb0cd3c755578
@@ -34,13 +34,15 @@
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.1.2",
-    "@types/react-router-dom": "^4.3.5",
+    "@types/react-router": "^5.0.5",
+    "@types/react-router-dom": "^5.1.0",
     "antd": "^3.23.2",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-redux": "^7.1.1",
-    "react-router-dom": "^5.0.1",
+    "react-router": "^5.1.0",
+    "react-router-dom": "^5.1.0",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0"
   }

@@ -1,43 +1,90 @@
 import { AnyAction, Dispatch, ActionCreator } from 'redux';
 import { ThunkAction } from 'redux-thunk';
-import cvat from '../../public/cvat-core.node';
+import _cvat from '../../../cvat-core/dist/cvat-core.node';
+
+const cvat: any = _cvat;
 
 export enum AuthActionTypes {
     AUTHORIZED_ASYNC = 'AUTHORIZED_ASYNC',
     AUTHORIZED_FETCHING = 'AUTHORIZED_FETCHING',
     AUTHORIZED_SUCCESS = 'AUTHORIZED_SUCCESS',
     AUTHORIZED_FAILED = 'AUTHORIZED_FAILED',
+    LOGIN_SUCCESS = 'LOGIN_SUCCESS',
+    LOGIN_FAILED = 'LOGIN_FAILED',
+}
+
+export function registerSuccess(user: any): AnyAction {
+
+}
+
+export function registerFailed(registerError: any): AnyAction {
+
 }
 
-export function authorizedSuccess(userInstance: any): AnyAction {
+export function loginSuccess(user: any): AnyAction {
+    return {
+        type: AuthActionTypes.LOGIN_SUCCESS,
+        payload: {
+            user,
+        },
+    };
+}
+
+export function loginFailed(loginError: any): AnyAction {
+    return {
+        type: AuthActionTypes.LOGIN_FAILED,
+        payload: {
+            loginError,
+        },
+    };
+}
+
+export function authorizedSuccess(user: any): AnyAction {
     return {
         type: AuthActionTypes.AUTHORIZED_SUCCESS,
         payload: {
-            user: userInstance,
+            user,
         },
     };
 }
 
-export function authorizedFailed(error: string): AnyAction {
+export function authorizedFailed(authError: any): AnyAction {
     return {
         type: AuthActionTypes.AUTHORIZED_FAILED,
         payload: {
-            error,
+            authError,
         },
     };
 }
 
+export function loginAsync(login: string,
+    password: string): ThunkAction<Promise<void>, {}, {}, AnyAction> {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        let user = null;
+        try {
+            await cvat.server.login(login, password);
+            user = await cvat.users.get({ self: true });
+        } catch (error) {
+            dispatch(loginFailed(error));
+            return;
+        }
+
+        dispatch(loginSuccess(user));
+    };
+}
+
 export function authorizedAsync(): ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         let result = null;
         try {
-            result = await (cvat as any).server.authorized();
+            result = await cvat.server.authorized();
         } catch (error) {
-            dispatch(authorizedFailed(error.toString()));
+            dispatch(authorizedFailed(error));
+            return;
         }
 
         if (result) {
-            const userInstance = await (cvat as any).users.get({ self: true });
+            const userInstance = await cvat.users.get({ self: true });
             dispatch(authorizedSuccess(userInstance));
         } else {
             dispatch(authorizedSuccess(null));

@@ -0,0 +1,79 @@
+import React from 'react';
+import Text from 'antd/lib/typography/Text';
+import { FormComponentProps } from 'antd/lib/form/Form';
+import {
+    Button,
+    Icon,
+    Input,
+    Form,
+    Row,
+    Col
+} from 'antd';
+
+interface LoginFormProps {
+    onSubmit(login: string, password: string): void;
+}
+
+class LoginForm extends React.PureComponent<FormComponentProps & LoginFormProps> {
+    constructor(props: FormComponentProps & LoginFormProps) {
+        super(props);
+    }
+
+    private handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        this.props.form.validateFields((error, values) => {
+            if (!error) {
+                this.props.onSubmit(values.username, values.password);
+            }
+        });
+    }
+
+    public render() {
+        const { getFieldDecorator } = this.props.form;
+
+        return (
+            <Form onSubmit={this.handleSubmit.bind(this)} className='login-form'>
+                <Form.Item>
+                    {getFieldDecorator('username', {
+                        rules: [{
+                            required: true,
+                            message: 'Please specify a username',
+                        }],
+                    })(
+                        <Input
+                            autoComplete='username'
+                            prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)'}} />}
+                            placeholder='Username'
+                        />
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('password', {
+                        rules: [{
+                            required: true,
+                            message: 'Please specify a password',
+                        }],
+                    })(
+                        <Input
+                            autoComplete='current-password'
+                            prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)'}} />}
+                            placeholder='Password'
+                            type='password'
+                        />
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <Row type='flex' justify='start' align='middle'>
+                        <Col>
+                            <Button type='primary' htmlType='submit' className='login-form-button'>
+                                Sign in
+                            </Button>
+                        </Col>
+                    </Row>
+                </Form.Item>
+            </Form>
+        );
+    }
+}
+
+export default Form.create<FormComponentProps & LoginFormProps>()(LoginForm);
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { Switch, Route, Redirect } from 'react-router';
+import { BrowserRouter } from 'react-router-dom';
 
 import { Spin } from 'antd';
 import 'antd/dist/antd.css';
@@ -16,27 +17,29 @@ import LoginPage from './login-page';
 import RegisterPage from './register-page';
 
 
-export interface CVATProps {
+export interface CVATAppProps {
     auth: AuthState;
 }
 
-export interface CVATActProps {
+export interface CVATAppActions {
     verifyAuthorized: () => void;
 }
 
-function mapStateToProps(state: any): CVATProps {
+function mapStateToProps(state: any): CVATAppProps {
     return {
         auth: state.auth,
     };
 }
 
-function mapDispatchToProps(dispatch: any): CVATActProps {
+function mapDispatchToProps(dispatch: any): CVATAppActions {
     return {
         verifyAuthorized: (): void => dispatch(authorizedAsync())
     };
 }
 
-class CVATApplication extends React.PureComponent<CVATProps & CVATActProps> {
+class CVATApplication extends React.PureComponent<
+CVATAppProps &
+CVATAppActions> {
     constructor(props: any) {
         super(props);
     }
@@ -52,18 +55,23 @@ class CVATApplication extends React.PureComponent<CVATProps & CVATActProps> {
                 return (
                     <BrowserRouter>
                         <Switch>
-                            <Route exact path='/auth/register' component={RegisterPage}/>
-                            <Route exact path='/auth/login' component={LoginPage}/>
                             <Route exact path='/tasks' component={TasksPage}/>
                             <Route path='/tasks/create' component={CreateTaskPage}/>
                             <Route path='/tasks/:number' component={TaskPage}/>
                             <Route path='/tasks/:number/jobs/:number' component={AnnotationPage}/>
+                            <Redirect to='/tasks'/>
                         </Switch>
                     </BrowserRouter>
                 );
             } else {
                 return (
-                    <LoginPage />
+                    <BrowserRouter>
+                            <Switch>
+                                <Route exact path='/auth/register' component={RegisterPage}/>
+                                <Route exact path='/auth/login' component={LoginPage}/>
+                                <Redirect to='/auth/login'/>
+                            </Switch>
+                    </BrowserRouter>
                 );
             }
         } else {

@@ -1,23 +1,84 @@
 import React from 'react';
-import { Button, Icon, Input, Form, Col, Row } from 'antd';
+import { connect } from 'react-redux';
+import { RouteComponentProps } from 'react-router';
+import { Redirect, Link, withRouter } from 'react-router-dom';
+
 import Title from 'antd/lib/typography/Title';
+import Text from 'antd/lib/typography/Text';
+import {
+    Col,
+    Row
+} from 'antd';
+
+import LoginForm from '../components/login-form';
+
+import { loginAsync } from '../actions/auth-actions';
+import { AuthState } from '../reducers/auth-reducer';
+
+interface LoginPageProps {
+    auth: AuthState;
+}
+
+interface LoginPageActions {
+    login(login: string, password: string): void;
+}
 
-export default class LoginPage extends React.PureComponent {
+function mapStateToProps(state: any): LoginPageProps {
+    return {
+        auth: state.auth,
+    };
+}
+
+function mapDispatchToProps(dispatch: any): LoginPageActions {
+    return {
+        login: (login: string, password: string) => dispatch(loginAsync(login, password)),
+    }
+}
+
+class LoginPage extends React.PureComponent<
+    LoginPageProps &
+    LoginPageActions &
+    RouteComponentProps> {
     constructor(props: any) {
         super(props);
     }
 
     public render() {
+        const { loginError } = this.props.auth;
+        const sizes = {
+            xs: { span: 14 },
+            sm: { span: 14 },
+            md: { span: 10 },
+            lg: { span: 4 },
+            xl: { span: 4 },
+        }
         return (
-            <div>
-                <Row type="flex" justify="center" align="middle">
-                    <Col xs={{span: 14}} sm={{span: 12}} md={{span: 10}} lg={{span: 8}} xl={{span: 6}}>
-                        <Form>
-                            <Title>Login</Title>
-                        </Form>
-                    </Col>
-                </Row>
-            </div>
+            <Row type='flex' justify='center' align='middle'>
+                <Col {...sizes}>
+                    <Redirect to='/auth/login'/>
+                    <Title level={2}> Login </Title>
+                    <LoginForm onSubmit={this.props.login}/>
+                    { loginError &&
+                        <Row>
+                            <Col>
+                                <Text type="danger"> { loginError.message } </Text>
+                            </Col>
+                        </Row>
+                    }
+                    <Row type='flex' justify='start' align='top'>
+                        <Col>
+                            <Text strong>
+                                New to CVAT? Create <Link to="/auth/register">an account</Link>
+                            </Text>
+                        </Col>
+                    </Row>
+                </Col>
+            </Row>
         );
     }
 }
+
+export default withRouter(connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(LoginPage));
@@ -8,8 +8,10 @@
     </head>
 
     <body>
-        <div id="root" style="width: 100%; height: 100%;">
+        <div id="root" style="width: 100%; height: 100%; display: grid;">
 
         </div>
+
+        <script src="/cvat-ui.min.js" type="text/javascript"></script>
     </body>
 </html>
@@ -1,15 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
-import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
-import thunk from 'redux-thunk';
 
-import rootReducer from './reducers/root-reducer';
 import CVATApplication from './containers/cvat-app';
+import createCVATStore from './store';
 
-const middlewares = [thunk];
-const cvatStore = createStore(rootReducer, applyMiddleware(...middlewares))
+const cvatStore = createCVATStore();
 
 ReactDOM.render(
     (