@ant-design/icons#GoogleOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#GoogleOutlined.
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: Login.js From Realtime-Chat-Application-ReactJs with MIT License | 6 votes |
|
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>
);
}
Example #2
| Source File: Auth.js From Insta-Poll with MIT License | 5 votes |
|
GoogleAuth = (props) => {
const {user, loading} = UserSession();
const handleLogin = async()=>{
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
var token = result.credential.accessToken;
var user = result.user;
if(props.location.state)
{
if(!props.location.state.from)
props.history.push("/");
else
props.history.push(`/${props.location.state.from}`)
}
else
props.history.push("/");
}).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
var email = error.email;
var credential = error.credential;
});
}
useEffect(()=>{
if(user)
{
if(props.location.state)
{
if(!props.location.state.from)
props.history.push("/");
else
props.history.push(`/${props.location.state.from}`)
}
else
props.history.push("/");
}
}, [user])
return (
<>
{loading ? ( <div
style={{
width: "100%",
display: "flex",
height: "100vh",
alignItems: "center",
justifyContent: "center",
zIndex: "23444898429"
}}
>
<img src={Loader} />
</div>) : ( <div>
<h2 className="animate__animated animate__pulse heading1">Insta Poll - Create a Realtime Poll Instantly ⚡ </h2>
<div className="flex_home">
<div style={{flexGrow:"1"}} className="min_wide">
<h1 className="google_head">Login to get Started!</h1>
<Button type="primary" size="large" style={{backgroundColor:"#dd4b39"}} onClick={handleLogin} className="login_btn"><GoogleOutlined />Log in with Google</Button>
</div>
<div style={{flexGrow:"1"}}>
<img
src={Vote} className="home_img1 animate__animated animate__fadeIn"/>
</div>
<div>
</div>
</div>
</div>)}
</>
)
}
Example #3
| Source File: Login.js From react-chat-app with MIT License | 4 votes |
|
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>
);
}
