Redo signup page

src/components/table.jsx

@@ -100,9 +100,9 @@ export default function Table(props) {
                 ? props.tableData.name.length < 10
                   ? props.tableData.name
                   : `${props.tableData.name.substring(0, 10)}...`
-                : props.tableData.name.length < 14
+                : props.tableData.name.length < 16
                 ? props.tableData.name
-                : `${props.tableData.name.substring(0, 14)}...`}
+                : `${props.tableData.name.substring(0, 16)}...`}
             </div>
             {isHovered && (
               <div className="flex justify-end items-center mx-2">

src/pages/signup.jsx

@@ -1,20 +1,335 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { Link } from "react-router-dom";
-import logo from "../assets/logo_light_46.png";
+import logo from "../assets/icon_dark_64.png";
-import ReCAPTCHA from "react-google-recaptcha";
+import google_logo from "../assets/google.png";
-import { IconEyeClosedSolid, IconEyeOpened } from "@douyinfe/semi-icons";
+import github_logo from "../assets/github.png";
-import { Banner } from "@douyinfe/semi-ui";
 import axios from "axios";
+import { Cardinality } from "../data/data";
+import { calcPath } from "../utils";
+import { Toast } from "@douyinfe/semi-ui";
+
+const xOffset = window.innerWidth * 0.42 * 0.15;
+const diagram = {
+  tables: [
+    {
+      name: "galactic_users",
+      x: xOffset + 101,
+      y: window.innerHeight * 0.75 - (4 * 36 + 50 + 7) * 0.5,
+      fields: [
+        {
+          name: "id",
+          type: "INT",
+        },
+        {
+          name: "username",
+          type: "VARCHAR",
+        },
+        {
+          name: "email",
+          type: "VARCHAR",
+        },
+        {
+          name: "password",
+          type: "VARCHAR",
+        },
+      ],
+      color: "#7d9dff",
+    },
+    {
+      name: "celestial_data",
+      x: xOffset,
+      y: window.innerHeight * 0.32 - (5 * 36 + 50 + 7) * 0.5,
+      fields: [
+        {
+          name: "id",
+          type: "INT",
+        },
+        {
+          name: "user_id",
+          type: "INT",
+        },
+        {
+          name: "type",
+          type: "ENUM",
+        },
+        {
+          name: "time",
+          type: "TIMESTAMP",
+        },
+        {
+          name: "content",
+          type: "VARCHAR",
+        },
+      ],
+      color: "#89e667",
+    },
+  ],
+  relationships: [
+    {
+      startTableId: 1,
+      startFieldId: 1,
+      endTableId: 0,
+      endFieldId: 0,
+      startX: xOffset + 16,
+      startY:
+        window.innerHeight * 0.32 - (4 * 36 + 50 + 7) * 0.5 + (50 + 18 * 2),
+      endX: xOffset + 115,
+      endY: window.innerHeight * 0.75 - (4 * 36 + 50 + 7) * 0.5 + (50 + 18 * 1),
+      cardinality: "One to one",
+    },
+  ],
+};
+
+function Table({ table, grab }) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [hoveredField, setHoveredField] = useState(-1);
+  const height = table.fields.length * 36 + 50 + 7;
+  return (
+    <foreignObject
+      key={table.name}
+      x={table.x}
+      y={table.y}
+      width={200}
+      height={height}
+      className="drop-shadow-lg rounded-md cursor-move"
+      onMouseDown={grab}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div
+        className={`border-2 ${
+          isHovered ? "border-dashed border-blue-500" : "border-zinc-300"
+        } select-none rounded-lg w-full bg-zinc-100 text-zinc-800`}
+      >
+        <div
+          className={`h-[10px] w-full rounded-t-md`}
+          style={{ backgroundColor: table.color }}
+        />
+        <div className="font-bold h-[40px] flex justify-between items-center border-b border-zinc-400 bg-zinc-200 px-3">
+          {table.name}
+        </div>
+        {table.fields.map((e, i) => (
+          <div
+            key={i}
+            className={`${
+              i === table.fields.length - 1 ? "" : "border-b border-gray-400"
+            } h-[36px] px-2 py-1 flex justify-between`}
+            onMouseEnter={() => setHoveredField(i)}
+            onMouseLeave={() => setHoveredField(-1)}
+          >
+            <div className={hoveredField === i ? "text-zinc-500" : ""}>
+              <button
+                className={`w-[9px] h-[9px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
+              />
+              {e.name}
+            </div>
+            <div className="text-zinc-400">{e.type}</div>
+          </div>
+        ))}
+      </div>
+    </foreignObject>
+  );
+}
+
+function Relationship({ relationship }) {
+  const pathRef = useRef();
+  let start = { x: 0, y: 0 };
+  let end = { x: 0, y: 0 };
+
+  let cardinalityStart = "1";
+  let cardinalityEnd = "1";
+
+  switch (relationship.cardinality) {
+    case Cardinality.MANY_TO_ONE:
+      cardinalityStart = "n";
+      cardinalityEnd = "1";
+      break;
+    case Cardinality.ONE_TO_MANY:
+      cardinalityStart = "1";
+      cardinalityEnd = "n";
+      break;
+    case Cardinality.ONE_TO_ONE:
+      cardinalityStart = "1";
+      cardinalityEnd = "1";
+      break;
+    default:
+      break;
+  }
+
+  const length = 32;
+
+  const [refAquired, setRefAquired] = useState(false);
+  useEffect(() => {
+    setRefAquired(true);
+  }, []);
+
+  if (refAquired) {
+    const pathLength = pathRef.current.getTotalLength();
+    const point1 = pathRef.current.getPointAtLength(length);
+    start = { x: point1.x, y: point1.y };
+    const point2 = pathRef.current.getPointAtLength(pathLength - length);
+    end = { x: point2.x, y: point2.y };
+  }
+
+  return (
+    <g className="select-none" onClick={() => console.log(pathRef.current)}>
+      <path
+        ref={pathRef}
+        d={calcPath(
+          relationship.startX,
+          relationship.endX,
+          relationship.startY,
+          relationship.endY,
+          relationship.startFieldId,
+          relationship.endFieldId
+        )}
+        stroke="gray"
+        fill="none"
+        strokeWidth={2}
+      />
+      {pathRef.current && (
+        <>
+          <circle cx={start.x} cy={start.y} r="12" fill="grey"></circle>
+          <text
+            x={start.x}
+            y={start.y}
+            fill="white"
+            strokeWidth="0.5"
+            textAnchor="middle"
+            alignmentBaseline="middle"
+          >
+            {cardinalityStart}
+          </text>
+          <circle cx={end.x} cy={end.y} r="12" fill="grey"></circle>
+          <text
+            x={end.x}
+            y={end.y}
+            fill="white"
+            strokeWidth="0.5"
+            textAnchor="middle"
+            alignmentBaseline="middle"
+          >
+            {cardinalityEnd}
+          </text>
+        </>
+      )}
+    </g>
+  );
+}
+
+function Canvas() {
+  const [tables, setTables] = useState(diagram.tables);
+  const [relationships, setRelationships] = useState(diagram.relationships);
+  const [dragging, setDragging] = useState(-1);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  const grabTable = (e, id) => {
+    setDragging(id);
+    setOffset({
+      x: e.clientX - tables[id].x,
+      y: e.clientY - tables[id].y,
+    });
+  };
+
+  const moveTable = (e) => {
+    if (dragging !== -1) {
+      const dx = e.clientX - offset.x;
+      const dy = e.clientY - offset.y;
+      setTables((prev) =>
+        prev.map((table, i) => {
+          if (i === dragging) {
+            setRelationships((prev) =>
+              prev.map((r) => {
+                if (r.startTableId === i) {
+                  return {
+                    ...r,
+                    startX: dx + 15,
+                    startY: dy + r.startFieldId * 36 + 69,
+                    endX: tables[r.endTableId].x + 15,
+                    endY: tables[r.endTableId].y + r.endFieldId * 36 + 69,
+                  };
+                } else if (r.endTableId === i) {
+                  return {
+                    ...r,
+                    startX: tables[r.startTableId].x + 15,
+                    startY: tables[r.startTableId].y + r.startFieldId * 36 + 69,
+                    endX: dx + 15,
+                    endY: dy + r.endFieldId * 36 + 69,
+                  };
+                }
+                return r;
+              })
+            );
+
+            return {
+              ...table,
+              x: dx,
+              y: dy,
+            };
+          }
+          return table;
+        })
+      );
+    }
+  };
+
+  const releaseTable = () => {
+    setDragging(-1);
+    setOffset({ x: 0, y: 0 });
+  };
+
+  return (
+    <svg
+      className="w-full h-full cursor-grab"
+      onMouseUp={releaseTable}
+      onMouseMove={moveTable}
+      onMouseLeave={releaseTable}
+    >
+      <defs>
+        <pattern
+          id="pattern-circles"
+          x="0"
+          y="0"
+          width="22"
+          height="22"
+          patternUnits="userSpaceOnUse"
+          patternContentUnits="userSpaceOnUse"
+        >
+          <circle
+            id="pattern-circle"
+            cx="4"
+            cy="4"
+            r="0.85"
+            fill="rgb(99, 152, 191)"
+          ></circle>
+        </pattern>
+      </defs>
+      <rect
+        x="0"
+        y="0"
+        width="100%"
+        height="100%"
+        fill="url(#pattern-circles)"
+      ></rect>
+      {tables.map((t, i) => (
+        <Table key={i} table={t} grab={(e) => grabTable(e, i)} />
+      ))}
+      {relationships.map((r, i) => (
+        <Relationship key={i} relationship={r} />
+      ))}
+    </svg>
+  );
+}
 
 export default function SignUp() {
   const [formValues, setFormValues] = useState({
-    captcha: false,
     username: "",
     email: "",
     password: "",
   });
   const [showPassword, setShowPassword] = useState(false);
-  const [showPassCriteria, setShowPassCriteria] = useState(false);
+  const [showVerified, setShowVerified] = useState(false);
+  const [resendCounter, setResendCounter] = useState(0);
 
   const handleChange = (e) =>
     setFormValues((prev) => ({
@@ -29,29 +344,61 @@ export default function SignUp() {
         email: formValues.email,
         password: formValues.password,
       })
-      .then((res) => {
+      .then(() => setShowVerified(true))
-        console.log(res);
-      })
       .catch(() => {});
   };
 
+  const resendEmail = async () => {
+    await axios
+      .post(`${import.meta.env.VITE_API_BACKEND_URL}/resend`, {
+        username: formValues.username,
+        email: formValues.email,
+        password: formValues.password,
+      })
+      .then(() => setResendCounter((prev) => prev + 1))
+      .catch((e) => {
+        if (e.response.status === 400)
+          Toast.error("Account has already been verified.");
+      });
+  };
+
   useEffect(() => {
     document.title = "Create account | drawDB";
   });
 
   return (
-    <div className="grid grid-cols-5 h-screen select-none">
+    <div className="grid grid-cols-7 h-screen bg-white">
-      <div className="bg-indigo-300 col-span-3 sm:hidden md:hidden lg:col-span-2 overflow-y-hidden"></div>
+      <div className="bg-white col-span-3 sm:hidden md:hidden lg:col-span-3 overflow-y-hidden relative">
-      <div className="col-span-2 lg:col-span-3 sm:col-span-full md:col-span-full flex flex-col justify-center items-center my-6">
+        <Canvas />
         <Link to="/">
-          <img src={logo} alt="logo" className="mx-auto h-[38px]" />
+          <img src={logo} className="absolute left-0 top-0 p-3" width={56} />
         </Link>
-        <div className="text-lg my-1.5 text-center font-bold text-slate-600">
+      </div>
-          Create your account today!
+      <div className="col-span-4 rounded-l-[2rem] bg-white sm:col-span-full md:col-span-full flex flex-col justify-center items-center border border-zinc-200 shadow-xl z-10">
+        <div className="w-[64%] sm:w-[80%] md:w-[72%]">
+          {!showVerified ? (
+            <>
+              <div className="text-2xl font-bold text-zinc-800 tracking-wide">
+                Create Account
+              </div>
+              <div className="flex items-center my-6 gap-4 font-semibold text-sm">
+                <button className="w-full flex gap-2 justify-center items-center px-3 py-2 rounded-md border border-zinc-300 hover:bg-neutral-100 transition-all duration-300">
+                  <img src={google_logo} width={22} />
+                  <div>Sign up with Google</div>
+                </button>
+                <button className="w-full flex gap-2 justify-center items-center px-3 py-2 rounded-md border border-zinc-300 hover:bg-neutral-100 transition-all duration-300">
+                  <img src={github_logo} width={22} />
+                  <div>Sign up with Github</div>
+                </button>
+              </div>
+              <div className="flex items-center justify-center my-1">
+                <hr className="border-zinc-300 flex-grow" />
+                <div className="mx-2 text-zinc-500">or</div>
+                <hr className="border-zinc-300 flex-grow" />
               </div>
               <div>
                 <label
-            className="mb-0.5 text-sm font-bold text-slate-500"
+                  className="font-semibold text-zinc-600 text-sm"
                   htmlFor="username"
                 >
                   Username
@@ -59,11 +406,11 @@ export default function SignUp() {
                 <input
                   id="username"
                   name="username"
-            className="py-1.5 px-3 block w-full mb-1 border rounded border-slate-400 hover:shadow focus:outline-blue-500"
+                  className="py-2 px-3 block w-full mb-0.5 border rounded border-zinc-400 border-opacity-70 hover:shadow focus:outline-blue-600"
                   onChange={handleChange}
                 />
                 <label
-            className="mb-0.5 text-sm font-bold text-slate-500"
+                  className="font-semibold text-zinc-600 text-sm"
                   htmlFor="email"
                 >
                   Email
@@ -71,73 +418,41 @@ export default function SignUp() {
                 <input
                   id="email"
                   name="email"
-            className="py-1.5 px-3 block w-full mb-1 border rounded border-slate-400 hover:shadow focus:outline-blue-500"
+                  className="py-2 px-3 block w-full mb-0.5 border rounded border-zinc-400 border-opacity-70 hover:shadow focus:outline-blue-600"
                   onChange={handleChange}
                 />
                 <label
-            className="mb-0.5 text-sm font-bold text-slate-500"
+                  className="font-semibold text-zinc-600 text-sm"
                   htmlFor="password"
                 >
                   Password
                 </label>
-          <div className="flex items-center mb-3">
+                <div className="mb-3 relative">
                   <input
                     id="password"
                     name="password"
                     type={showPassword ? "text" : "password"}
-              className="py-1.5 px-3 block w-full border rounded-l border-slate-400 hover:shadow focus:outline-blue-500"
+                    className="py-2 ps-3 pe-10 block w-full border rounded border-zinc-400 border-opacity-70 hover:shadow focus:outline-blue-600"
-              onFocus={() => setShowPassCriteria(true)}
                     onChange={handleChange}
                   />
                   <button
-              className="bg-gray-200 py-1.5 px-2 rounded-r border border-slate-400"
+                    className="absolute right-3 top-[50%] translate-y-[-50%] text-blue-900 text-lg"
-              onClick={() => {
+                    onClick={() => setShowPassword((prev) => !prev)}
-                setShowPassword((prev) => !prev);
-              }}
                   >
                     {showPassword ? (
-                <IconEyeOpened style={{ color: "rgb(22 74 110)" }} />
+                      <i className="bi bi-eye-fill"></i>
                     ) : (
-                <IconEyeClosedSolid style={{ color: "rgb(22 74 110)" }} />
+                      <i className="bi bi-eye-slash-fill"></i>
                     )}
                   </button>
                 </div>
-          {showPassCriteria && (
-            <Banner
-              fullMode={false}
-              type="danger"
-              bordered
-              style={{ marginBottom: "12px" }}
-              title={
-                <div className="font-bold text-sm">
-                  Password isn&apos;t secure
-                </div>
-              }
-              description={
-                <div className="w-[236px]">
-                  <ul className="list-disc">
-                    <li>Contain at least 8 characters</li>
-                    <li>Contain a special character</li>
-                    <li>Contain a number</li>
-                  </ul>
-                </div>
-              }
-              closeIcon={null}
-            ></Banner>
-          )}
-          <ReCAPTCHA
-            sitekey={import.meta.env.VITE_API_CAPTCHA_SITE_KEY}
-            onChange={() =>
-              setFormValues((prev) => ({ ...prev, captcha: true }))
-            }
-          />
                 <button
-            className="w-full px-3 py-2.5 my-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold"
+                  className="w-full px-3 py-2.5 mt-4 mb-2 bg-[#386b8f] hover:bg-[#467ba1] rounded-md text-white font-semibold"
                   onClick={onSubmit}
                 >
                   Sign up
                 </button>
-          <div className="text-sm text-center">
+                <div className="text-sm">
                   Already have an account?
                   <Link
                     to="/login"
@@ -146,17 +461,53 @@ export default function SignUp() {
                     Log in here.
                   </Link>
                 </div>
-          <div className="flex items-center justify-center my-1">
-            <hr className="border-slate-400 flex-grow" />
-            <div className="text-sm font-semibold mx-2 text-slate-400">or</div>
-            <hr className="border-slate-400 flex-grow" />
               </div>
-          <button className="w-full px-3 py-2.5 mt-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold">
+            </>
-            Google
+          ) : (
-          </button>
+            <>
-          <button className="w-full px-3 py-2.5 my-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold">
+              <div className="text-2xl font-bold text-zinc-800 tracking-wide">
-            Github
+                Verify Account
+              </div>
+              <div className="my-6 space-y-1.5">
+                <div>
+                  We {resendCounter == 0 ? "sent" : "resent"} a verification
+                  email to{" "}
+                  <span className="text-blue-700 font-bold">
+                    {formValues.email}
+                  </span>
+                  .
+                </div>
+                <div>Please check your inbox and verify your email.</div>
+              </div>
+              <div>
+                <div className="font-bold">Don&apos;t see the email?</div>
+                {resendCounter < 4 ? (
+                  <div className="mt-1.5 text-sm leading-6">
+                    If you haven&apos;t recieved the email after a few minutes,
+                    make sure to check your junk mail or{" "}
+                    <button
+                      onClick={resendEmail}
+                      className="text-blue-700 font-bold hover:underline"
+                    >
+                      resend verification
                     </button>
+                    .
+                  </div>
+                ) : (
+                  <div className="mt-1.5 text-sm leading-6">
+                    Looks like we&apos;re having trouble signing you up. Please
+                    try again in a little bit or contact us at{" "}
+                    <a
+                      href="mailto:hi"
+                      className="text-blue-700 hover:underline font-bold"
+                    >
+                      drawdb@gmail.com
+                    </a>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
         </div>
       </div>
     </div>

src/utils/index.js

@@ -624,13 +624,9 @@ const calcPath = (x1, x2, y1, y2, startFieldId, endFieldId, zoom = 1) => {
     r = Math.abs(y2 - y1) / 3;
     if (r <= 2) {
       if (x1 + tableWidth <= x2)
-        return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2 + 0.1} ${
+        return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2} ${y2 + 0.1}`;
-          y2 + 0.1
-        }`;
       else if (x2 + tableWidth < x1)
-        return `M ${x2 + tableWidth - 2 * offsetX} ${y2} L ${x1 + 0.1} ${
+        return `M ${x2 + tableWidth - 2 * offsetX} ${y2} L ${x1} ${y1 + 0.1}`;
-          y1 + 0.1
-        }`;
     }
   }
 

tailwind.config.js

@@ -9,7 +9,7 @@ export default {
       '2xl': {'max': '1535px'},
       'xl': {'min': '1024px'},
       'lg': {'max': '1023px'},
-      'md': {'max': '767px'},
+      'md': {'max': '820px'},
       'sm': {'max': '639px'}
     },
     extend: {}