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