From 679a58a9a3daa4adf866bc94fe7de524a77011a1 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Fri, 5 Jan 2024 21:38:59 +0200
Subject: [PATCH] Redo login page

---
 src/components/AuthCanvas.jsx | 244 ++++++++++++++++++++++++++
 src/data/loginDiagram.js      | 135 ++++++++++++++
 src/data/signupDiagram.js     |  71 ++++++++
 src/pages/login.jsx           | 160 +++++++++--------
 src/pages/signup.jsx          | 321 +---------------------------------
 5 files changed, 537 insertions(+), 394 deletions(-)
 create mode 100644 src/components/AuthCanvas.jsx
 create mode 100644 src/data/loginDiagram.js
 create mode 100644 src/data/signupDiagram.js

diff --git a/src/components/AuthCanvas.jsx b/src/components/AuthCanvas.jsx
new file mode 100644
index 0000000..d1965fb
--- /dev/null
+++ b/src/components/AuthCanvas.jsx
@@ -0,0 +1,244 @@
+import { useEffect, useState, useRef } from "react";
+import { Cardinality } from "../data/data";
+import { calcPath } from "../utils";
+
+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>
+  );
+}
+
+export default function Canvas({ diagram }) {
+  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>
+  );
+}
diff --git a/src/data/loginDiagram.js b/src/data/loginDiagram.js
new file mode 100644
index 0000000..9c02131
--- /dev/null
+++ b/src/data/loginDiagram.js
@@ -0,0 +1,135 @@
+const xOffset = window.innerWidth * 0.57 * 0.09;
+export const diagram = {
+  tables: [
+    {
+      name: "galactic_users",
+      x: xOffset + 75,
+      y: window.innerHeight * 0.23 - (50 + 4 * 36 + 7) * 0.5,
+      fields: [
+        {
+          name: "id",
+          type: "INT",
+        },
+        {
+          name: "username",
+          type: "VARCHAR",
+        },
+        {
+          name: "email",
+          type: "VARCHAR",
+        },
+        {
+          name: "password",
+          type: "VARCHAR",
+        },
+      ],
+      color: "#7d9dff",
+    },
+    {
+      id: 1,
+      name: "celestial_data",
+      x: xOffset + 27,
+      y: window.innerHeight * 0.72 - (50 + 5 * 36 + 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",
+    },
+    {
+      id: 2,
+      name: "astro_mine",
+      x: xOffset + 336,
+      y: window.innerHeight * 0.72 - (50 + 3 * 36 + 7) * 0.5,
+      fields: [
+        {
+          name: "id",
+          type: "INT",
+        },
+        {
+          name: "asteroid_id",
+          type: "INT",
+        },
+        {
+          name: "data_id",
+          type: "INT",
+        },
+      ],
+      color: "#6360f7",
+    },
+    {
+      id: 3,
+      name: "asteroid",
+      x: xOffset + 310,
+      y: window.innerHeight * 0.23 - (50 + 3 * 36 + 7) * 0.5,
+      fields: [
+        {
+          name: "id",
+          type: "INT",
+        },
+        {
+          name: "name",
+          type: "VARCHAR",
+        },
+        {
+          name: "location",
+          type: "VARCHAR",
+        },
+      ],
+      color: "#3cde7d",
+    },
+  ],
+  relationships: [
+    {
+      startTableId: 1,
+      startFieldId: 1,
+      endTableId: 0,
+      endFieldId: 0,
+      startX: xOffset + 42,
+      startY: window.innerHeight * 0.72 - (4 * 36 + 50 + 7) * 0.5 + (50 + 18 * 2),
+      endX: xOffset + 90,
+      endY: window.innerHeight * 0.23 - (4 * 36 + 50 + 7) * 0.5 + (50 + 18 * 1),
+      cardinality: "Many to one",
+    },
+    {
+      startTableId: 2,
+      startFieldId: 2,
+      endTableId: 1,
+      endFieldId: 0,
+      startX: xOffset + 351,
+      startY: window.innerHeight * 0.72 - (3 * 36 + 50 + 7) * 0.5 + (50 + 18 * 5),
+      endX: xOffset + 42,
+      endY: window.innerHeight * 0.72 - (5 * 36 + 50 + 7) * 0.5 + (50 + 18 * 1),
+      cardinality: "One to one",
+    },
+    {
+      startTableId: 2,
+      startFieldId: 1,
+      endTableId: 3,
+      endFieldId: 0,
+      startX: xOffset + 351,
+      startY: window.innerHeight * 0.72 - (3 * 36 + 50 + 7) * 0.5 + (50 + 18 * 3),
+      endX: xOffset + 325,
+      endY: window.innerHeight * 0.23 - (3 * 36 + 50 + 7) * 0.5 + (50 + 18 * 1),
+      cardinality: "Many to one",
+    },
+  ],
+};
\ No newline at end of file
diff --git a/src/data/signupDiagram.js b/src/data/signupDiagram.js
new file mode 100644
index 0000000..d3ca800
--- /dev/null
+++ b/src/data/signupDiagram.js
@@ -0,0 +1,71 @@
+const xOffset = window.innerWidth * 0.42 * 0.15;
+export 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: "Many to one",
+    },
+  ],
+};
\ No newline at end of file
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index 565d9f2..3d6e5b0 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -1,8 +1,11 @@
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import logo from "../assets/logo_light_46.png";
-import { IconEyeClosedSolid, IconEyeOpened } from "@douyinfe/semi-icons";
+import logo from "../assets/icon_dark_64.png";
+import google_logo from "../assets/google.png";
+import github_logo from "../assets/github.png";
 import axios from "axios";
