HD
87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import { useState, useEffect, FormEvent, ChangeEvent } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Input from "../../common/component/styled/Input";
|
|
import Button from "../../common/component/styled/Button";
|
|
import { useSendRegMagicLinkMutation } from "../../app/services/auth";
|
|
import EmailNextTip from "./EmailNextStepTip";
|
|
|
|
export default function Reg() {
|
|
const [sendRegMagicLink, { isLoading, data, isSuccess }] = useSendRegMagicLinkMutation();
|
|
const navigateTo = useNavigate();
|
|
const [magicToken, setMagicToken] = useState("");
|
|
const [input, setInput] = useState({
|
|
email: "",
|
|
password: "",
|
|
confirmPassword: ""
|
|
});
|
|
|
|
useEffect(() => {
|
|
const query = new URLSearchParams(location.search);
|
|
// const githubCode = query.get("gcode");
|
|
const token = query.get("magic_token");
|
|
if (token) {
|
|
setMagicToken(token);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isSuccess && data) {
|
|
const { new_magic_token, mail_is_sent } = data;
|
|
if (!mail_is_sent && new_magic_token) {
|
|
// 直接进入set_name流程
|
|
navigateTo(`?magic_token=${new_magic_token}#/register/set_name`);
|
|
}
|
|
}
|
|
}, [isSuccess, data]);
|
|
|
|
const handleReg = (evt: FormEvent<HTMLFormElement>) => {
|
|
evt.preventDefault();
|
|
const { email, password } = input;
|
|
sendRegMagicLink({
|
|
magic_token: magicToken,
|
|
email,
|
|
password
|
|
});
|
|
// sendMagicLink(email);
|
|
};
|
|
|
|
const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
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 (data?.mail_is_sent) return <EmailNextTip />;
|
|
return (
|
|
<form onSubmit={handleReg}>
|
|
<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 Up" : `Sign Up`}
|
|
</Button>
|
|
</form>
|
|
);
|
|
}
|