react-bootstrap#Button JavaScript Examples

Book = ({ book, deleteHandler }) => {
   return (
      <Card className="my-3 p-3 rounded">
         <Card.Body>
            <Link to={`/books/${book._id}`}>
               <Card.Title as="div">
                  <strong>{book.title}</strong>
               </Card.Title>
            </Link>
            <Card.Subtitle className="mb-2 text-muted">
               {book.subtitle}
            </Card.Subtitle>
            <Card.Text>{book.description}</Card.Text>
            <Card.Text as="h6">ISBN {book.isbn}</Card.Text>
            <Button variant="primary">{book.author}</Button>
            <Button variant="danger" onClick={() => deleteHandler(book._id)}>
               <i className="fas fa-trash"></i>
            </Button>
         </Card.Body>
      </Card>
   );
}

ConfirmButton = ({ children, onClick }) => {
    const [showConfirm, setShowConfirm] = useState(false);

    const handleClick = (event) => {
        event.preventDefault();
        setShowConfirm(!showConfirm);
    };

    const handleConfirmClick = (event) => {
        event.preventDefault();
        onClick();

        setShowConfirm(false);
    };

    return (
        <>
            <Button variant='primary' onClick={handleClick}>
                {children}
            </Button>
            {showConfirm && (
                <Button variant='danger' onClick={handleConfirmClick}>
                    <Trans>Confirm</Trans>
                </Button>
            )}
        </>
    );
}

render() {
        return (
            <div className="app">
                <Navbar className="navbar" bg="dark" variant="dark">
                    <Navbar.Brand href="/">Microsoft identity platform</Navbar.Brand>
                    <Nav className="mr-auto">

                    </Nav>
                    {
                        this.props.isAuthenticated ?
                            <Button variant="info" onClick={this.handleSignOut}>Logout</Button>
                            :
                            <Button variant="outline-info" onClick={this.handleSignIn}>Login</Button>
                    }
                </Navbar>
                {
                    this.props.isAuthenticated ?
                        <ProfileContainer
                            acquireToken={this.props.acquireToken}
                            updateToken={this.props.updateToken}
                        />
                        :
                        <Jumbotron className="welcome">
                            <h1>Azure AD On-Behalf-Of Flow</h1>
                            <p>A React & Redux single-page application authorizing an ASP.NET Core web API
                        to call the Microsoft Graph API on-behalf-of a user via Microsoft Graph SDK.</p>
                            <Button variant="primary"
                                onClick={() => window.open("https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow", "_blank")}
                            >Learn More</Button>

                        </Jumbotron>
                }
            </div>
        );
    }

render() {
        return (
            <div>
                {this.state.noticeText.length > 0 &&
                    <Alert style={{backgroundColor: '#132135', borderColor: '#113964'}} variant="primary" className="fixed-top text-nowrap ">
                        <div className="text-white" id="alert" style={{width: "max-content font-weight-bold"}}>
                            {this.state.noticeText}
                        </div>
                        {this.state.sound != null &&
                            <Button onClick={this.playAudio} variant="primary" className="mx-2 position-absolute d-inline" style={{top: '5px', right: '10px'}}>
                                语音播放
                            </Button>
                        }
                    </Alert>
                }
            </div>
        );
    }

function ModalAfterSubmit(){
    return(
        <>
        <Modal.Dialog>
            <Modal.Header closeButton>
                <Modal.Title>Modal title</Modal.Title>
            </Modal.Header>

            <Modal.Body>
                <p>Modal body text goes here.</p>
            </Modal.Body>

            <Modal.Footer>
                <Button variant="secondary">Close</Button>
                <Button variant="primary">Save changes</Button>
            </Modal.Footer>
        </Modal.Dialog>
        </>
    )
}

