mirror of
https://github.com/drawdb-io/drawdb.git
synced 2025-09-20 06:25:26 +00:00
Remove files from older version
This commit is contained in:
1ilit
@@ -10,7 +10,7 @@ import {
|
||||
} from "@douyinfe/semi-icons";
|
||||
import RichEditor from "../components/RichEditor";
|
||||
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||
import { editorConfig } from "../data/editor_config";
|
||||
import { editorConfig } from "../data/editorConfig";
|
||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||
import { $generateHtmlFromNodes } from "@lexical/html";
|
||||
import { CLEAR_EDITOR_COMMAND } from "lexical";
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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't see the email?</div>
|
||||
{resendCounter < 4 ? (
|
||||
<div className="mt-1.5 text-sm leading-6">
|
||||
If you haven'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'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>
|
||||
);
|
||||
}
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
import { IconSun, IconMoon } from "@douyinfe/semi-icons";
|
||||
import RichEditor from "../components/RichEditor";
|
||||
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||
import { editorConfig } from "../data/editor_config";
|
||||
import { editorConfig } from "../data/editorConfig";
|
||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||
import { $generateHtmlFromNodes } from "@lexical/html";
|
||||
import { CLEAR_EDITOR_COMMAND } from "lexical";
|
||||
|
||||
Reference in New Issue
Block a user