feat: social login
This commit is contained in:
zerosoul
@@ -0,0 +1,31 @@
|
||||
// import { useState, useEffect } from "react";
|
||||
import { useGoogleLogin } from 'react-google-login';
|
||||
import { googleClientID } from '../../app/config';
|
||||
export default function GoogleLoginButton({ login }) {
|
||||
const { signIn, loaded } = useGoogleLogin({
|
||||
clientId: googleClientID,
|
||||
onSuccess: ({ tokenId, ...rest }) => {
|
||||
console.log('success', tokenId, rest);
|
||||
login({
|
||||
id_token: tokenId,
|
||||
type: 'google'
|
||||
});
|
||||
},
|
||||
onFailure: (wtf) => {
|
||||
console.log('failure', wtf);
|
||||
}
|
||||
});
|
||||
const handleGoogleLogin = () => {
|
||||
signIn();
|
||||
};
|
||||
return (
|
||||
<button disabled={!loaded} onClick={handleGoogleLogin} href="#" className="btn social">
|
||||
<img
|
||||
className="icon"
|
||||
src="https://static.nicegoodthings.com/project/rustchat/google.icon.png"
|
||||
alt="google icon"
|
||||
/>
|
||||
Sign in with Google
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import MetaMaskOnboarding from '@metamask/onboarding';
|
||||
const ONBOARD_TEXT = 'Click here to install MetaMask!';
|
||||
const CONNECT_TEXT = 'Sign in with MetaMask';
|
||||
const CONNECTED_TEXT = 'Connected';
|
||||
export default function MetamaskLoginButton() {
|
||||
const [btnTxt, setBtnTxt] = useState(ONBOARD_TEXT);
|
||||
const [isDisabled, setIsDisabled] = useState(false);
|
||||
const [accounts, setAccounts] = useState([]);
|
||||
const onboarding = useRef();
|
||||
useEffect(() => {
|
||||
if (!onboarding.current) {
|
||||
onboarding.current = new MetaMaskOnboarding();
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (MetaMaskOnboarding.isMetaMaskInstalled()) {
|
||||
console.log(accounts);
|
||||
if (accounts.length > 0) {
|
||||
setBtnTxt(CONNECTED_TEXT);
|
||||
setIsDisabled(true);
|
||||
onboarding.current.stopOnboarding();
|
||||
} else {
|
||||
setBtnTxt(CONNECT_TEXT);
|
||||
setIsDisabled(false);
|
||||
}
|
||||
}
|
||||
}, [accounts]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleNewAccounts(newAccounts) {
|
||||
setAccounts(newAccounts);
|
||||
}
|
||||
if (MetaMaskOnboarding.isMetaMaskInstalled()) {
|
||||
window.ethereum.request({ method: 'eth_requestAccounts' }).then(handleNewAccounts);
|
||||
window.ethereum.on('accountsChanged', handleNewAccounts);
|
||||
return () => {
|
||||
window.ethereum.off('accountsChanged', handleNewAccounts);
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleMetamaskLogin = () => {
|
||||
if (MetaMaskOnboarding.isMetaMaskInstalled()) {
|
||||
window.ethereum
|
||||
.request({ method: 'eth_requestAccounts' })
|
||||
.then((newAccounts) => setAccounts(newAccounts));
|
||||
} else {
|
||||
onboarding.current.startOnboarding();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<button disabled={isDisabled} onClick={handleMetamaskLogin} href="#" className="btn social">
|
||||
<img
|
||||
className="icon"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg"
|
||||
alt="meta mask icon"
|
||||
/>
|
||||
{btnTxt}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
+109
-92
@@ -1,98 +1,115 @@
|
||||
import { useState } from "react";
|
||||
import StyledWrapper from "./styled";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import toast from "react-hot-toast";
|
||||
/* eslint-disable no-undef */
|
||||
import { useState, useEffect } from 'react';
|
||||
import StyledWrapper from './styled';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
import { useLoginMutation } from "../../app/services/auth";
|
||||
import { setAuthData } from "../../app/slices/auth.data";
|
||||
// import web3 from "web3";
|
||||
import MetamaskLoginButton from './MetamaskLoginButton';
|
||||
|
||||
import GoogleLoginButton from './GoogleLoginButton';
|
||||
import { useLoginMutation } from '../../app/services/auth';
|
||||
import { setAuthData } from '../../app/slices/auth.data';
|
||||
|
||||
export default function LoginPage() {
|
||||
// const { token } = useSelector((store) => store.authData);
|
||||
const navigateTo = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const [login] = useLoginMutation();
|
||||
const [input, setInput] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
const [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
|
||||
|
||||
// const { token } = useSelector((store) => store.authData);
|
||||
const navigateTo = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const [input, setInput] = useState({
|
||||
email: '',
|
||||
password: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
console.log(error);
|
||||
switch (error.status) {
|
||||
case 'PARSING_ERROR':
|
||||
toast.error(error.data);
|
||||
break;
|
||||
case 401:
|
||||
toast.error('username or password incorrect');
|
||||
break;
|
||||
case 404:
|
||||
toast.error('account not exsit');
|
||||
break;
|
||||
|
||||
default:
|
||||
toast.error('something error');
|
||||
break;
|
||||
}
|
||||
return;
|
||||
}
|
||||
}, [error]);
|
||||
useEffect(() => {
|
||||
if (isSuccess && data) {
|
||||
// 更新本地认证信息
|
||||
toast.success('login success');
|
||||
dispatch(setAuthData(data));
|
||||
navigateTo('/');
|
||||
}
|
||||
}, [isSuccess, data]);
|
||||
|
||||
const handleLogin = (evt) => {
|
||||
evt.preventDefault();
|
||||
console.log('wtf', input);
|
||||
login({
|
||||
...input,
|
||||
type: 'password'
|
||||
});
|
||||
};
|
||||
|
||||
const handleLogin = async (evt) => {
|
||||
evt.preventDefault();
|
||||
console.log("wtf", input);
|
||||
const { data, error } = await login({
|
||||
...input,
|
||||
type: "password",
|
||||
});
|
||||
if (error) {
|
||||
console.log(error);
|
||||
switch (error.status) {
|
||||
case 401:
|
||||
toast.error("username or password incorrect");
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (data) {
|
||||
// 更新本地认证信息
|
||||
toast.success("login success");
|
||||
dispatch(setAuthData(data));
|
||||
navigateTo("/");
|
||||
// location.reload(true);
|
||||
}
|
||||
};
|
||||
const handleInput = (evt) => {
|
||||
const { type } = evt.target.dataset;
|
||||
const { value } = evt.target;
|
||||
console.log(type, value);
|
||||
setInput((prev) => {
|
||||
prev[type] = value;
|
||||
return { ...prev };
|
||||
});
|
||||
};
|
||||
const { email, password } = input;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="form">
|
||||
<div className="tips">
|
||||
<img
|
||||
src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
|
||||
alt="logo"
|
||||
className="logo"
|
||||
/>
|
||||
<h2 className="title">Login to Rustchat</h2>
|
||||
<span className="desc">Please enter your details.</span>
|
||||
</div>
|
||||
<form onSubmit={handleLogin}>
|
||||
<input
|
||||
name="email"
|
||||
value={email}
|
||||
required
|
||||
placeholder="Enter your email"
|
||||
data-type="email"
|
||||
onChange={handleInput}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
name="password"
|
||||
required
|
||||
data-type="password"
|
||||
onChange={handleInput}
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
<button className="btn" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
<hr className="or" />
|
||||
<a href="#" className="btn google">
|
||||
Sign in with Google
|
||||
</a>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
);
|
||||
const handleInput = (evt) => {
|
||||
const { type } = evt.target.dataset;
|
||||
const { value } = evt.target;
|
||||
console.log(type, value);
|
||||
setInput((prev) => {
|
||||
prev[type] = value;
|
||||
return { ...prev };
|
||||
});
|
||||
};
|
||||
const { email, password } = input;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="form">
|
||||
<div className="tips">
|
||||
<img
|
||||
src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
|
||||
alt="logo"
|
||||
className="logo"
|
||||
/>
|
||||
<h2 className="title">Login to Rustchat</h2>
|
||||
<span className="desc">Please enter your details.</span>
|
||||
</div>
|
||||
<form onSubmit={handleLogin}>
|
||||
<input
|
||||
name="email"
|
||||
value={email}
|
||||
required
|
||||
placeholder="Enter your email"
|
||||
data-type="email"
|
||||
onChange={handleInput}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
name="password"
|
||||
required
|
||||
data-type="password"
|
||||
onChange={handleInput}
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
<button className="btn" type="submit" disabled={isLoading}>
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
<hr className="or" />
|
||||
<GoogleLoginButton login={login} />
|
||||
<MetamaskLoginButton />
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
+98
-90
@@ -1,95 +1,103 @@
|
||||
import styled from "styled-components";
|
||||
import styled from 'styled-components';
|
||||
const StyledWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
.form {
|
||||
padding: 36px 40px 32px 40px;
|
||||
/* border: 1px solid #eee; */
|
||||
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
|
||||
0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
||||
border-radius: 12px;
|
||||
.tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 24px;
|
||||
.logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #101828;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #667085;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
input {
|
||||
width: 360px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d0d5dd;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #667085;
|
||||
}
|
||||
}
|
||||
.or {
|
||||
border: none;
|
||||
position: relative;
|
||||
height: 1px;
|
||||
background-color: #e4e7ec;
|
||||
margin: 26px 0;
|
||||
&:after {
|
||||
padding: 4px;
|
||||
background-color: #fff;
|
||||
content: "OR";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #667085;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #ffffff;
|
||||
padding: 10px;
|
||||
background: #1fe1f9;
|
||||
border: 1px solid #1fe1f9;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 8px;
|
||||
&.google {
|
||||
color: #344054;
|
||||
border-color: #d0d5dd;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
.form {
|
||||
padding: 36px 40px 32px 40px;
|
||||
/* border: 1px solid #eee; */
|
||||
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
||||
border-radius: 12px;
|
||||
.tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 24px;
|
||||
.logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #101828;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #667085;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
input {
|
||||
width: 360px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d0d5dd;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #667085;
|
||||
}
|
||||
}
|
||||
.or {
|
||||
border: none;
|
||||
position: relative;
|
||||
height: 1px;
|
||||
background-color: #e4e7ec;
|
||||
margin: 26px 0;
|
||||
&:after {
|
||||
padding: 4px;
|
||||
background-color: #fff;
|
||||
content: 'OR';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #667085;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #ffffff;
|
||||
padding: 10px;
|
||||
background: #1fe1f9;
|
||||
border: 1px solid #1fe1f9;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 8px;
|
||||
&.social {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: #344054;
|
||||
border-color: #d0d5dd;
|
||||
background: none;
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
|
||||
Reference in New Issue
Block a user