translate users module

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

@@ -0,0 +1,30 @@
+{
+  "user": {
+    "name": "Username",
+    "displayName": "Display Name",
+    "mail": "E-Mail",
+    "password": "Password",
+    "admin": "Admin",
+    "active": "Active"
+  },
+  "users": {
+    "title": "Users",
+    "subtitle": "Create, read, update and delete users",
+    "add-button": "Add User"
+  },
+  "delete-user-button": {
+    "label": "Delete",
+    "confirm-alert": {
+      "title": "Delete user",
+      "message": "Do you really want to delete the user?",
+      "submit": "Yes",
+      "cancel": "No"
+    }
+  },
+  "edit-user-button": {
+    "label": "Edit"
+  },
+  "user-form": {
+    "submit": "Submit"
+  }
+}

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

@@ -1,5 +1,6 @@
 // @flow
 import React from "react";
+import { translate } from "react-i18next";
 import type { User } from "../types/User";
 import type { UserEntry } from "../types/UserEntry";
 import { confirmAlert } from "../../components/ConfirmAlert";
@@ -8,6 +9,7 @@ import DeleteButton from "../../components/DeleteButton";
 type Props = {
   entry: UserEntry,
   confirmDialog?: boolean,
+  t: string => string,
   deleteUser: (user: User) => void
 };
 
