React - Sign-in form

index.html

<div id="root"></div>

react-sign-in-form.markdown

React - Sign-in form

A Pen by Pablo Nevares on CodePen.

License.

script.babel

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      panel: "signin"
    };
    this.setPanel = this.setPanel.bind(this);
  }
  setPanel(panel) {
    this.setState({ panel });
  }
  render() {
    const { panel } = this.state;
    return (
      <div class="container">
        <PanelSelect selected={panel} clickHandler={this.setPanel} />
        {panel === "signin" ? <Signin /> : null}
        {panel === "create" ? <Create /> : null}
      </div>
    );
  }
}

const PanelSelect = ({ selected, clickHandler }) => (
  <section class="panelSelect">
    <div
      class={selected === "signin" && "selected"}
      onClick={() => clickHandler("signin")}
    >
      Sign In
    </div>
    <div
      class={selected === "create" && "selected"}
      onClick={() => clickHandler("create")}
    >
      Create Account
    </div>
  </section>
);

const Signin = () => (
  <div class="form">
    <form>
      <label for="email">E-mail address</label>
      <input
        type="text"
        name="email"
        id="email"
        placeholder="Ex: billg@microsoft.com"
      />
      <label for="password">Password</label>
      <input
        type="password"
        name="password"
        id="password"
        placeholder="Ex: p4ssw0rd ;)"
      />
      <button>Login</button>
    </form>
  </div>
);

class Create extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      confirmPassword: ""
    };
    this.passwordChangeHandler = this.passwordChangeHandler.bind(this);
    this.confirmPasswordChangeHandler = this.confirmPasswordChangeHandler.bind(this);
    this.createClickHandler = this.createClickHandler.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  passwordChangeHandler(event) {
    const element = event.target;
    const password = element.value;
    element.classList.remove("low", "medium", "high");

    if (password.length >= 6) {
      element.classList.add("high");
    } else if (password.length >= 3) {
      element.classList.add("medium");
    } else if (password.length > 0) {
      element.classList.add("low");
    }

    const confirmPasswordElement = document.getElementById('confirmPassword');
    if(password === confirmPasswordElement.value) {
      confirmPasswordElement.classList.remove("high");
      confirmPasswordElement.classList.add("high");
    } else {
      confirmPasswordElement.classList.remove("high");
      confirmPasswordElement.classList.add("low");
    }
    
    this.handleChange(event);
  }
  confirmPasswordChangeHandler(event) {
    const element = event.target;
    const confirmPassword = element.value;
    const password = document.getElementById("password").value;
    element.classList.remove("low", "high");

    if (confirmPassword !== password && password.length !== 0) {
      element.classList.add("low");
    } else if (password.length !== 0) {
      element.classList.add("high");
    }

    this.handleChange(event);
  }
  createClickHandler(event) {
    const { email, password, confirmPassword } = this.state;
    event.preventDefault();
    console.log({ email, password, confirmPassword });
  }
  handleChange(event) {
    const { name, value } = event.target;
    this.setState({
      [name]: value
    });
  }
  render() {
    const { email, password, confirmPassword } = this.state;
    return (
      <div class="form">
        <form>
          <label for="email">E-mail address</label>
          <input
            type="text"
            name="email"
            id="email"
            value={email}
            onChange={this.handleChange}
            placeholder="Ex: billg@microsoft.com"
          />
          <label for="password">Password</label>
          <input
            type="password"
            name="password"
            id="password"
            placeholder="Ex: p4ssw0rd ;)"
            value={password}
            onChange={this.passwordChangeHandler}
          />
          <label for="confirmPassword">Confirm password</label>
          <input
            type="password"
            name="confirmPassword"
            id="confirmPassword"
            placeholder="Ex: p4ssw0rd ;)"
            value={confirmPassword}
            onChange={this.confirmPasswordChangeHandler}
          />
          <button onClick={this.createClickHandler}>Create</button>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.2/umd/react-dom.production.min.js"></script>

style.css

html, body, #root {
  height: 100vh;
  overflow: hidden;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: sans-serif;
  background-color: #6cf;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container {
  width: 500px;
  height: 500px;
  border-radius: 1em;
  background-color: #fff;
  overflow: hidden;
}

.panelSelect {
  display: flex;
  text-align: center;
  font-size: 1.2em;
}

.panelSelect > div {
  width: 50%;
  padding: 0.5em 0;
  background-color: #bbb;
  cursor: default;
}

.panelSelect > div:not(.selected):hover {
  cursor: pointer;
  background-color: #ddd;
  text-decoration: underline;
}

.panelSelect > div.selected {
  background-color: #fff;
}

label, input, button {
  display: block;
  font-size: 1em;
  margin-bottom: 1em;
  padding: 0 1em;
}

label {
  padding: 0 0.5em;
  margin-bottom: 0.5em;
}

input, button {
  width: 20em;
  height: 3em;
  border-radius: 1em;
  border: 2px solid #ccc;
}

button {
  color: #fff;
  font-weight: bold;
  background-color: #04f;
  border: 2px solid #ccc;
}

input:focus {
  outline: none;
  border: 2px solid #04f;
}

button:focus, button:hover {
  outline: none;
  text-decoration: underline;
}

.form {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#password.low, #confirmPassword.low {
  background-color: #f55;
}

#password.medium {
  background-color: #ff5;
}

#password.high, #confirmPassword.high {
  background-color: #5f5;
}