feat: social login
This commit is contained in:
zerosoul
+100
-98
@@ -1,100 +1,102 @@
|
|||||||
{
|
{
|
||||||
"name": "rustchat-web",
|
"name": "rustchat-web",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"homepage": "http://privoce.rustchat.com",
|
"homepage": "http://privoce.rustchat.com",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/core": "^7.17.0",
|
"@babel/core": "^7.17.0",
|
||||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
|
"@metamask/onboarding": "^1.0.1",
|
||||||
"@reduxjs/toolkit": "^1.7.2",
|
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
|
||||||
"@rtk-query/codegen-openapi": "^1.0.0-alpha.1",
|
"@reduxjs/toolkit": "^1.7.2",
|
||||||
"@svgr/webpack": "^6.2.1",
|
"@rtk-query/codegen-openapi": "^1.0.0-alpha.1",
|
||||||
"animate.css": "^4.1.1",
|
"@svgr/webpack": "^6.2.1",
|
||||||
"axios": "^0.25.0",
|
"animate.css": "^4.1.1",
|
||||||
"babel-loader": "^8.2.3",
|
"axios": "^0.25.0",
|
||||||
"babel-plugin-named-asset-import": "^0.3.8",
|
"babel-loader": "^8.2.3",
|
||||||
"babel-preset-react-app": "^10.0.1",
|
"babel-plugin-named-asset-import": "^0.3.8",
|
||||||
"bfj": "^7.0.2",
|
"babel-preset-react-app": "^10.0.1",
|
||||||
"browserslist": "^4.19.1",
|
"bfj": "^7.0.2",
|
||||||
"camelcase": "^6.3.0",
|
"browserslist": "^4.19.1",
|
||||||
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
"camelcase": "^6.3.0",
|
||||||
"css-loader": "^6.6.0",
|
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
||||||
"css-minimizer-webpack-plugin": "^3.4.1",
|
"css-loader": "^6.6.0",
|
||||||
"dayjs": "^1.10.7",
|
"css-minimizer-webpack-plugin": "^3.4.1",
|
||||||
"dotenv": "^16.0.0",
|
"dayjs": "^1.10.7",
|
||||||
"dotenv-expand": "^8.0.1",
|
"dotenv": "^16.0.0",
|
||||||
"emoji-mart": "^3.0.1",
|
"dotenv-expand": "^8.0.1",
|
||||||
"eslint": "^8.8.0",
|
"emoji-mart": "^3.0.1",
|
||||||
"event-source-polyfill": "^1.0.25",
|
"eslint": "^8.8.0",
|
||||||
"file-loader": "^6.2.0",
|
"event-source-polyfill": "^1.0.25",
|
||||||
"fs-extra": "^10.0.0",
|
"file-loader": "^6.2.0",
|
||||||
"html-webpack-plugin": "^5.5.0",
|
"fs-extra": "^10.0.0",
|
||||||
"mini-css-extract-plugin": "^2.5.3",
|
"html-webpack-plugin": "^5.5.0",
|
||||||
"react": "^17.0.2",
|
"mini-css-extract-plugin": "^2.5.3",
|
||||||
"react-dev-utils": "^12.0.0",
|
"react": "^17.0.2",
|
||||||
"react-dnd": "^15.1.1",
|
"react-dev-utils": "^12.0.0",
|
||||||
"react-dnd-html5-backend": "^15.1.2",
|
"react-dnd": "^15.1.1",
|
||||||
"react-dom": "^17.0.2",
|
"react-dnd-html5-backend": "^15.1.2",
|
||||||
"react-hot-toast": "^2.2.0",
|
"react-dom": "^17.0.2",
|
||||||
"react-icons": "^4.3.1",
|
"react-google-login": "^5.2.2",
|
||||||
"react-redux": "^7.2.6",
|
"react-hot-toast": "^2.2.0",
|
||||||
"react-refresh": "^0.11.0",
|
"react-icons": "^4.3.1",
|
||||||
"react-router-dom": "6",
|
"react-redux": "^7.2.6",
|
||||||
"react-textarea-autosize": "^8.3.3",
|
"react-refresh": "^0.11.0",
|
||||||
"redux-persist": "^6.0.0",
|
"react-router-dom": "6",
|
||||||
"resolve": "^1.22.0",
|
"react-textarea-autosize": "^8.3.3",
|
||||||
"rooks": "^5.10.0",
|
"redux-persist": "^6.0.0",
|
||||||
"semver": "^7.3.5",
|
"resolve": "^1.22.0",
|
||||||
"source-map-loader": "^3.0.1",
|
"rooks": "^5.10.0",
|
||||||
"style-loader": "^3.3.1",
|
"semver": "^7.3.5",
|
||||||
"styled-components": "^5.3.3",
|
"source-map-loader": "^3.0.1",
|
||||||
"styled-reset": "^4.3.4",
|
"style-loader": "^3.3.1",
|
||||||
"terser-webpack-plugin": "^5.3.1",
|
"styled-components": "^5.3.3",
|
||||||
"webpack": "^5.68.0",
|
"styled-reset": "^4.3.4",
|
||||||
"webpack-dev-server": "^4.7.4",
|
"terser-webpack-plugin": "^5.3.1",
|
||||||
"webpack-manifest-plugin": "^4.1.1",
|
"webpack": "^5.68.0",
|
||||||
"workbox-webpack-plugin": "^6.4.2"
|
"webpack-dev-server": "^4.7.4",
|
||||||
},
|
"webpack-manifest-plugin": "^4.1.1",
|
||||||
"scripts": {
|
"workbox-webpack-plugin": "^6.4.2"
|
||||||
"start": "node scripts/start.js",
|
},
|
||||||
"build": "node scripts/build.js",
|
"scripts": {
|
||||||
"deploy": "yarn build && gh-pages -d build",
|
"start": "node scripts/start.js",
|
||||||
"lint": "lint-staged",
|
"build": "node scripts/build.js",
|
||||||
"prepare": "husky install"
|
"deploy": "yarn build && gh-pages -d build",
|
||||||
},
|
"lint": "lint-staged",
|
||||||
"browserslist": {
|
"prepare": "husky install"
|
||||||
"production": [
|
},
|
||||||
"last 5 chrome version",
|
"browserslist": {
|
||||||
"last 5 firefox version",
|
"production": [
|
||||||
"last 5 safari version"
|
"last 5 chrome version",
|
||||||
],
|
"last 5 firefox version",
|
||||||
"development": [
|
"last 5 safari version"
|
||||||
"last 1 chrome version",
|
],
|
||||||
"last 1 firefox version",
|
"development": [
|
||||||
"last 1 safari version"
|
"last 1 chrome version",
|
||||||
]
|
"last 1 firefox version",
|
||||||
},
|
"last 1 safari version"
|
||||||
"babel": {
|
]
|
||||||
"presets": [
|
},
|
||||||
"react-app"
|
"babel": {
|
||||||
]
|
"presets": [
|
||||||
},
|
"react-app"
|
||||||
"devDependencies": {
|
]
|
||||||
"@commitlint/cli": "^16.1.0",
|
},
|
||||||
"@commitlint/config-conventional": "^16.0.0",
|
"devDependencies": {
|
||||||
"autoprefixer": "^10.4.2",
|
"@commitlint/cli": "^16.1.0",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"@commitlint/config-conventional": "^16.0.0",
|
||||||
"eslint-plugin-import": "^2.25.4",
|
"autoprefixer": "^10.4.2",
|
||||||
"eslint-plugin-prettier": "^4.0.0",
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"eslint-plugin-react": "^7.28.0",
|
"eslint-plugin-import": "^2.25.4",
|
||||||
"eslint-plugin-react-hooks": "^4.3.0",
|
"eslint-plugin-prettier": "^4.0.0",
|
||||||
"gh-pages": "^3.2.3",
|
"eslint-plugin-react": "^7.28.0",
|
||||||
"husky": "^7.0.4",
|
"eslint-plugin-react-hooks": "^4.3.0",
|
||||||
"lint-staged": "^12.3.3",
|
"gh-pages": "^3.2.3",
|
||||||
"postcss": "^8.4.6",
|
"husky": "^7.0.4",
|
||||||
"postcss-flexbugs-fixes": "^5.0.2",
|
"lint-staged": "^12.3.3",
|
||||||
"postcss-loader": "^6.2.1",
|
"postcss": "^8.4.6",
|
||||||
"postcss-preset-env": "^7.3.1",
|
"postcss-flexbugs-fixes": "^5.0.2",
|
||||||
"prettier": "^2.5.1"
|
"postcss-loader": "^6.2.1",
|
||||||
}
|
"postcss-preset-env": "^7.3.1",
|
||||||
|
"prettier": "^2.5.1"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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";
|
/* eslint-disable no-undef */
|
||||||
import StyledWrapper from "./styled";
|
import { useState, useEffect } from 'react';
|
||||||
import { useDispatch } from "react-redux";
|
import StyledWrapper from './styled';
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useDispatch } from 'react-redux';
|
||||||
import toast from "react-hot-toast";
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
import { useLoginMutation } from "../../app/services/auth";
|
// import web3 from "web3";
|
||||||
import { setAuthData } from "../../app/slices/auth.data";
|
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() {
|
export default function LoginPage() {
|
||||||
// const { token } = useSelector((store) => store.authData);
|
const [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
|
||||||
const navigateTo = useNavigate();
|
|
||||||
const dispatch = useDispatch();
|
// const { token } = useSelector((store) => store.authData);
|
||||||
const [login] = useLoginMutation();
|
const navigateTo = useNavigate();
|
||||||
const [input, setInput] = useState({
|
const dispatch = useDispatch();
|
||||||
email: "",
|
const [input, setInput] = useState({
|
||||||
password: "",
|
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) => {
|
const handleInput = (evt) => {
|
||||||
evt.preventDefault();
|
const { type } = evt.target.dataset;
|
||||||
console.log("wtf", input);
|
const { value } = evt.target;
|
||||||
const { data, error } = await login({
|
console.log(type, value);
|
||||||
...input,
|
setInput((prev) => {
|
||||||
type: "password",
|
prev[type] = value;
|
||||||
});
|
return { ...prev };
|
||||||
if (error) {
|
});
|
||||||
console.log(error);
|
};
|
||||||
switch (error.status) {
|
const { email, password } = input;
|
||||||
case 401:
|
return (
|
||||||
toast.error("username or password incorrect");
|
<StyledWrapper>
|
||||||
break;
|
<div className="form">
|
||||||
|
<div className="tips">
|
||||||
default:
|
<img
|
||||||
break;
|
src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
|
||||||
}
|
alt="logo"
|
||||||
return;
|
className="logo"
|
||||||
}
|
/>
|
||||||
if (data) {
|
<h2 className="title">Login to Rustchat</h2>
|
||||||
// 更新本地认证信息
|
<span className="desc">Please enter your details.</span>
|
||||||
toast.success("login success");
|
</div>
|
||||||
dispatch(setAuthData(data));
|
<form onSubmit={handleLogin}>
|
||||||
navigateTo("/");
|
<input
|
||||||
// location.reload(true);
|
name="email"
|
||||||
}
|
value={email}
|
||||||
};
|
required
|
||||||
const handleInput = (evt) => {
|
placeholder="Enter your email"
|
||||||
const { type } = evt.target.dataset;
|
data-type="email"
|
||||||
const { value } = evt.target;
|
onChange={handleInput}
|
||||||
console.log(type, value);
|
/>
|
||||||
setInput((prev) => {
|
<input
|
||||||
prev[type] = value;
|
type="password"
|
||||||
return { ...prev };
|
value={password}
|
||||||
});
|
name="password"
|
||||||
};
|
required
|
||||||
const { email, password } = input;
|
data-type="password"
|
||||||
return (
|
onChange={handleInput}
|
||||||
<StyledWrapper>
|
placeholder="Enter your password"
|
||||||
<div className="form">
|
/>
|
||||||
<div className="tips">
|
<button className="btn" type="submit" disabled={isLoading}>
|
||||||
<img
|
Sign in
|
||||||
src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
|
</button>
|
||||||
alt="logo"
|
</form>
|
||||||
className="logo"
|
<hr className="or" />
|
||||||
/>
|
<GoogleLoginButton login={login} />
|
||||||
<h2 className="title">Login to Rustchat</h2>
|
<MetamaskLoginButton />
|
||||||
<span className="desc">Please enter your details.</span>
|
</div>
|
||||||
</div>
|
</StyledWrapper>
|
||||||
<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>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
+98
-90
@@ -1,95 +1,103 @@
|
|||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
.form {
|
.form {
|
||||||
padding: 36px 40px 32px 40px;
|
padding: 36px 40px 32px 40px;
|
||||||
/* border: 1px solid #eee; */
|
/* border: 1px solid #eee; */
|
||||||
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
|
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
||||||
0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
border-radius: 12px;
|
||||||
border-radius: 12px;
|
.tips {
|
||||||
.tips {
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
align-items: center;
|
padding-bottom: 24px;
|
||||||
padding-bottom: 24px;
|
.logo {
|
||||||
.logo {
|
width: 56px;
|
||||||
width: 56px;
|
height: 56px;
|
||||||
height: 56px;
|
margin-bottom: 28px;
|
||||||
margin-bottom: 28px;
|
}
|
||||||
}
|
.title {
|
||||||
.title {
|
font-weight: 600;
|
||||||
font-weight: 600;
|
font-size: 24px;
|
||||||
font-size: 24px;
|
line-height: 32px;
|
||||||
line-height: 32px;
|
color: #101828;
|
||||||
color: #101828;
|
margin-bottom: 8px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.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;
|
export default StyledWrapper;
|
||||||
|
|||||||
@@ -1401,6 +1401,13 @@
|
|||||||
resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
|
resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
|
||||||
integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
|
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":
|
"@nodelib/fs.scandir@2.1.5":
|
||||||
version "2.1.5"
|
version "2.1.5"
|
||||||
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
|
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"
|
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
|
||||||
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
|
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:
|
brace-expansion@^1.1.7:
|
||||||
version "1.1.11"
|
version "1.1.11"
|
||||||
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
|
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"
|
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"
|
||||||
integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
|
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:
|
react-hot-toast@^2.2.0:
|
||||||
version "2.2.0"
|
version "2.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9"
|
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9"
|
||||||
|
|||||||
Reference in New Issue
Block a user