UserForm.tsx

import { User, UserRole, UserStatus } from "bitcapital-core-sdk";
import * as React from "react";
import { Button, Col, Form, FormGroup, Input, Label } from "reactstrap";
import FormContainer from "../container/FormContainer";

export interface UserFormProps {
  user: User;
  readonly: boolean;
  handleChange: (id: string, value: any) => void;
  handleSubmit: () => void;
  toggleReadonly: () => void;
}
// TODO: Add Domain & Consumer
const UserForm: React.StatelessComponent<UserFormProps> = ({
  user,
  readonly,
  handleChange,
  handleSubmit,
  toggleReadonly
}) => {
  const ownHandleSubmit = (e: React.FormEvent) => {
    const form = document.getElementById("user-form") as HTMLFormElement;
    if (!form.checkValidity()) return;

    e.preventDefault();
    handleSubmit();
  };

  return (
    <FormContainer>
      <Form id="user-form" onSubmit={e => ownHandleSubmit(e)}>
        <Col xs={{ size: "auto", offset: 8 }}>
          <Button onClick={toggleReadonly}>{readonly ? "Edit" : "Stop Editing"}</Button>
        </Col>
        <FormGroup>
          <Label>First Name</Label>
          <Input
            name="firstName"
            value={user.firstName}
            disabled={readonly}
            onChange={e => handleChange("firstName", e.target.value)}
          />
        </FormGroup>
        <FormGroup>
          <Label>Last Name</Label>
          <Input
            name="lastName"
            value={user.lastName}
            disabled={readonly}
            onChange={e => handleChange("lastName", e.target.value)}
          />
        </FormGroup>
        <FormGroup>
          <Label>Email</Label>
          <Input
            type="email"
            name="email"
            value={user.email}
            disabled={readonly}
            onChange={e => handleChange("email", e.target.value)}
          />
        </FormGroup>
        <FormGroup>
          <Label>Role</Label>
          <Input
            type="select"
            name="role"
            value={user.role}
            disabled={readonly}
            onChange={e => handleChange("role", e.target.value)}
          >
            {Object.values(UserRole).map(role => <option key={role}>{role}</option>)}
          </Input>
        </FormGroup>
        <FormGroup>
          <Label>Status</Label>
          <Input
            type="select"
            name="status"
            value={user.status}
            disabled={readonly}
            onChange={e => handleChange("status", e.target.value)}
          >
            {Object.values(UserStatus).map(status => <option key={status}>{status}</option>)}
          </Input>
        </FormGroup>
        <FormGroup>
          <Label>Password</Label>
          <Input
            type="password"
            name="password"
            value={user.password}
            disabled={readonly}
            onChange={e => handleChange("password", e.target.value)}
          />
        </FormGroup>
        <Button type="submit">Submit</Button>
      </Form>
    </FormContainer>
  );
};

export default UserForm;