@fortawesome/free-solid-svg-icons#faSignInAlt JavaScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#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: Icon.js    From mailmask with GNU Affero General Public License v3.0 6 votes vote down vote up 
ICONS = {
  bars: faBars,
  'check-circle': faCheckCircle,
  'chevron-down': faChevronDown,
  'chevron-right': faChevronRight,
  'exchange-alt': faExchangeAlt,
  exclamation: faExclamation,
  'exclamation-triangle': faExclamationTriangle,
  info: faInfo,
  moon: faMoon,
  question: faQuestion,
  rss: faRss,
  'sign-in-alt': faSignInAlt,
  sun: faSun,
  snowflake: faSnowflake,
  star: faStar,
  'times-circle': faTimesCircle,
  user: faUser,
}
Example #2
Source File: LoginInfo.jsx    From Log_app with MIT License 6 votes vote down vote up 
LoginInfo = () => {
    const { userData, setUserData } = useContext(StoreContext);

    const Logut = (e) => {
        e.preventDefault();
        setUserData({
            username: null,
            email: null,
            isLogged: false,
            token: null,
        });

        localStorage.removeItem('LogAppUser');
    };

    return (
        <div className={styles.loginInfo}>
            {!userData.isLogged ? (
                <NavLink to="/login" className={styles.link}>
                    Zaloguj się <FontAwesomeIcon icon={faSignInAlt} size="lg" />
                </NavLink>
            ) : (
                <div onClick={Logut} className={styles.link}>
                    <NavLink to="/">
                        Witaj {userData.username} <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
                    </NavLink>
                </div>
            )}
        </div>
    );
}
Example #3
Source File: index.js    From wedding-planner with MIT License 6 votes vote down vote up 
LoginLink = () => {
  const { loginWithRedirect } = useAuth0();
  return (
    <OverlayTrigger
      placement="bottom"
      overlay={<Tooltip id="tooltip-login">Log In</Tooltip>}
    >
      <Nav.Link onClick={() => loginWithRedirect()}>
        <FontAwesomeIcon icon={faSignInAlt} size="lg" />
      </Nav.Link>
    </OverlayTrigger>
  );
}
Example #4
Source File: NavigationBar.jsx    From MyHome-Web with Apache License 2.0 5 votes vote down vote up 
render() {
    return (
      <Navbar>
        <div>
          <MenuIcon icon={this.props.menuToggled ? faTimes : faBars} onClick={this.props.onMenuToggle} />
          <Text>MyHome logo</Text>
        </div>
        <div>
          <span className="fa-layers fa-fw">
            <FontAwesomeIcon icon={faBell} color={styles.colors.grey} size="lg" />
            <Text className="fa-layers-counter" color={styles.colors.white} fontSize="2em" backgroundColor={styles.colors.red}>2</Text>
          </span>
          <span>
            <Avatar src="https://http.cat/400" margin="0 10px" width="25px" height="25px" />
            <Text
              fontWeight="500"
              dropdownMargin="0 0 0 -30px"
              dropdown={
                <ItemList>
                  {this.props.currentUser ?
                    <Item onClick={this.doSignOut}>
                      <FontAwesomeIcon icon={faSignOutAlt} />
                      <Text padding="0 0 0 5px">Logout</Text>
                    </Item>
                  :
                    <>
                      <Item onClick={this.goToSignUp}>
                        <FontAwesomeIcon icon={faUserPlus} />
                        <Text padding="0 0 0 5px">Sign Up</Text>
                      </Item>
                      <Item onClick={this.goToLogin}>
                        <FontAwesomeIcon icon={faSignInAlt} />
                        <Text padding="0 0 0 5px">Login</Text>
                      </Item>
                    </>
                  }
                </ItemList>
              }
            >
              {this.props.currentUser ? 'Tony Stark' : 'Guest'}
            </Text>
          </span>
        </div>
      </Navbar>
    )
  }
Example #5
Source File: EnterpriseSSO.jsx    From frontend-app-authn with GNU Affero General Public License v3.0 5 votes vote down vote up 
EnterpriseSSO = (props) => {
  const { intl } = props;
  const tpaProvider = props.provider;

  const handleSubmit = (e, url) => {
    e.preventDefault();
    window.location.href = getConfig().LMS_BASE_URL + url;
  };

  const handleClick = (e) => {
    e.preventDefault();
    window.location.href = LOGIN_PAGE;
  };

  if (tpaProvider) {
    return (
      <div className="d-flex justify-content-center m-4">
        <div className="d-flex flex-column">
          <div className="mw-450">
            <Form className="m-0">
              <p>{intl.formatMessage(messages['enterprisetpa.title.heading'], { providerName: tpaProvider.name })}</p>
              <Button
                id={tpaProvider.id}
                key={tpaProvider.id}
                type="submit"
                variant="link"
                className={`btn-tpa btn-${tpaProvider.id}`}
                onClick={(e) => handleSubmit(e, tpaProvider.loginUrl)}
              >
                {tpaProvider.iconImage ? (
                  <div aria-hidden="true">
                    <img className="icon-image" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
                    <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                  </div>
                )
                  : (
                    <>
                      <div className="font-container" aria-hidden="true">
                        <FontAwesomeIcon
                          icon={SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? ['fab', tpaProvider.iconClass] : faSignInAlt}
                        />
                      </div>
                      <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                    </>
                  )}
              </Button>
              <div className="mb-4" />
              <Button
                type="submit"
                variant="outline-primary"
                state="Complete"
                className="w-100"
                onClick={(e) => handleClick(e)}
              >
                {intl.formatMessage(messages['enterprisetpa.login.button.text'])}
              </Button>
            </Form>
          </div>
        </div>
      </div>
    );
  }
  return <div />;
}
Example #6
Source File: SocialAuthProviders.jsx    From frontend-app-authn with GNU Affero General Public License v3.0 5 votes vote down vote up 
function SocialAuthProviders(props) {
  const { intl, referrer, socialAuthProviders } = props;

  function handleSubmit(e) {
    e.preventDefault();

    const url = e.currentTarget.dataset.providerUrl;
    window.location.href = getConfig().LMS_BASE_URL + url;
  }

  const socialAuth = socialAuthProviders.map((provider, index) => (
    <button
      id={provider.id}
      key={provider.id}
      type="button"
      className={`btn-social btn-${provider.id} ${index % 2 === 0 ? 'mr-3' : ''}`}
      data-provider-url={referrer === LOGIN_PAGE ? provider.loginUrl : provider.registerUrl}
      onClick={handleSubmit}
    >
      {provider.iconImage ? (
        <div aria-hidden="true">
          <img className="icon-image" src={provider.iconImage} alt={`icon ${provider.name}`} />
        </div>
      )
        : (
          <>
            <div className="font-container" aria-hidden="true">
              <FontAwesomeIcon
                icon={SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? ['fab', provider.iconClass] : faSignInAlt}
              />
            </div>
          </>
        )}
      <span id="provider-name" className="notranslate mr-auto pl-2" aria-hidden="true">{provider.name}</span>
      <span className="sr-only">
        {referrer === LOGIN_PAGE
          ? intl.formatMessage(messages['sso.sign.in.with'], { providerName: provider.name })
          : intl.formatMessage(messages['sso.create.account.using'], { providerName: provider.name })}
      </span>
    </button>
  ));

  return <>{socialAuth}</>;
}