react-icons/fa#FaSignInAlt JavaScript Examples

The following examples show how to use react-icons/fa#FaSignInAlt. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Jumbotron.js    From talk4free with MIT License 5 votes vote down vote up 
Jumbotron = props => {
  const signInHandler = () => {
    document.getElementById("signInBtn").click();
  };
  return (
    <section className="jumbotron">
      <Container>
        <Row className="mt-5">
          <Col md="6">
            <h1>Practice lenguages at anytime.</h1>
            <p className="lead mt-5 mb-5">
              Talk4Free is created to talk to people around the world in many
              languages such as English, Mandarin, Spanish, French, German,
              Italian, Portuguese, Arabic, Russian, Japanese among others.
              <br />
              <br />
              People can exchange languages and culture, make friends and meet
              up people around the world.
            </p>
            <div className="callToActions">
              <a
                href="#test"
                className="btn btn-primary my-2"
                onClick={props.isLoggedIn ? console.log("") : signInHandler}
              >
                Join & Talk Now! <FaSignInAlt />
              </a>
              <a
                type="btn"
                href="#test"
                className="btn btn-secondary my-2 ml-4"
              >
                Rules & Penalies <FaSkull />
              </a>
            </div>
          </Col>
          <Col md="6" className="introImage">
            <Image src={require("./logo10x10.png")} />
          </Col>
        </Row>
      </Container>
    </section>
  );
}
Example #2
Source File: NavBar.js    From talk4free with MIT License 4 votes vote down vote up 
render() {
    const checkLogin = () => {
      if (this.state.isSignedIn) {
        return (
          <React.Fragment>
            <Dropdown>
              <Dropdown.Toggle
                className="ml-5"
                variant="primary"
                id="dropdown-basic"
              >
                {this.state.userName}
                {this.state.isSignedIn ? (
                  <Image
                    src={this.state.imageUrl}
                    style={{ width: "35px" }}
                    roundedCircle
                  />
                ) : (
                  ""
                )}
              </Dropdown.Toggle>

              <Dropdown.Menu className="ml-5">
                <Dropdown.Item>
                  {" "}
                  <GoogleLogout
                    clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
                    render={renderProps => (
                      <Button
                        variant="secondary"
                        onClick={renderProps.onClick}
                        disabled={renderProps.disabled}
                      >
                        {" "}
                        Logout
                      </Button>
                    )}
                    buttonText="Logout"
                    onLogoutSuccess={this.logout}
                  ></GoogleLogout>
                </Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
          </React.Fragment>
        );
      } else {
        return (
          <GoogleLogin
            clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
            render={renderProps => (
              <React.Fragment>
                <Button
                  variant="primary"
                  className="ml-5"
                  id="signInBtn"
                  onClick={renderProps.onClick}
                  disabled={renderProps.disabled}
                >
                  {this.state.isSignedIn ? this.state.userName : "Sign In"}
                  <FaSignInAlt />
                </Button>
              </React.Fragment>
            )}
            buttonText="Login"
            onSuccess={this.responseGoogle}
            onFailure={this.responseGoogle}
            isSignedIn={true}
            cookiePolicy={"single_host_origin"}
          />
        );
      }
    };
    return (
      <Navbar bg="dark" variant="dark" fixed="top">
        <Container>
          <Navbar.Brand href="#home">
            <Image src={require("./logo5x5.png")} />
            Talk4Free
          </Navbar.Brand>
          <Nav className="ml-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Rooms</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
          {checkLogin()}
        </Container>
      </Navbar>
    );
  }