Remove files from older version

This commit is contained in:
1ilit 2024-03-07 13:10:33 +02:00
parent 9bfbdceda2
commit aac1eb4584
23 changed files with 2 additions and 669 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,5 +0,0 @@
OpenMoji
https://openmoji.org
Licensed under Attribution-ShareAlike 4.0 International
https://creativecommons.org/licenses/by-sa/4.0/

View File

@ -1,30 +0,0 @@
import { useRef, useEffect } from "react";
import { motion, useInView, useAnimation } from "framer-motion";
export default function Reveal({ children }) {
const ref = useRef(null);
const isInView = useInView(ref, { once: true });
const mainControls = useAnimation();
useEffect(() => {
if (isInView) {
mainControls.start("visible");
}
}, [isInView, mainControls]);
return (
<div ref={ref}>
<motion.div
variants={{
hidden: { opacity: 0, y: 75 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate={mainControls}
transition={{ duration: 0.6 }}
>
{children}
</motion.div>
</div>
);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 KiB

View File

@ -1,64 +0,0 @@
import { useContext, useState } from "react";
import { Button, Input, Tag, Avatar } from "@douyinfe/semi-ui";
import { IconSend } from "@douyinfe/semi-icons";
import { socket } from "../data/socket";
import { MessageContext } from "../pages/Editor";
export default function Chat() {
const [message, setMessage] = useState("");
const { messages } = useContext(MessageContext);
return (
<div className="mx-5 flex flex-col h-full sidesheet-theme">
<div className="h-full flex-1 overflow-y-auto flex flex-col-reverse py-2">
{messages.map((m, i) =>
m.type === "note" ? (
<div key={i} className="text-center my-1">
<Tag size="large" color={m.action === "join" ? "blue" : "amber"}>
{m.message}
</Tag>
</div>
) : messages[i + 1].id !== m.id ? (
<div key={i} className="flex pt-1">
<Avatar
size="small"
alt={m.name}
color={m.color}
className="border border-color"
>
{m.name.split(" ").map((c) => c[0])}
</Avatar>
<div className="ms-2">
<div className="font-semibold">{m.name}</div>
<div>{m.message}</div>
</div>
</div>
) : (
<div key={i} className="ms-10">
{m.message}
</div>
)
)}
</div>
<form
onSubmit={(e) => {
e.preventDefault();
if (message.trim() !== "") {
socket.emit("send-message", message);
}
setMessage("");
}}
className="flex mt-2"
>
<Input
onChange={(v) => setMessage(v)}
placeholder="Message"
value={message}
autoComplete="off"
className="me-2"
></Input>
<Button icon={<IconSend />} htmlType="submit"></Button>
</form>
</div>
);
}

View File

@ -1,47 +0,0 @@
import { useContext, useState } from "react";
import { Button, Input, Avatar } from "@douyinfe/semi-ui";
import { IconSend } from "@douyinfe/semi-icons";
import { BotMessageContext } from "../pages/Editor";
import botIcon from "../assets/bot.png";
export default function DrawBot() {
const [message, setMessage] = useState("");
const { botMessages } = useContext(BotMessageContext);
return (
<div className="mx-5 flex flex-col h-full sidesheet-theme">
<div className="h-full flex-1 overflow-y-auto flex flex-col-reverse py-2">
{botMessages.map((m, i) => (
<div key={i} className="flex pt-1">
<Avatar size="small" src={botIcon}>
{m.sender === "bot" ? "drawBOT" : "You"}
</Avatar>
<div className="ms-2">
<div className="font-semibold">
{m.sender === "bot" ? "drawBOT" : "You"}
</div>
<div>{m.message}</div>
</div>
</div>
))}
</div>
<form
onSubmit={(e) => {
e.preventDefault();
setMessage("");
}}
className="flex mt-2"
>
<Input
onChange={(v) => setMessage(v)}
placeholder="Message"
value={message}
autoComplete="off"
className="me-2"
></Input>
<Button icon={<IconSend />} htmlType="submit"></Button>
</form>
</div>
);
}

View File

@ -1,71 +0,0 @@
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",
},
],
};

View File

@ -1,7 +0,0 @@
import { io } from "socket.io-client";
const URL = "http://localhost:5000";
export const socket = io(URL, {
autoConnect: false,
});

View File

@ -10,7 +10,7 @@ import {
} from "@douyinfe/semi-icons"; } from "@douyinfe/semi-icons";
import RichEditor from "../components/RichEditor"; import RichEditor from "../components/RichEditor";
import { LexicalComposer } from "@lexical/react/LexicalComposer"; import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { editorConfig } from "../data/editor_config"; import { editorConfig } from "../data/editorConfig";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"; import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { $generateHtmlFromNodes } from "@lexical/html"; import { $generateHtmlFromNodes } from "@lexical/html";
import { CLEAR_EDITOR_COMMAND } from "lexical"; import { CLEAR_EDITOR_COMMAND } from "lexical";

View File

