From 13e4fc83204ef7b6c3ec8bbd6c8598e6c1de0202 Mon Sep 17 00:00:00 2001 From: Derrick Kim Date: Sat, 2 Dec 2023 21:48:57 -0500 Subject: [PATCH 1/5] add login/home page style --- client/src/App.tsx | 5 ++ client/src/components/Home/HomePrompt.tsx | 34 +++++++++ client/src/components/Home/NavBarUpdated.tsx | 27 ++++--- client/src/components/Login/FormInput.tsx | 40 ++++++++--- client/src/components/Login/LoginForm.tsx | 18 ++--- .../src/components/Login/ValidationAlert.tsx | 20 ++++++ client/src/data/formData.ts | 26 ++++++- client/src/images/cait_thumbnail_1.svg | 14 ++++ client/src/images/cait_thumbnail_2.svg | 9 +++ client/src/images/cait_thumbnail_3.svg | 9 +++ client/src/images/check.svg | 3 + client/src/images/error.svg | 3 + client/src/images/eye_off.svg | 10 +++ client/src/images/eye_on.svg | 3 + client/src/images/google.svg | 5 ++ client/src/images/or.svg | 3 + client/src/index.css | 2 +- client/src/pages/LoginPage.tsx | 8 +-- client/src/pages/ReturnHomePage.tsx | 72 +++++++++++++++++++ client/src/pages/SignUpPage.tsx | 7 +- client/tailwind.config.js | 5 +- 21 files changed, 276 insertions(+), 47 deletions(-) create mode 100644 client/src/components/Home/HomePrompt.tsx create mode 100644 client/src/components/Login/ValidationAlert.tsx create mode 100644 client/src/images/cait_thumbnail_1.svg create mode 100644 client/src/images/cait_thumbnail_2.svg create mode 100644 client/src/images/cait_thumbnail_3.svg create mode 100644 client/src/images/check.svg create mode 100644 client/src/images/error.svg create mode 100644 client/src/images/eye_off.svg create mode 100644 client/src/images/eye_on.svg create mode 100644 client/src/images/google.svg create mode 100644 client/src/images/or.svg create mode 100644 client/src/pages/ReturnHomePage.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index c4116fe..83716bb 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -9,6 +9,7 @@ import LoginPage from "./pages/LoginPage.tsx"; import SignUpPage from "./pages/SignUpPage.tsx"; import RequestsPurchasingPage from "./pages/RequestPurchasingPage.tsx"; import RequestPurchaseSuccess from "./pages/RequestPurchaseSuccess.tsx"; +import ReturnHomePage from "./pages/ReturnHomePage.tsx"; function App() { return ( @@ -36,6 +37,10 @@ function App() { } /> + } + /> } diff --git a/client/src/components/Home/HomePrompt.tsx b/client/src/components/Home/HomePrompt.tsx new file mode 100644 index 0000000..797b90b --- /dev/null +++ b/client/src/components/Home/HomePrompt.tsx @@ -0,0 +1,34 @@ +import React from "react"; + +type Props = { + titleText: string; + subText: string; + buttonText: string; + onClick: () => void; + image?: string; + imageStyle?: string; + textStyle?: string; + className?: string; +} +const HomePrompt = ({ + titleText, + subText, + buttonText, + onClick, + image, + imageStyle, + textStyle, + className +}: Props) => { + return ( +
+ {image && } +
{titleText}
+
{subText}
+ +
+ ) +} + + +export default HomePrompt; diff --git a/client/src/components/Home/NavBarUpdated.tsx b/client/src/components/Home/NavBarUpdated.tsx index 77ba087..7962bd2 100644 --- a/client/src/components/Home/NavBarUpdated.tsx +++ b/client/src/components/Home/NavBarUpdated.tsx @@ -13,8 +13,8 @@ const Navbar = () => { const activeButtonStyle = "bg-DFB2AA"; return ( -
-
+
+
Logo
-
- +
+ - + - + - - - - {/* */} +
diff --git a/client/src/components/Login/FormInput.tsx b/client/src/components/Login/FormInput.tsx index 43c9848..8d8f4f9 100644 --- a/client/src/components/Login/FormInput.tsx +++ b/client/src/components/Login/FormInput.tsx @@ -1,35 +1,53 @@ -import React from "react"; +import React, { useState } from "react"; +import ValidationAlert from "./ValidationAlert"; +import { passwordValidation } from "../../data/formData"; +import EyeOff from "../../images/eye_off.svg"; +import EyeOn from "../../images/eye_on.svg"; export type FormInputProps = React.InputHTMLAttributes & { label: string; className?: string; type: string; + includeValidation?: boolean; }; -const FormInput = ({label, className, type, ...rest}: FormInputProps) => { +const FormInput = ({label, className, type, value, includeValidation = false, ...rest}: FormInputProps) => { + const [icon, setIcon] = useState(EyeOn); const toggleShowPassword = () => { const input = document.getElementById(label) as HTMLInputElement; input.type = input.type === "password" ? "text" : "password"; + setIcon(icon === EyeOn ? EyeOff : EyeOn); } return (
- +
- {type === "password" && - + {type === "password" && + <> + + {includeValidation && value !== "" && passwordValidation.map((validation) => ( + + ))} + }
diff --git a/client/src/components/Login/LoginForm.tsx b/client/src/components/Login/LoginForm.tsx index cc87539..60278d4 100644 --- a/client/src/components/Login/LoginForm.tsx +++ b/client/src/components/Login/LoginForm.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; import FormInput, { FormInputProps } from "./FormInput.tsx"; import { LoginInputs } from "../../pages/LoginPage.tsx"; +import GoogleIcon from "../../images/google.svg"; export type FormData = { title: string; @@ -43,8 +44,8 @@ const LoginForm = ({formData, initialState, onSubmit}: Pr className="w-[512px] h-screen shrink-0 flex flex-col px-14 pt-8 pr-28 lg:w-1/2" onSubmit={handleSubmit} > -
{formData.title}
-
{formData.subText}
+
{formData.title}
+
{formData.subText}
{formData.inputs.map((props, index) => { const [field, value] = Object.entries(formState)[index]; return ( @@ -59,7 +60,7 @@ const LoginForm = ({formData, initialState, onSubmit}: Pr ) } )} -
+
{formData.additionalText} ({formData, initialState, onSubmit}: Pr
- {"or"} + {"or"}
-
- {/* replace with icons */} - - - +
+
+ +
) diff --git a/client/src/components/Login/ValidationAlert.tsx b/client/src/components/Login/ValidationAlert.tsx new file mode 100644 index 0000000..5699eb8 --- /dev/null +++ b/client/src/components/Login/ValidationAlert.tsx @@ -0,0 +1,20 @@ +import Check from "../../images/check.svg"; +import Error from "../../images/error.svg"; + +export type ValidationAlertProps = { + fieldText: string; + validationText: string; + validationRule: RegExp; + className?: string; +} + +const ValidationAlert = ({ fieldText, validationText, validationRule, className }: ValidationAlertProps) => { + return ( +
+ + {validationText} +
+ ) +} + +export default ValidationAlert; \ No newline at end of file diff --git a/client/src/data/formData.ts b/client/src/data/formData.ts index ec44a02..0fcbdb9 100644 --- a/client/src/data/formData.ts +++ b/client/src/data/formData.ts @@ -1,8 +1,9 @@ import { FormData } from "../components/Login/LoginForm.tsx"; +import { ValidationAlertProps } from "../components/Login/ValidationAlert.tsx" export const loginFormData: FormData = { title: "Log In", - subText: "Log in to continue your gift giving journey", + subText: "Log in to continue your gift giving journey!", inputs: [ { className: "mt-10", @@ -43,7 +44,8 @@ export const signUpFormData: FormData = { { className: "mt-4", label: "Password", - type: "password" + type: "password" , + includeValidation: true } ], additionalText: "Already have an account? ", @@ -51,3 +53,23 @@ export const signUpFormData: FormData = { link: "/login", buttonText: "Sign Up" }; + +export const passwordValidation: Omit[] = [ + { + validationText: "Contains uppercase letters", + validationRule: new RegExp("[A-Z]") + }, + { + validationText: "Contains lowercase letters", + validationRule: new RegExp("[a-z]") + }, + { + validationText: "Contains 8 characters", + validationRule: new RegExp(".{8,}") + }, + { + validationText: "Contains a number or symbol", + validationRule: new RegExp("\\d|\\W") + } + +]; \ No newline at end of file diff --git a/client/src/images/cait_thumbnail_1.svg b/client/src/images/cait_thumbnail_1.svg new file mode 100644 index 0000000..d9d0345 --- /dev/null +++ b/client/src/images/cait_thumbnail_1.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/client/src/images/cait_thumbnail_2.svg b/client/src/images/cait_thumbnail_2.svg new file mode 100644 index 0000000..092a8d1 --- /dev/null +++ b/client/src/images/cait_thumbnail_2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/images/cait_thumbnail_3.svg b/client/src/images/cait_thumbnail_3.svg new file mode 100644 index 0000000..d49b40f --- /dev/null +++ b/client/src/images/cait_thumbnail_3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/images/check.svg b/client/src/images/check.svg new file mode 100644 index 0000000..eb356ca --- /dev/null +++ b/client/src/images/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/images/error.svg b/client/src/images/error.svg new file mode 100644 index 0000000..068716b --- /dev/null +++ b/client/src/images/error.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/images/eye_off.svg b/client/src/images/eye_off.svg new file mode 100644 index 0000000..999b2c2 --- /dev/null +++ b/client/src/images/eye_off.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/images/eye_on.svg b/client/src/images/eye_on.svg new file mode 100644 index 0000000..63583ac --- /dev/null +++ b/client/src/images/eye_on.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/images/google.svg b/client/src/images/google.svg new file mode 100644 index 0000000..866b9c8 --- /dev/null +++ b/client/src/images/google.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/src/images/or.svg b/client/src/images/or.svg new file mode 100644 index 0000000..849b68e --- /dev/null +++ b/client/src/images/or.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/index.css b/client/src/index.css index 6a40489..d62feb7 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -4,7 +4,7 @@ @layer components { .btn-primary { - @apply py-2 bg-green rounded-md text-sm text-white + @apply py-2 bg-evergreen rounded-md text-sm text-white font-proxima font-bold } .bg-DFB2AA { background-color: #DFB2AA; diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx index f118bad..4dd4d9c 100644 --- a/client/src/pages/LoginPage.tsx +++ b/client/src/pages/LoginPage.tsx @@ -1,3 +1,4 @@ +import Navbar from "../components/Home/NavBarUpdated.tsx"; import LoginForm from "../components/Login/LoginForm.tsx"; import { loginFormData } from "../data/formData"; @@ -19,15 +20,14 @@ const LoginPage = () => { return (
- {/* add navbar */} -
+ +
+ {/* add navbar */} - {/* replace with image */} -
); diff --git a/client/src/pages/ReturnHomePage.tsx b/client/src/pages/ReturnHomePage.tsx new file mode 100644 index 0000000..f230232 --- /dev/null +++ b/client/src/pages/ReturnHomePage.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import HomePrompt from "../components/Home/HomePrompt"; +import CaitThumbnail1 from "../images/cait_thumbnail_1.svg"; +import CaitThumbnail2 from "../images/cait_thumbnail_2.svg"; +import CaitThumbnail3 from "../images/cait_thumbnail_3.svg"; +import Or from "../images/or.svg"; +import Navbar from "../components/Home/NavBarUpdated"; + +const ReturnHomePage = () => { + + const handleShoppingClick = () => { + // handle click + } + + const handleBrowsingClick = () => { + // handle click + } + + const handleRequestsClick = () => { + // handle click + } + + return ( +
+ +
+
+ + +
+
+ +
+
+ {"How it Works"} +
+ +
{"or"}
+
+ +
+ +
+
+ ) +} + +export default ReturnHomePage; \ No newline at end of file diff --git a/client/src/pages/SignUpPage.tsx b/client/src/pages/SignUpPage.tsx index 34b1ec9..927cd3b 100644 --- a/client/src/pages/SignUpPage.tsx +++ b/client/src/pages/SignUpPage.tsx @@ -1,6 +1,7 @@ import LoginForm from "../components/Login/LoginForm.tsx"; import { LoginInputs } from "./LoginPage"; import { signUpFormData } from "../data/formData"; +import Navbar from "../components/Home/NavBarUpdated.tsx"; type SignUpInputs = LoginInputs & { @@ -23,15 +24,13 @@ const SignUpPage = () => { return (
- {/* add navbar */} -
+ +
- {/* replace with image */} -
); diff --git a/client/tailwind.config.js b/client/tailwind.config.js index b4ed836..b7f6642 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -13,14 +13,17 @@ export default { colors: { 'eggshell': '#fff9f4', 'beige': '#f4e6dc', + 'pearl': '#fffefc', 'brown': '#b79d94', 'drkbrown': '#8d7a73', 'coffee': '#32211e', 'pink': '#dfb2aa', 'dkpink': '#D08484', + 'petalpink': '#F9DCD7', 'red': '#bc2c35', 'green': '#64765b', - 'dkgreen': '#273f2a' + 'dkgreen': '#273f2a', + 'evergreen': '#305749' }, }, }, From 653f3811523d4d38e9e39d3ee5e01973d6d3b8cd Mon Sep 17 00:00:00 2001 From: Derrick Kim Date: Sat, 2 Dec 2023 21:50:12 -0500 Subject: [PATCH 2/5] remove import/comment --- client/src/components/Login/LoginForm.tsx | 2 -- client/src/pages/LoginPage.tsx | 1 - client/src/pages/ReturnHomePage.tsx | 1 - 3 files changed, 4 deletions(-) diff --git a/client/src/components/Login/LoginForm.tsx b/client/src/components/Login/LoginForm.tsx index 60278d4..0b6ffd4 100644 --- a/client/src/components/Login/LoginForm.tsx +++ b/client/src/components/Login/LoginForm.tsx @@ -28,8 +28,6 @@ const LoginForm = ({formData, initialState, onSubmit}: Pr ...prevState, [e.target.name]: e.target.value })); - - // additional error validation here } const handleSubmit = (e: React.FormEvent) => { diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx index 4dd4d9c..a85d654 100644 --- a/client/src/pages/LoginPage.tsx +++ b/client/src/pages/LoginPage.tsx @@ -22,7 +22,6 @@ const LoginPage = () => {
- {/* add navbar */} Date: Sat, 2 Dec 2023 22:48:22 -0500 Subject: [PATCH 3/5] small fixes --- client/src/components/Login/FormInput.tsx | 1 + client/src/components/Login/LoginForm.tsx | 2 +- client/src/pages/LoginPage.tsx | 4 ++-- client/src/pages/SignUpPage.tsx | 4 ++-- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/client/src/components/Login/FormInput.tsx b/client/src/components/Login/FormInput.tsx index 8d8f4f9..3827a35 100644 --- a/client/src/components/Login/FormInput.tsx +++ b/client/src/components/Login/FormInput.tsx @@ -28,6 +28,7 @@ const FormInput = ({label, className, type, value, includeValidation = false, .. id={label} className="border-brown border-solid border-[1.5px] bg-pearl rounded-md w-full text-base text-coffee font-proxima px-2 p-1" type={type} + pattern={type === "password" && includeValidation ? "(?=.*(\\d|\\W))(?=.*[a-z])(?=.*[A-Z]).{8,}" : undefined} {...rest} /> {type === "password" && diff --git a/client/src/components/Login/LoginForm.tsx b/client/src/components/Login/LoginForm.tsx index 0b6ffd4..affcdd6 100644 --- a/client/src/components/Login/LoginForm.tsx +++ b/client/src/components/Login/LoginForm.tsx @@ -39,7 +39,7 @@ const LoginForm = ({formData, initialState, onSubmit}: Pr return (
{formData.title}
diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx index a85d654..143991b 100644 --- a/client/src/pages/LoginPage.tsx +++ b/client/src/pages/LoginPage.tsx @@ -19,9 +19,9 @@ const LoginPage = () => { } return ( -
+
-
+
{ } return ( -
+
-
+
Date: Sat, 2 Dec 2023 23:07:12 -0500 Subject: [PATCH 4/5] fix responsiveness --- client/src/pages/ReturnHomePage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/pages/ReturnHomePage.tsx b/client/src/pages/ReturnHomePage.tsx index a490dc9..6a3818a 100644 --- a/client/src/pages/ReturnHomePage.tsx +++ b/client/src/pages/ReturnHomePage.tsx @@ -33,7 +33,7 @@ const ReturnHomePage = () => { />
-
+
{ onClick={handleBrowsingClick} />
-
+
{"How it Works"}
- -
{"or"}
+ +
{"or"}
Date: Sun, 3 Dec 2023 12:51:22 -0500 Subject: [PATCH 5/5] rebase --- client/src/components/Home/NavBarUpdated.tsx | 128 +++++++++---------- 1 file changed, 64 insertions(+), 64 deletions(-) diff --git a/client/src/components/Home/NavBarUpdated.tsx b/client/src/components/Home/NavBarUpdated.tsx index 7962bd2..ad24647 100644 --- a/client/src/components/Home/NavBarUpdated.tsx +++ b/client/src/components/Home/NavBarUpdated.tsx @@ -9,76 +9,76 @@ const Navbar = () => { }; const buttonStyle = - "px-4 py-2 text-black text-s rounded-md border-gray-400"; + "px-4 py-2 text-black text-s rounded-md border-gray-400"; const activeButtonStyle = "bg-DFB2AA"; return ( -
-
-
- - - -
-
- Logo -
-
- - - +
+
+
+ + + +
+
+ Logo +
+
+ + + - - - - - - - - + + + + + + + + +
-
); }; -export default Navbar; +export default Navbar; \ No newline at end of file