feat: magic link login/reg

src/routes/reg/RegWithUsername.js

@@ -0,0 +1,80 @@
+/* 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 { useParams } from "react-router-dom";
+import { setAuthData } from "../../app/slices/auth.data";
+
+import Input from "../../common/component/styled/Input";
+import Button from "../../common/component/styled/Button";
+import { useLoginMutation } from "../../app/services/auth";
+import toast from "react-hot-toast";
+
+export default function RegWithUsername() {
+  const { token } = useParams();
+  const [login, { isLoading, error, isSuccess, data }] = useLoginMutation();
+  // const navigateTo = useNavigate();
+  const dispatch = useDispatch();
+  const [username, setUsername] = useState("");
+  useEffect(() => {
+    console.log("errr", error);
+    switch (error?.status) {
+      case 401:
+        toast.error("Invalided Token");
+        break;
+
+      default:
+        break;
+    }
+  }, [error]);
+  useEffect(() => {
+    if (isSuccess && data) {
+      // 更新本地认证信息
+      console.log("login data", data);
+      toast.success("login success");
+      dispatch(setAuthData(data));
+      location.href = `/#/`;
+    }
+  }, [isSuccess, data]);
+
+  const handleLogin = (evt) => {
+    evt.preventDefault();
+    login({
+      token,
+      username,
+      type: "magiclink",
+    });
+    // sendMagicLink(email);
+  };
+
+  const handleInput = (evt) => {
+    const { value } = evt.target;
+    setUsername(value);
+  };
+  if (!token) return "no token";
+  return (
+    <>
+      <div className="tips">
+        <h2 className="title">What’s your name</h2>
+        <span className="desc">
+          Enter a name or handle so people know how you’d like to be called.
+          Your name will only be visible to others in spaces you joined.
+        </span>
+      </div>
+      <form onSubmit={handleLogin}>
+        <Input
+          className="large"
+          name="username"
+          value={username}
+          required
+          placeholder="Type a name"
+          onChange={handleInput}
+        />
+        <Button type="submit" disabled={isLoading || !username || isSuccess}>
+          {isLoading ? "Logining" : `Continue`}
+        </Button>
+      </form>
+    </>
+  );
+}

src/routes/reg/Register.js

@@ -0,0 +1,42 @@
+/* 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 Input from "../../common/component/styled/Input";
+import Button from "../../common/component/styled/Button";
+// import { useSendMagicLinkMutation } from "../../app/services/auth";
+
+export default function Reg() {
+  // const [
+  //   sendMagicLink,
+  //   { data, isSuccess, isLoading, error },
+  // ] = useSendMagicLinkMutation();
+  // const navigateTo = useNavigate();
+  // const dispatch = useDispatch();
+  const [username, setUsername] = useState("");
+
+  const handleLogin = (evt) => {
+    evt.preventDefault();
+    // sendMagicLink(email);
+  };
+
+  const handleInput = (evt) => {
+    const { value } = evt.target;
+    console.log(value);
+    setUsername(value);
+  };
+  return (
+    <form onSubmit={handleLogin}>
+      <Input
+        className="large"
+        name="username"
+        value={username}
+        required
+        placeholder="Enter your Name22"
+        onChange={handleInput}
+      />
+      <Button type="submit">{isLoading ? "Sending" : `Register`}</Button>
+    </form>
+  );
+}

src/routes/reg/index.js

@@ -0,0 +1,13 @@
+/* eslint-disable no-undef */
+import { Outlet } from "react-router-dom";
+import StyledWrapper from "./styled";
+
+export default function Reg() {
+  return (
+    <StyledWrapper>
+      <div className="form">
+        <Outlet />
+      </div>
+    </StyledWrapper>
+  );
+}

src/routes/reg/styled.js

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+const StyledWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  .form {
+    max-width: 440px;
+    padding: 36px 40px 32px 40px;
+    /* border: 1px solid #eee; */
+    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    border-radius: 12px;
+    .tips {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: 24px;
+      .logo {
+        width: 56px;
+        height: 56px;
+        margin-bottom: 28px;
+        border-radius: 50%;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 32px;
+        color: #101828;
+        margin-bottom: 8px;
+      }
+      .desc {
+        text-align: center;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 24px;
+        color: #667085;
+      }
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      width: 360px;
+    }
+  }
+`;
+
+export default StyledWrapper;