Remove files from older version
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.5 KiB |
@ -1,5 +0,0 @@
|
||||
OpenMoji
|
||||
https://openmoji.org
|
||||
|
||||
Licensed under Attribution-ShareAlike 4.0 International
|
||||
https://creativecommons.org/licenses/by-sa/4.0/
|
@ -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>
|
||||
);
|
||||
}
|
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 8.4 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 6.1 KiB |
@ -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>
|
||||
);
|
||||
}
|
@ -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>
|
||||
);
|
||||
}
|
@ -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",
|
||||
},
|
||||
],
|
||||
};
|
@ -1,7 +0,0 @@
|
||||
import { io } from "socket.io-client";
|
||||
|
||||
const URL = "http://localhost:5000";
|
||||
|
||||
export const socket = io(URL, {
|
||||
autoConnect: false,
|
||||
});
|
@ -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";
|
||||
|