createModal(title, toggle) {
    return (
      <Modal size="lg" show centered>
        <Modal.Header>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>Enter the message to send to all users:</p>
          <Form.Group>
            <Form.Control as="textarea" rows="10" id="comment" onChange={this.handleChange} />
          </Form.Group>
        </Modal.Body>
        <Modal.Footer>
          <Button
            variant="primary btn-square"
            disabled={!this.state.comment.length}
            onClick={() => {
              if (window.confirm('You are about to send this message to all users (' + this.props.user_count + ' accounts). Are you sure?')) {
                this.submit();
              }
            }}>
            Send
          </Button>
          <Button variant="secondary btn-square" onClick={toggle}>
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }

render() {
		return (<Navbar expand="lg" className={'header'}>
				<Navbar.Brand><img src={LogoImg} alt={'logo'} onClick={() => {
					this.props.history.push('/')
				}}/></Navbar.Brand>
				{this.props.update ?
					<Button variant={'danger'} className={'mr-3'} onClick={() => window.location.reload()}>New update
						available </Button> : null}
				{this.props.offline &&
				<span className={'mr-4'}><i className={'fas fa-exclamation-triangle mr-3'}/>Application is offline</span>}
				<Navbar.Toggle aria-controls="basic-navbar-nav"/>
				<Navbar.Collapse id="basic-navbar-nav">
					<Nav className="ml-auto">
						<div className={'info-block'}>
							<LoadingIndicator/>
							<UserInfoDropDown/>
						</div>
					</Nav>
				</Navbar.Collapse>
			</Navbar>
		)
	}

render(){
      const {redirect} = this.state;
      if(redirect){
        return <Redirect to={"/PlacementEditBoard"}/>
      }
        return (
            <div className="container">
              <Form onSubmit={this.handleSubmit}>
              <FormGroup>
                <Label htmlfor="company">Name Of The Company</Label>
                <Input type="text" id="company" name="company"  value={this.state.company} onChange={this.onChangeCompany} />
              </FormGroup>
              <FormGroup>
                <Label htmlFor="date"> From </Label>
                <Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
              </FormGroup>
              <FormGroup>
                <Label htmlFor="CTC"> CTC </Label>
                <Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
              </FormGroup>
              <Button type="submit" value="submit" color="primary">
                Submit
              </Button>
            </Form>
            </div>
        )
    }

function ErrorPage() {
  return (
    <>
      <Header />
      {/* <button>
                <Add16 aria-label="Add" className="my-custom-class" />
            </button> */}
      <div className="ppp">
        <div className="errorDiv" title="404">
          404
        </div>
      </div>
      <div className="afterppp">
        <div>Looks like this page doesn't exist</div>
        <Button
          href="/home"
          className="homeBtn"
          style={{ padding: '0px 4px', fontSize: '20px', marginTop: '10px' }}
        >
          Home
        </Button>
      </div>
      <FooterSmall />
    </>
  )
}

render() {
        return (
            <div className='home'>
                <h1 className='text-center w3-center w3-animate-left wel'>Welcome to D_CODERS</h1> 
                <br />
                <div className='buttons'>
                    <div className='waste'>
                        <p>H</p>
                    </div>
                    <div className='b1 w3-animate-zoom'>
                        <Link to="/register" className='register'>Register</Link><br/>
                    </div>
                    <div className='b2 w3-animate-zoom'>
                        <Link to="/login" className='login'>Login</Link> <br />
                    </div>
                    
                    <Button onClick={this.onSubmit} className=''>Logout</Button>
                    
                    </div>
            </div>
        );
    }

render() {
        return (
            <div className={Styles.container} style={{ height: '100vh' }}>
                <div className={Styles.loginForm}>
                    <h2 className={Styles.header}>Login</h2>
                    <div style={{ clear: 'both' }}></div>
                    <Form onSubmit={this.login}>
                        <Form.Group controlId="formBasicUsername">
                            <Form.Label>Username</Form.Label>
                            <Form.Control type="text" placeholder="Username" onChange={(e) => this.setState({ username: e.target.value })} />
                        </Form.Group>
    
                        <Form.Group controlId="formBasicPassword">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" placeholder="Password" onChange={(e) => this.setState({ password: e.target.value })} />
                        </Form.Group>
                        <br/>
                        <Button variant="primary" onClick={this.createAdminAccount}>
                            Submit
                        </Button>
                        <input type="submit" style={{ display: 'none' }} />
                        <p id="statusMessage" style={{float: 'right', color: 'red'}}>{this.state.statusMessage}</p>
                    </Form>
                </div>
            </div>
        )
    }

Logout = function(props) {
  let userNameStyle = {
    margin: "0 10px 0 0",
  };

  return (
    <Navbar.Form>
      <Navbar.Link style={userNameStyle}>{props.userName}</Navbar.Link>
      <Button onClick={props.onClick} bsStyle="success">
        LOGOUT
      </Button>
    </Navbar.Form>
  );
}

Copy = ({ cid }) => {
  const [isCopied, setIsCopied] = useState(false);

  async function copyTextToClipboard(text) {
    if ("clipboard" in navigator) {
      return await navigator.clipboard.writeText(text);
    } else {
      return document.execCommand("copy", true, text);
    }
  }

  const handleCopyClick = () => {
    copyTextToClipboard(cid)
      .then(() => {
        setIsCopied(true);
        setTimeout(() => {
          setIsCopied(false);
        }, 1500);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <Stack gap={2} direction="horizontal">
      <Button disabled variant="outline-dark">
        {cid.substr(0, 5)}...{cid.substr(cid.length - 5, cid.length)}
      </Button>
      <Button variant="outline-dark" onClick={handleCopyClick}>
        {isCopied ? "Copied" : "Copy"}
      </Button>
    </Stack>
  );
}

FABAction = ({ title, content, onClick, ...props }) => {
  const overlay = <Tooltip>{title}</Tooltip>
  
  return <OverlayTrigger placement='left' overlay={overlay} trigger={['hover', 'click']} {...props}>
    <Button className='fab-action' variant='primary' onClick={onClick} >
      {content}
    </Button>
  </OverlayTrigger>
}

function ChangeWorker(props) {
  const onSubmit = (stakeValues) => {
    if (props.onChangeWorker) {
      props.onChangeWorker(stakeValues);
    }
  };
  return <Formik onSubmit={onSubmit} initialValues={{ workerAddress: props.worker ? props.worker : '' }} validationSchema={validationSchema}>
    {({
      handleSubmit,
      handleChange,
      handleBlur,
      values,
      touched,
      isValid,
      errors,
    }) => (
      <Form onSubmit={handleSubmit}>
        <Form.Group as={Row}>
          <Form.Label column sm={2} htmlFor="worker-address">
            Worker
          </Form.Label>
          <Col sm={10}>
            <Form.Control id="worker-address" type="text" name="workerAddress" onChange={handleChange} value={values.workerAddress} />
            <Form.Control.Feedback type="invalid" style={{ display: errors.workerAddress ? 'inline' : 'none' }}>{errors.workerAddress}</Form.Control.Feedback>
          </Col>
        </Form.Group>
        <div className="d-flex justify-content-center">
          <Button type="submit"  disabled={!isValid}>Set worker</Button>
        </div>
      </Form>
    )}
  </Formik>;
}

CreateUser = (props) => {
  const { mode } = props;
  const dispatch = useDispatch();
  const [step, setStep] = useState('emailCheck');
  const [checkedEmail, setCheckedEmail] = useState(null);
  const [existingUser, setExistingUser] = useState(false);
  const handleEmailChecked = (result, email) => {
    if (result === 'new-user') {
      setCheckedEmail(email);
      setStep('createUser');
      return;
    }
    if (result === 'existing-user') {
      setCheckedEmail(email);
      setExistingUser(true);
      setStep('createUser');
      return;
    }

    if (result === 'added-to-org') setStep('done');
  };

  return (
    <>
      {mode === 'create_user' && step === 'emailCheck' && (
        <Modal className="create-user-modal" show onHide={() => dispatch(removeActiveAdminForm())}>
          <Modal.Header className="create-user-modal-header" closeButton>
            <Modal.Title>Add User</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <EmailCheckForm handleEmailChecked={handleEmailChecked} />
          </Modal.Body>
        </Modal>
      )}
      {mode === 'create_user' && step === 'createUser' && checkedEmail && (
        <div className="form-new-popup-admin">
          <div className="inner-form-content">
            <CreateUserForm checkedEmail={checkedEmail} existingUser={existingUser} />
          </div>
        </div>
      )}
      {mode === 'create_user' && step === 'done' && (
        <Modal className="create-user-done" show onHide={() => dispatch(removeActiveAdminForm())}>
          <Modal.Header closeButton />
          <Modal.Body className="text-center">
            <FontAwesomeIcon icon="check-circle" className="mr-2" />
            <h1>User added successfully</h1>
            <Button variant="primary" onClick={() => dispatch(removeActiveAdminForm())}>Close</Button>
          </Modal.Body>
        </Modal>
      )}
    </>
  );
}

ViadeModal = (props) => {
  const [show, setShow] = useState(false);

  const handleClose = () => {
    props.handleClose();
    setShow(false);
  };
  const handleShow = (e) => {
    props.onOpen();
    setShow(true);
  };

  const saveButton = props.saveText ? (
    <Button
      data-testid="modalSaveButton"
      disabled={props.saveDisabled}
      variant="primary"
      onClick={() => {
        props.onSave();
        setShow(false);
      }}
    >
      {props.saveText}
    </Button>
  ) : null;

  const closeButton = props.closeText ? (
    <Button
      data-testid="modalCancelButton"
      variant="secondary"
      onClick={handleClose}
    >
      {props.closeText}
    </Button>
  ) : null;

  return (
    //Main show button
    <div>
      <Button
        data-testid="modalButton"
        disabled={props.disabled}
        variant="primary"
        onClick={e => {
          handleShow(e);
        }}
      >
        {props.toggleText}
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title data-testid="modalTitle">{props.title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{props.children}</Modal.Body>
        <Modal.Footer>
          {saveButton}
          {closeButton}
        </Modal.Footer>
      </Modal>
    </div>
  );
}

PasswordGame = () => {
    const { t } = useTranslation();
    const { passwordError, passwordJoinType, passwordGame } = useSelector((state) => ({
        passwordError: state.lobby.passwordError,
        passwordGame: state.lobby.passwordGame,
        passwordJoinType: state.lobby.passwordJoinType
    }));
    const [password, setPassword] = useState('');
    const dispatch = useDispatch();

    if (!passwordGame) {
        return null;
    }

    return (
        <div>
            <Panel title={passwordGame.name}>
                {passwordError && <AlertPanel type='danger' message={t(passwordError)} />}
                <h3>
                    <Trans>Enter the password</Trans>
                </h3>
                <div className='mt-1 mb-3'>
                    <input
                        className='form-control'
                        type='text'
                        onChange={(event) => setPassword(event.target.value)}
                        value={password}
                    />
                </div>
                <div className='text-center'>
                    <Button
                        variant='primary'
                        onClick={() => {
                            dispatch(
                                sendSocketMessage(
                                    passwordJoinType === 'Join' ? 'joingame' : 'watchgame',
                                    passwordGame.id,
                                    password
                                )
                            );
                        }}
                    >
                        {t(passwordJoinType)}
                    </Button>
                    <Button variant='danger' onClick={() => dispatch(cancelPasswordJoin())}>
                        <Trans>Cancel</Trans>
                    </Button>
                </div>
            </Panel>
        </div>
    );
}

render() {
        return (
            <div className="p-edit">
                <Form onSubmit={(e) => this.handleSubmit(e)}>
                    <Form.Row>
                        <Form.Group as={Col} controlId="formGridName">
                            <Form.Label>givenName</Form.Label>
                            <Form.Control placeholder="givenName" defaultValue={this.props.profile.givenName} />
                        </Form.Group>

                        <Form.Group as={Col} controlId="formGridSurname">
                            <Form.Label>surname</Form.Label>
                            <Form.Control placeholder="surname" defaultValue={this.props.profile.surname} />
                        </Form.Group>
                    </Form.Row>

                    <Form.Group controlId="formGridUPN">
                        <Form.Label>userPrincipalName</Form.Label>
                        <Form.Control placeholder="userPrincipalName" defaultValue={this.props.profile.userPrincipalName} />
                    </Form.Group>

                    <Form.Row>
                        <Form.Group as={Col} controlId="formGridJob">
                            <Form.Label>jobTitle</Form.Label>
                            <Form.Control placeholder="jobTitle" defaultValue={this.props.profile.jobTitle} />
                        </Form.Group>

                        <Form.Group as={Col} controlId="formGridPhone">
                            <Form.Label>mobilePhone</Form.Label>
                            <Form.Control placeholder="mobilePhone" defaultValue={this.props.profile.mobilePhone} />
                        </Form.Group>

                        <Form.Group as={Col} controlId="formGridLang">
                            <Form.Label>preferredLanguage</Form.Label>
                            <Form.Control placeholder="preferredLanguage"
                                as="select" defaultValue={this.props.profile.preferredLanguage}>
                                <option>English</option>
                                <option>Chinese</option>
                                <option>Hindi</option>
                            </Form.Control>
                        </Form.Group>
                    </Form.Row>

                    <Button variant="primary" type="submit">
                        Submit
                    </Button>
                </Form>
            </div>
        );
    }

InstructorClasses = ()=>{
    const [classes, setClasses]= useState([]);
    const [signout, setSignout]= useState(false);
    const {push}= useHistory();
    useEffect(()=>{
        axiosWithAuth()
            .get("/classes")
            .then(res=>{
                console.log("data classes: ", res.data);
                setClasses(res.data)
            })
            .catch(err=> console.log("instructorClasses.js error: ", err))
    },[])
    const signOut = ()=>{
        if (signout===false){
            return push('/InstructorLogin')
        }
        else{
            return console.log('you are still logged in')
        }
    }
    return(
        <div>
            <h1>Instructor classes: </h1>
            <Link to="/Instructor/CreateClass"> <button>Create Class</button> </Link>
            <button>Delete Class</button>\
            <button onClick={signOut}>Sign out</button>
            {classes.map((item,key)=>(
                <div key={item.id}>
               <Card style={{ width: '18rem', margin:' 0 auto', background: 'rgba(97, 136, 207, 0.534)'}}>
               <Card.Body>
                   <Card.Title>Name: {item.name }</Card.Title>
                        <ListGroup> Location: {item.location}</ListGroup>
                        <ListGroup> Type: {item.type}</ListGroup>
                        <ListGroup> Intensity Level: {item.intensityLevel}</ListGroup>
                        <ListGroup> Start Time: {item.startTime}</ListGroup>
                        <ListGroup> Duration: {item.duration}</ListGroup>
                        <ListGroup> Max Class Size: {item.maxClassSize}</ListGroup>
                        <ListGroup> Attendees: {item.attendees}</ListGroup>
                        <Button>Click for more information</Button>
               </Card.Body>
           </Card>
           </div>
            ))}
        </div>
    )
}

render() {
    return (
      <React.Fragment>
        <Card className="mx-2 card-square">
          <Card.Header as="h5">Monitoree Review</Card.Header>
          <Card.Body>
            <Patient
              goto={this.props.goto}
              details={{ ...this.props.currentState.patient } || {}}
              jurisdictionPath={this.props.jurisdictionPaths[this.props.currentState.patient.jurisdiction_id]}
            />
            <div className="pb-4"></div>
            {this.props.previous && (
              <Button variant="outline-primary" size="lg" className="btn-square px-5" onClick={this.props.previous}>
                Previous
              </Button>
            )}
            {this.props.submit && (
              <Button
                variant="secondary"
                size="lg"
                className="float-right btn-square px-5"
                disabled={this.state.submitDisabled}
                onClick={() => {
                  window.history.back();
                }}>
                Cancel
              </Button>
            )}
            {this.props.submit && (
              <Button variant="primary" size="lg" className="float-right btn-square px-5 mr-4" disabled={this.state.submitDisabled} onClick={this.submit}>
                Finish
              </Button>
            )}
            {this.props.submit && !this.props.parent_id && this.props.currentState.responder_id === this.props.currentState.id && this.props.canAddGroup && (
              <Button
                variant="primary"
                size="lg"
                className="float-right btn-square px-5 mr-4"
                disabled={this.state.submitDisabled}
                onClick={this.toggleGroupAddNotification}>
                Finish and Add a Household Member
              </Button>
            )}
          </Card.Body>
        </Card>
        {this.state.showGroupAddNotification &&
          this.createModal('Enroll Household Members', this.toggleGroupAddNotification, event => this.submit(event, true))}
      </React.Fragment>
    );
  }

render() {
		return (
			<div className="login">
				<div className="flex justify-content-center align-items-center">
					<Card className={'w100 mb0'}>
						<Row className="loginForm">
							<Col md={12}>
								<Form noValidate validated={this.state.validated}>
									<h1>Login</h1>
									<p className="text-muted">Sign In to your account</p>
									<FormGroup>
										<InputGroup>
											<InputGroup.Prepend><i className={'fas fa-user'}/></InputGroup.Prepend>
											<Form.Control
												name={'username'}
												className={`textInput`}
												placeholder={'Username'}
												value={this.state.username}
												onChange={this.onInputChange}
												required
											/>
										</InputGroup>
									</FormGroup>
									<FormGroup>
										<InputGroup>
											<InputGroup.Prepend><i className={'fas fa-lock'}/></InputGroup.Prepend>
											<Form.Control
												name={'password'}
												placeholder={'Password'}
												type={'password'}
												value={this.state.password}
												onChange={this.onInputChange}
												required
											/>
										</InputGroup>
									</FormGroup>
									<Row>
										<Col md={12}>
											<Button
												onClick={this.login}
												bsstyle={'primary'}
												disabled={this.validateEmail() === 'error' || this.validatePassword() === 'error' || !this.state.username || !this.state.password}
												className={'pull-right'}
											>Login</Button>
											{this.state.error && <div className={'text-danger'}>{this.state.error}</div>}
										</Col>
									</Row>
								</Form>
							</Col>
						</Row>
					</Card>
				</div>
			</div>
		);
	}

render(){
	    return (
	    	<div style={{backgroundColor:'#C7CCDB'}}>
	        	<Container>
	            	<Row>
	            		<Col align="left">
				        	<NavLink tag={Redirect} to={"/userstaffAdd"}>
				            	<Button	style={{backgroundColor: "#2A324B",color: "white",borderColor: "#2A324B"}}>
					            	Add Staff
					        	</Button>
			            	</NavLink>
			            </Col>
	            	</Row>
		            {/*<Row className="pt-3 pb-3">
		            	<Col md="6"style={{"text-align":"initial"}}>
							Show
							<span style={{"padding":"10px"}}>
								<select value={this.state.show} onChange={this.onChangeshow}>
										<option value="0">All</option>
										<option value="5">5</option>
										<option value="10">10</option>
										<option value="25">25</option>
										<option value="50">50</option>
										<option value="75">75</option>
										<option value="100">100</option>
									</select>
							</span>
		                	Entities
		                </Col>
		            </Row>*/}
		           	<Row >
		           		<Col align="left" className="pt-1">
                			<div>
                				<ReactHTMLTableToExcel  
                    				className="btn btn-secondary"  
                    				table="Data"  
                    				filename="Filtered Students"  
                    				sheet="Sheet1"  
                    				buttonText="EXCEL"
                    				style={{backgroundColor:"#2A324B",color:"white",borderColor:"#2A324B"}} 
                    			/>
                    		</div>
                    	</Col>
                    	<Col>
        					<div align="right">Search:<input type="text" name="search" onChange={this.onChangesearch}/></div>
        				</Col>
	            	</Row>
	            	<br/>
		            <Row>
			            <Table id="Data" responsive striped style={{backgroundColor:'white'}}>
				            <thead style={{backgroundColor:'#2A324B',color:'white'}}>
				                <tr>
				        		    <th>Emp_Id</th>
				                    <th>Emp_Name</th>
				                    <th>Email</th>
				                    <th>Campus</th>
				                    <th>Department</th>
				                    <th>Mobile</th>
				                    <th>Action</th>
				                </tr>
				            </thead>
				            <tbody>
				              	{this.StaffList()}
			                </tbody>
			            </Table>
	            	</Row>
	            </Container>
	        </div>
	    )
	}

render() {
          // Destructuring assignment syntax is used to get the isAuthenticated function from the Authentication service in Auth.js
      const { isAuthenticated } = this.props.auth;
  
      return (
        <div>
          <Navbar className="no-border" fluid inverse>
            <Navbar.Header>
            <Navbar.Brand>
            <a href="/home">ReactChat</a>
          </Navbar.Brand>
        </Navbar.Header>
        <Nav className="pull-right">
          <Button
              className="btn-margin"
              onClick={this.goTo.bind(this, 'home')}
          >
            Home
          </Button>
            {
              !isAuthenticated() && (
                <Button
                    className="btn-margin"
                    onClick={this.login.bind(this)}
                >
                  Login
                </Button>
            )
        }
        {
            isAuthenticated() && (
              <Button
              className="btn-margin"
              onClick={this.goTo.bind(this, 'profile')}
          >
            Profile
          </Button>
      )
  }
  {
      isAuthenticated() && (
          <Button
              className="btn-margin"
              onClick={this.goTo.bind(this, 'chat')}
                      >
                        Chat
                      </Button>
                  )
              }
              {
                  isAuthenticated() && (
                      <Button
                          className="btn-margin"
                          onClick={this.logout.bind(this)}
                      >
                        Log Out
                      </Button>
                      )
              }
          </Nav>
        </Navbar>
      </div>
    );
  }

render() {
        return (
            <div className={Styles.container} style={{ height: '100vh' }}>
                <div className={Styles.loginForm}>
                    <h2 className={Styles.header}>Create admin account</h2>
                    <div style={{ clear: 'both' }}></div>
                    <Form onSubmit={this.createAdminAccount}>
                        <Form.Group controlId="formBasicUsername">
                            <Form.Label>Username</Form.Label>
                            <Form.Control type="text" placeholder="Username" onChange={(e) => this.setState({ username: e.target.value })} />
                        </Form.Group>
    
                        <Form.Group controlId="formBasicPassword">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" placeholder="Password" onChange={(e) => this.setState({ password: e.target.value })} />
                        </Form.Group>

                        <Form.Group controlId="formBasicPassword">
                            <Form.Label>Repeat password</Form.Label>
                            <Form.Control type="password" placeholder="Password" onChange={(e) => this.setState({ repeatedPassword: e.target.value })} />
                        </Form.Group>
                        <br/>

                        <h2 className={Styles.header}>Main server url</h2>
                        <Form.Group controlId="formBasicUsername">
                            <Form.Label>Url/IP</Form.Label>
                            <Form.Control type="text" placeholder="127.0.0.1:3001" onChange={(e) => this.setState({ mainServerUrl: e.target.value })} />
                        </Form.Group>
                        <br/>

                        <h2 className={Styles.header}>Content Server</h2>
                        <Form.Group controlId="formBasicName">
                            <Form.Label>Name</Form.Label>
                            <Form.Control type="text" placeholder="Content server name" onChange={(e) => this.setState({ contentServerName: e.target.value })} />
                        </Form.Group>
                        <Form.Group controlId="formBasicName">
                            <Form.Label>Content server IP</Form.Label>
                            <Form.Control type="text" value={this.host} onChange={(e) => this.setState({ contentServerIp: e.target.value })} />
                        </Form.Group>

                        <br/>
                        <Button variant="primary" onClick={this.createAdminAccount}>
                            Submit
                        </Button>
                        <input type="submit" style={{ display: 'none' }} />
                        <p id="statusMessage" style={{float: 'right', color: 'red'}}>{this.state.statusMessage}</p>
                    </Form>
                </div>
            </div>
        )
    }

Landing = ({ history }) => {
  //react spring stuff
  const calc = (x, y) => [
    -(y - window.innerHeight / 2) / 20,
    (x - window.innerWidth / 2) / 20,
    1.1,
  ];
  const trans = (x, y, s) =>
    `perspective(600px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`;
  const [props, set] = useSpring(() => ({
    xys: [0, 0, 1],
    config: { mass: 5, tension: 350, friction: 40 },
  }));
  //

  return (
    //react spring stuff
    <animated.div
      onMouseMove={({ clientX: x, clientY: y }) => set({ xys: calc(x, y) })}
      onMouseLeave={() => set({ xys: [0, 0, 1] })}
      style={{ transform: props.xys.interpolate(trans) }}
    >
      <Container fluid className="container" style={{ marginTop: '20vh' }}>
        <div className="mt-5">
          <h1 className="d-flex justify-content-center">
            {' '}
            Welcome to SWEetHearts!{' '}
          </h1>
          <br />
          <h2 className="mb-5 d-flex justify-content-center">
            {' '}
            A place where developers make their dreams come true{' '}
          </h2>
          <br />
        </div>
        <div className="mt-5 d-flex justify-content-center">
          <Button
            className="w-25"
            onClick={() => redirectToPath(history, '/explore')}
            size="lg"
            variant="outline-primary"
            block
          >
            Start Exploring
          </Button>
        </div>
      </Container>
    </animated.div>
  );
}

Home = () => (
  <>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Comfortaa"
    />
    <div style={globalFont}>
      <section style={titleSection}>
        <img src={gourmetLogo} style={headerLogoStyle} alt="Gourmet Inc Logo" />
        <h1 style={headwelcome}>
          Welcome to the Gourmet Inc. Promotions Manager Website
        </h1>
      </section>
      <section style={servicesSection}>
        <Grid style={servicesGrid}>
          <Row style={servicesTitle}>
            <h2 style={servicesGridH2}>Services:</h2>
            <h2 style={servicesGridSub}>What we offer</h2>
          </Row>
          <Row>
            <Col md={4}>
              <img src={cloud} alt="cloud icon" style={cloudIcon} />
              <h4 style={serviceTitle}>Platforms</h4>
              <p style={serviceDescription}>
                We support all social media platforms
              </p>
            </Col>
            <Col md={4}>
              <img src={gear} alt="gear icon" />
              <h4 style={serviceTitle}>Functionality</h4>
              <p style={serviceDescription}>We have many awesome features</p>
            </Col>
            <Col md={4}>
              <img src={heart} alt="heart icon" style={heartIcon} />
              <h4 style={serviceTitle}>Passion</h4>
              <p style={serviceDescription}>
                Made with love by passionate marketers
              </p>
            </Col>
          </Row>
        </Grid>
      </section>
      <section style={pricingDiv}>
        <h1 style={pricingHeader}>Pricing:</h1>
        <h3>We offer the most competitive pricing</h3>
      </section>
      <section style={signUpSection}>
        <Grid style={signUpDiv}>
          <Row>
            <Col style={signUpSectionCol}>
              <h2 style={signUpHeader}>Sign up for a FREE trial</h2>
              <p style={signUpText}>
                The Promotions Manager is launching soon. Leave your email at
                the bottom to get a FREE 60 days trial when we launch
              </p>
              <Form inline>
                <FormControl type="text" placeholder="Enter your email" />
                <div style={btnCtaStyle}>
                  <Button bsStyle="success" style={signUpButtonStyle}>
                    SIGN ME UP
                  </Button>
                </div>
              </Form>
            </Col>
          </Row>
        </Grid>
      </section>
    </div>
  </>
)

export default function FirebaseAuthUI(){
    const user = useFirebaseAuthUser();
    const [signupVisible,setSignupVisible] = useState(false);

    if(!getInitAuthResult().success){
        return (
            <div className="container-fluid p-1">
                <h1>Firebase not configured!</h1>
                <p className="p-1">
                Firebase authentication is used. You must set environment variables to initialize your firebase app. See <a href="https://github.com/RocketChat/RC4Community/blob/master/app/components/auth/firebase/README.md">README.md</a> for setting up firebase authentication for RC4Community.
                </p>
            </div>
        )
    }
    
    if(user.id){
        return (
            <div className={styles.authUIWrapper}> 
                <FirebaseUserInfo/>
            </div>
        );
    } else if(signupVisible){
        return (
            <div className={styles.authUIWrapper}>
                <div className="w-100 p-1 d-flex align-items-center justify-content-center bg-light">
                    <Button
                        style={{position: "absolute", left: "5px"}}
                        variant="light"
                        size="sm"
                        onClick={()=>setSignupVisible(false)}>
                        &lt; back
                    </Button>
                    &nbsp;
                    <span>Sign up</span>
                </div>
                <FirebaseSignupForm onSignupComplete={()=>setSignupVisible(false)}/>
            </div>
        );
    } else {
        return (
            <div className={styles.authUIWrapper}>
                <div className="w-100 p-1 d-flex align-items-center justify-content-center bg-light">
                    <span>Log in</span>
                </div>
                <FirebaseLoginForm onSignupClick={()=>setSignupVisible(true)}/>
            </div>
        );
    }
}