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>
);
}