From 27ae4dac1a192c67ef4f7db609c881245fa110c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Mon, 13 Aug 2018 16:33:56 +0200
Subject: [PATCH] show settings and let them modify

---
 .../config/components/form/AdminSettings.js   |  29 ++++
 .../config/components/form/BaseUrlSettings.js |  43 ++++++
 .../src/config/components/form/ConfigForm.js  | 126 ++++++++++++++++
 .../config/components/form/GeneralSettings.js | 135 ++++++++++++++++++
 .../config/components/form/ProxySettings.js   |  82 +++++++++++
 5 files changed, 415 insertions(+)
 create mode 100644 scm-ui/src/config/components/form/AdminSettings.js
 create mode 100644 scm-ui/src/config/components/form/BaseUrlSettings.js
 create mode 100644 scm-ui/src/config/components/form/ConfigForm.js
 create mode 100644 scm-ui/src/config/components/form/GeneralSettings.js
 create mode 100644 scm-ui/src/config/components/form/ProxySettings.js

diff --git a/scm-ui/src/config/components/form/AdminSettings.js b/scm-ui/src/config/components/form/AdminSettings.js
new file mode 100644
index 0000000000..5079addca1
--- /dev/null
+++ b/scm-ui/src/config/components/form/AdminSettings.js
@@ -0,0 +1,29 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Checkbox, InputField } from "../../../components/forms/index";
+import Subtitle from "../../../components/layout/Subtitle";
+
+type Props = {
+  adminGroups: string[],
+  adminUsers: string[],
+  t: string => string,
+  onChange: (boolean, any, string) => void
+};
+//TODO: Einbauen!
+class AdminSettings extends React.Component<Props> {
+  render() {
+    const {
+      t,
+      adminGroups,
+      adminUsers
+    } = this.props;
+
+    return (
+      null
+    );
+  }
+
+}
+
+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
new file mode 100644
index 0000000000..cde4680b48
--- /dev/null
+++ b/scm-ui/src/config/components/form/BaseUrlSettings.js
@@ -0,0 +1,43 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Checkbox, InputField } from "../../../components/forms/index";
+import Subtitle from "../../../components/layout/Subtitle";
+
+type Props = {
+  baseUrl: string,
+  forceBaseUrl: boolean,
+  t: string => string,
+  onChange: (boolean, any, string) => void
+};
+
+class BaseUrlSettings extends React.Component<Props> {
+  render() {
+    const { t, baseUrl, forceBaseUrl } = this.props;
+
+    return (
+      <div>
+        <Subtitle subtitle={t("base-url-settings.name")} />
+        <Checkbox
+          checked={forceBaseUrl}
+          label={t("base-url-settings.force-base-url")}
+          onChange={this.handleForceBaseUrlChange}
+        />
+        <InputField
+          label={t("base-url-settings.base-url")}
+          onChange={this.handleBaseUrlChange}
+          value={baseUrl}
+        />
+      </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/ConfigForm.js b/scm-ui/src/config/components/form/ConfigForm.js
new file mode 100644
index 0000000000..ac7325e6fc
--- /dev/null
+++ b/scm-ui/src/config/components/form/ConfigForm.js
@@ -0,0 +1,126 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { SubmitButton } from "../../../components/buttons/index";
+import type { Config } from "../../types/Config";
+import ProxySettings from "./ProxySettings";
+import GeneralSettings from "./GeneralSettings";
+import BaseUrlSettings from "./BaseUrlSettings";
+
+type Props = {
+  submitForm: Config => void,
+  config?: Config,
+  loading?: boolean,
+  t: string => string
+};
+
+type State = {
+  config: Config
+};
+
+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: "",
+        enableRepositoryArchive: false,
+        disableGroupingGrid: false,
+        dateFormat: "",
+        anonymousAccessEnabled: false,
+        adminGroups: [],
+        adminUsers: [],
+        baseUrl: "",
+        forceBaseUrl: false,
+        loginAttemptLimit: 0,
+        proxyExcludes: [],
+        skipFailedAuthenticators: false,
+        pluginUrl: "",
+        loginAttemptLimitTimeout: 0,
+        enabledXsrfProtection: true,
+        defaultNamespaceStrategy: "",
+        _links: {}
+      }
+    };
+  }
+
+  componentDidMount() {
+    const { config } = this.props;
+    console.log(config);
+    if (config) {
+      this.setState({ config: { ...config } });
+    }
+  }
+
+  submit = (event: Event) => {
+    event.preventDefault();
+    this.props.submitForm(this.state.config);
+  };
+
+  render() {
+    const { loading, t } = this.props;
+    let config = this.state.config;
+
+    return (
+      <form onSubmit={this.submit}>
+        <GeneralSettings
+          realmDescription={config.realmDescription}
+          enableRepositoryArchive={config.enableRepositoryArchive}
+          disableGroupingGrid={config.disableGroupingGrid}
+          dateFormat={config.dateFormat}
+          anonymousAccessEnabled={config.anonymousAccessEnabled}
+          loginAttemptLimit={config.loginAttemptLimit}
+          skipFailedAuthenticators={config.skipFailedAuthenticators}
+          pluginUrl={config.pluginUrl}
+          loginAttemptLimitTimeout={config.loginAttemptLimitTimeout}
+          enabledXsrfProtection={config.enabledXsrfProtection}
+          defaultNamespaceStrategy={config.defaultNamespaceStrategy}
+          onChange={(isValid, changedValue, name) =>
+            this.onChange(isValid, changedValue, name)
+          }
+        />
+        <BaseUrlSettings
+          baseUrl={config.baseUrl}
+          forceBaseUrl={config.forceBaseUrl}
+          onChange={(isValid, changedValue, name) =>
+            this.onChange(isValid, changedValue, name)
+          }
+        />
+        <ProxySettings
+          proxyPassword={config.proxyPassword ? config.proxyPassword : ""}
+          proxyPort={config.proxyPort}
+          proxyServer={config.proxyServer ? config.proxyServer : ""}
+          proxyUser={config.proxyUser ? config.proxyUser : ""}
+          enableProxy={config.enableProxy}
+          onChange={(isValid, changedValue, name) =>
+            this.onChange(isValid, changedValue, name)
+          }
+        />
+        <SubmitButton
+          // disabled={!this.isValid()}
+          loading={loading}
+          label={t("config-form.submit")}
+        />
+      </form>
+    );
+  }
+
+  onChange = (isValid: boolean, changedValue: any, name: string) => {
+    if (isValid) {
+      this.setState({
+        config: {
+          ...this.state.config,
+          [name]: changedValue
+        }
+      });
+    }
+  };
+}
+
+export default translate("config")(ConfigForm);
diff --git a/scm-ui/src/config/components/form/GeneralSettings.js b/scm-ui/src/config/components/form/GeneralSettings.js
new file mode 100644
index 0000000000..29db1e5288
--- /dev/null
+++ b/scm-ui/src/config/components/form/GeneralSettings.js
@@ -0,0 +1,135 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Checkbox, InputField } from "../../../components/forms/index";
+
+type Props = {
+  realmDescription: string,
+  enableRepositoryArchive: boolean,
+  disableGroupingGrid: boolean,
+  dateFormat: string,
+  anonymousAccessEnabled: boolean,
+  loginAttemptLimit: number,
+  skipFailedAuthenticators: boolean,
+  pluginUrl: string,
+  loginAttemptLimitTimeout: number,
+  enabledXsrfProtection: boolean,
+  defaultNamespaceStrategy: string,
+  t: string => string,
+  onChange: (boolean, any, string) => void
+};
+
+class GeneralSettings extends React.Component<Props> {
+  render() {
+    const {
+      t,
+      realmDescription,
+      enableRepositoryArchive,
+      disableGroupingGrid,
+      dateFormat,
+      anonymousAccessEnabled,
+      loginAttemptLimit,
+      skipFailedAuthenticators,
+      pluginUrl,
+      loginAttemptLimitTimeout,
+      enabledXsrfProtection,
+      defaultNamespaceStrategy
+    } = this.props;
+
+    return (
+      <div>
+        <InputField
+          label={t("general-settings.realm-description")}
+          onChange={this.handleRealmDescriptionChange}
+          value={realmDescription}
+        />
+        <Checkbox
+          checked={enableRepositoryArchive}
+          label={t("general-settings.enable-repository-archive")}
+          onChange={this.handleEnableRepositoryArchiveChange}
+        />
+        <Checkbox
+          checked={disableGroupingGrid}
+          label={t("general-settings.disable-grouping-grid")}
+          onChange={this.handleDisableGroupingGridChange}
+        />
+        <InputField
+          label={t("general-settings.date-format")}
+          onChange={this.handleDateFormatChange}
+          value={dateFormat}
+        />
+        <Checkbox
+          checked={anonymousAccessEnabled}
+          label={t("general-settings.anonymous-access-enabled")}
+          onChange={this.handleAnonymousAccessEnabledChange}
+        />
+        <InputField
+          label={t("general-settings.login-attempt-limit")}
+          onChange={this.handleLoginAttemptLimitChange}
+          value={loginAttemptLimit}
+        />
+        <InputField
+          label={t("general-settings.login-attempt-limit-timeout")}
+          onChange={this.handleLoginAttemptLimitTimeoutChange}
+          value={loginAttemptLimitTimeout}
+        />
+        <Checkbox
+          checked={skipFailedAuthenticators}
+          label={t("general-settings.skip-failed-authenticators")}
+          onChange={this.handleSkipFailedAuthenticatorsChange}
+        />
+        <InputField
+          label={t("general-settings.plugin-url")}
+          onChange={this.handlePluginUrlChange}
+          value={pluginUrl}
+        />
+        <Checkbox
+          checked={enabledXsrfProtection}
+          label={t("general-settings.enabled-xsrf-protection")}
+          onChange={this.handleEnabledXsrfProtectionChange}
+        />
+        <InputField
+          label={t("general-settings.default-namespace-strategy")}
+          onChange={this.handleDefaultNamespaceStrategyChange}
+          value={defaultNamespaceStrategy}
+        />
+      </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");
+  };
+  handleLoginAttemptLimitChange = (value: string) => {
+    this.props.onChange(true, value, "loginAttemptLimit");
+  };
+  handleSkipFailedAuthenticatorsChange = (value: string) => {
+    this.props.onChange(true, value, "skipFailedAuthenticators");
+  };
+  handlePluginUrlChange = (value: string) => {
+    this.props.onChange(true, value, "pluginUrl");
+  };
+  handleLoginAttemptLimitTimeoutChange = (value: string) => {
+    this.props.onChange(true, value, "loginAttemptLimitTimeout");
+  };
+  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/ProxySettings.js b/scm-ui/src/config/components/form/ProxySettings.js
new file mode 100644
index 0000000000..2938c08a71
--- /dev/null
+++ b/scm-ui/src/config/components/form/ProxySettings.js
@@ -0,0 +1,82 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Checkbox, InputField } from "../../../components/forms/index";
+import Subtitle from "../../../components/layout/Subtitle";
+
+type Props = {
+  proxyPassword: string,
+  proxyPort: number,
+  proxyServer: string,
+  proxyUser: string,
+  enableProxy: boolean,
+  proxyExcludes: string[], //TODO: einbauen!
+  t: string => string,
+  onChange: (boolean, any, string) => void
+};
+
+class ProxySettings extends React.Component<Props> {
+  render() {
+    const {
+      t,
+      proxyPassword,
+      proxyPort,
+      proxyServer,
+      proxyUser,
+      enableProxy
+    } = this.props;
+
+    return (
+      <div>
+        <Subtitle subtitle={t("proxy-settings.name")} />
+        <Checkbox
+          checked={enableProxy}
+          label={t("proxy-settings.enable-proxy")}
+          onChange={this.handleEnableProxyChange}
+        />
+        <InputField
+          label={t("proxy-settings.proxy-password")}
+          onChange={this.handleProxyPasswordChange}
+          value={proxyPassword}
+          disable={!enableProxy}
+        />
+        <InputField
+          label={t("proxy-settings.proxy-port")}
+          value={proxyPort}
+          onChange={this.handleProxyPortChange}
+          disable={!enableProxy}
+        />
+        <InputField
+          label={t("proxy-settings.proxy-server")}
+          value={proxyServer}
+          onChange={this.handleProxyServerChange}
+          disable={!enableProxy}
+        />
+        <InputField
+          label={t("proxy-settings.proxy-user")}
+          value={proxyUser}
+          onChange={this.handleProxyUserChange}
+          disable={!enableProxy}
+        />
+      </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");
+  };
+}
+
+export default translate("config")(ProxySettings);