Redo login page
This commit is contained in:
1ilit
parent
144600c5bb
commit
679a58a9a3
244
src/components/AuthCanvas.jsx
Normal file
244
src/components/AuthCanvas.jsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
135
src/data/loginDiagram.js
Normal file
135
src/data/loginDiagram.js
Normal file
@ -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",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
71
src/data/signupDiagram.js
Normal file
71
src/data/signupDiagram.js
Normal file
@ -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",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -1,8 +1,11 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import logo from "../assets/logo_light_46.png";
|
import logo from "../assets/icon_dark_64.png";
|
||||||
import { IconEyeClosedSolid, IconEyeOpened } from "@douyinfe/semi-icons";
|
import google_logo from "../assets/google.png";
|
||||||
|
import github_logo from "../assets/github.png";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import Canvas from "../components/AuthCanvas";
|
||||||
|
import { diagram } from "../data/loginDiagram";
|
||||||
|
|
||||||
export default function Login() {
|
export default function Login() {
|
||||||
const [formValues, setFormValues] = useState({
|
const [formValues, setFormValues] = useState({
|
||||||
@ -23,9 +26,7 @@ export default function Login() {
|
|||||||
email: formValues.email,
|
email: formValues.email,
|
||||||
password: formValues.password,
|
password: formValues.password,
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then(() => {})
|
||||||
console.log(res);
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -34,84 +35,89 @@ export default function Login() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-5 h-screen select-none">
|
<div className="grid grid-cols-7 h-screen bg-white">
|
||||||
<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">
|
<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">
|
||||||
<Link to="/">
|
<div className="w-[70%] sm:w-[80%] md:w-[75%]">
|
||||||
<img src={logo} alt="logo" className="mx-auto h-[38px]" />
|
<div className="text-2xl font-bold text-zinc-800 tracking-wide">
|
||||||
</Link>
|
Welcome back!
|
||||||
<div className="text-lg my-1.5 text-center font-bold text-slate-600">
|
</div>
|
||||||
Welcome back!
|
<div className="flex items-center my-6 gap-4 font-semibold text-sm">
|
||||||
</div>
|
<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">
|
||||||
<div className="w-[54%] sm:w-[70%]">
|
<img src={google_logo} width={22} />
|
||||||
<label
|
<div>Log in with Google</div>
|
||||||
className="mb-0.5 text-sm font-bold text-slate-500"
|
</button>
|
||||||
htmlFor="email"
|
<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} />
|
||||||
Email
|
<div>Log in with Github</div>
|
||||||
</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)" }} />
|
|
||||||
)}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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'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">
|
<div className="flex items-center justify-center my-1">
|
||||||
<hr className="border-slate-400 flex-grow" />
|
<hr className="border-zinc-300 flex-grow" />
|
||||||
<div className="text-sm font-semibold mx-2 text-slate-400">or</div>
|
<div className="mx-2 text-zinc-500">or</div>
|
||||||
<hr className="border-slate-400 flex-grow" />
|
<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>
|
</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>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,325 +1,12 @@
|
|||||||
import { useEffect, useState, useRef } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import logo from "../assets/icon_dark_64.png";
|
import logo from "../assets/icon_dark_64.png";
|
||||||
import google_logo from "../assets/google.png";
|
import google_logo from "../assets/google.png";
|
||||||
import github_logo from "../assets/github.png";
|
import github_logo from "../assets/github.png";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { Cardinality } from "../data/data";
|
|
||||||
import { calcPath } from "../utils";
|
|
||||||
import { Toast } from "@douyinfe/semi-ui";
|
import { Toast } from "@douyinfe/semi-ui";
|
||||||
|
import Canvas from "../components/AuthCanvas";
|
||||||
const xOffset = window.innerWidth * 0.42 * 0.15;
|
import { diagram } from "../data/signupDiagram";
|
||||||
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() {
|
export default function SignUp() {
|
||||||
const [formValues, setFormValues] = useState({
|
const [formValues, setFormValues] = useState({
|
||||||
@ -369,7 +56,7 @@ export default function SignUp() {
|
|||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-7 h-screen bg-white">
|
<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">
|
<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="/">
|
<Link to="/">
|
||||||
<img src={logo} className="absolute left-0 top-0 p-3" width={56} />
|
<img src={logo} className="absolute left-0 top-0 p-3" width={56} />
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user