@ant-design/icons#FacebookOutlined JavaScript Examples

Login = () => {
  return (
    <div id="login-page">
      <div id="login-card">
        <h2> Welcome to MyChat! </h2>
        <div
          className="login-button google"
          onClick={() =>
            auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())
          }
        >
          <GoogleOutlined /> Sign In with Google
        </div>
        <br /> <br />
        <div
          className="login-button facebook"
          onClick={() =>
            auth.signInWithRedirect(new firebase.auth.FacebookAuthProvider())
          }
        >
          <FacebookOutlined /> Sign In with Facebook
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <h4>Design by Alan Binu ?</h4>
      </div>
    </div>
  );
}

SocialSharing = ({ message }) => {
  const handleWpSharing = () => {
    const url = `whatsapp://send?text=${encodeURIComponent(message())}`;
    window.open(url, '_blank');
  };

  const handleFbSharing = () => {
    const url = `https://www.facebook.com/sharer/sharer.php?u=${document.location.href}`;
    window.open(url, '_blank');
  };

  const menu = (
    <Menu>
      <Menu.Item key='1' onClick={handleWpSharing}>
        <WhatsAppOutlined /> Via WhatsApp
      </Menu.Item>
      <Menu.Item key='2' onClick={handleFbSharing}>
        <FacebookOutlined /> Via Facebook
      </Menu.Item>
    </Menu>
  );
  return (
    <div className='social-sharing'>
      <Dropdown overlay={menu} trigger={['click', 'hover']}>
        <Button>
          <ShareAltOutlined /> Compartilhar
        </Button>
      </Dropdown>
    </div>
  );
}

Footer = () => {
    return (
        <div className={'footer-container'}>
            <img width={164} height={50} src={logo} alt='Logo SKOB'/>
            <Space direction='vertical' style={{ justifyContent: 'flex-end' }}>
                <Space>
                    <Text italic>Follow: </Text>
                    <a href='https://www.facebook.com/skobroudnice' target='_blank' rel="noreferrer">
                        <FacebookOutlined style={{ fontSize: '1.5rem' }} />
                    </a>
                    <a href='https://obroudnice.cz/' target='_blank' rel="noreferrer">
                        <ChromeOutlined style={{ fontSize: '1.5rem' }} />
                    </a>
                </Space>
                <Text italic>Design made by &copy; <a href='mailto: [email protected]'>Petr Buk</a></Text>
            </Space>
        </div>
    )
}

storiesOf('antd/tag', module).add('icon', () => 
  <>
    <Tag icon={<TwitterOutlined />} color="#55acee">
      Twitter
    </Tag>
    <Tag icon={<YoutubeOutlined />} color="#cd201f">
      Youtube
    </Tag>
    <Tag icon={<FacebookOutlined />} color="#3b5999">
      Facebook
    </Tag>
    <Tag icon={<LinkedinOutlined />} color="#55acee">
      LinkedIn
    </Tag>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p><code>Tag</code> components can contain an <code>Icon</code>. This is done by setting the <code>icon</code> property or placing an <code>Icon</code> component within the <code>Tag</code>.</p>
<p>If you want specific control over the positioning and placement of the <code>Icon</code>, then that should be done by placing the <code>Icon</code> component within the <code>Tag</code> rather than using the <code>icon</code> property.</p></>) } });

Login = () => {
  const [serverError, setServerError] = useState("");
  const history = useHistory();
  const [loading, setLoading] = useState(false);
  function lowerLetters(str) {
    return str.toLowerCase();
  }
  const login = ({ userName, password }, { setSubmitting }) => {
    setLoading(true)
    // @chat.engine is added to login because of Firebase requiring email string
    fb.auth
      .signInWithEmailAndPassword(
        `${encodeURIComponent(lowerLetters(userName))}@chat.engine`,
        password
      )
      .then((res) => {

        if (!res.user) {
          setServerError(
            "We're having trouble logging you in. Please try again."
          );
        }
      })
      .catch((err) => {
        console.log(err);
        if (err.code === "auth/wrong-password") {
          setServerError("Username or password is invalid");
        } else if (err.code === "auth/user-not-found") {
          setServerError("No account for this username");
        } else {
          setServerError("Something went wrong :(");
        }
      })
      .finally(() => {
        setLoading(false)
      });
  };
  return (
    <div className="auth-form">
      <div className="logo">
        <CommentOutlined />
        <div className="logo-text">
          <div className="logo-text-first">  Chat</div>
          <div className="logo-text-second">     App</div>
        </div>
      </div>

      <Formik
        onSubmit={login}
        validateOnMount={true}
        initialValues={defaultValues}
        validationSchema={validationSchema}
      >
        {({ isValid, isSubmitting }) => (
          <Form>
            <div className="login-fields">
              <div className="login-field">
                <UserOutlined />
                <FormField name="userName" placeholder="Username" /></div>
              <ErrorMessage component='div' name="userName" className="error" /> <br />
              <div className="login-field">
                <LockOutlined />
                <FormField name="password" placeholder="Password" type="password" />
              </div>
              <ErrorMessage component='div' name="password" className="error" />
            </div>
            <div className="auth-link-container">
              Don't have an account?{" "}
              <span
                className="auth-link signup-text"
                onClick={() => history.push("signup")}

              >
                Sign Up!
              </span>
            </div>
            {!loading ?
              <div className="login-buttons">
                <button type="submit">
                  Login
                </button>
                <button 
                className="sample-account-button"
                onClick={() => {

                login({userName: "john doe", password: "password123"}, { setSubmitting: true })

                }}>
                  Sample Account
                </button>
              </div> : <div className="loading-image"><img src={loadingAnimation} alt="" /></div>}

            {!!serverError && <div className="error server-error">{serverError}</div>}
          </Form>
        )}
      </Formik>

      <div className="social-media">
        <div className="social-media-header">
          <hr /> Login with social media<hr />
        </div>
        <div className="social-login">
          <div
            className="google"
            /*onClick={() => fb.auth.signInWithRedirect(googleProvider)}*/
            onClick={()  => {
                alert("The limit for new accounts has been reached. Please use Sample Account")
            }}
          >
            <GoogleOutlined /> Google
          </div>
          <div
            className="google"
            /*onClick={() => fb.auth.signInWithRedirect(facebookProvider)}*/
             onClick={()  => {
                alert("The limit for new accounts has been reached. Please use Sample Account")
            }}
          >
            <FacebookOutlined /> Facebook
          </div>
        </div>
      </div>
    </div>
  );
}