@@ -21,16 +23,17 @@ class DeleteUserButton extends React.Component<Props> {
   };
 
   confirmDelete = () => {
+    const { t } = this.props;
     confirmAlert({
-      title: "Delete user",
+      title: t("delete-user-button.confirm-alert.title"),
-      message: "Do you really want to delete the user?",
+      message: t("delete-user-button.confirm-alert.message"),
       buttons: [
         {
-          label: "Yes",
+          label: t("delete-user-button.confirm-alert.submit"),
           onClick: () => this.deleteUser()
         },
         {
-          label: "No",
+          label: t("delete-user-button.confirm-alert.cancel"),
           onClick: () => null
         }
       ]
@@ -42,16 +45,20 @@ class DeleteUserButton extends React.Component<Props> {
   };
 
   render() {
-    const { confirmDialog, entry } = this.props;
+    const { confirmDialog, entry, t } = this.props;
     const action = confirmDialog ? this.confirmDelete : this.deleteUser;
 
     if (!this.isDeletable()) {
       return null;
     }
     return (
-      <DeleteButton label="Delete" action={action} loading={entry.loading} />
+      <DeleteButton
+        label={t("delete-user-button.label")}
+        action={action}
+        loading={entry.loading}
+      />
     );
   }
 }
 
-export default DeleteUserButton;
+export default translate("users")(DeleteUserButton);

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

@@ -1,21 +1,29 @@
 //@flow
 import React from "react";
+import { translate } from "react-i18next";
 import EditButton from "../../components/EditButton";
 import type { UserEntry } from "../types/UserEntry";
 
 type Props = {
+  t: string => string,
   entry: UserEntry
 };
 
 class EditUserButton extends React.Component<Props> {
   render() {
-    const { entry } = this.props;
+    const { entry, t } = this.props;
     const link = "/users/edit/" + entry.entry.name;
 
     if (!this.isEditable()) {
       return "";
     }
-    return <EditButton label="Edit" link={link} loading={entry.loading} />;
+    return (
+      <EditButton
+        label={t("edit-user-button.label")}
+        link={link}
+        loading={entry.loading}
+      />
+    );
   }
 
   isEditable = () => {
@@ -23,4 +31,4 @@ class EditUserButton extends React.Component<Props> {
   };
 }
 
-export default EditUserButton;
+export default translate("users")(EditUserButton);

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

@@ -1,14 +1,17 @@
 // @flow
 import React from "react";
+import { translate } from "react-i18next";
 import type { User } from "../types/User";
 import InputField from "../../components/InputField";
 import Checkbox from "../../components/Checkbox";
 import SubmitButton from "../../components/SubmitButton";
+import Loading from "../../components/Loading";
 
 type Props = {
   submitForm: User => void,
   user?: User,
-  loading?: boolean
+  loading?: boolean,
+  t: string => string
 };
 
 class UserForm extends React.Component<Props, User> {
@@ -34,48 +37,52 @@ class UserForm extends React.Component<Props, User> {
   };
 
   render() {
+    const { t } = this.props;
     const user = this.state;
     if (user) {
       return (
         <div className="container">
           <form onSubmit={this.submit}>
             <InputField
-              label="Username"
+              label={t("user.name")}
               onChange={this.handleUsernameChange}
               value={user ? user.name : ""}
             />
             <InputField
-              label="Display Name"
+              label={t("user.displayName")}
               onChange={this.handleDisplayNameChange}
               value={user ? user.displayName : ""}
             />
             <InputField
-              label="E-Mail"
+              label={t("user.mail")}
               onChange={this.handleEmailChange}
               value={user ? user.mail : ""}
             />
             <InputField
-              label="Password"
+              label={t("user.password")}
               type="password"
               onChange={this.handlePasswordChange}
               value={user ? user.password : ""}
             />
             <Checkbox
-              label="Admin"
+              label={t("user.admin")}
               onChange={this.handleAdminChange}
               checked={user ? user.admin : false}
             />
             <Checkbox
-              label="Active"
+              label={t("user.active")}
               onChange={this.handleActiveChange}
               checked={user ? user.active : false}
             />
-            <SubmitButton label="Submit" loading={this.props.loading} />
+            <SubmitButton
+              label={t("user-form.submit")}
+              loading={this.props.loading}
+            />
           </form>
         </div>
       );
     } else {
-      return <div>Loading...</div>;
+      return <Loading />;
     }
   }
 
@@ -104,4 +111,4 @@ class UserForm extends React.Component<Props, User> {
   };
 }
 
-export default UserForm;
+export default translate("users")(UserForm);

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

@@ -1,26 +1,28 @@
 // @flow
 import React from "react";
+import { translate } from "react-i18next";
 import UserRow from "./UserRow";
 import type { User } from "../types/User";
 import type { UserEntry } from "../types/UserEntry";
 
 type Props = {
+  t: string => string,
   entries: Array<UserEntry>,
   deleteUser: User => void
 };
 
 class UserTable extends React.Component<Props> {
   render() {
-    const { deleteUser } = this.props;
+    const { deleteUser, t } = this.props;
     const entries = this.props.entries;
     return (
       <table className="table is-hoverable is-fullwidth">
         <thead>
           <tr>
-            <th>Name</th>
+            <th>{t("user.name")}</th>
-            <th>Display Name</th>
+            <th>{t("user.displayName")}</th>
-            <th>E-Mail</th>
+            <th>{t("user.mail")}</th>
-            <th>Admin</th>
+            <th>{t("user.admin")}</th>
             <th />
             <th />
           </tr>
@@ -37,4 +39,4 @@ class UserTable extends React.Component<Props> {
   }
 }
 
-export default UserTable;
+export default translate("users")(UserTable);

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

@@ -1,6 +1,7 @@
 // @flow
 import React from "react";
 import { connect } from "react-redux";
+import { translate } from "react-i18next";
 
 import { fetchUsers, deleteUser, getUsersFromState } from "../modules/users";
 import Page from "../../components/Page";
@@ -12,6 +13,7 @@ import type { UserEntry } from "../types/UserEntry";
 type Props = {
   loading?: boolean,
   error: Error,
+  t: string => string,
   userEntries: Array<UserEntry>,
   fetchUsers: () => void,
   deleteUser: User => void,
@@ -24,11 +26,11 @@ class Users extends React.Component<Props, User> {
   }
 
   render() {
-    const { userEntries, deleteUser, loading, error } = this.props;
+    const { userEntries, deleteUser, loading, t, error } = this.props;
     return (
       <Page
-        title="Users"
+        title={t("users.title")}
-        subtitle="Create, read, update and delete users"
+        subtitle={t("users.subtitle")}
         loading={loading || !userEntries}
         error={error}
       >
@@ -39,10 +41,11 @@ class Users extends React.Component<Props, User> {
   }
 
   renderAddButton() {
-    if (this.props.canAddUsers) {
+    const { canAddUsers, t } = this.props;
+    if (canAddUsers) {
       return (
         <div>
-          <AddButton label="Add User" link="/users/add" />
+          <AddButton label={t("users.add-button")} link="/users/add" />
         </div>
       );
     } else {
@@ -83,4 +86,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(Users);
+)(translate("users")(Users));