ColdBreeze-chat-web/src/routes/reg/Register.tsx

import { useState, useEffect } from "react";
import toast from "react-hot-toast";
// import { useNavigate } from "react-router-dom";
import BASE_URL, { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
import Input from "../../common/component/styled/Input";
import Button from "../../common/component/styled/Button";
import { useLazyCheckEmailQuery, useSendRegMagicLinkMutation } from "../../app/services/auth";
import EmailNextTip from "./EmailNextStepTip";
import SignInLink from "./SignInLink";
import { useGetLoginConfigQuery } from "../../app/services/server";
import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
import GoogleLoginButton from "../../common/component/GoogleLoginButton";
import GithubLoginButton from "../../common/component/GithubLoginButton";

export default function Reg() {
  const [sendRegMagicLink, { isLoading: signingUp, data, isSuccess }] =
    useSendRegMagicLinkMutation();
  const [checkEmail, { isLoading: checkingEmail }] = useLazyCheckEmailQuery();
  // 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) {
      //本地存一下 magic token 后续oauth流程用到
      localStorage.setItem(KEY_LOCAL_MAGIC_TOKEN, token);
      setMagicToken(token);
    }
  }, []);

  useEffect(() => {
    if (isSuccess && data) {
      const { new_magic_token, mail_is_sent } = data;
      if (!mail_is_sent && new_magic_token) {
        // 直接进入set_name流程
        location.href = `?magic_token=${new_magic_token}#/register/set_name`;
        // navigateTo(`/register/set_name?magic_token=${new_magic_token}`);
      }
    }
  }, [isSuccess, data]);

  const handleReg = async (evt) => {
    evt.preventDefault();
    const { email, password, confirmPassword } = input;
    if (password !== confirmPassword) {
      toast.error("Not Same Password!");
      return;
    }
    const { data: canReg } = await checkEmail(email);
    console.log("can reg", canReg);
    if (canReg) {
      sendRegMagicLink({
        magic_token: magicToken,
        email,
        password
      });
    } else {
      toast.error("Email already registered!");
    }
    // sendMagicLink(email);
  };
  const handleCompare = () => {
    const { password, confirmPassword } = input;
    if (password !== confirmPassword) {
      toast.error("Not Same 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 { clientId } = useGoogleAuthConfig();
  const { config: githubAuthConfig } = useGithubAuthConfig();
  const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
  if (!loginConfigSuccess) return null;
  const {
    github: enableGithubLogin,
    google: enableGoogleLogin,
    who_can_sign_up: whoCanSignUp
  } = loginConfig;
  const googleLogin = enableGoogleLogin && clientId;
  // magic token 没有并且没有开放注册
  if (whoCanSignUp !== "EveryOne" && !magicToken)
    return `Sign up method is updated to Invitation Link Only`;
  const { email, password, confirmPassword } = input;
  if (data?.mail_is_sent) return <EmailNextTip />;
  const isLoading = signingUp || checkingEmail;
  return (
    <>
      <div className="tips">
        <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
        <h2 className="title">Sign Up to Rustchat</h2>
        <span className="desc">Please enter your details.</span>
      </div>

      <form onSubmit={handleReg} autoSave={"false"} autoComplete={"true"}>
        <Input
          className="large"
          name="email"
          value={email}
          required
          placeholder="Enter email"
          data-type="email"
          onChange={handleInput}
        />
        <Input
          className="large"
          type="password"
          value={password}
          name="password"
          required
          data-type="password"
          onChange={handleInput}
          placeholder="Enter password"
        />
        <Input
          required
          onBlur={handleCompare}
          type="password"
          name={"confirmPassword"}
          value={confirmPassword}
          data-type="confirmPassword"
          onChange={handleInput}
          placeholder="Confirm Password"
        ></Input>
        <Button type="submit" disabled={isLoading}>
          {isLoading ? "Signing Up" : `Sign Up`}
        </Button>
      </form>
      <hr className="or" />
      {googleLogin && <GoogleLoginButton type="register" clientId={clientId} />}
      {enableGithubLogin && (
        <GithubLoginButton type="register" client_id={githubAuthConfig?.client_id} />
      )}
      <SignInLink />
    </>
  );
}