app.js-------------------------

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom';

import Auth from '../auth/auth';
import Home from '../home/home';
import NoMatch from '../../shared/noMatch/noMatch';

import './app.css';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

class App extends Component {

  render() {
    return (
      <Router>
        <div className="row row--full">
          <Switch>
            <Route exact path="/" render={() => (<Redirect to="/auth"/>)}/>
            <Route exact path="/auth" component={Auth}/>
            <Route path="/panel" component={Home}/>
            <Route path="/*" component={NoMatch}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

home.js-------------------------

import React from 'react';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

import './home.css';

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

import { Topbar, Sidebar } from '../index';
import { Dashboard, Lines, Devices, Users, Parameters } from './index';

const Home = () => {
  return (
    <Row className="row--width-full">
      <Col className="col--no-padding" xs="12">
        <Topbar></Topbar>
        <Router>
          <Row className="row--width-full home__page">
            <Sidebar></Sidebar>
            {/* <Col lg="10" md="9" xs="12"> */}
            <div className="home__content">
              <Route exact path="/panel" component={ Dashboard }/>
              <Route exact path="/panel/users" component={ Users }/>
              <Route exact path="/panel/lines" component={ Lines }/>
              <Route exact path="/panel/devices" component={ Devices }/>
              <Route exact path="/panel/parameters" component={ Parameters }/>
            {/* </Col> */}
            </div>
          </Row>
        </Router>
      </Col>
    </Row>
  );
}

export default Home;


users.js-------------------------

import React, { Component } from 'react';

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

import { Page, Sidepanel } from '../../../index';
import { AddUser, EditUser, EditUserGroups, StatusButton } from './index';

class Users extends Component {
  constructor(props) {
    super(props);

    this.state = {
      title: "Użytkownicy",
      description: "dodawanie, usuwanie i konfigurowanie kont użytkowników",
      isLoading: false,
      userAddingMode: false,
      selectedUser: {
        id: null,
        firstName: "",
        lastName: "",
        login: "",
        password: "",
        email: "",
        roles: [],
        isVerified: true,
        canLogin: false,
        isAD: false,
        isAdmin: false
      },
      newUser: {
        firstName: "",
        lastName: "",
        login: "",
        password: "",
        email: "",
        roles: [],
        isVerified: false,
        canLogin: false,
        isAD: false,
        isAdmin: false
      },
      columnDefs: [],
      users: [],
      groups: [
        { id: 1, groupName: "szef laboratorium" },
        { id: 2, groupName: "laborant" },
        { id: 3, groupName: "kierownik zmiany" },
        { id: 4, groupName: "raport" },
        { id: 5, groupName: "audytor" },
        { id: 6, groupName: "próby dekadowe" }
      ]
     };
  }

  async componentDidMount() {
    this.setState({ isLoading: true });
    try {
      const result = await this.getUsers();
      this.setState({ users: result, isLoading: false });
    } catch (error) {
      this.setState({ error, isLoading: false });
    }

    if (this.state.users.length) {
      this.prepareAndSendAgGridDataset();
      this.setState({ isLoading: true });
      try {
        const result = await this.getUserDetails(this.state.users[0].id);
        this.setState({ selectedUser: result, isLoading: false });
        console.log(this.state)
      } catch (error) {
        this.setState({ isLoading: false });
      }
    }
  }

  getUsers = () => {
    const users = [
      { id: 1, firstName: "Seth", lastName: "Seth", login: "seth" },
      { id: 2, firstName: "Jan", lastName: "Nowak", login: "jnowak" },
      { id: 3, firstName: "Jan", lastName: "Kowalski", login: "jkowalski" }
    ];
    return users;
  }

  getUserDetails = id => {
    const selectedUser = {
      id: 1,
      firstName: "Seth",
      lastName: "Seth",
      login: "seth",
      password: "33Seth00",
      email: "seth@siseth.com",
      roles: [5],
      isVerified: true,
      canLogin: true,
      isAD: false,
      isAdmin: true
    }
    return selectedUser;
  }

  prepareAndSendAgGridDataset = () => {
    setTimeout(() => {
      const columnDefs = [
        { headerName: "Imię", field: "firstName", sortable: true, filter: true, width: 100 },
        { headerName: "Nazwisko", field: "lastName", sortable: true, filter: true, width: 120 },
        { headerName: "Login", field: "login", sortable: true, filter: true, width: 220 }
      ];
      this.setState({ columnDefs: columnDefs });
    }, 0);
  }

  onChangingMode = () => {
    if (this.state.userAddingMode) {
      const newUser = {
        firstName: "",
        lastName: "",
        login: "",
        password: "",
        email: "",
        roles: [],
        isVerified: false,
        canLogin: false,
        isAD: false,
        isAdmin: false
      };
      this.setState({ newUser: newUser})
    }
    this.setState(state => ({ userAddingMode: !state.userAddingMode }));
  }

  onChangingStatus = (text, status) => {
    if (!this.state.userAddingMode) {
      if (text === "ML") {
        const selectedUser = { ...this.state.selectedUser, canLogin: !status };
        this.setState(() => ({ selectedUser }));
      } else if (text === "AD") {
        const selectedUser = { ...this.state.selectedUser, isAD: !status };
        this.setState(() => ({ selectedUser }));
      } else if (text === "A") {
        const selectedUser = { ...this.state.selectedUser, isAdmin: !status };
        this.setState(() => ({ selectedUser }));
      }
    } else {
      if (text === "ML") {
        const newUser = { ...this.state.newUser, canLogin: !status };
        this.setState(() => ({ newUser }));
      } else if (text === "AD") {
        const newUser = { ...this.state.newUser, isAD: !status };
        this.setState(() => ({ newUser }));
      } else if (text === "A") {
        const newUser = { ...this.state.newUser, isAdmin: !status };
        this.setState(() => ({ newUser }));
      }
    }
  }

  onAddingOrRemovingGroup = id => {
    if (this.state.userAddingMode) {
      const exist = this.state.selectedUser.roles.find(group => {
        return group === id;
      });

      if (exist == null) {
        const roles = [ ...this.state.selectedUser.roles, id];
        const selectedUser = { ...this.state.selectedUser, roles: roles };
        this.setState(() => ({ selectedUser }));
      } else {
        const roles = this.state.selectedUser.roles.filter(number => {
          return number !== id;
        });

        const selectedUser = { ...this.state.selectedUser, roles: roles };
        this.setState(() => ({ selectedUser }));
      }
    } else {
      const exist = this.state.selectedUser.roles.find(group => {
        return group === id;
      });

      if (exist == null) {
        const roles = [ ...this.state.newUser.roles, id];
        const newUser = { ...this.state.newUser, roles: roles };
        this.setState(() => ({ newUser }));
      } else {
        const roles = this.state.newUser.roles.filter(number => {
          return number !== id;
        });

        const newUser = { ...this.state.newUser, roles: roles };
        this.setState(() => ({ newUser }));
      }
    }
  }

  onUpdateUser = form => {
    const copiedUser = this.state.selectedUser;
    console.log("onUpdateUser", form, copiedUser)
  }

  onCreatingUser = form => {
    const copiedUser = this.state.newUser;
    console.log("onCreatingUser", form, copiedUser)
  }

  render() {
    const userAddingMode = this.state.userAddingMode;
    const selectedUser = this.state.selectedUser;
    let pageContent;

    if (!userAddingMode && selectedUser.id) {
      pageContent =
      <Col xs="12">
        <section className="section">
          <div className="section__header">
            <h3 className="section__title">{ this.state.selectedUser.firstName + " " + this.state.selectedUser.lastName } <small className="page__description">edycja konta użytkownika</small></h3>
            <div className="section__actions">
              <StatusButton text="V" tooltip="Konto zweryfikowane" type="info" status={ this.state.selectedUser.isVerified }
              isDisabled={ true } onChangingStatus={ this.onChangingStatus }/>
              <StatusButton text="ML" tooltip="Możliwość logowania" type="info" status={ this.state.selectedUser.canLogin }
              onChangingStatus={ this.onChangingStatus }/>
              <StatusButton text="AD" tooltip="Konto Active Directory" type="info" status={ this.state.selectedUser.isAD }
              onChangingStatus={ this.onChangingStatus }/>
              <StatusButton text="A" tooltip="Administrator" type="info" status={ this.state.selectedUser.isAdmin }
              onChangingStatus={ this.onChangingStatus }/>
            </div>
          </div>
          <hr/>
          <EditUser selectedUser={ this.state.selectedUser } onUpdateUser={ this.onUpdateUser }/>
        </section>
        <section className="section">
          <h3 className="section__title">Grupa użytkowników</h3>
          <hr/>
          <EditUserGroups groups={ this.state.groups } userRoles={ this.state.selectedUser.roles } onAddingOrRemovingGroup={ this.onAddingOrRemovingGroup }/>
        </section>
      </Col>;
    } else {
      pageContent =
      <Col xs="12">
        <section className="section">
          <div className="section__header">
            <h3 className="section__title">Nowy użytkownik <small className="page__description">tworzenie konta użytkownika</small></h3>
            <div className="section__actions">
            <StatusButton text="ML" tooltip="Możliwość logowania" type="info" status={ this.state.newUser.canLogin }
              onChangingStatus={ this.onChangingStatus }/>
              <StatusButton text="AD" tooltip="Konto Active Directory" type="info" status={ this.state.newUser.isAD }
              onChangingStatus={ this.onChangingStatus }/>
              <StatusButton text="A" tooltip="Administrator" type="info" status={ this.state.newUser.isAdmin }
              onChangingStatus={ this.onChangingStatus }/>
            </div>
          </div>
          <hr/>
          <AddUser newUser={ this.state.newUser } onCreatingUser={ this.onCreatingUser } onChangingMode={ this.onChangingMode }/>
        </section>
        <section className="section">
          <h3 className="section__title">Grupa użytkowników</h3>
          <hr/>
          <EditUserGroups groups={ this.state.groups } userRoles={ this.state.newUser.roles } onAddingOrRemovingGroup={ this.onAddingOrRemovingGroup }/>
        </section>
      </Col>;
    }

    return(
      <Row>
        <Page title={ this.state.title } description={ this.state.description }>
          { pageContent }
        </Page>
        <Sidepanel onChangingMode={ this.onChangingMode } mode={ this.state.userAddingMode } columnDefs={ this.state.columnDefs } rowData={ this.state.users }></Sidepanel>
      </Row>
    );
  }
}

export default Users;

statusButton.js--------------

import React from 'react';
import ReactTooltip from 'react-tooltip';

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

const StatusButton = ({ status, tooltip, type, isDisabled, onChangingStatus, text }) => {

  return (
    <ButtonGroup>
      <ReactTooltip/>
      <Button key={ text } type="button" className={ `section__button ${ (status === false) ? "section__button--unactive" : "" } `}
        data-tip={ tooltip } data-type={ type } disabled={ isDisabled }
        onClick={ () => { onChangingStatus(text, status) }}>
          { text }
      </Button>
    </ButtonGroup>
  );
}

export default StatusButton;

editUserGroups.js---------

import React, { Component } from 'react';

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';

class EditUserGroups extends Component {
  componentDidMount() {
    for (let i = 0; i < this.props.userRoles.length; i++) {
      const string = `custom-switch-${ this.props.userRoles[i] }`;
      // const number = this.props.userRoles[i];
      document.getElementById(string).checked = true;
      // setTimeout(() => {
      //   this.props.onAddingOrRemovingGroup(number);
      // }, 500);
    }
  }

  render() {
    const groups = this.props.groups.map((group) =>
    <Col xs="12" key={ group.id }>
      <Form>
        <Row>
          <Col lg="2" md="3" xs="6">{ group.groupName }</Col>
          <Col lg="10" md="9" xs="6">
            <Form.Check type="switch" id={`custom-switch-${ group.id }`} label={`Kliknij by dodać lub usunąć rolę ${ group.groupName }`}
            onChange={ () => { this.props.onAddingOrRemovingGroup(group.id) }}></Form.Check>
          </Col>
        </Row>
      </Form>
    </Col>
    );
    let content;

    if (groups) {
      content =
      <>
        { groups }
      </>;
    }

    return (
      <Row>
        { content }
      </Row>
      );
  };
}

export default EditUserGroups;


editUser.js---------

import React, { Component } from 'react';
import { Formik } from 'formik';

import './editUser.css';

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';
import { DotValidation } from '../../../../index';

class EditUser extends Component {
  render() {
    let form;

    if (this.props.selectedUser.firstName) {
      form =
      <Formik initialValues = {{
        firstName: this.props.selectedUser.firstName,
        lastName: this.props.selectedUser.lastName,
        login: this.props.selectedUser.login,
        password: this.props.selectedUser.password,
        email: this.props.selectedUser.email,
      }}
      validate = { values => {
        const errors = {};

        if (!values.firstName || (values.firstName.length < 3)) {
          errors.firstName = true;
        }

        if (!values.lastName || (values.lastName.length < 3)) {
          errors.lastName = true;
        }

        if (!values.login) {
          errors.login = true;
        }

        if (!values.password || !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/i.test(values.password)) {
          errors.password = true;
        }

        if (!values.email || !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
          errors.email = true;
        }

        return errors;
      }}
      onSubmit={( values, { setSubmitting }) => {
        setTimeout(() => {
          this.props.onUpdateUser(values);
          setSubmitting(false);
        }, 0);
      }}>
        {({ values, errors, touched, handleChange, handleBlur, handleSubmit, handleReset, isSubmitting, isValid }) => (
          <Form className="form--edit-user" onSubmit={ handleSubmit }>
            <Row>
              <Col lg="6" md="6" xs="12">
                <Form.Group controlId="formFirstName">
                  <Form.Label>Imię</Form.Label>
                  <InputGroup>
                    <DotValidation hidden={ false } validation={ errors.firstName } touched={ touched.firstName }/>
                    <Form.Control className="input--zucker-theme" type="text" name="firstName" placeholder="Imię"
                    onChange={ handleChange } onBlur={ handleBlur } value={ values.firstName }></Form.Control>
                  </InputGroup>
                </Form.Group>
              </Col>
              <Col lg="6" md="6" xs="12">
                <Form.Group controlId="formLastName">
                  <Form.Label>Nazwisko</Form.Label>
                  <InputGroup>
                    <DotValidation hidden={ false } validation={ errors.lastName } touched={ touched.lastName }/>
                    <Form.Control className="input--zucker-theme" type="text" name="lastName" placeholder="Nazwisko"
                    onChange={ handleChange } onBlur={ handleBlur } value={ values.lastName }></Form.Control>
                  </InputGroup>
                </Form.Group>
              </Col>
              <Col lg="6" md="6" xs="12">
                <Form.Group controlId="formLogin">
                  <Form.Label>Login</Form.Label>
                  <InputGroup>
                    <DotValidation hidden={ false } validation={ errors.login } touched={ touched.login }/>
                    <Form.Control className="input--zucker-theme" type="text" name="login" placeholder="Login"
                    onChange={ handleChange } onBlur={ handleBlur } value={ values.login }></Form.Control>
                  </InputGroup>
                </Form.Group>
              </Col>
              <Col lg="6" md="6" xs="12">
                <Form.Group controlId="formPassword">
                  <Form.Label>Hasło</Form.Label>
                  <InputGroup>
                    <DotValidation hidden={ false } validation={ errors.password } touched={ touched.password }/>
                    <Form.Control className="input--zucker-theme" type="password" name="password" placeholder="Hasło"
                    onChange={ handleChange } onBlur={ handleBlur } value={ values.password }></Form.Control>
                  </InputGroup>
                </Form.Group>
              </Col>
              <Col lg="6" md="6" xs="12">
                <Form.Group controlId="formEmail">
                  <Form.Label>Email</Form.Label>
                  <InputGroup>
                    <DotValidation hidden={ false } validation={ errors.email } touched={ touched.email }/>
                    <Form.Control className="input--zucker-theme" type="email" name="email" placeholder="Email"
                    onChange={ handleChange } onBlur={ handleBlur } value={ values.email }></Form.Control>
                  </InputGroup>
                </Form.Group>
              </Col>
              <Col className="form__actions--bottom" xs="12">
                <ButtonGroup aria-label="Page buttons first bottom group">
                  <Button className="form__button" variant="secondary" type="reset" onClick={ handleReset }>
                    Anuluj
                  </Button>
                </ButtonGroup>
                <ButtonGroup aria-label="Page buttons second bottom group">
                  <Button className="form__button" variant="primary" type="submit" disabled={ !isValid || isSubmitting }>
                    Zapisz
                  </Button>
                </ButtonGroup>
              </Col>
            </Row>
          </Form>
          )}
      </Formik>;
    }

    return (
      <>
        { form }
      </>
      );
  };
}

export default EditUser;


addUser.js---------------

import React, { Component } from 'react';
import { Formik } from 'formik';

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';
import { DotValidation } from '../../../../index';

class AddUser extends Component {
  render() {
    return (
      <Formik initialValues = {{
        firstName: this.props.newUser.firstName,
        lastName: this.props.newUser.lastName,
        login: this.props.newUser.login,
        password: this.props.newUser.password,
        email: this.props.newUser.email,
        isAD: this.props.newUser.isAD
      }}
      validate = { values => {
        const errors = {};

        if (!values.firstName || (values.firstName.length < 3)) {
          errors.firstName = true;
        }

        if (!values.lastName || (values.lastName.length < 3)) {
          errors.lastName = true;
        }

        if (!values.login) {
          errors.login = true;
        }

        if (!this.props.newUser.isAD && (!values.password || !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/i.test(values.password))) {
          errors.password = true;
        }

        if (!values.email || !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
          errors.email = true;
        }

        return errors;
      }}
      onReset={() => {
        setTimeout(() => {
          this.props.onChangingMode();
        }, 0);
      }}
      onSubmit={( values, { setSubmitting }) => {
        setTimeout(() => {
          this.props.onCreatingUser(values);
          setSubmitting(false);
        }, 0);
      }}>
        {({ values, errors, touched, handleChange, handleBlur, handleSubmit, handleReset, isSubmitting, isValid }) => (
        <Form onSubmit={ handleSubmit }>
          <Row>
            <Col lg="6" md="6" xs="12">
              <Form.Group controlId="formFirstName">
                <Form.Label>Imię</Form.Label>
                <InputGroup>
                  <DotValidation hidden={ false } validation={ errors.firstName } touched={ touched.firstName }/>
                  <Form.Control className="input--zucker-theme" type="text" name="firstName" placeholder="Imię"
                  onChange={ handleChange } onBlur={ handleBlur } value={ values.firstName }></Form.Control>
                </InputGroup>
              </Form.Group>
            </Col>
            <Col lg="6" md="6" xs="12">
              <Form.Group controlId="formLastName">
                <Form.Label>Nazwisko</Form.Label>
                <InputGroup>
                  <DotValidation hidden={ false } validation={ errors.lastName } touched={ touched.lastName }/>
                  <Form.Control className="input--zucker-theme" type="text" name="lastName" placeholder="Nazwisko"
                  onChange={ handleChange } onBlur={ handleBlur } value={ values.lastName }></Form.Control>
                </InputGroup>
              </Form.Group>
            </Col>
            <Col lg="6" md="6" xs="12">
              <Form.Group controlId="formLogin">
              <Form.Label>Login</Form.Label>
                <InputGroup>
                  <DotValidation hidden={ false } validation={ errors.login } touched={ touched.login }/>
                  <Form.Control className="input--zucker-theme" type="text" name="login" placeholder="Login"
                  onChange={ handleChange } onBlur={ handleBlur } value={ values.login }></Form.Control>
                </InputGroup>
              </Form.Group>
            </Col>
            <Col lg="6" md="6" xs="12">
              <Form.Group controlId="formPassword">
                <Form.Label>Hasło</Form.Label>
                <InputGroup>
                  <DotValidation hidden={ this.props.newUser.isAD } validation={ errors.password } touched={ touched.password }/>
                  <Form.Control className="input--zucker-theme" type="password" name="password" placeholder="Hasło"
                  onChange={ handleChange } onBlur={ handleBlur } value={ values.password }
                  disabled={ this.props.newUser.isAD } required={ this.props.newUser.isAD }></Form.Control>
                </InputGroup>
              </Form.Group>
            </Col>
            <Col lg="6" md="6" xs="12">
              <Form.Group controlId="formEmail">
                <Form.Label>Email</Form.Label>
                <InputGroup>
                  <DotValidation hidden={ false } validation={ errors.email } touched={ touched.email }/>
                  <Form.Control className="input--zucker-theme" type="email" name="email" placeholder="Email"
                  onChange={ handleChange } onBlur={ handleBlur } value={ values.email }></Form.Control>
                </InputGroup>
              </Form.Group>
            </Col>
            <Col className="form__actions--bottom" xs="12">
              <ButtonGroup aria-label="Page buttons first bottom group">
                <Button className="form__button" variant="secondary" type="reset" onClick={ handleReset }>
                  Anuluj
                </Button>
              </ButtonGroup>
              <ButtonGroup aria-label="Page buttons second bottom group">
                <Button className="form__button" variant="primary" type="submit" disabled={ !isValid || isSubmitting }>
                  Zapisz
                </Button>
              </ButtonGroup>
            </Col>
          </Row>
        </Form>
        )}
      </Formik>
      );
  }
}

export default AddUser;