Tristan Yang
101 lines
2.9 KiB
JavaScript
101 lines
2.9 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 StyledWrapper from "./styled";
|
|
import Input from "../../common/component/styled/Input";
|
|
import Button from "../../common/component/styled/Button";
|
|
import { useSendLoginMagicLinkMutation } from "../../app/services/auth";
|
|
import SentTip from "./SentTip";
|
|
|
|
export default function SendMagicLinkPage() {
|
|
const [sent, setSent] = useState(false);
|
|
const [sendMagicLink, { isSuccess, isLoading, error }] = useSendLoginMagicLinkMutation();
|
|
|
|
const navigateTo = useNavigate();
|
|
// const dispatch = useDispatch();
|
|
const [email, setEmail] = useState("");
|
|
useEffect(() => {
|
|
if (isSuccess) {
|
|
toast.success("Send Email Successfully!");
|
|
setSent(true);
|
|
}
|
|
}, [isSuccess]);
|
|
|
|
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]);
|
|
|
|
const handlePwdPath = () => {
|
|
navigateTo("/login");
|
|
};
|
|
const handleLogin = (evt) => {
|
|
evt.preventDefault();
|
|
sendMagicLink(email);
|
|
};
|
|
|
|
const handleInput = (evt) => {
|
|
const { value } = evt.target;
|
|
console.log(value);
|
|
setEmail(value);
|
|
};
|
|
const handleReset = () => {
|
|
setEmail("");
|
|
setSent(false);
|
|
};
|
|
return (
|
|
<StyledWrapper>
|
|
<div className="form">
|
|
{sent ? (
|
|
<SentTip email={email} reset={handleReset} />
|
|
) : (
|
|
<>
|
|
<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 Email</span>
|
|
</div>
|
|
<form onSubmit={handleLogin}>
|
|
<Input
|
|
type="email"
|
|
className="large"
|
|
name="email"
|
|
autoFocus
|
|
value={email}
|
|
required
|
|
// pattern={`^\S+@\S+\.\S+$`}
|
|
placeholder="Enter your email"
|
|
onChange={handleInput}
|
|
/>
|
|
<Button type="submit" disabled={isLoading || !email}>
|
|
{isLoading ? "Sending" : `Continue with Email`}
|
|
</Button>
|
|
</form>
|
|
<hr className="or" />
|
|
<Button onClick={handlePwdPath}>Sign in with Password</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</StyledWrapper>
|
|
);
|
|
}
|