From 144600c5bbf4e90688d8966e866460772a68af18 Mon Sep 17 00:00:00 2001 From: 1ilit Date: Wed, 3 Jan 2024 21:37:44 +0200 Subject: [PATCH] Redo signup page --- src/assets/github.png | Bin 0 -> 1681 bytes src/assets/google.png | Bin 0 -> 1892 bytes src/components/table.jsx | 4 +- src/pages/signup.jsx | 595 +++++++++++++++++++++++++++++++-------- src/utils/index.js | 8 +- tailwind.config.js | 2 +- 6 files changed, 478 insertions(+), 131 deletions(-) create mode 100644 src/assets/github.png create mode 100644 src/assets/google.png diff --git a/src/assets/github.png b/src/assets/github.png new file mode 100644 index 0000000000000000000000000000000000000000..a3a73d650c6ac724879db8fe2882a2690dbcd425 GIT binary patch literal 1681 zcmb`I`#;kQ1INE}$vvYy?!r*HmfK-6vAHaAHdaZSCSp9!I4=o$04O275Pm;N{$*Lo zpSdxezx5N|C?AZwXN=F!`hO8Sd-K=2M!cV|KVXK2ZzxDDZ>#ms1{*x>v`r*ZZ&r>` zRQpX+0YG{ZiEzavjeoeXR8(iG_?XOhm$qu#qn2LDT^TtAs5uD+1oyetay{JF6Dxv) zrbY6QN){^+l2+$26ivtd_7)0JgYd1oT(a$%Pivc_0nKxd%S{y;Q*BR6lp>C!1Uh zFnQi9uHV=ywV_|X_PbcxE$X4!=(_QOfHo9vz_8g=mn)0N-L-OZ`CaC&NFkj!vZXHC zgE|_oN}S!jgmx$*RdrxPja(GwI`sDqDC~@e`qds_Q+)i0^jaBR{CbC!+`H*!=XjfY zPn%TSqJzjYQ8I+3bXx1=fTNOkvSH{$?V;cw1zUx>!q|+XqIT=#9osd2N|G?6to#XyvzmY; zxV|_oe>JPot0KbO9T6fREG% zIsl02m{X=?Z)pV(q66J~DCZ;7G2S6ETKC2bp%F(SQMwlP7_|@0mxWu3c4? z8lqW1T$~aJ2ImqBWAhI#wY82X?HJzz!(FDvpNRAq(^vkWz%gi$#A>|1dThC3P$h9W z8pPDzx&VCY-W!z>_3y1%tdaMfqNUf!3mZVOj=DGR7)tOd-^w)@-HMr#>D;dPlxnh9 zK!Hkkz)Za4E~EAt08GUVN_X!WLt4V&3mvoRl1aCO0tNyPigKM~HW&fb0Ox{Mea?ba zTKSuQyKT;yRgKMotF6CbFJ70?qp9#2$6xco%Yc}ti8$vgEgLy3Mra@LNDksENb%CP zv)IgQT@`eS^Mlvi_PsjGu`cK_M~B6Jqtvxm(d8UNYo%ge$jSVyx%WLccuZ~jw^R|d zFE4U_w>kp$r}`@}$=0{3*4Ro9*Hdu>_E~(oiF8Tc`HGA_>V!$ylzm@eWidUt4E&v# zIZE)cNNr0@xuL9wI=7y&erI&vO7SDE?D*G1UH_SJ#60dE)Ok4$I#Z)WG=(~cS^!Tp z2Cr&=XnE zg~t=Fm>WQ~%yjO`Vl#rW+#lEs1f`Du3q~UJLTn>6AVjamoS{cabC<$sthwD=YEared&vKtZO&Vy2M((GYQCH%Wr?*v zRDA~s9m%XinJC}-;|`!POrjq5_ z3Jb}Wj5+_rzxB+q8LFmv7w$}g?z6Z!9U$@k=X&%YO2P zlaE|sd+YBxdl=&pZp=m8~p&@OL=YfW#GAIs}4qS`2=8JLO6yJ zZ#9nv0sNAvZzF-FprOy}D`$fRY;Mnf06T8@*w=L9i)R^9Nld)XZozio7~z9PA2_7% z#XRTiyYwGBf(=y9`Oyk1uW?T6w10dGYe1Gj8x7#^>TW3)e#ln(8c68)^(shrUqpi& Gp7Ia5%=>r% literal 0 HcmV?d00001 diff --git a/src/assets/google.png b/src/assets/google.png new file mode 100644 index 0000000000000000000000000000000000000000..fa72a27e887249aa3b6f178fbf367edadebd0799 GIT binary patch literal 1892 zcmX|Cc{r5o8~$d@;E2XDwjqQgd$NsivW{fu!OonA3&RBf0FR{w&IzjE z(cxr+GJ}4D2>>v(gN=)+d4!EIiLqp&1;vvneFz(qz9+>N`~*k5<^$(dFBK@W0%9~C zI6;^t{U1QBUX25kS+U!JT(;0)VaRH$gB`Mk+9MN+t0u)A8rbVVux??QKq^G;v?HMm z@vIgCkh=U+f_Ml+K1W-r8x1YetaXTIt*`*g4U&G&J02X}^5c7!$aXc4A$fkX4gD=l zcICV(_HMN9t-{=<(^^%2`uPvT>-Em%jJVX98Q0p%{IbvuJ(JlLCp%~0Ls$#@DM?t> z0^`a#o@38D{-xTCu_G{#~r>?Mc9WGQ+iCri|fmcBBZ$NjdW zU@J`&O5n@GLjyTjdtzRdQ%%bM{*4}ciF)uDyEePEbiS0gPmGqw4TO@46kGgNu#=>- z3?DmZJddKx#?89LN_j!_aPv$96C0o$SxL(mQ{YGmzVt+XGzd#i@Zcp8lsYXmH50|~ zj(Jp1MT}MR3k4x@StFH?)o-Xz1=;+X-gH}?&iUKT0d4yAV+OqHrk{0_uL+-)G9izY zL}ITp92)%7pg{SG{Dhjj1Zd+yzUxL#GW;y7bf!(BSpd^J-3vD5l(4%$QcDcIxBi#7 zY63-SUJQ2WCW+5?<|$`veAyn!(?%xA6Ly+7bLQSZ0SSM1c_o~Gr`k1gxwy+Hthj>T zyWP4%!15;A!s*kFU+5kVReNY%SwEP~uVr3yGQ?yeoM1{%I|JfWFNV`gr;!S0i3$?{ z7iG9$EN6s?c$DgEoFFZ%wHx_tyq-plwA?mQl7=BWO>v$rRl?(I2DNaUps(#c7rw#@ z2NV3d+a<&2H*lXQ#wVuJE;v~~N$EvRHflLca4v+vt;|Gm*21|&MEeEX!VbHr zp%Z!1$ZNWFpP5NKXyMKwoGW{;DzU#;F+BJ6%LJi&fYVs$i~X7%0U26t6zb0h3?#w0 zc7lcW=+lHA4-CWRg>LS z?R-i-@UAL3dT{6QT*pkny<4;lOlBa&*>g>-kBLJ9%nH0y4h|xqQV6P)jLS&vs(Wr3 z(sd$A3qkOAed`9nxE;eEnJ;5cA>N)IC~uM4P3(J!krNqQA7NWCQ79+Nw;f+wa)h7z zY!ZpY3hWg3d|h}ynNEdGzvt;!nQ`IX^VEsk8PF{KBLz&CB&IBx9Nd1@9{9>g=7BW7FJf*;-}>75uKz65?r|96q8N31;7yB)O| zA;B1t)!1F__ngDTr=0_DlRM8w)P|Ej)V+?xj}O3=2K<#4iO6OYM;`vwcipx)?M}7v zoM8J+0jg@FeqDKd!&5Ev4aIvgY>(0P$`*FplxmbiD8QcYCR*}-eeo@WL*PQs{*>(R z>@&PGoh5Rr$h4k7EOrzunaZptTN`n9*$c-Cc1IZ_N~SQ^Rlr?+hGuKVIB$t5TdSld zhwI5_<5IZjer}{!+S1TUF3M+qA&gpatuz8TwY(rzU_NC)BpPx7FvHO-!1-7q5M88A zdDU=uU#Hu&4JFKPHhUKbhGkzP2I%fDueJTUE<>EMKwfO=Ey5}#Ej1TPik97i1#vFH ztS2+%5G5}j&{Q_j5u0Y;K5NI#x)-ljeuRbbuG7+ejPDPP-^oZmZmW?{yFZ}@%Kxc; zd9K$Cb6-I1A6T+&&l@cyN{2KrMwL_^AZYrM--Z~rF!`T*XzUAFLgew6UFwEl&+%Q$&#jlp*P#322Kw$NuT ziJdvl><{k3!8%#pjnsBLD8q9n?7oIjLV+^p6vkc_*PcY<&nVPRC9XJM#W=!8ePiHU zZTWIZ2;CTlYhCxXIZOEoWwV_a>38hcL;SOJbD04)TQ!**L(^i%k5zV5R=*O^ca6zSOTJof|7}(qFXkn->J}#QMyr*kx`~g0 kMMbvbW0_k#hp0V{XYio?zIYEI=vx3RP3>^?#@ {isHovered && (
diff --git a/src/pages/signup.jsx b/src/pages/signup.jsx index 402eec2..650ed00 100644 --- a/src/pages/signup.jsx +++ b/src/pages/signup.jsx @@ -1,20 +1,335 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState, useRef } from "react"; import { Link } from "react-router-dom"; -import logo from "../assets/logo_light_46.png"; -import ReCAPTCHA from "react-google-recaptcha"; -import { IconEyeClosedSolid, IconEyeOpened } from "@douyinfe/semi-icons"; -import { Banner } from "@douyinfe/semi-ui"; +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 ( + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > +
+
+
+ {table.name} +
+ {table.fields.map((e, i) => ( +
setHoveredField(i)} + onMouseLeave={() => setHoveredField(-1)} + > +
+
+
{e.type}
+
+ ))} +
+ + ); +} + +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 ( + console.log(pathRef.current)}> + + {pathRef.current && ( + <> + + + {cardinalityStart} + + + + {cardinalityEnd} + + + )} + + ); +} + +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 ( + + + + + + + + {tables.map((t, i) => ( + grabTable(e, i)} /> + ))} + {relationships.map((r, i) => ( + + ))} + + ); +} export default function SignUp() { const [formValues, setFormValues] = useState({ - captcha: false, username: "", email: "", password: "", }); const [showPassword, setShowPassword] = useState(false); - const [showPassCriteria, setShowPassCriteria] = useState(false); + const [showVerified, setShowVerified] = useState(false); + const [resendCounter, setResendCounter] = useState(0); const handleChange = (e) => setFormValues((prev) => ({ @@ -29,134 +344,170 @@ export default function SignUp() { email: formValues.email, password: formValues.password, }) - .then((res) => { - console.log(res); - }) + .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 ( -
-
-
+
+
+ - logo + -
- Create your account today! -
-
- - - - - -
- setShowPassCriteria(true)} - onChange={handleChange} - /> - -
- {showPassCriteria && ( - - Password isn't secure +
+
+
+ {!showVerified ? ( + <> +
+ Create Account +
+
+ + +
+
+
+
or
+
+
+
+ + + + + +
+ +
- } - description={ -
-
    -
  • Contain at least 8 characters
    • -
  • Contain a special character
    • -
  • Contain a number
    • -
+ +
+ Already have an account? + + Log in here. +
- } - closeIcon={null} - > +
+ + ) : ( + <> +
+ Verify Account +
+
+
+ We {resendCounter == 0 ? "sent" : "resent"} a verification + email to{" "} + + {formValues.email} + + . +
+
Please check your inbox and verify your email.
+
+
+
Don't see the email?
+ {resendCounter < 4 ? ( +
+ If you haven't recieved the email after a few minutes, + make sure to check your junk mail or{" "} + + . +
+ ) : ( +
+ Looks like we're having trouble signing you up. Please + try again in a little bit or contact us at{" "} + + drawdb@gmail.com + +
+ )} +
+ )} - - setFormValues((prev) => ({ ...prev, captcha: true })) - } - /> - -
- Already have an account? - - Log in here. - -
-
-
-
or
-
-
- -
diff --git a/src/utils/index.js b/src/utils/index.js index 5c88750..8a152ce 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -624,13 +624,9 @@ const calcPath = (x1, x2, y1, y2, startFieldId, endFieldId, zoom = 1) => { r = Math.abs(y2 - y1) / 3; if (r <= 2) { if (x1 + tableWidth <= x2) - return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2 + 0.1} ${ - y2 + 0.1 - }`; + return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2} ${y2 + 0.1}`; else if (x2 + tableWidth < x1) - return `M ${x2 + tableWidth - 2 * offsetX} ${y2} L ${x1 + 0.1} ${ - y1 + 0.1 - }`; + return `M ${x2 + tableWidth - 2 * offsetX} ${y2} L ${x1} ${y1 + 0.1}`; } } diff --git a/tailwind.config.js b/tailwind.config.js index 747ef68..619a0f9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,7 +9,7 @@ export default { '2xl': {'max': '1535px'}, 'xl': {'min': '1024px'}, 'lg': {'max': '1023px'}, - 'md': {'max': '767px'}, + 'md': {'max': '820px'}, 'sm': {'max': '639px'} }, extend: {}