render()

in src/frontend/src/App.js [128:167]


  render() {
    const { authenticated } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          {!authenticated && <form className="row row-cols-lg-auto g-3 align-items-center" onSubmit={this.handleSubmit}>
            <div className="col-12">
              <input id="username" name="username" placeholder="Username" type="text" className="form-control" value={this.state.username} onChange={this.handleInputChange} />
            </div>
            <div className="col-12">
              <input id="password" name="password" placeholder="Password" type="password" className="form-control" value={this.state.password} onChange={this.handleInputChange} />
            </div>
            <div className="col-12">
              <button type="submit" className="btn btn-primary">Login</button>
            </div>
          </form>}
          {authenticated &&
            <div>
              <div className="App-logout">
                <button className="btn btn-primary" onClick={this.logout}>Logout</button>
              </div>
              <br />
              <div className="mb-3">
                <label htmlFor="incoming_messages" className="form-label">Incoming messages from AWS IoT Core</label>
                <div id="incoming_messages_help" className="form-text">Subscribed to the topic AWS_IOT_THING_NAME/publish</div>
                <textarea disabled rows="5" className="form-control" id="incomingMessages" name="incomingMessages" aria-describedby="incoming_messages_help" value={this.state.incomingMessages} onChange={this.handleInputChange} />
              </div>
              <div className="mb-3">
                <label htmlFor="publish_string" className="form-label">Publish a message to AWS IoT Core</label>
                <div id="publishHelp" className="form-text">Published to the topic AWS_IOT_THING_NAME/subscribe</div>
                <input id="publishString" name="publishString" placeholder="String to publish" type="text" className="form-control" value={this.state.publishString} onChange={this.handleInputChange} />
              </div>
              <button className="btn btn-success" onClick={this.publishMessage}>Publish</button>
            </div>
          }

        </header>
      </div>
    );
  }