updates users structure

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

@@ -0,0 +1,112 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { User } from "../types/User";
+import { InputField, Checkbox } from "../../components/forms";
+import { SubmitButton } from "../../components/buttons";
+import Loading from "../../components/Loading";
+
+type Props = {
+  submitForm: User => void,
+  user?: User,
+  loading?: boolean,
+  t: string => string
+};
+
+class UserForm extends React.Component<Props, User> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      name: "",
+      displayName: "",
+      mail: "",
+      password: "",
+      admin: false,
+      active: false,
+      _links: {}
+    };
+  }
+
+  componentDidMount() {
+    this.setState({ ...this.props.user });
+  }
+
+  submit = (event: Event) => {
+    event.preventDefault();
+    this.props.submitForm(this.state);
+  };
+
+  render() {
+    const { t } = this.props;
+    const user = this.state;
+    if (user) {
+      return (
+        <form onSubmit={this.submit}>
+          <InputField
+            label={t("user.name")}
+            onChange={this.handleUsernameChange}
+            value={user ? user.name : ""}
+          />
+          <InputField
+            label={t("user.displayName")}
+            onChange={this.handleDisplayNameChange}
+            value={user ? user.displayName : ""}
+          />
+          <InputField
+            label={t("user.mail")}
+            onChange={this.handleEmailChange}
+            value={user ? user.mail : ""}
+          />
+          <InputField
+            label={t("user.password")}
+            type="password"
+            onChange={this.handlePasswordChange}
+            value={user ? user.password : ""}
+          />
+          <Checkbox
+            label={t("user.admin")}
+            onChange={this.handleAdminChange}
+            checked={user ? user.admin : false}
+          />
+          <Checkbox
+            label={t("user.active")}
+            onChange={this.handleActiveChange}
+            checked={user ? user.active : false}
+          />
+          <SubmitButton
+            label={t("user-form.submit")}
+            loading={this.props.loading}
+          />
+        </form>
+      );
+    } else {
+      return <Loading />;
+    }
+  }
+
+  handleUsernameChange = (name: string) => {
+    this.setState({ name });
+  };
+
+  handleDisplayNameChange = (displayName: string) => {
+    this.setState({ displayName });
+  };
+
+  handleEmailChange = (mail: string) => {
+    this.setState({ mail });
+  };
+
+  handlePasswordChange = (password: string) => {
+    this.setState({ password });
+  };
+
+  handleAdminChange = (admin: boolean) => {
+    this.setState({ admin });
+  };
+
+  handleActiveChange = (active: boolean) => {
+    this.setState({ active });
+  };
+}
+
+export default translate("users")(UserForm);