+import Canvas from "../components/AuthCanvas";
+import { diagram } from "../data/loginDiagram";
 
 export default function Login() {
   const [formValues, setFormValues] = useState({
@@ -23,9 +26,7 @@ export default function Login() {
         email: formValues.email,
         password: formValues.password,
       })
-      .then((res) => {
-        console.log(res);
-      })
+      .then(() => {})
       .catch(() => {});
   };
 
@@ -34,84 +35,89 @@ export default function Login() {
   });
 
   return (
-    <div className="grid grid-cols-5 h-screen select-none">
-      <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 mx-2">
-        <Link to="/">
-          <img src={logo} alt="logo" className="mx-auto h-[38px]" />
-        </Link>
-        <div className="text-lg my-1.5 text-center font-bold text-slate-600">
-          Welcome back!
-        </div>
-        <div className="w-[54%] sm:w-[70%]">
-          <label
-            className="mb-0.5 text-sm font-bold text-slate-500"
-            htmlFor="email"
-          >
-            Email
-          </label>
-          <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"
-            onChange={handleChange}
-          />
-          <label
-            className="mb-0.5 text-sm font-bold text-slate-500"
-            htmlFor="password"
-          >
-            Password
-          </label>
-          <div className="flex items-center mb-3">
-            <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"
-              onChange={handleChange}
-            />
-            <button
-              className="bg-gray-200 py-1.5 px-2 rounded-r border border-slate-400"
-              onClick={() => {
-                setShowPassword((prev) => !prev);
-              }}
-            >
-              {showPassword ? (
-                <IconEyeOpened style={{ color: "rgb(22 74 110)" }} />
-              ) : (
-                <IconEyeClosedSolid style={{ color: "rgb(22 74 110)" }} />
-              )}
+    <div className="grid grid-cols-7 h-screen bg-white">
+      <div className="col-span-3 rounded-r-[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-[70%] sm:w-[80%] md:w-[75%]">
+          <div className="text-2xl font-bold text-zinc-800 tracking-wide">
+            Welcome back!
+          </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>Log in 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>Log in with Github</div>
             </button>
           </div>
-
-          <button
-            className="w-full px-3 py-2.5 my-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold"
-            onClick={onSubmit}
-          >
-            Log in
-          </button>
-          <div className="text-sm text-center">
-            Don&apos;t have an account?
-            <Link
-              to="/signup"
-              className="ms-2 font-semibold text-indigo-700 hover:underline"
-            >
-              Sign up 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" />
+            <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="font-semibold text-zinc-600 text-sm"
+              htmlFor="email"
+            >
+              Email
+            </label>
+            <input
+              id="email"
+              name="email"
+              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="font-semibold text-zinc-600 text-sm"
+              htmlFor="password"
+            >
+              Password
+            </label>
+            <div className="mb-3 relative">
+              <input
+                id="password"
+                name="password"
+                type={showPassword ? "text" : "password"}
+                className="py-2 ps-3 pe-10 block w-full border rounded border-zinc-400 border-opacity-70 hover:shadow focus:outline-blue-600"
+                onChange={handleChange}
+              />
+              <button
+                className="absolute right-3 top-[50%] translate-y-[-50%] text-blue-900 text-lg"
+                onClick={() => setShowPassword((prev) => !prev)}
+              >
+                {showPassword ? (
+                  <i className="bi bi-eye-fill"></i>
+                ) : (
+                  <i className="bi bi-eye-slash-fill"></i>
+                )}
+              </button>
+            </div>
+            <button
+              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}
+            >
+              Log in
+            </button>
+            <div className="text-sm">
+              Already have an account?
+              <Link
+                to="/signup"
+                className="ms-2 font-semibold text-indigo-700 hover:underline"
+              >
+                Sign up here.
+              </Link>
+            </div>
           </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">
-            Github
-          </button>
         </div>
       </div>
-      <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-4 sm:hidden md:hidden overflow-y-hidden relative">
+        <Canvas diagram={diagram} />
+        <Link to="/">
+          <img src={logo} className="absolute right-0 top-0 p-3" width={56} />
+        </Link>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/signup.jsx b/src/pages/signup.jsx
index 650ed00..85be38d 100644
--- a/src/pages/signup.jsx
+++ b/src/pages/signup.jsx
@@ -1,325 +1,12 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import logo from "../assets/icon_dark_64.png";
 import google_logo from "../assets/google.png";
 import github_logo from "../assets/github.png";
 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>
-  );
-}
+import Canvas from "../components/AuthCanvas";
+import { diagram } from "../data/signupDiagram";
 
 export default function SignUp() {
   const [formValues, setFormValues] = useState({
@@ -369,7 +56,7 @@ export default function SignUp() {
   return (
     <div className="grid grid-cols-7 h-screen bg-white">
       <div className="bg-white col-span-3 sm:hidden md:hidden lg:col-span-3 overflow-y-hidden relative">
-        <Canvas />
+        <Canvas diagram={diagram} />
         <Link to="/">
           <img src={logo} className="absolute left-0 top-0 p-3" width={56} />
         </Link>