class Ausaf extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            firstname: "firstname",
            lastname: "lastname",
            fullname: "fullname",
            username: "username",
            password: "password",
            text: "text",
            class: "iput",
            divclass: "account",
            alertdemo: "this is demo",
            ausafasd: null,
            mod: "signin"

        };
        this.signin = this.signin.bind(this);
    }

    signup() {
        return(
          <div className={this.state.divclass}>
              <h1>Sign Up</h1>
              <input placeholder={this.state.username} type={this.state.text} className={this.state.class}/>
              <input placeholder={this.state.firstname} type={this.state.text} className={this.state.class}/>
              <input placeholder={this.state.lastname} type={this.state.text} className={this.state.class}/>
              <input placeholder={this.state.fullname} type={this.state.text} className={this.state.class}/>
              <input placeholder={this.state.password} type={this.state.password} className={this.state.class}/>
              <button> Sign UP</button>
              <a href="javascript:;" onClick={()=>{
                  this.setState({mod: "signin"});
              }}>Sign in</a>
          </div>
        );
    }

    signin() {

        return(
            <div className={this.state.divclass}>
                <h1>Sign in</h1>
                <input placeholder={this.state.username} type={this.state.text} className={this.state.class}/>
                <input placeholder={this.state.password} type={this.state.password} className={this.state.class}/>
                <button onClick={()=>{
                    this.setState({mod: "signup"});
                    //alert("ausaf")
                }}>Sign In</button>
                <a href="javascript:;" onClick={()=>{
                    this.setState({mod: "signup"});
                    //alert("ausaf")
                }}>Sign in</a>
            </div>
        );
    }

    ausafachat() {
        return(
          <div>
              <h1>This chat room For Ausaf</h1>
              <input placeholder={this.state.alertdemo}/>
          </div>
        );
    }

    render(){
            switch(this.state.mod){
                case "signin": return(this.signin());
                break;
                case "signup": return(this.signup());
                break;
        }

    }

}

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