@ -1,92 +0,0 @@
import { useEffect, useState } from "react";
import { useCookies } from "react-cookie";
import logo_light from "../assets/logo_light_160.png";
import logo_dark from "../assets/logo_dark_160.png";
const Page = {
MY_FILES: 0,
SHARED: 1,
TEMPLATES: 2,
TODOS: 3,
SETTINGS: 4,
};
export default function Dashboard() {
const [cookies] = useCookies(["username"]);
const [theme, setTheme] = useState("");
const [currentPage, setCurrentPage] = useState(Page.MY_FILES);
const buttons = [
{
icon: "fa-regular fa-folder-closed",
label: "My files",
onClick: () => setCurrentPage(Page.MY_FILES),
},
{
icon: "fa-solid fa-share-from-square",
label: "Shared",
onClick: () => setCurrentPage(Page.SHARED),
},
{
icon: "fa-solid fa-book",
label: "Templates",
onClick: () => setCurrentPage(Page.TEMPLATES),
},
{
icon: "fa-solid fa-list",
label: "My to-dos",
onClick: () => setCurrentPage(Page.TODOS),
},
{
icon: "fa-solid fa-diagram-project",
label: "Editor",
onClick: () => window.open("/editor"),
},
{
icon: "bi bi-gear",
label: "Settings",
onClick: () => setCurrentPage(Page.SETTINGS),
},
];
const pages = [
<div key={0}>My files</div>,
<div key={0}>Shared</div>,
<div key={0}>Templates</div>,
<div key={0}>Todos</div>,
<div key={0}>Settings</div>,
];
useEffect(() => {
const t = localStorage.getItem("theme");
setTheme(t);
if (t) document.body.setAttribute("theme-mode", t);
document.title = cookies.username + "'s Dashboard | drawDB";
document.body.setAttribute("class", "theme");
}, [setTheme, cookies]);
return (
<div className="grid grid-cols-10">
<div className="h-screen overflow-hidden border-r border-zinc-800 col-span-2 py-8 px-8">
<img
src={theme === "dark" ? logo_dark : logo_light}
alt="logo"
className="w-[70%]"
/>
<div className="font-semibold my-6 tracking-wide ">
{buttons.map((b, i) => (
<button
key={i}
onClick={b.onClick}
className="flex items-center w-full hover:bg-zinc-800 p-2 py-2.5 rounded-md cursor-pointer opacity-70 hover:opacity-100"
>
<i className={`${b.icon} me-5`}></i>
<div>{b.label}</div>
</button>
))}
</div>
</div>
<div className="col-span-8 py-8 px-24">{pages[currentPage]}</div>
</div>
);
}

View File

@ -1,8 +0,0 @@
import LandingPage from "./LandingPage";
import Dashboard from "./Dashboard";
import { useCookies } from "react-cookie";
export default function Home() {
const [cookies] = useCookies(["logged_in"]);
return <div>{cookies.logged_in ? <Dashboard /> : <LandingPage />}</div>;
}

View File

@ -1,141 +0,0 @@
import { useEffect, useState } from "react";
import { Link, useNavigate } 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 Canvas from "../components/SimpleCanvas";
import { diagram } from "../data/loginDiagram";
import { useCookies } from "react-cookie";
export default function Login() {
const [formValues, setFormValues] = useState({
email: "",
password: "",
});
const [showPassword, setShowPassword] = useState(false);
const [, setCookie] = useCookies(["logged_in", "username"]);
const navigate = useNavigate();
const handleChange = (e) =>
setFormValues((prev) => ({
...prev,
[e.target.name]: e.target.value,
}));
const onSubmit = async () => {
await axios
.post(
`${import.meta.env.VITE_API_BACKEND_URL}/login`,
{
email: formValues.email,
password: formValues.password,
},
{ withCredentials: true }
)
.then((res) => {
setCookie("logged_in", true, {
path: "/",
expires: new Date(Date.parse(res.data.session.cookie.expires)),
});
setCookie("username", res.data.username, {
path: "/",
expires: new Date(Date.parse(res.data.session.cookie.expires)),
});
navigate("/");
})
.catch(() => {});
};
useEffect(() => {
document.title = "Log in | drawDB";
});
return (
<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 sm:block my-6 gap-4 font-semibold text-sm">
<button className="sm:mb-2 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>
<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="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>
</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>
);
}

View File

@ -1,202 +0,0 @@
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 { Toast } from "@douyinfe/semi-ui";
import Canvas from "../components/SimpleCanvas";
import { diagram } from "../data/signupDiagram";
export default function SignUp() {
const [formValues, setFormValues] = useState({
username: "",
email: "",
password: "",
});
const [showPassword, setShowPassword] = useState(false);
const [showVerified, setShowVerified] = useState(false);
const [resendCounter, setResendCounter] = useState(0);
const handleChange = (e) =>
setFormValues((prev) => ({
...prev,
[e.target.name]: e.target.value,
}));
const onSubmit = async () => {
await axios
.post(`${import.meta.env.VITE_API_BACKEND_URL}/signup`, {
username: formValues.username,
email: formValues.email,
password: formValues.password,
})
.then(() => setShowVerified(true))
.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-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 diagram={diagram} />
<Link to="/">
<img src={logo} className="absolute left-0 top-0 p-3" width={56} />
</Link>
</div>
<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="font-semibold text-zinc-600 text-sm"
htmlFor="username"
>
Username
</label>
<input
id="username"
name="username"
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="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}
>
Sign up
</button>
<div className="text-sm">
Already have an account?
<Link
to="/login"
className="ms-2 font-semibold text-indigo-700 hover:underline"
>
Log in here.
</Link>
</div>
</div>
</>
) : (
<>
<div className="text-2xl font-bold text-zinc-800 tracking-wide">
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>
);
}

View File

@ -15,7 +15,7 @@ import {
import { IconSun, IconMoon } from "@douyinfe/semi-icons"; import { IconSun, IconMoon } from "@douyinfe/semi-icons";
import RichEditor from "../components/RichEditor"; import RichEditor from "../components/RichEditor";
import { LexicalComposer } from "@lexical/react/LexicalComposer"; import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { editorConfig } from "../data/editor_config"; import { editorConfig } from "../data/editorConfig";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"; import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { $generateHtmlFromNodes } from "@lexical/html"; import { $generateHtmlFromNodes } from "@lexical/html";
import { CLEAR_EDITOR_COMMAND } from "lexical"; import { CLEAR_EDITOR_COMMAND } from "lexical";