SCM-Manager/scm-ui/ui-webapp/src/admin/components/form/ConfigForm.tsx

import React from "react";
import { WithTranslation, withTranslation } from "react-i18next";
import { NamespaceStrategies, Config } from "@scm-manager/ui-types";
import { SubmitButton, Notification } from "@scm-manager/ui-components";
import ProxySettings from "./ProxySettings";
import GeneralSettings from "./GeneralSettings";
import BaseUrlSettings from "./BaseUrlSettings";
import LoginAttempt from "./LoginAttempt";

type Props = WithTranslation & {
  submitForm: (p: Config) => void;
  config?: Config;
  loading?: boolean;
  configReadPermission: boolean;
  configUpdatePermission: boolean;
  namespaceStrategies?: NamespaceStrategies;
};

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

class ConfigForm extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      config: {
        proxyPassword: null,
        proxyPort: 0,
        proxyServer: "",
        proxyUser: null,
        enableProxy: false,
        realmDescription: "",
        disableGroupingGrid: false,
        dateFormat: "",
        anonymousAccessEnabled: false,
        baseUrl: "",
        forceBaseUrl: false,
        loginAttemptLimit: 0,
        proxyExcludes: [],
        skipFailedAuthenticators: false,
        pluginUrl: "",
        loginAttemptLimitTimeout: 0,
        enabledXsrfProtection: true,
        namespaceStrategy: "",
        loginInfoUrl: "",
        _links: {}
      },
      showNotification: false,
      error: {
        loginAttemptLimitTimeout: false,
        loginAttemptLimit: false
      },
      changed: false
    };
  }

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

  submit = (event: Event) => {
    event.preventDefault();
    this.setState({
      changed: false
    });
    this.props.submitForm(this.state.config);
  };

  render() {
    const { loading, t, namespaceStrategies, configReadPermission, configUpdatePermission } = this.props;
    const config = this.state.config;

    let noPermissionNotification = null;

    if (!configReadPermission) {
      return <Notification type={"danger"} children={t("config.form.no-read-permission-notification")} />;
    }

    if (this.state.showNotification) {
      noPermissionNotification = (
        <Notification
          type={"info"}
          children={t("config.form.no-write-permission-notification")}
          onClose={() => this.onClose()}
        />
      );
    }

    return (
      <form onSubmit={this.submit}>
        {noPermissionNotification}
        <GeneralSettings
          namespaceStrategies={namespaceStrategies}
          loginInfoUrl={config.loginInfoUrl}
          realmDescription={config.realmDescription}
          disableGroupingGrid={config.disableGroupingGrid}
          dateFormat={config.dateFormat}
          anonymousAccessEnabled={config.anonymousAccessEnabled}
          skipFailedAuthenticators={config.skipFailedAuthenticators}
          pluginUrl={config.pluginUrl}
          enabledXsrfProtection={config.enabledXsrfProtection}
          namespaceStrategy={config.namespaceStrategy}
          onChange={(isValid, changedValue, name) => this.onChange(isValid, changedValue, name)}
          hasUpdatePermission={configUpdatePermission}
        />
        <hr />
        <LoginAttempt
          loginAttemptLimit={config.loginAttemptLimit}
          loginAttemptLimitTimeout={config.loginAttemptLimitTimeout}
          onChange={(isValid, changedValue, name) => this.onChange(isValid, changedValue, name)}
          hasUpdatePermission={configUpdatePermission}
        />
        <hr />
        <BaseUrlSettings
          baseUrl={config.baseUrl}
          forceBaseUrl={config.forceBaseUrl}
          onChange={(isValid, changedValue, name) => this.onChange(isValid, changedValue, name)}
          hasUpdatePermission={configUpdatePermission}
        />
        <hr />
        <ProxySettings
          proxyPassword={config.proxyPassword ? config.proxyPassword : ""}
          proxyPort={config.proxyPort}
          proxyServer={config.proxyServer ? config.proxyServer : ""}
          proxyUser={config.proxyUser ? config.proxyUser : ""}
          enableProxy={config.enableProxy}
          proxyExcludes={config.proxyExcludes}
          onChange={(isValid, changedValue, name) => this.onChange(isValid, changedValue, name)}
          hasUpdatePermission={configUpdatePermission}
        />
        <hr />
        <SubmitButton
          loading={loading}
          label={t("config.form.submit")}
          disabled={!configUpdatePermission || this.hasError() || !this.state.changed}
        />
      </form>
    );
  }

  onChange = (isValid: boolean, changedValue: any, name: string) => {
    this.setState({
      ...this.state,
      config: {
        ...this.state.config,
        [name]: changedValue
      },
      error: {
        ...this.state.error,
        [name]: !isValid
      },
      changed: true
    });
  };

  hasError = () => {
    return this.state.error.loginAttemptLimit || this.state.error.loginAttemptLimitTimeout;
  };

  onClose = () => {
    this.setState({
      ...this.state,
      showNotification: false
    });
  };
}

export default withTranslation("config")(ConfigForm);