From 4e69389a2d7eb82bccfb4ef5aa928e2312c68e57 Mon Sep 17 00:00:00 2001 From: tobySolutions Date: Tue, 22 Oct 2024 11:08:09 +0100 Subject: [PATCH 1/4] feat: add auth pages --- .DS_Store | Bin 0 -> 6148 bytes packages/.DS_Store | Bin 0 -> 6148 bytes packages/frontend/package-lock.json | 18 +++ packages/frontend/package.json | 2 + packages/frontend/src/lib/Button.tsx | 26 +++ packages/frontend/src/lib/Input.tsx | 149 ++++++++++++++++++ .../frontend/src/lib/icons/MetamaskIcon.tsx | 147 +++++++++++++++++ packages/frontend/src/routes/Routes.tsx | 2 + packages/frontend/src/routes/login/index.tsx | 139 +++++++++++++++- packages/frontend/src/routes/signup/index.tsx | 142 +++++++++++++++++ packages/frontend/src/utils/utils.ts | 2 + packages/frontend/tailwind.config.js | 19 +++ 12 files changed, 644 insertions(+), 2 deletions(-) create mode 100644 .DS_Store create mode 100644 packages/.DS_Store create mode 100644 packages/frontend/src/lib/Button.tsx create mode 100644 packages/frontend/src/lib/Input.tsx create mode 100644 packages/frontend/src/lib/icons/MetamaskIcon.tsx create mode 100644 packages/frontend/src/routes/signup/index.tsx create mode 100644 packages/frontend/src/utils/utils.ts diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c752985b60d0101c34ad5500087c65242e0ca60f GIT binary patch literal 6148 zcmeHK%Z}496us^gnldw}yrkJ6MPggZ0MiP@rqgK`BLRykf(4+`G+_vn##Pg*LRF=% z;UD+~wtNZy!V1o{Jt#?Au|sI&E7`}7d+g-+#*T?dw5I-jq6!f?NQ}iR$krJ5b6T;2 zY1sw}HO6!5Qs+35120K1L>)?fztTewZwrS=wO`6mBHE#t zB>5CjkA|u=r3ke|fA@cQ-*UWbG@?EY=nVNO{O^J#RlP?r*fAjZd$;gY;n|=32QJ75j_kW1OR`Js1l2dZFowwZ&a@L*nC)1?WAHU|> z3n?S-yxjL*hQX{?xp^exNk5E(u_A(qyBiYC_A_A+R)#YFG%&|C*fhA*h#r{GRG_8`bHxyvj&|4hH4QE`YB~vX z`4DDiVQwfw&5rS1-*1AaVkl5I7sZmjond4X$_$b~(QieX43&5tqrAD;C?2mww!Dd#0f2zQ5cMaS> literal 0 HcmV?d00001 diff --git a/packages/.DS_Store b/packages/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..0bf0f67ae3aeee3dc904e6fb29d34b54b7f5e83f GIT binary patch literal 6148 zcmeHK!A=4(5S;?b5@NzZ6OT>25=8}~@v@>Gyo%9-8r)?uZdkVjmT({>d)ANf>X-OC zI@1=T0pm%dW+s`w+38Go``WZS03aH}U=yGO01hf)rhv^Hp?=aC$yiSoQRp!`5JPYr zskR@@M6=^JGC*sW2Om6WLl@qypYpMXw#7c``imB{Xe-=69~7>1GB^J5t9XAj==qTz z|Hf^mM9J$Tm_HJG715*$TVe>4j(%z5T#KnelMccbAHu#_ z*a}7Hx8wLyhl6kpa?1=b10NZn+7G2f_y5u7^}i0{h8bW6{wD(>ci22^;N0xpIx|bU vYbEM6Dhb7<2H#T9&{r|W(p9{Qss;U$3`EyrY7jjr{3D=g;D#CaQ3hTCm0e(T literal 0 HcmV?d00001 diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json index d54b5d9..43fd993 100644 --- a/packages/frontend/package-lock.json +++ b/packages/frontend/package-lock.json @@ -8,8 +8,10 @@ "name": "frontend", "version": "0.0.0", "dependencies": { + "clsx": "^2.1.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.27.0", "zustand": "^5.0.0" }, @@ -1682,6 +1684,14 @@ "node": ">= 6" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3011,6 +3021,14 @@ "react": "^18.3.1" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-router": { "version": "6.27.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 552fef2..47f69b4 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -10,8 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "clsx": "^2.1.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.27.0", "zustand": "^5.0.0" }, diff --git a/packages/frontend/src/lib/Button.tsx b/packages/frontend/src/lib/Button.tsx new file mode 100644 index 0000000..d798717 --- /dev/null +++ b/packages/frontend/src/lib/Button.tsx @@ -0,0 +1,26 @@ +import clsx from "clsx"; + +type ButtonProps = { + isDisabled?: boolean; + className?: string; +}; + +function Button({ isDisabled, className }: ButtonProps) { + return ( + + ); +} + +export default Button; diff --git a/packages/frontend/src/lib/Input.tsx b/packages/frontend/src/lib/Input.tsx new file mode 100644 index 0000000..8470c36 --- /dev/null +++ b/packages/frontend/src/lib/Input.tsx @@ -0,0 +1,149 @@ +import clsx from "clsx"; +import React, { useEffect, useState } from "react"; + +interface InputProps { + type?: "text" | "email" | "textarea" | "password"; + value: string; + onChange?: (value: string) => void; + label: string; + readOnly?: boolean; + name: string; + isRequired: boolean; + minLength?: number; + maxLength?: number; + bottomText?: string; + pattern?: string; + className?: string; + disabled?: boolean; + [key: string]: any; +} + +interface IsRequiredComponentProps { + isRequired: boolean; +} + +const Input: React.FC = ({ + type = "text", + value: propValue = "", + onChange, + label = "Name", + readOnly, + isRequired, + bottomText, + pattern, + minLength, + maxLength, + error, + disabled, + className, + name, + ...props +}) => { + const [inputValue, setInputValue] = useState(propValue); + const [showPassword, setShowPassword] = useState(false); + + useEffect(() => { + setInputValue(propValue); + }, [propValue]); + + const handleChange = ( + e: + | React.ChangeEvent + | React.ChangeEvent + ) => { + const newValue = e.target.value; + setInputValue(newValue); + if (onChange) { + onChange(newValue); + } + }; + + const togglePasswordVisibility = () => { + setShowPassword((prev) => !prev); + }; + + if (type === "textarea") { + return ( +
+ +