Some refactoring to aling it more with IVIS and coreui theme.

client/src/login/Login.js

@@ -0,0 +1,131 @@
+'use strict';
+
+import React, {Component} from 'react';
+import {withTranslation} from '../lib/i18n';
+import {
+    Title,
+    withPageHelpers
+} from '../lib/page'
+import {Link} from 'react-router-dom'
+import {
+    Button,
+    ButtonRow,
+    CheckBox,
+    Form,
+    FormSendMethod,
+    InputField,
+    withForm
+} from '../lib/form';
+import {withErrorHandling} from '../lib/error-handling';
+import qs
+    from 'querystringify';
+import interoperableErrors
+    from '../../../shared/interoperable-errors';
+import mailtrainConfig
+    from 'mailtrainConfig';
+import {getUrl} from "../lib/urls";
+import {withComponentMixins} from "../lib/decorator-helpers";
+
+@withComponentMixins([
+    withTranslation,
+    withForm,
+    withErrorHandling,
+    withPageHelpers
+])
+export default class Login extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+
+        this.initForm();
+    }
+
+    componentDidMount() {
+        this.populateFormValues({
+            username: '',
+            password: '',
+            remember: false
+        });
+    }
+
+    localValidateFormValues(state) {
+        const t = this.props.t;
+
+        const username = state.getIn(['username', 'value']);
+        if (!username) {
+            state.setIn(['username', 'error'], t('userNameMustNotBeEmpty'));
+        } else {
+            state.setIn(['username', 'error'], null);
+        }
+
+        const password = state.getIn(['password', 'value']);
+        if (!username) {
+            state.setIn(['password', 'error'], t('passwordMustNotBeEmpty'));
+        } else {
+            state.setIn(['password', 'error'], null);
+        }
+    }
+
+    async submitHandler() {
+        const t = this.props.t;
+
+        try {
+            this.disableForm();
+            this.setFormStatusMessage('info', t('verifyingCredentials'));
+
+            const submitSuccessful = await this.validateAndSendFormValuesToURL(FormSendMethod.POST, 'rest/login');
+
+            if (submitSuccessful) {
+                const nextUrl = qs.parse(this.props.location.search).next || getUrl();
+
+                /* This ensures we get config for the authenticated user */
+                window.location = nextUrl;
+            } else {
+                this.setFormStatusMessage('warning', t('pleaseEnterYourCredentialsAndTryAgain'));
+            }
+        } catch (error) {
+            if (error instanceof interoperableErrors.IncorrectPasswordError) {
+                this.enableForm();
+
+                this.setFormStatusMessage('danger',
+                    <span>
+                        <strong>{t('invalidUsernameOrPassword')}</strong>
+                    </span>
+                );
+
+                return;
+            }
+
+            throw error;
+        }
+    }
+
+    render() {
+        const t = this.props.t;
+
+        let passwordResetLink;
+        if (mailtrainConfig.isAuthMethodLocal) {
+            passwordResetLink = <Link to={`/login/forgot/${this.getFormValue('username')}`}>{t('forgotYourPassword?')}</Link>;
+        } else if (mailtrainConfig.externalPasswordResetLink) {
+            passwordResetLink = <a href={mailtrainConfig.externalPasswordResetLink}>{t('forgotYourPassword?')}</a>;
+        }
+
+        return (
+            <div>
+                <Title>{t('signIn')}</Title>
+
+                <Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
+                    <InputField id="username" label={t('username')}/>
+                    <InputField id="password" label={t('password')} type="password" />
+                    <CheckBox id="remember" text={t('rememberMe')}/>
+
+                    <ButtonRow>
+                        <Button type="submit" className="btn-primary" icon="check" label={t('signIn')}/>
+                        {passwordResetLink}
+                    </ButtonRow>
+                </Form>
+            </div>
+        );
+    }
+}