html

<div className="form-container">
          <div className="ui stackable">
            <div className="row">
              <Form
                onSubmit={onSubmit}
                noValidate
                className={loading ? "loading" : ""}
              >
                <h1>Log In</h1>
                <Form.Input
                  label="Username"
                  placeholder="Username.."
                  name="username"
                  type="text"
                  value={values.username}
                  error={errors.username ? true : false}
                  onChange={onChange}
                />
                <Form.Input
                  label="Password"
                  placeholder="Password.."
                  name="password"
                  type="password"
                  value={values.password}
                  error={errors.password ? true : false}
                  onChange={onChange}
                />
                <Button
                  onClick={() => Redirect("/")}
                  type="submit"
                  id="login-btn"
                  primary
                >
                  Log In
                </Button>
              </Form>
              <Button
                onClick={() => history.push("/register")}
                id="register-btn"
                primary
              >
                Register
              </Button>
              {Object.keys(errors).length > 0 && (
                <div className="ui error message">
                  <ul className="list">
                    {Object.values(errors).map((value) => (
                      <li key={value}>{value}</li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>