feat: login config
This commit is contained in:
zerosoul
@@ -1,35 +1,31 @@
|
||||
/* eslint-disable no-undef */
|
||||
import { useEffect } from "react";
|
||||
import { useGetOpenidMutation } from "../../app/services/auth";
|
||||
import solidSvg from "../../assets/icons/solid.svg?url";
|
||||
import { StyledSocialButton } from "./styled";
|
||||
import { useEffect } from 'react';
|
||||
import { useGetOpenidMutation } from '../../app/services/auth';
|
||||
import solidSvg from '../../assets/icons/solid.svg?url';
|
||||
import { StyledSocialButton } from './styled';
|
||||
|
||||
export default function SolidLoginButton() {
|
||||
const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
|
||||
export default function SolidLoginButton({ issuers }) {
|
||||
const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
|
||||
|
||||
const handleSolidLogin = () => {
|
||||
getOpenId({
|
||||
// issuer: "solidweb.org",
|
||||
issuer: "broker.pod.inrupt.com",
|
||||
redirect_uri: `${location.origin}/#/login`,
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
if (isSuccess) {
|
||||
console.log("wtf", data);
|
||||
const { url } = data;
|
||||
location.href = url;
|
||||
}
|
||||
}, [data, isSuccess]);
|
||||
const handleSolidLogin = () => {
|
||||
getOpenId({
|
||||
// issuer: "solidweb.org",
|
||||
issuer: issuers[0],
|
||||
redirect_uri: `${location.origin}/#/login`
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
if (isSuccess) {
|
||||
console.log('wtf', data);
|
||||
const { url } = data;
|
||||
location.href = url;
|
||||
}
|
||||
}, [data, isSuccess]);
|
||||
|
||||
return (
|
||||
<StyledSocialButton
|
||||
disabled={isLoading}
|
||||
onClick={handleSolidLogin}
|
||||
href="#"
|
||||
>
|
||||
<img src={solidSvg} className="icon" alt="solid icon" />
|
||||
{isLoading ? `Redirecting...` : `Sign in with Solid`}
|
||||
</StyledSocialButton>
|
||||
);
|
||||
return (
|
||||
<StyledSocialButton disabled={isLoading} onClick={handleSolidLogin} href="#">
|
||||
<img src={solidSvg} className="icon" alt="solid icon" />
|
||||
{isLoading ? `Redirecting...` : `Sign in with Solid`}
|
||||
</StyledSocialButton>
|
||||
);
|
||||
}
|
||||
|
||||
+123
-123
@@ -1,130 +1,130 @@
|
||||
/* eslint-disable no-undef */
|
||||
import { useState, useEffect } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import toast from "react-hot-toast";
|
||||
import BASE_URL from "../../app/config";
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import toast from 'react-hot-toast';
|
||||
import BASE_URL from '../../app/config';
|
||||
// import web3 from "web3";
|
||||
import StyledWrapper from "./styled";
|
||||
import MetamaskLoginButton from "./MetamaskLoginButton";
|
||||
import SolidLoginButton from "./SolidLoginButton";
|
||||
import Input from "../../common/component/styled/Input";
|
||||
import Button from "../../common/component/styled/Button";
|
||||
import GoogleLoginButton from "./GoogleLoginButton";
|
||||
import { useLoginMutation } from "../../app/services/auth";
|
||||
import { setAuthData } from "../../app/slices/auth.data";
|
||||
import StyledWrapper from './styled';
|
||||
import MetamaskLoginButton from './MetamaskLoginButton';
|
||||
import SolidLoginButton from './SolidLoginButton';
|
||||
import Input from '../../common/component/styled/Input';
|
||||
import Button from '../../common/component/styled/Button';
|
||||
import GoogleLoginButton from './GoogleLoginButton';
|
||||
import { useLoginMutation } from '../../app/services/auth';
|
||||
import { useGetLoginConfigQuery } from '../../app/services/server';
|
||||
import { setAuthData } from '../../app/slices/auth.data';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
|
||||
const navigateTo = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const [input, setInput] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
const [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
|
||||
const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
|
||||
const navigateTo = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const [input, setInput] = useState({
|
||||
email: '',
|
||||
password: ''
|
||||
});
|
||||
useEffect(() => {
|
||||
const query = new URLSearchParams(location.search);
|
||||
const code = query.get('code');
|
||||
const state = query.get('state');
|
||||
if (code && state) {
|
||||
login({
|
||||
code,
|
||||
state,
|
||||
type: 'oidc'
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
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) {
|
||||
// 更新本地认证信息
|
||||
console.log('login data', data);
|
||||
toast.success('login success');
|
||||
dispatch(setAuthData(data));
|
||||
navigateTo('/');
|
||||
}
|
||||
}, [isSuccess, data]);
|
||||
|
||||
const handleLogin = (evt) => {
|
||||
evt.preventDefault();
|
||||
console.log('wtf', input);
|
||||
login({
|
||||
...input,
|
||||
type: 'password'
|
||||
});
|
||||
useEffect(() => {
|
||||
const query = new URLSearchParams(location.search);
|
||||
const code = query.get("code");
|
||||
const state = query.get("state");
|
||||
if (code && state) {
|
||||
login({
|
||||
code,
|
||||
state,
|
||||
type: "oidc",
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
};
|
||||
|
||||
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) {
|
||||
// 更新本地认证信息
|
||||
console.log("login data", 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 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={`${BASE_URL}/resource/organization/logo`}
|
||||
alt="logo"
|
||||
className="logo"
|
||||
/>
|
||||
<h2 className="title">Login to Rustchat</h2>
|
||||
<span className="desc">Please enter your details.</span>
|
||||
</div>
|
||||
<form onSubmit={handleLogin}>
|
||||
<Input
|
||||
className="large"
|
||||
name="email"
|
||||
value={email}
|
||||
required
|
||||
placeholder="Enter your email"
|
||||
data-type="email"
|
||||
onChange={handleInput}
|
||||
/>
|
||||
<Input
|
||||
className="large"
|
||||
type="password"
|
||||
value={password}
|
||||
name="password"
|
||||
required
|
||||
data-type="password"
|
||||
onChange={handleInput}
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? "Signing" : `Sign in`}
|
||||
</Button>
|
||||
</form>
|
||||
<hr className="or" />
|
||||
<GoogleLoginButton login={login} />
|
||||
<MetamaskLoginButton login={login} />
|
||||
<SolidLoginButton />
|
||||
</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;
|
||||
if (!loginConfigSuccess) return null;
|
||||
const { google: enableGoogleLogin, metamask: enableMetamaskLogin, oidc } = loginConfig;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="form">
|
||||
<div className="tips">
|
||||
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
|
||||
<h2 className="title">Login to Rustchat</h2>
|
||||
<span className="desc">Please enter your details.</span>
|
||||
</div>
|
||||
<form onSubmit={handleLogin}>
|
||||
<Input
|
||||
className="large"
|
||||
name="email"
|
||||
value={email}
|
||||
required
|
||||
placeholder="Enter your email"
|
||||
data-type="email"
|
||||
onChange={handleInput}
|
||||
/>
|
||||
<Input
|
||||
className="large"
|
||||
type="password"
|
||||
value={password}
|
||||
name="password"
|
||||
required
|
||||
data-type="password"
|
||||
onChange={handleInput}
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? 'Signing' : `Sign in`}
|
||||
</Button>
|
||||
</form>
|
||||
{(enableGoogleLogin || enableMetamaskLogin || oidc.length > 0) && <hr className="or" />}
|
||||
{enableGoogleLogin && <GoogleLoginButton login={login} />}
|
||||
{enableMetamaskLogin && <MetamaskLoginButton login={login} />}
|
||||
{oidc.length > 0 && <SolidLoginButton issuers={oidc} />}
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user