use reflow to migrate from flow to typescript

2025-11-08 06:25:45 +01:00 · 2019-10-19 16:38:07 +02:00
parent f7b8050dfa
commit 6e7a08a3bb
495 changed files with 14239 additions and 13766 deletions
--- a/scm-ui/ui-webapp/src/admin/components/form/BaseUrlSettings.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/BaseUrlSettings.tsx
@@ -1,14 +1,13 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Checkbox, InputField, Subtitle } from "@scm-manager/ui-components";
+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
+  baseUrl: string;
+  forceBaseUrl: boolean;
+  t: (p: string) => string;
+  onChange: (p1: boolean, p2: any, p3: string) => void;
+  hasUpdatePermission: boolean;
 };

 class BaseUrlSettings extends React.Component<Props> {
@@ -17,24 +16,24 @@ class BaseUrlSettings extends React.Component<Props> {

    return (
      <div>
-        <Subtitle subtitle={t("base-url-settings.name")} />
+        <Subtitle subtitle={t('base-url-settings.name')} />
        <div className="columns">
          <div className="column is-half">
            <InputField
-              label={t("base-url-settings.base-url")}
+              label={t('base-url-settings.base-url')}
              onChange={this.handleBaseUrlChange}
              value={baseUrl}
              disabled={!hasUpdatePermission}
-              helpText={t("help.baseUrlHelpText")}
+              helpText={t('help.baseUrlHelpText')}
            />
          </div>
          <div className="column is-half">
            <Checkbox
              checked={forceBaseUrl}
-              label={t("base-url-settings.force-base-url")}
+              label={t('base-url-settings.force-base-url')}
              onChange={this.handleForceBaseUrlChange}
              disabled={!hasUpdatePermission}
-              helpText={t("help.forceBaseUrlHelpText")}
+              helpText={t('help.forceBaseUrlHelpText')}
            />
          </div>
        </div>
@@ -43,11 +42,11 @@ class BaseUrlSettings extends React.Component<Props> {
  }

  handleBaseUrlChange = (value: string) => {
-    this.props.onChange(true, value, "baseUrl");
+    this.props.onChange(true, value, 'baseUrl');
  };
  handleForceBaseUrlChange = (value: boolean) => {
-    this.props.onChange(true, value, "forceBaseUrl");
+    this.props.onChange(true, value, 'forceBaseUrl');
  };
 }

-export default translate("config")(BaseUrlSettings);
+export default translate('config')(BaseUrlSettings);
--- a/scm-ui/ui-webapp/src/admin/components/form/ConfigForm.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/ConfigForm.tsx
@@ -1,32 +1,31 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { SubmitButton, Notification } from "@scm-manager/ui-components";
-import type { NamespaceStrategies, Config } from "@scm-manager/ui-types";
-import ProxySettings from "./ProxySettings";
-import GeneralSettings from "./GeneralSettings";
-import BaseUrlSettings from "./BaseUrlSettings";
-import LoginAttempt from "./LoginAttempt";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { SubmitButton, Notification } from '@scm-manager/ui-components';
+import { NamespaceStrategies, Config } from '@scm-manager/ui-types';
+import ProxySettings from './ProxySettings';
+import GeneralSettings from './GeneralSettings';
+import BaseUrlSettings from './BaseUrlSettings';
+import LoginAttempt from './LoginAttempt';

 type Props = {
-  submitForm: Config => void,
-  config?: Config,
-  loading?: boolean,
-  configReadPermission: boolean,
-  configUpdatePermission: boolean,
-  namespaceStrategies?: NamespaceStrategies,
+  submitForm: (p: Config) => void;
+  config?: Config;
+  loading?: boolean;
+  configReadPermission: boolean;
+  configUpdatePermission: boolean;
+  namespaceStrategies?: NamespaceStrategies;
  // context props
-  t: string => string
+  t: (p: string) => string;
 };

 type State = {
-  config: Config,
-  showNotification: boolean,
+  config: Config;
+  showNotification: boolean;
  error: {
-    loginAttemptLimitTimeout: boolean,
-    loginAttemptLimit: boolean
-  },
-  changed: boolean
+    loginAttemptLimitTimeout: boolean;
+    loginAttemptLimit: boolean;
+  };
+  changed: boolean;
 };

 class ConfigForm extends React.Component<Props, State> {
@@ -37,48 +36,56 @@ class ConfigForm extends React.Component<Props, State> {
      config: {
        proxyPassword: null,
        proxyPort: 0,
-        proxyServer: "",
+        proxyServer: '',
        proxyUser: null,
        enableProxy: false,
-        realmDescription: "",
+        realmDescription: '',
        disableGroupingGrid: false,
-        dateFormat: "",
+        dateFormat: '',
        anonymousAccessEnabled: false,
-        baseUrl: "",
+        baseUrl: '',
        forceBaseUrl: false,
        loginAttemptLimit: 0,
        proxyExcludes: [],
        skipFailedAuthenticators: false,
-        pluginUrl: "",
+        pluginUrl: '',
        loginAttemptLimitTimeout: 0,
        enabledXsrfProtection: true,
-        namespaceStrategy: "",
-        loginInfoUrl: "",
-        _links: {}
+        namespaceStrategy: '',
+        loginInfoUrl: '',
+        _links: {},
      },
      showNotification: false,
      error: {
        loginAttemptLimitTimeout: false,
-        loginAttemptLimit: false
+        loginAttemptLimit: false,
      },
-      changed: false
+      changed: false,
    };
  }

  componentDidMount() {
    const { config, configUpdatePermission } = this.props;
    if (config) {
-      this.setState({ ...this.state, config: { ...config } });
+      this.setState({
+        ...this.state,
+        config: {
+          ...config,
+        },
+      });
    }
    if (!configUpdatePermission) {
-      this.setState({ ...this.state, showNotification: true });
+      this.setState({
+        ...this.state,
+        showNotification: true,
+      });
    }
  }

  submit = (event: Event) => {
    event.preventDefault();
    this.setState({
-      changed: false
+      changed: false,
    });
    this.props.submitForm(this.state.config);
  };
@@ -89,7 +96,7 @@ class ConfigForm extends React.Component<Props, State> {
      t,
      namespaceStrategies,
      configReadPermission,
-      configUpdatePermission
+      configUpdatePermission,
    } = this.props;
    const config = this.state.config;

@@ -98,8 +105,8 @@ class ConfigForm extends React.Component<Props, State> {
    if (!configReadPermission) {
      return (
        <Notification
-          type={"danger"}
-          children={t("config.form.no-read-permission-notification")}
+          type={'danger'}
+          children={t('config.form.no-read-permission-notification')}
        />
      );
    }
@@ -107,8 +114,8 @@ class ConfigForm extends React.Component<Props, State> {
    if (this.state.showNotification) {
      noPermissionNotification = (
        <Notification
-          type={"info"}
-          children={t("config.form.no-write-permission-notification")}
+          type={'info'}
+          children={t('config.form.no-write-permission-notification')}
          onClose={() => this.onClose()}
        />
      );
@@ -153,10 +160,10 @@ class ConfigForm extends React.Component<Props, State> {
        />
        <hr />
        <ProxySettings
-          proxyPassword={config.proxyPassword ? config.proxyPassword : ""}
+          proxyPassword={config.proxyPassword ? config.proxyPassword : ''}
          proxyPort={config.proxyPort}
-          proxyServer={config.proxyServer ? config.proxyServer : ""}
-          proxyUser={config.proxyUser ? config.proxyUser : ""}
+          proxyServer={config.proxyServer ? config.proxyServer : ''}
+          proxyUser={config.proxyUser ? config.proxyUser : ''}
          enableProxy={config.enableProxy}
          proxyExcludes={config.proxyExcludes}
          onChange={(isValid, changedValue, name) =>
@@ -167,7 +174,7 @@ class ConfigForm extends React.Component<Props, State> {
        <hr />
        <SubmitButton
          loading={loading}
-          label={t("config.form.submit")}
+          label={t('config.form.submit')}
          disabled={
            !configUpdatePermission || this.hasError() || !this.state.changed
          }
@@ -181,13 +188,13 @@ class ConfigForm extends React.Component<Props, State> {
      ...this.state,
      config: {
        ...this.state.config,
-        [name]: changedValue
+        [name]: changedValue,
      },
      error: {
        ...this.state.error,
-        [name]: !isValid
+        [name]: !isValid,
      },
-      changed: true
+      changed: true,
    });
  };

@@ -201,9 +208,9 @@ class ConfigForm extends React.Component<Props, State> {
  onClose = () => {
    this.setState({
      ...this.state,
-      showNotification: false
+      showNotification: false,
    });
  };
 }

-export default translate("config")(ConfigForm);
+export default translate('config')(ConfigForm);
--- a/scm-ui/ui-webapp/src/admin/components/form/GeneralSettings.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/GeneralSettings.tsx
@@ -1,25 +1,24 @@
-// @flow
-import React from "react";
-import {translate} from "react-i18next";
-import {Checkbox, InputField} from "@scm-manager/ui-components";
-import type {NamespaceStrategies} from "@scm-manager/ui-types";
-import NamespaceStrategySelect from "./NamespaceStrategySelect";
+import React from 'react';
+import { translate } from 'react-i18next';
+import { Checkbox, InputField } from '@scm-manager/ui-components';
+import { NamespaceStrategies } from '@scm-manager/ui-types';
+import NamespaceStrategySelect from './NamespaceStrategySelect';

 type Props = {
-  realmDescription: string,
-  loginInfoUrl: string,
-  disableGroupingGrid: boolean,
-  dateFormat: string,
-  anonymousAccessEnabled: boolean,
-  skipFailedAuthenticators: boolean,
-  pluginUrl: string,
-  enabledXsrfProtection: boolean,
-  namespaceStrategy: string,
-  namespaceStrategies?: NamespaceStrategies,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean,
+  realmDescription: string;
+  loginInfoUrl: string;
+  disableGroupingGrid: boolean;
+  dateFormat: string;
+  anonymousAccessEnabled: boolean;
+  skipFailedAuthenticators: boolean;
+  pluginUrl: string;
+  enabledXsrfProtection: boolean;
+  namespaceStrategy: string;
+  namespaceStrategies?: NamespaceStrategies;
+  onChange: (p1: boolean, p2: any, p3: string) => void;
+  hasUpdatePermission: boolean;
  // context props
-  t: string => string
+  t: (p: string) => string;
 };

 class GeneralSettings extends React.Component<Props> {
@@ -33,7 +32,7 @@ class GeneralSettings extends React.Component<Props> {
      anonymousAccessEnabled,
      namespaceStrategy,
      hasUpdatePermission,
-      namespaceStrategies
+      namespaceStrategies,
    } = this.props;

    return (
@@ -41,61 +40,61 @@ class GeneralSettings extends React.Component<Props> {
        <div className="columns">
          <div className="column is-half">
            <InputField
-              label={t("general-settings.realm-description")}
+              label={t('general-settings.realm-description')}
              onChange={this.handleRealmDescriptionChange}
              value={realmDescription}
              disabled={!hasUpdatePermission}
-              helpText={t("help.realmDescriptionHelpText")}
+              helpText={t('help.realmDescriptionHelpText')}
            />
          </div>
          <div className="column is-half">
            <NamespaceStrategySelect
-              label={t("general-settings.namespace-strategy")}
+              label={t('general-settings.namespace-strategy')}
              onChange={this.handleNamespaceStrategyChange}
              value={namespaceStrategy}
              disabled={!hasUpdatePermission}
              namespaceStrategies={namespaceStrategies}
-              helpText={t("help.nameSpaceStrategyHelpText")}
+              helpText={t('help.nameSpaceStrategyHelpText')}
            />
          </div>
        </div>
        <div className="columns">
          <div className="column is-half">
            <InputField
-              label={t("general-settings.login-info-url")}
+              label={t('general-settings.login-info-url')}
              onChange={this.handleLoginInfoUrlChange}
              value={loginInfoUrl}
              disabled={!hasUpdatePermission}
-              helpText={t("help.loginInfoUrlHelpText")}
+              helpText={t('help.loginInfoUrlHelpText')}
            />
          </div>
          <div className="column is-half">
            <Checkbox
              checked={enabledXsrfProtection}
-              label={t("general-settings.enabled-xsrf-protection")}
+              label={t('general-settings.enabled-xsrf-protection')}
              onChange={this.handleEnabledXsrfProtectionChange}
              disabled={!hasUpdatePermission}
-              helpText={t("help.enableXsrfProtectionHelpText")}
+              helpText={t('help.enableXsrfProtectionHelpText')}
            />
          </div>
        </div>
        <div className="columns">
          <div className="column is-half">
            <InputField
-              label={t("general-settings.plugin-url")}
+              label={t('general-settings.plugin-url')}
              onChange={this.handlePluginCenterUrlChange}
              value={pluginUrl}
              disabled={!hasUpdatePermission}
-              helpText={t("help.pluginUrlHelpText")}
+              helpText={t('help.pluginUrlHelpText')}
            />
          </div>
          <div className="column is-half">
            <Checkbox
              checked={anonymousAccessEnabled}
-              label={t("general-settings.anonymous-access-enabled")}
+              label={t('general-settings.anonymous-access-enabled')}
              onChange={this.handleEnableAnonymousAccess}
              disabled={!hasUpdatePermission}
-              helpText={t("help.allowAnonymousAccessHelpText")}
+              helpText={t('help.allowAnonymousAccessHelpText')}
            />
          </div>
        </div>
@@ -104,23 +103,23 @@ class GeneralSettings extends React.Component<Props> {
  }

  handleLoginInfoUrlChange = (value: string) => {
-    this.props.onChange(true, value, "loginInfoUrl");
+    this.props.onChange(true, value, 'loginInfoUrl');
  };
  handleRealmDescriptionChange = (value: string) => {
-    this.props.onChange(true, value, "realmDescription");
+    this.props.onChange(true, value, 'realmDescription');
  };
  handleEnabledXsrfProtectionChange = (value: boolean) => {
-    this.props.onChange(true, value, "enabledXsrfProtection");
+    this.props.onChange(true, value, 'enabledXsrfProtection');
  };
  handleEnableAnonymousAccess = (value: boolean) => {
-    this.props.onChange(true, value, "anonymousAccessEnabled");
+    this.props.onChange(true, value, 'anonymousAccessEnabled');
  };
  handleNamespaceStrategyChange = (value: string) => {
-    this.props.onChange(true, value, "namespaceStrategy");
+    this.props.onChange(true, value, 'namespaceStrategy');
  };
  handlePluginCenterUrlChange = (value: string) => {
-    this.props.onChange(true, value, "pluginUrl");
+    this.props.onChange(true, value, 'pluginUrl');
  };
 }

-export default translate("config")(GeneralSettings);
+export default translate('config')(GeneralSettings);
--- a/scm-ui/ui-webapp/src/admin/components/form/LoginAttempt.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/LoginAttempt.tsx
@@ -1,23 +1,22 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
+import React from 'react';
+import { translate } from 'react-i18next';
 import {
  InputField,
  Subtitle,
-  validation as validator
-} from "@scm-manager/ui-components";
+  validation as validator,
+} from '@scm-manager/ui-components';

 type Props = {
-  loginAttemptLimit: number,
-  loginAttemptLimitTimeout: number,
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  hasUpdatePermission: boolean
+  loginAttemptLimit: number;
+  loginAttemptLimitTimeout: number;
+  t: (p: string) => string;
+  onChange: (p1: boolean, p2: any, p3: string) => void;
+  hasUpdatePermission: boolean;
 };

 type State = {
-  loginAttemptLimitError: boolean,
-  loginAttemptLimitTimeoutError: boolean
+  loginAttemptLimitError: boolean;
+  loginAttemptLimitTimeoutError: boolean;
 };

 class LoginAttempt extends React.Component<Props, State> {
@@ -26,7 +25,7 @@ class LoginAttempt extends React.Component<Props, State> {

    this.state = {
      loginAttemptLimitError: false,
-      loginAttemptLimitTimeoutError: false
+      loginAttemptLimitTimeoutError: false,
    };
  }
  render() {
@@ -34,33 +33,33 @@ class LoginAttempt extends React.Component<Props, State> {
      t,
      loginAttemptLimit,
      loginAttemptLimitTimeout,
-      hasUpdatePermission
+      hasUpdatePermission,
    } = this.props;

    return (
      <div>
-        <Subtitle subtitle={t("login-attempt.name")} />
+        <Subtitle subtitle={t('login-attempt.name')} />
        <div className="columns">
          <div className="column is-half">
            <InputField
-              label={t("login-attempt.login-attempt-limit")}
+              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")}
+              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")}
+              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")}
+              errorMessage={t('validation.login-attempt-limit-timeout-invalid')}
+              helpText={t('help.loginAttemptLimitTimeoutHelpText')}
            />
          </div>
        </div>
@@ -72,26 +71,26 @@ class LoginAttempt extends React.Component<Props, State> {
  handleLoginAttemptLimitChange = (value: string) => {
    this.setState({
      ...this.state,
-      loginAttemptLimitError: !validator.isNumberValid(value)
+      loginAttemptLimitError: !validator.isNumberValid(value),
    });
    this.props.onChange(
      validator.isNumberValid(value),
      value,
-      "loginAttemptLimit"
+      'loginAttemptLimit',
    );
  };

  handleLoginAttemptLimitTimeoutChange = (value: string) => {
    this.setState({
      ...this.state,
-      loginAttemptLimitTimeoutError: !validator.isNumberValid(value)
+      loginAttemptLimitTimeoutError: !validator.isNumberValid(value),
    });
    this.props.onChange(
      validator.isNumberValid(value),
      value,
-      "loginAttemptLimitTimeout"
+      'loginAttemptLimitTimeout',
    );
  };
 }

-export default translate("config")(LoginAttempt);
+export default translate('config')(LoginAttempt);
--- a/scm-ui/ui-webapp/src/admin/components/form/NamespaceStrategySelect.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/NamespaceStrategySelect.tsx
@@ -1,18 +1,17 @@
-//@flow
-import React from "react";
-import { translate, type TFunction } from "react-i18next";
-import { Select } from "@scm-manager/ui-components";
-import type { NamespaceStrategies } from "@scm-manager/ui-types";
+import React from 'react';
+import { translate, TFunction } from 'react-i18next';
+import { Select } from '@scm-manager/ui-components';
+import { NamespaceStrategies } from '@scm-manager/ui-types';

 type Props = {
-  namespaceStrategies: NamespaceStrategies,
-  label: string,
-  value?: string,
-  disabled?: boolean,
-  helpText?: string,
-  onChange: (value: string, name?: string) => void,
+  namespaceStrategies: NamespaceStrategies;
+  label: string;
+  value?: string;
+  disabled?: boolean;
+  helpText?: string;
+  onChange: (value: string, name?: string) => void;
  // context props
-  t: TFunction
+  t: TFunction;
 };

 class NamespaceStrategySelect extends React.Component<Props> {
@@ -24,14 +23,14 @@ class NamespaceStrategySelect extends React.Component<Props> {
    }

    return available.map(ns => {
-      const key = "namespaceStrategies." + ns;
+      const key = 'namespaceStrategies.' + ns;
      let label = t(key);
      if (label === key) {
        label = ns;
      }
      return {
        value: ns,
-        label: label
+        label: label,
      };
    });
  };
@@ -64,4 +63,4 @@ class NamespaceStrategySelect extends React.Component<Props> {
  }
 }

-export default translate("plugins")(NamespaceStrategySelect);
+export default translate('plugins')(NamespaceStrategySelect);
--- a/scm-ui/ui-webapp/src/admin/components/form/ProxySettings.js
+++ b/scm-ui/ui-webapp/src/admin/components/form/ProxySettings.js
@@ -1,146 +0,0 @@
-// @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);
--- a/scm-ui/ui-webapp/src/admin/components/form/ProxySettings.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/ProxySettings.tsx
@@ -0,0 +1,145 @@
+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: (p: string) => string;
+  onChange: (p1: boolean, p2: any, p3: 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);
--- a/scm-ui/ui-webapp/src/admin/components/table/ArrayConfigTable.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/table/ArrayConfigTable.tsx
@@ -1,14 +1,16 @@
-//@flow
-import React from "react";
-import { RemoveEntryOfTableButton, LabelWithHelpIcon } from "@scm-manager/ui-components";
+import React from 'react';
+import {
+  RemoveEntryOfTableButton,
+  LabelWithHelpIcon,
+} from '@scm-manager/ui-components';

 type Props = {
-  items: string[],
-  label: string,
-  removeLabel: string,
-  onRemove: (string[], string) => void,
-  disabled: boolean,
-  helpText: string
+  items: string[];
+  label: string;
+  removeLabel: string;
+  onRemove: (p1: string[], p2: string) => void;
+  disabled: boolean;
+  helpText: string;
 };

 class ArrayConfigTable extends React.Component<Props> {
@@ -16,7 +18,7 @@ class ArrayConfigTable extends React.Component<Props> {
    const { label, disabled, removeLabel, items, helpText } = this.props;
    return (
      <div>
-        <LabelWithHelpIcon label={label} helpText={helpText}/>
+        <LabelWithHelpIcon label={label} helpText={helpText} />
        <table className="table is-hoverable is-fullwidth">
          <tbody>
            {items.map(item => {
--- a/scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.js
+++ b/scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.js
@@ -1,35 +0,0 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import ArrayConfigTable from "./ArrayConfigTable";
-
-type Props = {
-  proxyExcludes: string[],
-  t: string => string,
-  onChange: (boolean, any, string) => void,
-  disabled: boolean
-};
-
-type State = {};
-
-class ProxyExcludesTable extends React.Component<Props, State> {
-  render() {
-    const { proxyExcludes, disabled, t } = this.props;
-    return (
-      <ArrayConfigTable
-        items={proxyExcludes}
-        label={t("proxy-settings.proxy-excludes")}
-        removeLabel={t("proxy-settings.remove-proxy-exclude-button")}
-        onRemove={this.removeEntry}
-        disabled={disabled}
-        helpText={t("help.proxyExcludesHelpText")}
-      />
-    );
-  }
-
-  removeEntry = (newExcludes: string[]) => {
-    this.props.onChange(true, newExcludes, "proxyExcludes");
-  };
-}
-
-export default translate("config")(ProxyExcludesTable);
--- a/scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { translate } from 'react-i18next';
+import ArrayConfigTable from './ArrayConfigTable';
+
+type Props = {
+  proxyExcludes: string[];
+  t: (p: string) => string;
+  onChange: (p1: boolean, p2: any, p3: string) => void;
+  disabled: boolean;
+};
+
+type State = {};
+
+class ProxyExcludesTable extends React.Component<Props, State> {
+  render() {
+    const { proxyExcludes, disabled, t } = this.props;
+    return (
+      <ArrayConfigTable
+        items={proxyExcludes}
+        label={t('proxy-settings.proxy-excludes')}
+        removeLabel={t('proxy-settings.remove-proxy-exclude-button')}
+        onRemove={this.removeEntry}
+        disabled={disabled}
+        helpText={t('help.proxyExcludesHelpText')}
+      />
+    );
+  }
+
+  removeEntry = (newExcludes: string[]) => {
+    this.props.onChange(true, newExcludes, 'proxyExcludes');
+  };
+}
+
+export default translate('config')(ProxyExcludesTable);