refactoring + css fix + general config form changed

scm-ui/src/users/components/DeleteUser.js

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

scm-ui/src/users/components/SetUserPassword.js

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

scm-ui/src/users/components/UserForm.js

@@ -3,6 +3,7 @@ import React from "react";
 import { translate } from "react-i18next";
 import type { User } from "@scm-manager/ui-types";
 import {
+  Subtitle,
   Checkbox,
   InputField,
   PasswordConfirmation,
@@ -105,60 +106,67 @@ class UserForm extends React.Component<Props, State> {
       );
     }
     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="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">
             <DeleteUser user={user} />
           </div>
         </div>
-      </form>
+      </>
     );
   }
 

scm-ui/src/users/components/navLinks/EditUserNavLink.js

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

scm-ui/src/users/components/navLinks/SetPasswordNavLink.js

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

scm-ui/src/users/containers/SingleUser.js

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