zerosoul
128 lines
3.4 KiB
JavaScript
128 lines
3.4 KiB
JavaScript
/* 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 web3 from "web3";
|
|
import StyledWrapper from "./styled";
|
|
import MetamaskLoginButton from "./MetamaskLoginButton";
|
|
import SolidLoginButton from "./SolidLoginButton";
|
|
|
|
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 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",
|
|
});
|
|
};
|
|
|
|
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
|
|
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}>
|
|
{isLoading ? "Signing" : `Sign in`}
|
|
</button>
|
|
</form>
|
|
<hr className="or" />
|
|
<GoogleLoginButton login={login} />
|
|
<MetamaskLoginButton login={login} />
|
|
<SolidLoginButton />
|
|
</div>
|
|
</StyledWrapper>
|
|
);
|
|
}
|