ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: social login

Browse Source
This commit is contained in:
zerosoul
2022-02-17 10:15:26 +08:00
parent adb87333fc
commit d59a403b78
6 changed files with 420 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2
View File
@@ -5,6 +5,7 @@
"homepage": "http://privoce.rustchat.com",
"dependencies": {
"@babel/core": "^7.17.0",
"@metamask/onboarding": "^1.0.1",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
"@reduxjs/toolkit": "^1.7.2",
"@rtk-query/codegen-openapi": "^1.0.0-alpha.1",
@@ -35,6 +36,7 @@
"react-dnd": "^15.1.1",
"react-dnd-html5-backend": "^15.1.2",
"react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
"react-redux": "^7.2.6",
src/routes/login/GoogleLoginButton.js
+31
View File
@@ -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>
);
}
src/routes/login/MetamaskLoginButton.js
+62
View File
@@ -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>
);
}
src/routes/login/index.js
+43 -26
View File
@@ -1,49 +1,67 @@
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 [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
// const { token } = useSelector((store) => store.authData);
const navigateTo = useNavigate();
const dispatch = useDispatch();
const [login] = useLoginMutation();
const [input, setInput] = useState({
email: "",
password: "",
email: '',
password: ''
});
const handleLogin = async (evt) => {
evt.preventDefault();
console.log("wtf", input);
const { data, error } = await login({
...input,
type: "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");
toast.error('username or password incorrect');
break;
case 404:
toast.error('account not exsit');
break;
default:
toast.error('something error');
break;
}
return;
}
if (data) {
}, [error]);
useEffect(() => {
if (isSuccess && data) {
// 更新本地认证信息
toast.success("login success");
toast.success('login success');
dispatch(setAuthData(data));
navigateTo("/");
// location.reload(true);
navigateTo('/');
}
}, [isSuccess, data]);
const handleLogin = (evt) => {
evt.preventDefault();
console.log('wtf', input);
login({
...input,
type: 'password'
});
};
const handleInput = (evt) => {
const { type } = evt.target.dataset;
const { value } = evt.target;
@@ -84,14 +102,13 @@ export default function LoginPage() {
onChange={handleInput}
placeholder="Enter your password"
/>
<button className="btn" type="submit">
<button className="btn" type="submit" disabled={isLoading}>
Sign in
</button>
</form>
<hr className="or" />
<a href="#" className="btn google">
Sign in with Google
</a>
<GoogleLoginButton login={login} />
<MetamaskLoginButton />
</div>
</StyledWrapper>
);
src/routes/login/styled.js
+13 -5
View File
@@ -1,4 +1,4 @@
import styled from "styled-components";
import styled from 'styled-components';
const StyledWrapper = styled.div`
display: flex;
justify-content: center;
@@ -7,8 +7,7 @@ const StyledWrapper = styled.div`
.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);
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;
@@ -60,7 +59,7 @@ const StyledWrapper = styled.div`
&:after {
padding: 4px;
background-color: #fff;
content: "OR";
content: 'OR';
position: absolute;
left: 50%;
top: 50%;
@@ -83,10 +82,19 @@ const StyledWrapper = styled.div`
border: 1px solid #1fe1f9;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
&.google {
&.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;
}
}
}
}
yarn.lock
+20
View File
@@ -1401,6 +1401,13 @@
resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
"@metamask/onboarding@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@metamask/onboarding/-/onboarding-1.0.1.tgz#14a36e1e175e2f69f09598e2008ab6dc1b3297e6"
integrity sha512-FqHhAsCI+Vacx2qa5mAFcWNSrTcVGMNjzxVgaX8ECSny/BJ9/vgXP9V7WF/8vb9DltPeQkxr+Fnfmm6GHfmdTQ==
dependencies:
bowser "^2.9.0"
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -2426,6 +2433,11 @@ boolbase@^1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bowser@^2.9.0:
version "2.11.0"
resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -6284,6 +6296,14 @@ react-error-overlay@^6.0.10:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"
integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
react-google-login@^5.2.2:
version "5.2.2"
resolved "https://registry.yarnpkg.com/react-google-login/-/react-google-login-5.2.2.tgz#a20b46440c6c1610175ef75baf427118ff0e9859"
integrity sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==
dependencies:
"@types/react" "*"
prop-types "^15.6.0"
react-hot-toast@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9"