refactoring + css fix + general config form changed

This commit is contained in:
Florian Scholdei
2019-01-18 15:52:34 +01:00
parent b1b38276ab
commit df5434147c
8 changed files with 95 additions and 83 deletions

View File

@@ -17,29 +17,36 @@
"create-user-button": { "create-user-button": {
"label": "Create" "label": "Create"
}, },
"delete-user-button": {
"label": "Delete",
"confirm-alert": {
"title": "Delete user",
"message": "Do you really want to delete the user?",
"submit": "Yes",
"cancel": "No"
}
},
"user-form": {
"submit": "Submit",
"deleteUser": "Delete User"
},
"add-user": { "add-user": {
"title": "Create User", "title": "Create User",
"subtitle": "Create a new user" "subtitle": "Create a new user"
}, },
"single-user": { "single-user": {
"navigationLabel": "User Navigation", "menu": {
"informationNavLink": "Information", "navigationLabel": "User Navigation",
"settingsNavLink": "Settings", "informationNavLink": "Information",
"editNavLink": "General", "settingsNavLink": "Settings",
"setPasswordNavLink": "Password", "editNavLink": "General",
"setPasswordNavLink": "Password"
},
"edit": {
"subtitle": "Edit User",
"button": "Submit"
},
"delete": {
"subtitle": "Delete User",
"button": "Delete",
"confirm-alert": {
"title": "Delete user",
"message": "Do you really want to delete the user?",
"submit": "Yes",
"cancel": "No"
}
},
"password": {
"button": "Set password",
"set-password-successful": "Password successfully set"
},
"errorTitle": "Error", "errorTitle": "Error",
"errorSubtitle": "Unknown user error" "errorSubtitle": "Unknown user error"
}, },
@@ -48,9 +55,6 @@
"name-invalid": "This name is invalid", "name-invalid": "This name is invalid",
"displayname-invalid": "This displayname is invalid" "displayname-invalid": "This displayname is invalid"
}, },
"password": {
"set-password-successful": "Password successfully set"
},
"help": { "help": {
"usernameHelpText": "Unique name of the user.", "usernameHelpText": "Unique name of the user.",
"displayNameHelpText": "Display name of the user.", "displayNameHelpText": "Display name of the user.",

View File

@@ -45,15 +45,15 @@ class DeleteUser extends React.Component<Props> {
confirmDelete = () => { confirmDelete = () => {
const { t } = this.props; const { t } = this.props;
confirmAlert({ confirmAlert({
title: t("delete-user-button.confirm-alert.title"), title: t("single-user.delete.confirm-alert.title"),
message: t("delete-user-button.confirm-alert.message"), message: t("single-user.delete.confirm-alert.message"),
buttons: [ buttons: [
{ {
label: t("delete-user-button.confirm-alert.submit"), label: t("single-user.delete.confirm-alert.submit"),
onClick: () => this.deleteUser() onClick: () => this.deleteUser()
}, },
{ {
label: t("delete-user-button.confirm-alert.cancel"), label: t("single-user.delete.confirm-alert.cancel"),
onClick: () => null onClick: () => null
} }
] ]
@@ -71,7 +71,7 @@ class DeleteUser extends React.Component<Props> {
if (!this.isDeletable()) { if (!this.isDeletable()) {
return null; return null;
} }
return <DeleteButton label={t("user-form.deleteUser")} action={action} />; return <DeleteButton label={t("single-user.delete.button")} action={action} />;
} }
} }

View File

@@ -90,7 +90,7 @@ class SetUserPassword extends React.Component<Props, State> {
message = ( message = (
<Notification <Notification
type={"success"} type={"success"}
children={t("password.set-password-successful")} children={t("single-user.password.set-password-successful")}
onClose={() => this.onClose()} onClose={() => this.onClose()}
/> />
); );
@@ -108,7 +108,7 @@ class SetUserPassword extends React.Component<Props, State> {
<SubmitButton <SubmitButton
disabled={!this.state.passwordValid} disabled={!this.state.passwordValid}
loading={loading} loading={loading}
label={t("user-form.submit")} label={t("single-user.password.button")}
/> />
</form> </form>
); );

View File

@@ -3,6 +3,7 @@ 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 {
Subtitle,
Checkbox, Checkbox,
InputField, InputField,
PasswordConfirmation, PasswordConfirmation,
@@ -105,60 +106,67 @@ class UserForm extends React.Component<Props, State> {
); );
} }
return ( return (
<form onSubmit={this.submit}> <>
<Subtitle subtitle={t("single-user.edit.subtitle")} />
<form onSubmit={this.submit}>
<div className="columns">
<div className="column is-half">
{nameField}
<InputField
label={t("user.displayName")}
onChange={this.handleDisplayNameChange}
value={user ? user.displayName : ""}
validationError={this.state.displayNameValidationError}
errorMessage={t("validation.displayname-invalid")}
helpText={t("help.displayNameHelpText")}
/>
</div>
<div className="column is-half">
<InputField
label={t("user.mail")}
onChange={this.handleEmailChange}
value={user ? user.mail : ""}
validationError={this.state.mailValidationError}
errorMessage={t("validation.mail-invalid")}
helpText={t("help.mailHelpText")}
/>
</div>
</div>
<div className="columns">
<div className="column">
{passwordChangeField}
<Checkbox
label={t("user.admin")}
onChange={this.handleAdminChange}
checked={user ? user.admin : false}
helpText={t("help.adminHelpText")}
/>
<Checkbox
label={t("user.active")}
onChange={this.handleActiveChange}
checked={user ? user.active : false}
helpText={t("help.activeHelpText")}
/>
</div>
</div>
<div className="columns">
<div className="column">
<SubmitButton
disabled={!this.isValid()}
loading={loading}
label={t("single-user.edit.button")}
/>
</div>
</div>
</form>
<hr />
<Subtitle subtitle={t("single-user.delete.subtitle")} />
<div className="columns"> <div className="columns">
<div className="column is-half">
{nameField}
<InputField
label={t("user.displayName")}
onChange={this.handleDisplayNameChange}
value={user ? user.displayName : ""}
validationError={this.state.displayNameValidationError}
errorMessage={t("validation.displayname-invalid")}
helpText={t("help.displayNameHelpText")}
/>
</div>
<div className="column is-half">
<InputField
label={t("user.mail")}
onChange={this.handleEmailChange}
value={user ? user.mail : ""}
validationError={this.state.mailValidationError}
errorMessage={t("validation.mail-invalid")}
helpText={t("help.mailHelpText")}
/>
</div>
</div>
<div className="columns">
<div className="column">
{passwordChangeField}
<Checkbox
label={t("user.admin")}
onChange={this.handleAdminChange}
checked={user ? user.admin : false}
helpText={t("help.adminHelpText")}
/>
<Checkbox
label={t("user.active")}
onChange={this.handleActiveChange}
checked={user ? user.active : false}
helpText={t("help.activeHelpText")}
/>
</div>
</div>
<div className="columns">
<div className="column">
<SubmitButton
disabled={!this.isValid()}
loading={loading}
label={t("user-form.submit")}
/>
</div>
<div className="column"> <div className="column">
<DeleteUser user={user} /> <DeleteUser user={user} />
</div> </div>
</div> </div>
</form> </>
); );
} }

View File

@@ -17,7 +17,7 @@ class EditUserNavLink extends React.Component<Props> {
if (!this.isEditable()) { if (!this.isEditable()) {
return null; return null;
} }
return <NavLink label={t("single-user.editNavLink")} to={editUrl} />; return <NavLink label={t("single-user.menu.editNavLink")} to={editUrl} />;
} }
isEditable = () => { isEditable = () => {

View File

@@ -17,7 +17,7 @@ class ChangePasswordNavLink extends React.Component<Props> {
if (!this.hasPermissionToSetPassword()) { if (!this.hasPermissionToSetPassword()) {
return null; return null;
} }
return <NavLink label={t("single-user.setPasswordNavLink")} to={passwordUrl} />; return <NavLink label={t("single-user.menu.setPasswordNavLink")} to={passwordUrl} />;
} }
hasPermissionToSetPassword = () => { hasPermissionToSetPassword = () => {

View File

@@ -96,14 +96,14 @@ class SingleUser extends React.Component<Props> {
</div> </div>
<div className="column"> <div className="column">
<Navigation> <Navigation>
<Section label={t("single-user.navigationLabel")}> <Section label={t("single-user.menu.navigationLabel")}>
<NavLink <NavLink
to={`${url}`} to={`${url}`}
label={t("single-user.informationNavLink")} label={t("single-user.menu.informationNavLink")}
/> />
<SubNavigation <SubNavigation
to={`${url}/settings/general`} to={`${url}/settings/general`}
label={t("single-user.settingsNavLink")} label={t("single-user.menu.settingsNavLink")}
> >
<EditUserNavLink user={user} editUrl={`${url}/settings/general`} /> <EditUserNavLink user={user} editUrl={`${url}/settings/general`} />
<SetPasswordNavLink <SetPasswordNavLink

View File

@@ -291,7 +291,7 @@ $fa-font-path: "webfonts";
border-left: 1px solid #eee; border-left: 1px solid #eee;
border-right: 1px solid #eee; border-right: 1px solid #eee;
} }
li:first-child { > li:first-child {
border-top: none; border-top: none;
} }
li:last-child { li:last-child {