feat: magic link login/reg

src/routes/sendMagicLink/index.js

@@ -0,0 +1,86 @@
+/* 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 { useSendMagicLinkMutation } from "../../app/services/auth";
+
+export default function SendMagicLinkPage() {
+  const [
+    sendMagicLink,
+    { isSuccess, isLoading, error },
+  ] = useSendMagicLinkMutation();
+  // const navigateTo = useNavigate();
+  // const dispatch = useDispatch();
+  const [email, setEmail] = useState("");
+  useEffect(() => {
+    if (isSuccess) {
+      toast.success("Send Email Successfully!");
+    }
+  }, [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 handleLogin = (evt) => {
+    evt.preventDefault();
+    sendMagicLink(email);
+  };
+
+  const handleInput = (evt) => {
+    const { value } = evt.target;
+    console.log(value);
+    setEmail(value);
+  };
+  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 Email</span>
+        </div>
+        <form onSubmit={handleLogin}>
+          <Input
+            type="email"
+            className="large"
+            name="email"
+            value={email}
+            required
+            placeholder="Enter your email"
+            onChange={handleInput}
+          />
+          <Button type="submit" disabled={isLoading || !email}>
+            {isLoading ? "Sending" : `Continue with Email`}
+          </Button>
+        </form>
+      </div>
+    </StyledWrapper>
+  );
+}

src/routes/sendMagicLink/styled.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+const StyledWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  .form {
+    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 {
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      color: #667085;
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      width: 360px;
+    }
+  }
+`;
+
+export default StyledWrapper;