refactoring + css fix + general config form changed

scm-ui/public/locales/en/users.json

@@ -17,8 +17,25 @@
   "create-user-button": {
     "label": "Create"
   },
-  "delete-user-button": {
-    "label": "Delete",
+  "add-user": {
+    "title": "Create User",
+    "subtitle": "Create a new user"
+  },
+  "single-user": {
+    "menu": {
+      "navigationLabel": "User Navigation",
+      "informationNavLink": "Information",
+      "settingsNavLink": "Settings",
+      "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?",
@@ -26,20 +43,10 @@
         "cancel": "No"
       }
     },
-  "user-form": {
-    "submit": "Submit",
-    "deleteUser": "Delete User"
+    "password": {
+      "button": "Set password",
+      "set-password-successful": "Password successfully set"
     },
-  "add-user": {
-    "title": "Create User",
-    "subtitle": "Create a new user"
-  },
-  "single-user": {
-    "navigationLabel": "User Navigation",
-    "informationNavLink": "Information",
-    "settingsNavLink": "Settings",
-    "editNavLink": "General",
-    "setPasswordNavLink": "Password",
     "errorTitle": "Error",
     "errorSubtitle": "Unknown user error"
   },
@@ -48,9 +55,6 @@
     "name-invalid": "This name is invalid",
     "displayname-invalid": "This displayname is invalid"
   },
-  "password": {
-    "set-password-successful": "Password successfully set"
-  },
   "help": {
     "usernameHelpText": "Unique name of the user.",
     "displayNameHelpText": "Display name of the user.",

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,6 +106,8 @@ class UserForm extends React.Component<Props, State> {
       );
     }
     return (
+      <>
+        <Subtitle subtitle={t("single-user.edit.subtitle")} />
         <form onSubmit={this.submit}>
           <div className="columns">
             <div className="column is-half">
@@ -151,14 +154,19 @@ class UserForm extends React.Component<Props, State> {
               <SubmitButton
                 disabled={!this.isValid()}
                 loading={loading}
-              label={t("user-form.submit")}
+                label={t("single-user.edit.button")}
               />
             </div>
+          </div>
+        </form>
+        <hr />
+        <Subtitle subtitle={t("single-user.delete.subtitle")} />
+        <div className="columns">
           <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

scm-ui/styles/scm.scss

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