diff --git a/scm-ui/src/config/components/form/AdminSettings.js b/scm-ui/src/config/components/form/AdminSettings.js
index fc74e92b48..7f244d4aaf 100644
--- a/scm-ui/src/config/components/form/AdminSettings.js
+++ b/scm-ui/src/config/components/form/AdminSettings.js
@@ -1,93 +1,93 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Subtitle, AddEntryToTableField } from "@scm-manager/ui-components";
-import AdminGroupTable from "../table/AdminGroupTable";
-import AdminUserTable from "../table/AdminUserTable";
-
-type Props = {
-  adminGroups: string[],
-  adminUsers: string[],
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean
-};
-
-class AdminSettings extends React.Component<Props> {
-  render() {
-    const { t, adminGroups, adminUsers, hasUpdatePermission } = this.props;
-
-    return (
-      <div>
-        <Subtitle subtitle={t("admin-settings.name")} />
-            <div class="columns">
-              <div class="column is-half">
-                <AdminGroupTable
-                  adminGroups={adminGroups}
-                  onChange={(isValid, changedValue, name) =>
-                    this.props.onChange(isValid, changedValue, name)
-                  }
-                  disabled={!hasUpdatePermission}
-                />
-                    
-                <AddEntryToTableField
-                  addEntry={this.addGroup}
-                  disabled={!hasUpdatePermission}
-                  buttonLabel={t("admin-settings.add-group-button")}
-                  fieldLabel={t("admin-settings.add-group-textfield")}
-                  errorMessage={t("admin-settings.add-group-error")}
-                />
-            </div>
-            <div class="column is-half">
-                <AdminUserTable
-                  adminUsers={adminUsers}
-                  onChange={(isValid, changedValue, name) =>
-                    this.props.onChange(isValid, changedValue, name)
-                  }
-                  disabled={!hasUpdatePermission}
-                />
-                <AddEntryToTableField
-                  addEntry={this.addUser}
-                  disabled={!hasUpdatePermission}
-                  buttonLabel={t("admin-settings.add-user-button")}
-                  fieldLabel={t("admin-settings.add-user-textfield")}
-                  errorMessage={t("admin-settings.add-user-error")}
-                />
-            </div> 
-        </div> 
-      </div>
-    );
-  }
-
-  addGroup = (groupname: string) => {
-    if (this.isAdminGroupMember(groupname)) {
-      return;
-    }
-    this.props.onChange(
-      true,
-      [...this.props.adminGroups, groupname],
-      "adminGroups"
-    );
-  };
-
-  isAdminGroupMember = (groupname: string) => {
-    return this.props.adminGroups.includes(groupname);
-  };
-
-  addUser = (username: string) => {
-    if (this.isAdminUserMember(username)) {
-      return;
-    }
-    this.props.onChange(
-      true,
-      [...this.props.adminUsers, username],
-      "adminUsers"
-    );
-  };
-
-  isAdminUserMember = (username: string) => {
-    return this.props.adminUsers.includes(username);
-  };
-}
-
-export default translate("config")(AdminSettings);
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Subtitle, AddEntryToTableField } from "@scm-manager/ui-components";
+import AdminGroupTable from "../table/AdminGroupTable";
+import AdminUserTable from "../table/AdminUserTable";
+
+type Props = {
+  adminGroups: string[],
+  adminUsers: string[],
+  t: string => string,
+  onChange: (boolean, any, string) => void,
+  hasUpdatePermission: boolean
+};
+
+class AdminSettings extends React.Component<Props> {
+  render() {
+    const { t, adminGroups, adminUsers, hasUpdatePermission } = this.props;
+
+    return (
+      <div>
+        <Subtitle subtitle={t("admin-settings.name")} />
+            <div className="columns">
+              <div className="column is-half">
+                <AdminGroupTable
+                  adminGroups={adminGroups}
+                  onChange={(isValid, changedValue, name) =>
+                    this.props.onChange(isValid, changedValue, name)
+                  }
+                  disabled={!hasUpdatePermission}
+                />
+                    
+                <AddEntryToTableField
+                  addEntry={this.addGroup}
+                  disabled={!hasUpdatePermission}
+                  buttonLabel={t("admin-settings.add-group-button")}
+                  fieldLabel={t("admin-settings.add-group-textfield")}
+                  errorMessage={t("admin-settings.add-group-error")}
+                />
+            </div>
+            <div className="column is-half">
+                <AdminUserTable
+                  adminUsers={adminUsers}
+                  onChange={(isValid, changedValue, name) =>
+                    this.props.onChange(isValid, changedValue, name)
+                  }
+                  disabled={!hasUpdatePermission}
+                />
+                <AddEntryToTableField
+                  addEntry={this.addUser}
+                  disabled={!hasUpdatePermission}
+                  buttonLabel={t("admin-settings.add-user-button")}
+                  fieldLabel={t("admin-settings.add-user-textfield")}
+                  errorMessage={t("admin-settings.add-user-error")}
+                />
+            </div> 
+        </div> 
+      </div>
+    );
+  }
+
+  addGroup = (groupname: string) => {
+    if (this.isAdminGroupMember(groupname)) {
+      return;
+    }
+    this.props.onChange(
+      true,
+      [...this.props.adminGroups, groupname],
+      "adminGroups"
+    );
+  };
+
+  isAdminGroupMember = (groupname: string) => {
+    return this.props.adminGroups.includes(groupname);
+  };
+
+  addUser = (username: string) => {
+    if (this.isAdminUserMember(username)) {
+      return;
+    }
+    this.props.onChange(
+      true,
+      [...this.props.adminUsers, username],
+      "adminUsers"
+    );
+  };
+
+  isAdminUserMember = (username: string) => {
+    return this.props.adminUsers.includes(username);
+  };
+}
+
+export default translate("config")(AdminSettings);
diff --git a/scm-ui/src/config/components/form/BaseUrlSettings.js b/scm-ui/src/config/components/form/BaseUrlSettings.js
index 84a75d5d06..3fa0e67b84 100644
--- a/scm-ui/src/config/components/form/BaseUrlSettings.js
+++ b/scm-ui/src/config/components/form/BaseUrlSettings.js
@@ -1,54 +1,53 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Checkbox, InputField, Subtitle } from "@scm-manager/ui-components";
-
-type Props = {
-  baseUrl: string,
-  forceBaseUrl: boolean,
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean
-};
-
-class BaseUrlSettings extends React.Component<Props> {
-  render() {
-    const { t, baseUrl, forceBaseUrl, hasUpdatePermission } = this.props;
-
-    return (
-      <div>
-        <Subtitle subtitle={t("base-url-settings.name")} />
-        <div class="columns">
-            <div class="column is-half">
-               
-                <Checkbox
-                  checked={forceBaseUrl}
-                  label={t("base-url-settings.force-base-url")}
-                  onChange={this.handleForceBaseUrlChange}
-                  disabled={!hasUpdatePermission}
-                  helpText={t("help.forceBaseUrlHelpText")}
-                />
-            </div>
-            <div class="column is-half">
-                <InputField
-                  label={t("base-url-settings.base-url")}
-                  onChange={this.handleBaseUrlChange}
-                  value={baseUrl}
-                  disabled={!hasUpdatePermission}
-                  helpText={t("help.baseUrlHelpText")}
-                />
-            </div>
-        </div>
-     </div>
-    );
-  }
-
-  handleBaseUrlChange = (value: string) => {
-    this.props.onChange(true, value, "baseUrl");
-  };
-  handleForceBaseUrlChange = (value: boolean) => {
-    this.props.onChange(true, value, "forceBaseUrl");
-  };
-}
-
-export default translate("config")(BaseUrlSettings);
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Checkbox, InputField, Subtitle } from "@scm-manager/ui-components";
+
+type Props = {
+  baseUrl: string,
+  forceBaseUrl: boolean,
+  t: string => string,
+  onChange: (boolean, any, string) => void,
+  hasUpdatePermission: boolean
+};
+
+class BaseUrlSettings extends React.Component<Props> {
+  render() {
+    const { t, baseUrl, forceBaseUrl, hasUpdatePermission } = this.props;
+
+    return (
+      <div>
+        <Subtitle subtitle={t("base-url-settings.name")} />
+        <div className="columns">
+          <div className="column is-half">
+            <Checkbox
+              checked={forceBaseUrl}
+              label={t("base-url-settings.force-base-url")}
+              onChange={this.handleForceBaseUrlChange}
+              disabled={!hasUpdatePermission}
+              helpText={t("help.forceBaseUrlHelpText")}
+            />
+          </div>
+          <div className="column is-half">
+            <InputField
+              label={t("base-url-settings.base-url")}
+              onChange={this.handleBaseUrlChange}
+              value={baseUrl}
+              disabled={!hasUpdatePermission}
+              helpText={t("help.baseUrlHelpText")}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  handleBaseUrlChange = (value: string) => {
+    this.props.onChange(true, value, "baseUrl");
+  };
+  handleForceBaseUrlChange = (value: boolean) => {
+    this.props.onChange(true, value, "forceBaseUrl");
+  };
+}
+
+export default translate("config")(BaseUrlSettings);
diff --git a/scm-ui/src/config/components/form/GeneralSettings.js b/scm-ui/src/config/components/form/GeneralSettings.js
index f88b487d44..d2f891fd06 100644
--- a/scm-ui/src/config/components/form/GeneralSettings.js
+++ b/scm-ui/src/config/components/form/GeneralSettings.js
@@ -1,165 +1,165 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Checkbox, InputField } from "@scm-manager/ui-components";
-
-type Props = {
-  realmDescription: string,
-  enableRepositoryArchive: boolean,
-  disableGroupingGrid: boolean,
-  dateFormat: string,
-  anonymousAccessEnabled: boolean,
-  skipFailedAuthenticators: boolean,
-  pluginUrl: string,
-  enabledXsrfProtection: boolean,
-  defaultNamespaceStrategy: string,
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean
-};
-
-class GeneralSettings extends React.Component<Props> {
-  render() {
-    const {
-      t,
-      realmDescription,
-      enableRepositoryArchive,
-      disableGroupingGrid,
-      dateFormat,
-      anonymousAccessEnabled,
-      skipFailedAuthenticators,
-      pluginUrl,
-      enabledXsrfProtection,
-      defaultNamespaceStrategy,
-      hasUpdatePermission
-    } = this.props;
-
-    return (
-      <div>
-          <div class="columns">
-            <div class="column is-half">
-                <InputField
-                  label={t("general-settings.realm-description")}
-                  onChange={this.handleRealmDescriptionChange}
-                  value={realmDescription}
-                  disabled={!hasUpdatePermission}
-                  helpText={t("help.realmDescriptionHelpText")}
-                />
-                </div>
-                <div class="column is-half">
-                <InputField
-                  label={t("general-settings.date-format")}
-                  onChange={this.handleDateFormatChange}
-                  value={dateFormat}
-                  disabled={!hasUpdatePermission}
-                  helpText={t("help.dateFormatHelpText")}
-                />
-                </div>
-            </div>
-            <div class="columns">
-                <div class="column is-half">
-                <InputField
-                  label={t("general-settings.plugin-url")}
-                  onChange={this.handlePluginUrlChange}
-                  value={pluginUrl}
-                  disabled={!hasUpdatePermission}
-                  helpText={t("help.pluginRepositoryHelpText")}
-                />
-                </div>
-                <div class="column is-half">
-                <InputField
-                  label={t("general-settings.default-namespace-strategy")}
-                  onChange={this.handleDefaultNamespaceStrategyChange}
-                  value={defaultNamespaceStrategy}
-                  disabled={!hasUpdatePermission}
-                  helpText={t("help.defaultNameSpaceStrategyHelpText")}
-                />
-                </div>
-            </div>
-            <div class="columns">
-                <div class="column is-half">
-                    <Checkbox
-                      checked={enabledXsrfProtection}
-                      label={t("general-settings.enabled-xsrf-protection")}
-                      onChange={this.handleEnabledXsrfProtectionChange}
-                      disabled={!hasUpdatePermission}
-                      helpText={t("help.enableXsrfProtectionHelpText")}
-                    />
-                </div>
-                <div class="column is-half">
-                    <Checkbox
-                      checked={enableRepositoryArchive}
-                      label={t("general-settings.enable-repository-archive")}
-                      onChange={this.handleEnableRepositoryArchiveChange}
-                      disabled={!hasUpdatePermission}
-                      helpText={t("help.enableRepositoryArchiveHelpText")}
-                    />
-                </div>
-            </div>
-            <div class="columns">
-                <div class="column is-half">
-                    <Checkbox
-                      checked={disableGroupingGrid}
-                      label={t("general-settings.disable-grouping-grid")}
-                      onChange={this.handleDisableGroupingGridChange}
-                      disabled={!hasUpdatePermission}
-                      helpText={t("help.disableGroupingGridHelpText")}
-                    />
-                </div>
-                <div class="column is-half">
-                    <Checkbox
-                      checked={anonymousAccessEnabled}
-                      label={t("general-settings.anonymous-access-enabled")}
-                      onChange={this.handleAnonymousAccessEnabledChange}
-                      disabled={!hasUpdatePermission}
-                      helpText={t("help.allowAnonymousAccessHelpText")}
-                    />
-                </div>
-            </div>
-            <div class="columns">
-                <div class="column is-half">
-                    <Checkbox
-                      checked={skipFailedAuthenticators}
-                      label={t("general-settings.skip-failed-authenticators")}
-                      onChange={this.handleSkipFailedAuthenticatorsChange}
-                      disabled={!hasUpdatePermission}
-                      helpText={t("help.skipFailedAuthenticatorsHelpText")}
-                    />
-                </div>
-            </div>
-          </div>
-    );
-  }
-
-  handleRealmDescriptionChange = (value: string) => {
-    this.props.onChange(true, value, "realmDescription");
-  };
-  handleEnableRepositoryArchiveChange = (value: boolean) => {
-    this.props.onChange(true, value, "enableRepositoryArchive");
-  };
-  handleDisableGroupingGridChange = (value: boolean) => {
-    this.props.onChange(true, value, "disableGroupingGrid");
-  };
-  handleDateFormatChange = (value: string) => {
-    this.props.onChange(true, value, "dateFormat");
-  };
-  handleAnonymousAccessEnabledChange = (value: string) => {
-    this.props.onChange(true, value, "anonymousAccessEnabled");
-  };
-
-  handleSkipFailedAuthenticatorsChange = (value: string) => {
-    this.props.onChange(true, value, "skipFailedAuthenticators");
-  };
-  handlePluginUrlChange = (value: string) => {
-    this.props.onChange(true, value, "pluginUrl");
-  };
-
-  handleEnabledXsrfProtectionChange = (value: boolean) => {
-    this.props.onChange(true, value, "enabledXsrfProtection");
-  };
-  handleDefaultNamespaceStrategyChange = (value: string) => {
-    this.props.onChange(true, value, "defaultNamespaceStrategy");
-  };
-}
-
-export default translate("config")(GeneralSettings);
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Checkbox, InputField } from "@scm-manager/ui-components";
+
+type Props = {
+  realmDescription: string,
+  enableRepositoryArchive: boolean,
+  disableGroupingGrid: boolean,
+  dateFormat: string,
+  anonymousAccessEnabled: boolean,
+  skipFailedAuthenticators: boolean,
+  pluginUrl: string,
+  enabledXsrfProtection: boolean,
+  defaultNamespaceStrategy: string,
+  t: string => string,
+  onChange: (boolean, any, string) => void,
+  hasUpdatePermission: boolean
+};
+
+class GeneralSettings extends React.Component<Props> {
+  render() {
+    const {
+      t,
+      realmDescription,
+      enableRepositoryArchive,
+      disableGroupingGrid,
+      dateFormat,
+      anonymousAccessEnabled,
+      skipFailedAuthenticators,
+      pluginUrl,
+      enabledXsrfProtection,
+      defaultNamespaceStrategy,
+      hasUpdatePermission
+    } = this.props;
+
+    return (
+      <div>
+          <div className="columns">
+            <div className="column is-half">
+                <InputField
+                  label={t("general-settings.realm-description")}
+                  onChange={this.handleRealmDescriptionChange}
+                  value={realmDescription}
+                  disabled={!hasUpdatePermission}
+                  helpText={t("help.realmDescriptionHelpText")}
+                />
+                </div>
+                <div className="column is-half">
+                <InputField
+                  label={t("general-settings.date-format")}
+                  onChange={this.handleDateFormatChange}
+                  value={dateFormat}
+                  disabled={!hasUpdatePermission}
+                  helpText={t("help.dateFormatHelpText")}
+                />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                <InputField
+                  label={t("general-settings.plugin-url")}
+                  onChange={this.handlePluginUrlChange}
+                  value={pluginUrl}
+                  disabled={!hasUpdatePermission}
+                  helpText={t("help.pluginRepositoryHelpText")}
+                />
+                </div>
+                <div className="column is-half">
+                <InputField
+                  label={t("general-settings.default-namespace-strategy")}
+                  onChange={this.handleDefaultNamespaceStrategyChange}
+                  value={defaultNamespaceStrategy}
+                  disabled={!hasUpdatePermission}
+                  helpText={t("help.defaultNameSpaceStrategyHelpText")}
+                />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                    <Checkbox
+                      checked={enabledXsrfProtection}
+                      label={t("general-settings.enabled-xsrf-protection")}
+                      onChange={this.handleEnabledXsrfProtectionChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.enableXsrfProtectionHelpText")}
+                    />
+                </div>
+                <div className="column is-half">
+                    <Checkbox
+                      checked={enableRepositoryArchive}
+                      label={t("general-settings.enable-repository-archive")}
+                      onChange={this.handleEnableRepositoryArchiveChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.enableRepositoryArchiveHelpText")}
+                    />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                    <Checkbox
+                      checked={disableGroupingGrid}
+                      label={t("general-settings.disable-grouping-grid")}
+                      onChange={this.handleDisableGroupingGridChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.disableGroupingGridHelpText")}
+                    />
+                </div>
+                <div className="column is-half">
+                    <Checkbox
+                      checked={anonymousAccessEnabled}
+                      label={t("general-settings.anonymous-access-enabled")}
+                      onChange={this.handleAnonymousAccessEnabledChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.allowAnonymousAccessHelpText")}
+                    />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                    <Checkbox
+                      checked={skipFailedAuthenticators}
+                      label={t("general-settings.skip-failed-authenticators")}
+                      onChange={this.handleSkipFailedAuthenticatorsChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.skipFailedAuthenticatorsHelpText")}
+                    />
+                </div>
+            </div>
+          </div>
+    );
+  }
+
+  handleRealmDescriptionChange = (value: string) => {
+    this.props.onChange(true, value, "realmDescription");
+  };
+  handleEnableRepositoryArchiveChange = (value: boolean) => {
+    this.props.onChange(true, value, "enableRepositoryArchive");
+  };
+  handleDisableGroupingGridChange = (value: boolean) => {
+    this.props.onChange(true, value, "disableGroupingGrid");
+  };
+  handleDateFormatChange = (value: string) => {
+    this.props.onChange(true, value, "dateFormat");
+  };
+  handleAnonymousAccessEnabledChange = (value: string) => {
+    this.props.onChange(true, value, "anonymousAccessEnabled");
+  };
+
+  handleSkipFailedAuthenticatorsChange = (value: string) => {
+    this.props.onChange(true, value, "skipFailedAuthenticators");
+  };
+  handlePluginUrlChange = (value: string) => {
+    this.props.onChange(true, value, "pluginUrl");
+  };
+
+  handleEnabledXsrfProtectionChange = (value: boolean) => {
+    this.props.onChange(true, value, "enabledXsrfProtection");
+  };
+  handleDefaultNamespaceStrategyChange = (value: string) => {
+    this.props.onChange(true, value, "defaultNamespaceStrategy");
+  };
+}
+
+export default translate("config")(GeneralSettings);
diff --git a/scm-ui/src/config/components/form/LoginAttempt.js b/scm-ui/src/config/components/form/LoginAttempt.js
index e3a3167a5a..b0ca580283 100644
--- a/scm-ui/src/config/components/form/LoginAttempt.js
+++ b/scm-ui/src/config/components/form/LoginAttempt.js
@@ -1,97 +1,97 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import {
-  InputField,
-  Subtitle,
-  validation as validator
-} from "@scm-manager/ui-components";
-
-type Props = {
-  loginAttemptLimit: number,
-  loginAttemptLimitTimeout: number,
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean
-};
-
-type State = {
-  loginAttemptLimitError: boolean,
-  loginAttemptLimitTimeoutError: boolean
-};
-
-class LoginAttempt extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      loginAttemptLimitError: false,
-      loginAttemptLimitTimeoutError: false
-    };
-  }
-  render() {
-    const {
-      t,
-      loginAttemptLimit,
-      loginAttemptLimitTimeout,
-      hasUpdatePermission
-    } = this.props;
-
-    return (
-      <div>
-        <Subtitle subtitle={t("login-attempt.name")} />
-        <div class="columns">
-                <div class="column is-half">
-                    <InputField
-                      label={t("login-attempt.login-attempt-limit")}
-                      onChange={this.handleLoginAttemptLimitChange}
-                      value={loginAttemptLimit}
-                      disabled={!hasUpdatePermission}
-                      validationError={this.state.loginAttemptLimitError}
-                      errorMessage={t("validation.login-attempt-limit-invalid")}
-                      helpText={t("help.loginAttemptLimitHelpText")}
-                    />
-                </div>
-                <div class="column is-half">
-                    <InputField
-                      label={t("login-attempt.login-attempt-limit-timeout")}
-                      onChange={this.handleLoginAttemptLimitTimeoutChange}
-                      value={loginAttemptLimitTimeout}
-                      disabled={!hasUpdatePermission}
-                      validationError={this.state.loginAttemptLimitTimeoutError}
-                      errorMessage={t("validation.login-attempt-limit-timeout-invalid")}
-                      helpText={t("help.loginAttemptLimitTimeoutHelpText")}
-                    />
-              </div>
-            </div>
-      </div>
-    );
-  }
-
-  //TODO: set Error in ConfigForm to disable Submit Button!
-  handleLoginAttemptLimitChange = (value: string) => {
-    this.setState({
-      ...this.state,
-      loginAttemptLimitError: !validator.isNumberValid(value)
-    });
-    this.props.onChange(
-      validator.isNumberValid(value),
-      value,
-      "loginAttemptLimit"
-    );
-  };
-
-  handleLoginAttemptLimitTimeoutChange = (value: string) => {
-    this.setState({
-      ...this.state,
-      loginAttemptLimitTimeoutError: !validator.isNumberValid(value)
-    });
-    this.props.onChange(
-      validator.isNumberValid(value),
-      value,
-      "loginAttemptLimitTimeout"
-    );
-  };
-}
-
-export default translate("config")(LoginAttempt);
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import {
+  InputField,
+  Subtitle,
+  validation as validator
+} from "@scm-manager/ui-components";
+
+type Props = {
+  loginAttemptLimit: number,
+  loginAttemptLimitTimeout: number,
+  t: string => string,
+  onChange: (boolean, any, string) => void,
+  hasUpdatePermission: boolean
+};
+
+type State = {
+  loginAttemptLimitError: boolean,
+  loginAttemptLimitTimeoutError: boolean
+};
+
+class LoginAttempt extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      loginAttemptLimitError: false,
+      loginAttemptLimitTimeoutError: false
+    };
+  }
+  render() {
+    const {
+      t,
+      loginAttemptLimit,
+      loginAttemptLimitTimeout,
+      hasUpdatePermission
+    } = this.props;
+
+    return (
+      <div>
+        <Subtitle subtitle={t("login-attempt.name")} />
+        <div className="columns">
+          <div className="column is-half">
+            <InputField
+              label={t("login-attempt.login-attempt-limit")}
+              onChange={this.handleLoginAttemptLimitChange}
+              value={loginAttemptLimit}
+              disabled={!hasUpdatePermission}
+              validationError={this.state.loginAttemptLimitError}
+              errorMessage={t("validation.login-attempt-limit-invalid")}
+              helpText={t("help.loginAttemptLimitHelpText")}
+            />
+          </div>
+          <div className="column is-half">
+            <InputField
+              label={t("login-attempt.login-attempt-limit-timeout")}
+              onChange={this.handleLoginAttemptLimitTimeoutChange}
+              value={loginAttemptLimitTimeout}
+              disabled={!hasUpdatePermission}
+              validationError={this.state.loginAttemptLimitTimeoutError}
+              errorMessage={t("validation.login-attempt-limit-timeout-invalid")}
+              helpText={t("help.loginAttemptLimitTimeoutHelpText")}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  //TODO: set Error in ConfigForm to disable Submit Button!
+  handleLoginAttemptLimitChange = (value: string) => {
+    this.setState({
+      ...this.state,
+      loginAttemptLimitError: !validator.isNumberValid(value)
+    });
+    this.props.onChange(
+      validator.isNumberValid(value),
+      value,
+      "loginAttemptLimit"
+    );
+  };
+
+  handleLoginAttemptLimitTimeoutChange = (value: string) => {
+    this.setState({
+      ...this.state,
+      loginAttemptLimitTimeoutError: !validator.isNumberValid(value)
+    });
+    this.props.onChange(
+      validator.isNumberValid(value),
+      value,
+      "loginAttemptLimitTimeout"
+    );
+  };
+}
+
+export default translate("config")(LoginAttempt);
diff --git a/scm-ui/src/config/components/form/ProxySettings.js b/scm-ui/src/config/components/form/ProxySettings.js
index 826817ad2c..ed92d74b12 100644
--- a/scm-ui/src/config/components/form/ProxySettings.js
+++ b/scm-ui/src/config/components/form/ProxySettings.js
@@ -1,146 +1,146 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import {
-  Checkbox,
-  InputField,
-  Subtitle,
-  AddEntryToTableField
-} from "@scm-manager/ui-components";
-import ProxyExcludesTable from "../table/ProxyExcludesTable";
-
-type Props = {
-  proxyPassword: string,
-  proxyPort: number,
-  proxyServer: string,
-  proxyUser: string,
-  enableProxy: boolean,
-  proxyExcludes: string[],
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean
-};
-
-class ProxySettings extends React.Component<Props> {
-  render() {
-    const {
-      t,
-      proxyPassword,
-      proxyPort,
-      proxyServer,
-      proxyUser,
-      enableProxy,
-      proxyExcludes,
-      hasUpdatePermission
-    } = this.props;
-
-    return (
-      <div>
-        <Subtitle subtitle={t("proxy-settings.name")} />
-        <div class="columns">
-                <div class="column is-full">
-                    <Checkbox
-                      checked={enableProxy}
-                      label={t("proxy-settings.enable-proxy")}
-                      onChange={this.handleEnableProxyChange}
-                      disabled={!hasUpdatePermission}
-                      helpText={t("help.enableProxyHelpText")}
-                    />
-                </div>
-            </div>
-            <div class="columns">
-                <div class="column is-half">
-                    <InputField
-                      label={t("proxy-settings.proxy-password")}
-                      onChange={this.handleProxyPasswordChange}
-                      value={proxyPassword}
-                      type="password"
-                      disabled={!enableProxy || !hasUpdatePermission}
-                      helpText={t("help.proxyPasswordHelpText")}
-                    />
-                </div>
-                <div class="column is-half">
-                    <InputField
-                      label={t("proxy-settings.proxy-port")}
-                      value={proxyPort}
-                      onChange={this.handleProxyPortChange}
-                      disabled={!enableProxy || !hasUpdatePermission}
-                      helpText={t("help.proxyPortHelpText")}
-                    />
-                </div>
-            </div>
-            <div class="columns">
-                <div class="column is-half">
-                    <InputField
-                      label={t("proxy-settings.proxy-server")}
-                      value={proxyServer}
-                      onChange={this.handleProxyServerChange}
-                      disabled={!enableProxy || !hasUpdatePermission}
-                      helpText={t("help.proxyServerHelpText")}
-                    />
-                </div>
-                <div class="column is-half">
-                    <InputField
-                      label={t("proxy-settings.proxy-user")}
-                      value={proxyUser}
-                      onChange={this.handleProxyUserChange}
-                      disabled={!enableProxy || !hasUpdatePermission}
-                      helpText={t("help.proxyUserHelpText")}
-                    />
-                </div>
-            </div>
-            <div class="columns">                    
-                <div class="column is-full">
-                    <ProxyExcludesTable
-                      proxyExcludes={proxyExcludes}
-                      onChange={(isValid, changedValue, name) =>
-                        this.props.onChange(isValid, changedValue, name)
-                      }
-                      disabled={!enableProxy || !hasUpdatePermission}
-                    />
-                <AddEntryToTableField
-                  addEntry={this.addProxyExclude}
-                  disabled={!enableProxy || !hasUpdatePermission}
-                  buttonLabel={t("proxy-settings.add-proxy-exclude-button")}
-                  fieldLabel={t("proxy-settings.add-proxy-exclude-textfield")}
-                  errorMessage={t("proxy-settings.add-proxy-exclude-error")}
-                />
-                </div>
-            </div>
-      </div>
-    );
-  }
-
-  handleProxyPasswordChange = (value: string) => {
-    this.props.onChange(true, value, "proxyPassword");
-  };
-  handleProxyPortChange = (value: string) => {
-    this.props.onChange(true, value, "proxyPort");
-  };
-  handleProxyServerChange = (value: string) => {
-    this.props.onChange(true, value, "proxyServer");
-  };
-  handleProxyUserChange = (value: string) => {
-    this.props.onChange(true, value, "proxyUser");
-  };
-  handleEnableProxyChange = (value: string) => {
-    this.props.onChange(true, value, "enableProxy");
-  };
-
-  addProxyExclude = (proxyExcludeName: string) => {
-    if (this.isProxyExcludeMember(proxyExcludeName)) {
-      return;
-    }
-    this.props.onChange(
-      true,
-      [...this.props.proxyExcludes, proxyExcludeName],
-      "proxyExcludes"
-    );
-  };
-
-  isProxyExcludeMember = (proxyExcludeName: string) => {
-    return this.props.proxyExcludes.includes(proxyExcludeName);
-  };
-}
-
-export default translate("config")(ProxySettings);
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import {
+  Checkbox,
+  InputField,
+  Subtitle,
+  AddEntryToTableField
+} from "@scm-manager/ui-components";
+import ProxyExcludesTable from "../table/ProxyExcludesTable";
+
+type Props = {
+  proxyPassword: string,
+  proxyPort: number,
+  proxyServer: string,
+  proxyUser: string,
+  enableProxy: boolean,
+  proxyExcludes: string[],
+  t: string => string,
+  onChange: (boolean, any, string) => void,
+  hasUpdatePermission: boolean
+};
+
+class ProxySettings extends React.Component<Props> {
+  render() {
+    const {
+      t,
+      proxyPassword,
+      proxyPort,
+      proxyServer,
+      proxyUser,
+      enableProxy,
+      proxyExcludes,
+      hasUpdatePermission
+    } = this.props;
+
+    return (
+      <div>
+        <Subtitle subtitle={t("proxy-settings.name")} />
+        <div className="columns">
+                <div className="column is-full">
+                    <Checkbox
+                      checked={enableProxy}
+                      label={t("proxy-settings.enable-proxy")}
+                      onChange={this.handleEnableProxyChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.enableProxyHelpText")}
+                    />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                    <InputField
+                      label={t("proxy-settings.proxy-password")}
+                      onChange={this.handleProxyPasswordChange}
+                      value={proxyPassword}
+                      type="password"
+                      disabled={!enableProxy || !hasUpdatePermission}
+                      helpText={t("help.proxyPasswordHelpText")}
+                    />
+                </div>
+                <div className="column is-half">
+                    <InputField
+                      label={t("proxy-settings.proxy-port")}
+                      value={proxyPort}
+                      onChange={this.handleProxyPortChange}
+                      disabled={!enableProxy || !hasUpdatePermission}
+                      helpText={t("help.proxyPortHelpText")}
+                    />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                    <InputField
+                      label={t("proxy-settings.proxy-server")}
+                      value={proxyServer}
+                      onChange={this.handleProxyServerChange}
+                      disabled={!enableProxy || !hasUpdatePermission}
+                      helpText={t("help.proxyServerHelpText")}
+                    />
+                </div>
+                <div className="column is-half">
+                    <InputField
+                      label={t("proxy-settings.proxy-user")}
+                      value={proxyUser}
+                      onChange={this.handleProxyUserChange}
+                      disabled={!enableProxy || !hasUpdatePermission}
+                      helpText={t("help.proxyUserHelpText")}
+                    />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-full">
+                    <ProxyExcludesTable
+                      proxyExcludes={proxyExcludes}
+                      onChange={(isValid, changedValue, name) =>
+                        this.props.onChange(isValid, changedValue, name)
+                      }
+                      disabled={!enableProxy || !hasUpdatePermission}
+                    />
+                <AddEntryToTableField
+                  addEntry={this.addProxyExclude}
+                  disabled={!enableProxy || !hasUpdatePermission}
+                  buttonLabel={t("proxy-settings.add-proxy-exclude-button")}
+                  fieldLabel={t("proxy-settings.add-proxy-exclude-textfield")}
+                  errorMessage={t("proxy-settings.add-proxy-exclude-error")}
+                />
+                </div>
+            </div>
+      </div>
+    );
+  }
+
+  handleProxyPasswordChange = (value: string) => {
+    this.props.onChange(true, value, "proxyPassword");
+  };
+  handleProxyPortChange = (value: string) => {
+    this.props.onChange(true, value, "proxyPort");
+  };
+  handleProxyServerChange = (value: string) => {
+    this.props.onChange(true, value, "proxyServer");
+  };
+  handleProxyUserChange = (value: string) => {
+    this.props.onChange(true, value, "proxyUser");
+  };
+  handleEnableProxyChange = (value: string) => {
+    this.props.onChange(true, value, "enableProxy");
+  };
+
+  addProxyExclude = (proxyExcludeName: string) => {
+    if (this.isProxyExcludeMember(proxyExcludeName)) {
+      return;
+    }
+    this.props.onChange(
+      true,
+      [...this.props.proxyExcludes, proxyExcludeName],
+      "proxyExcludes"
+    );
+  };
+
+  isProxyExcludeMember = (proxyExcludeName: string) => {
+    return this.props.proxyExcludes.includes(proxyExcludeName);
+  };
+}
+
+export default translate("config")(ProxySettings);
diff --git a/scm-ui/src/repos/permissions/components/CreatePermissionForm.js b/scm-ui/src/repos/permissions/components/CreatePermissionForm.js
index b5371daa3d..5fd8224be4 100644
--- a/scm-ui/src/repos/permissions/components/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/components/CreatePermissionForm.js
@@ -1,211 +1,211 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Autocomplete, SubmitButton } from "@scm-manager/ui-components";
-import TypeSelector from "./TypeSelector";
-import type {
-  PermissionCollection,
-  PermissionCreateEntry,
-  SelectValue
-} from "@scm-manager/ui-types";
-import * as validator from "./permissionValidation";
-
-type Props = {
-  t: string => string,
-  createPermission: (permission: PermissionCreateEntry) => void,
-  loading: boolean,
-  currentPermissions: PermissionCollection,
-  groupAutoCompleteLink: string,
-  userAutoCompleteLink: string
-};
-
-type State = {
-  name: string,
-  type: string,
-  groupPermission: boolean,
-  valid: boolean,
-  value?: SelectValue
-};
-
-class CreatePermissionForm extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      name: "",
-      type: "READ",
-      groupPermission: false,
-      valid: true,
-      value: undefined
-    };
-  }
-
-  permissionScopeChanged = event => {
-    const groupPermission = event.target.value === "GROUP_PERMISSION";
-    this.setState({
-      groupPermission: groupPermission,
-      valid: validator.isPermissionValid(
-        this.state.name,
-        groupPermission,
-        this.props.currentPermissions
-      )
-    });
-    this.setState({ ...this.state, groupPermission });
-  };
-
-  loadUserAutocompletion = (inputValue: string) => {
-    return this.loadAutocompletion(this.props.userAutoCompleteLink, inputValue);
-  };
-
-  loadGroupAutocompletion = (inputValue: string) => {
-    return this.loadAutocompletion(
-      this.props.groupAutoCompleteLink,
-      inputValue
-    );
-  };
-
-  loadAutocompletion(url: string, inputValue: string) {
-    const link = url + "?q=";
-    return fetch(link + inputValue)
-      .then(response => response.json())
-      .then(json => {
-        return json.map(element => {
-          const label = element.displayName
-            ? `${element.displayName} (${element.id})`
-            : element.id;
-          return {
-            value: element,
-            label
-          };
-        });
-      });
-  }
-  renderAutocompletionField = () => {
-    const { t } = this.props;
-    if (this.state.groupPermission) {
-      return (
-        <Autocomplete
-          loadSuggestions={this.loadGroupAutocompletion}
-          valueSelected={this.groupOrUserSelected}
-          value={this.state.value}
-          label={t("permission.group")}
-          noOptionsMessage={t("permission.autocomplete.no-group-options")}
-          loadingMessage={t("permission.autocomplete.loading")}
-          placeholder={t("permission.autocomplete.group-placeholder")}
-        />
-      );
-    }
-    return (
-      <Autocomplete
-        loadSuggestions={this.loadUserAutocompletion}
-        valueSelected={this.groupOrUserSelected}
-        value={this.state.value}
-        label={t("permission.user")}
-        noOptionsMessage={t("permission.autocomplete.no-user-options")}
-        loadingMessage={t("permission.autocomplete.loading")}
-        placeholder={t("permission.autocomplete.user-placeholder")}
-      />
-    );
-  };
-
-  groupOrUserSelected = (value: SelectValue) => {
-    this.setState({
-      value,
-      name: value.value.id,
-      valid: validator.isPermissionValid(
-        value.value.id,
-        this.state.groupPermission,
-        this.props.currentPermissions
-      )
-    });
-  };
-
-  render() {
-    const { t, loading } = this.props;
-
-    const { type } = this.state;
-
-    return (
-      <div>
-        <hr />
-        <h2 className="subtitle">
-          {t("permission.add-permission.add-permission-heading")}
-        </h2>
-        <form onSubmit={this.submit}>
-          <div className="control">
-            <label className="radio">
-              <input
-                type="radio"
-                name="permission_scope"
-                checked={!this.state.groupPermission}
-                value="USER_PERMISSION"
-                onChange={this.permissionScopeChanged}
-              />
-              {t("permission.user-permission")}
-            </label>
-            <label className="radio">
-              <input
-                type="radio"
-                name="permission_scope"
-                value="GROUP_PERMISSION"
-                checked={this.state.groupPermission}
-                onChange={this.permissionScopeChanged}
-              />
-              {t("permission.group-permission")}
-            </label>
-          </div>
-
-        <div class="columns">
-            <div class="column is-three-quarters">
-                {this.renderAutocompletionField()}
-            </div>
-            <div class="column is-one-quarter">
-                  <TypeSelector
-                    label={t("permission.type")}
-                    helpText={t("permission.help.typeHelpText")}
-                    handleTypeChange={this.handleTypeChange}
-                    type={type ? type : "READ"}
-                  />
-            </div>
-            </div>
-        <div class="columns">
-            <div class="column">
-              <SubmitButton
-                label={t("permission.add-permission.submit-button")}
-                loading={loading}
-                disabled={!this.state.valid || this.state.name === ""}
-              />
-            </div>
-        </div>
-        </form>
-      </div>
-    );
-  }
-
-  submit = e => {
-    this.props.createPermission({
-      name: this.state.name,
-      type: this.state.type,
-      groupPermission: this.state.groupPermission
-    });
-    this.removeState();
-    e.preventDefault();
-  };
-
-  removeState = () => {
-    this.setState({
-      name: "",
-      type: "READ",
-      groupPermission: false,
-      valid: true
-    });
-  };
-
-  handleTypeChange = (type: string) => {
-    this.setState({
-      type: type
-    });
-  };
-}
-
-export default translate("repos")(CreatePermissionForm);
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Autocomplete, SubmitButton } from "@scm-manager/ui-components";
+import TypeSelector from "./TypeSelector";
+import type {
+  PermissionCollection,
+  PermissionCreateEntry,
+  SelectValue
+} from "@scm-manager/ui-types";
+import * as validator from "./permissionValidation";
+
+type Props = {
+  t: string => string,
+  createPermission: (permission: PermissionCreateEntry) => void,
+  loading: boolean,
+  currentPermissions: PermissionCollection,
+  groupAutoCompleteLink: string,
+  userAutoCompleteLink: string
+};
+
+type State = {
+  name: string,
+  type: string,
+  groupPermission: boolean,
+  valid: boolean,
+  value?: SelectValue
+};
+
+class CreatePermissionForm extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      name: "",
+      type: "READ",
+      groupPermission: false,
+      valid: true,
+      value: undefined
+    };
+  }
+
+  permissionScopeChanged = event => {
+    const groupPermission = event.target.value === "GROUP_PERMISSION";
+    this.setState({
+      groupPermission: groupPermission,
+      valid: validator.isPermissionValid(
+        this.state.name,
+        groupPermission,
+        this.props.currentPermissions
+      )
+    });
+    this.setState({ ...this.state, groupPermission });
+  };
+
+  loadUserAutocompletion = (inputValue: string) => {
+    return this.loadAutocompletion(this.props.userAutoCompleteLink, inputValue);
+  };
+
+  loadGroupAutocompletion = (inputValue: string) => {
+    return this.loadAutocompletion(
+      this.props.groupAutoCompleteLink,
+      inputValue
+    );
+  };
+
+  loadAutocompletion(url: string, inputValue: string) {
+    const link = url + "?q=";
+    return fetch(link + inputValue)
+      .then(response => response.json())
+      .then(json => {
+        return json.map(element => {
+          const label = element.displayName
+            ? `${element.displayName} (${element.id})`
+            : element.id;
+          return {
+            value: element,
+            label
+          };
+        });
+      });
+  }
+  renderAutocompletionField = () => {
+    const { t } = this.props;
+    if (this.state.groupPermission) {
+      return (
+        <Autocomplete
+          loadSuggestions={this.loadGroupAutocompletion}
+          valueSelected={this.groupOrUserSelected}
+          value={this.state.value}
+          label={t("permission.group")}
+          noOptionsMessage={t("permission.autocomplete.no-group-options")}
+          loadingMessage={t("permission.autocomplete.loading")}
+          placeholder={t("permission.autocomplete.group-placeholder")}
+        />
+      );
+    }
+    return (
+      <Autocomplete
+        loadSuggestions={this.loadUserAutocompletion}
+        valueSelected={this.groupOrUserSelected}
+        value={this.state.value}
+        label={t("permission.user")}
+        noOptionsMessage={t("permission.autocomplete.no-user-options")}
+        loadingMessage={t("permission.autocomplete.loading")}
+        placeholder={t("permission.autocomplete.user-placeholder")}
+      />
+    );
+  };
+
+  groupOrUserSelected = (value: SelectValue) => {
+    this.setState({
+      value,
+      name: value.value.id,
+      valid: validator.isPermissionValid(
+        value.value.id,
+        this.state.groupPermission,
+        this.props.currentPermissions
+      )
+    });
+  };
+
+  render() {
+    const { t, loading } = this.props;
+
+    const { type } = this.state;
+
+    return (
+      <div>
+        <hr />
+        <h2 className="subtitle">
+          {t("permission.add-permission.add-permission-heading")}
+        </h2>
+        <form onSubmit={this.submit}>
+          <div className="control">
+            <label className="radio">
+              <input
+                type="radio"
+                name="permission_scope"
+                checked={!this.state.groupPermission}
+                value="USER_PERMISSION"
+                onChange={this.permissionScopeChanged}
+              />
+              {t("permission.user-permission")}
+            </label>
+            <label className="radio">
+              <input
+                type="radio"
+                name="permission_scope"
+                value="GROUP_PERMISSION"
+                checked={this.state.groupPermission}
+                onChange={this.permissionScopeChanged}
+              />
+              {t("permission.group-permission")}
+            </label>
+          </div>
+
+        <div className="columns">
+            <div className="column is-three-quarters">
+                {this.renderAutocompletionField()}
+            </div>
+            <div className="column is-one-quarter">
+                  <TypeSelector
+                    label={t("permission.type")}
+                    helpText={t("permission.help.typeHelpText")}
+                    handleTypeChange={this.handleTypeChange}
+                    type={type ? type : "READ"}
+                  />
+            </div>
+            </div>
+        <div className="columns">
+            <div className="column">
+              <SubmitButton
+                label={t("permission.add-permission.submit-button")}
+                loading={loading}
+                disabled={!this.state.valid || this.state.name === ""}
+              />
+            </div>
+        </div>
+        </form>
+      </div>
+    );
+  }
+
+  submit = e => {
+    this.props.createPermission({
+      name: this.state.name,
+      type: this.state.type,
+      groupPermission: this.state.groupPermission
+    });
+    this.removeState();
+    e.preventDefault();
+  };
+
+  removeState = () => {
+    this.setState({
+      name: "",
+      type: "READ",
+      groupPermission: false,
+      valid: true
+    });
+  };
+
+  handleTypeChange = (type: string) => {
+    this.setState({
+      type: type
+    });
+  };
+}
+
+export default translate("repos")(CreatePermissionForm);
diff --git a/scm-ui/src/users/components/UserForm.js b/scm-ui/src/users/components/UserForm.js
index 82fe79c2ab..2d3a519f15 100644
--- a/scm-ui/src/users/components/UserForm.js
+++ b/scm-ui/src/users/components/UserForm.js
@@ -1,200 +1,200 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import type { User } from "@scm-manager/ui-types";
-import {
-  Checkbox,
-  InputField,
-  PasswordConfirmation,
-  SubmitButton,
-  validation as validator
-} from "@scm-manager/ui-components";
-import * as userValidator from "./userValidation";
-
-type Props = {
-  submitForm: User => void,
-  user?: User,
-  loading?: boolean,
-  t: string => string
-};
-
-type State = {
-  user: User,
-  mailValidationError: boolean,
-  nameValidationError: boolean,
-  displayNameValidationError: boolean,
-  passwordValid: boolean
-};
-
-class UserForm extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      user: {
-        name: "",
-        displayName: "",
-        mail: "",
-        password: "",
-        admin: false,
-        active: true,
-        _links: {}
-      },
-      mailValidationError: false,
-      displayNameValidationError: false,
-      nameValidationError: false,
-      passwordValid: false
-    };
-  }
-
-  componentDidMount() {
-    const { user } = this.props;
-    if (user) {
-      this.setState({ user: { ...user } });
-    }
-  }
-
-  isFalsy(value) {
-    if (!value) {
-      return true;
-    }
-    return false;
-  }
-
-  isValid = () => {
-    const user = this.state.user;
-    return !(
-      this.state.nameValidationError ||
-      this.state.mailValidationError ||
-      this.state.displayNameValidationError ||
-      this.isFalsy(user.name) ||
-      this.isFalsy(user.displayName) ||
-      this.isFalsy(user.mail) ||
-      !this.state.passwordValid
-    );
-  };
-
-  submit = (event: Event) => {
-    event.preventDefault();
-    if (this.isValid()) {
-      this.props.submitForm(this.state.user);
-    }
-  };
-
-  render() {
-    const { loading, t } = this.props;
-    const user = this.state.user;
-
-    let nameField = null;
-    let passwordChangeField = null;
-    if (!this.props.user) {
-      nameField = (
-        <InputField
-          label={t("user.name")}
-          onChange={this.handleUsernameChange}
-          value={user ? user.name : ""}
-          validationError={this.state.nameValidationError}
-          errorMessage={t("validation.name-invalid")}
-          helpText={t("help.usernameHelpText")}
-        />
-      );
-
-      passwordChangeField = (
-        <PasswordConfirmation passwordChanged={this.handlePasswordChange} />
-      );
-    }
-    return (
-      <form onSubmit={this.submit}>
-        <div class="columns">
-            <div class="column is-half">
-                {nameField}
-                <InputField
-                  label={t("user.displayName")}
-                  onChange={this.handleDisplayNameChange}
-                  value={user ? user.displayName : ""}
-                  validationError={this.state.displayNameValidationError}
-                  errorMessage={t("validation.displayname-invalid")}
-                  helpText={t("help.displayNameHelpText")}
-                />
-            </div>
-            <div class="column is-half">
-                <InputField
-                  label={t("user.mail")}
-                  onChange={this.handleEmailChange}
-                  value={user ? user.mail : ""}
-                  validationError={this.state.mailValidationError}
-                  errorMessage={t("validation.mail-invalid")}
-                  helpText={t("help.mailHelpText")}
-                />
-            </div>
-        </div>
-        <div class="columns">
-            <div class="column">
-                {passwordChangeField}
-                <Checkbox
-                  label={t("user.admin")}
-                  onChange={this.handleAdminChange}
-                  checked={user ? user.admin : false}
-                  helpText={t("help.adminHelpText")}
-                />
-                <Checkbox
-                  label={t("user.active")}
-                  onChange={this.handleActiveChange}
-                  checked={user ? user.active : false}
-                  helpText={t("help.activeHelpText")}
-                />
-            </div>
-        </div>
-        <div class="columns">
-            <div class="column">
-                <SubmitButton
-                  disabled={!this.isValid()}
-                  loading={loading}
-                  label={t("user-form.submit")}
-                />
-            </div>
-        </div>
-      </form>
-    );
-  }
-
-  handleUsernameChange = (name: string) => {
-    this.setState({
-      nameValidationError: !validator.isNameValid(name),
-      user: { ...this.state.user, name }
-    });
-  };
-
-  handleDisplayNameChange = (displayName: string) => {
-    this.setState({
-      displayNameValidationError: !userValidator.isDisplayNameValid(
-        displayName
-      ),
-      user: { ...this.state.user, displayName }
-    });
-  };
-
-  handleEmailChange = (mail: string) => {
-    this.setState({
-      mailValidationError: !validator.isMailValid(mail),
-      user: { ...this.state.user, mail }
-    });
-  };
-
-  handlePasswordChange = (password: string, passwordValid: boolean) => {
-    this.setState({
-      user: { ...this.state.user, password },
-      passwordValid: !this.isFalsy(password) && passwordValid
-    });
-  };
-
-  handleAdminChange = (admin: boolean) => {
-    this.setState({ user: { ...this.state.user, admin } });
-  };
-
-  handleActiveChange = (active: boolean) => {
-    this.setState({ user: { ...this.state.user, active } });
-  };
-}
-
-export default translate("users")(UserForm);
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { User } from "@scm-manager/ui-types";
+import {
+  Checkbox,
+  InputField,
+  PasswordConfirmation,
+  SubmitButton,
+  validation as validator
+} from "@scm-manager/ui-components";
+import * as userValidator from "./userValidation";
+
+type Props = {
+  submitForm: User => void,
+  user?: User,
+  loading?: boolean,
+  t: string => string
+};
+
+type State = {
+  user: User,
+  mailValidationError: boolean,
+  nameValidationError: boolean,
+  displayNameValidationError: boolean,
+  passwordValid: boolean
+};
+
+class UserForm extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      user: {
+        name: "",
+        displayName: "",
+        mail: "",
+        password: "",
+        admin: false,
+        active: true,
+        _links: {}
+      },
+      mailValidationError: false,
+      displayNameValidationError: false,
+      nameValidationError: false,
+      passwordValid: false
+    };
+  }
+
+  componentDidMount() {
+    const { user } = this.props;
+    if (user) {
+      this.setState({ user: { ...user } });
+    }
+  }
+
+  isFalsy(value) {
+    if (!value) {
+      return true;
+    }
+    return false;
+  }
+
+  isValid = () => {
+    const user = this.state.user;
+    return !(
+      this.state.nameValidationError ||
+      this.state.mailValidationError ||
+      this.state.displayNameValidationError ||
+      this.isFalsy(user.name) ||
+      this.isFalsy(user.displayName) ||
+      this.isFalsy(user.mail) ||
+      !this.state.passwordValid
+    );
+  };
+
+  submit = (event: Event) => {
+    event.preventDefault();
+    if (this.isValid()) {
+      this.props.submitForm(this.state.user);
+    }
+  };
+
+  render() {
+    const { loading, t } = this.props;
+    const user = this.state.user;
+
+    let nameField = null;
+    let passwordChangeField = null;
+    if (!this.props.user) {
+      nameField = (
+        <InputField
+          label={t("user.name")}
+          onChange={this.handleUsernameChange}
+          value={user ? user.name : ""}
+          validationError={this.state.nameValidationError}
+          errorMessage={t("validation.name-invalid")}
+          helpText={t("help.usernameHelpText")}
+        />
+      );
+
+      passwordChangeField = (
+        <PasswordConfirmation passwordChanged={this.handlePasswordChange} />
+      );
+    }
+    return (
+      <form onSubmit={this.submit}>
+        <div className="columns">
+          <div className="column is-half">
+            {nameField}
+            <InputField
+              label={t("user.displayName")}
+              onChange={this.handleDisplayNameChange}
+              value={user ? user.displayName : ""}
+              validationError={this.state.displayNameValidationError}
+              errorMessage={t("validation.displayname-invalid")}
+              helpText={t("help.displayNameHelpText")}
+            />
+          </div>
+          <div className="column is-half">
+            <InputField
+              label={t("user.mail")}
+              onChange={this.handleEmailChange}
+              value={user ? user.mail : ""}
+              validationError={this.state.mailValidationError}
+              errorMessage={t("validation.mail-invalid")}
+              helpText={t("help.mailHelpText")}
+            />
+          </div>
+        </div>
+        <div className="columns">
+          <div className="column">
+            {passwordChangeField}
+            <Checkbox
+              label={t("user.admin")}
+              onChange={this.handleAdminChange}
+              checked={user ? user.admin : false}
+              helpText={t("help.adminHelpText")}
+            />
+            <Checkbox
+              label={t("user.active")}
+              onChange={this.handleActiveChange}
+              checked={user ? user.active : false}
+              helpText={t("help.activeHelpText")}
+            />
+          </div>
+        </div>
+        <div className="columns">
+          <div className="column">
+            <SubmitButton
+              disabled={!this.isValid()}
+              loading={loading}
+              label={t("user-form.submit")}
+            />
+          </div>
+        </div>
+      </form>
+    );
+  }
+
+  handleUsernameChange = (name: string) => {
+    this.setState({
+      nameValidationError: !validator.isNameValid(name),
+      user: { ...this.state.user, name }
+    });
+  };
+
+  handleDisplayNameChange = (displayName: string) => {
+    this.setState({
+      displayNameValidationError: !userValidator.isDisplayNameValid(
+        displayName
+      ),
+      user: { ...this.state.user, displayName }
+    });
+  };
+
+  handleEmailChange = (mail: string) => {
+    this.setState({
+      mailValidationError: !validator.isMailValid(mail),
+      user: { ...this.state.user, mail }
+    });
+  };
+
+  handlePasswordChange = (password: string, passwordValid: boolean) => {
+    this.setState({
+      user: { ...this.state.user, password },
+      passwordValid: !this.isFalsy(password) && passwordValid
+    });
+  };
+
+  handleAdminChange = (admin: boolean) => {
+    this.setState({ user: { ...this.state.user, admin } });
+  };
+
+  handleActiveChange = (active: boolean) => {
+    this.setState({ user: { ...this.state.user, active } });
+  };
+}
+
+export default translate("users")(UserForm);