129 lines
3.0 KiB
JavaScript
129 lines
3.0 KiB
JavaScript
import React from "react";
|
|
|
|
class LoginButton extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.handleClick = this.handleClick.bind(this);
|
|
this.checkValid = this.checkValid.bind(this);
|
|
}
|
|
|
|
checkValid() {
|
|
let item = userDB.find((item) => {
|
|
return item.username == this.props.username && item.password == this.props.password;
|
|
});
|
|
if (item != undefined) return true;
|
|
else return false;
|
|
}
|
|
|
|
// step 4.2
|
|
handleClick() {}
|
|
|
|
render() {
|
|
return <button onClick={() => this.handleClick()}>Login</button>;
|
|
}
|
|
}
|
|
|
|
class Contents extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
topics: topicsDB,
|
|
};
|
|
this.handleTopicsChange = this.handleTopicsChange.bind(this);
|
|
}
|
|
|
|
// step 7
|
|
handleTopicsChange(option) {}
|
|
|
|
render() {
|
|
const topics = this.state.topics;
|
|
return (
|
|
<div id="contents">
|
|
<DropDownList handleTopicsChange={this.handleTopicsChange} />
|
|
{
|
|
// step 5
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
function DropDownList(props) {
|
|
return (
|
|
<div>
|
|
<b>Choose one section: </b>
|
|
|
|
{/* Step 6 */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
class Lab7App extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
isLogin: false,
|
|
loginName: "",
|
|
inputUserName: "",
|
|
inputUserPswd: "",
|
|
};
|
|
this.handleInputChange = this.handleInputChange.bind(this);
|
|
this.handleStatusChange = this.handleStatusChange.bind(this);
|
|
}
|
|
|
|
// step 3
|
|
handleInputChange(event) {
|
|
let target = event.target;
|
|
let name = target.name;
|
|
let value = target.value;
|
|
this.setState({ [name]: value });
|
|
}
|
|
|
|
handleStatusChange(newStatus, loginName) {
|
|
this.setState({ isLogin: newStatus, loginName: loginName });
|
|
}
|
|
|
|
render() {
|
|
if (!this.state.isLogin) {
|
|
return (
|
|
<div>
|
|
<p>Fill in username and password and click the button to log in</p>
|
|
<input type="text" name="inputUserName" placeholder="username" value={this.state.inputUserName} onChange={(e) => this.handleInputChange(e)} />
|
|
|
|
<input type="password" name="inputUserPswd" placeholder="password" value={this.state.inputUserPswd} onChange={(e) => this.handleInputChange(e)} />
|
|
|
|
{/* step 4.1 Render LoginButton */}
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div>
|
|
<p>Welcome {this.state.loginName}!</p>
|
|
<button>Logout</button> {/* step 4.3 */}
|
|
<Contents />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
const userDB = [
|
|
{ username: "Alex", password: "123" },
|
|
{ username: "Bob", password: "231" },
|
|
{ username: "Jack", password: "321" },
|
|
];
|
|
|
|
const topicsDB = [
|
|
{ section: "section-1", topic: "WWW" },
|
|
{ section: "section-1", topic: "HTML" },
|
|
{ section: "section-1", topic: "CSS" },
|
|
{ section: "section-2", topic: "JaveScript" },
|
|
{ section: "section-2", topic: "NodeJS" },
|
|
{ section: "section-2", topic: "MongoDB" },
|
|
{ section: "section-3", topic: "JQuery" },
|
|
{ section: "section-3", topic: "Vue" },
|
|
{ section: "section-3", topic: "React" },
|
|
];
|
|
|
|
export default Lab7App;
|