diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index 6967229eef8f72814a1519f0a15d07826a638237..b3e66bce45019d08caa957ecfb801511afd95cac 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -1,13 +1,61 @@ import Navbar from "@/components/Nav"; import Head from "next/head"; import Image from "next/image"; +import { useEffect, useState } from "react"; export default function Home() { + const [currentTextIndex, setCurrentTextIndex] = useState<number>(0); + const textElements: string[] = ["Productivity", "Elegance", "Greatness"]; + + const showNextText = () => { + setCurrentTextIndex((currentTextIndex + 1) % textElements.length); + }; + + useEffect(() => { + const intervalId = setInterval(showNextText, 3000); + + return () => { + clearInterval(intervalId); + }; + }, [currentTextIndex]); + + const textStyle = { + position: "absolute" as const, + top: "50%", + left: "50%", + fontSize: "50px", + transform: "translate(-50%, -50%)", + opacity: 0, + transition: "opacity 1s ease-in-out", + }; + + const activeTextStyle = { + ...textStyle, + opacity: "1", + position: "absolute" as const, + }; + return ( <> <Navbar title="DefaultIcon" /> - <h1>TEST</h1> - <p>Whereas disregard and contempt for human rights have resulted</p> + <div + style={{ + display: "flex", + flexDirection: "column", + width: "100vw", + minHeight: "100vh", + alignItems: "center", + }} + > + {textElements.map((text, index) => ( + <h1 + key={index} + style={index === currentTextIndex ? activeTextStyle : textStyle} + > + {text} + </h1> + ))} + </div> </> ); } diff --git a/client/src/pages/signup/index.tsx b/client/src/pages/signup/index.tsx index 83e8b680395fb59d0163a139d5754b8c8b2ed274..d67fedc66ea3b022649706e0bc92680feeb07494 100644 --- a/client/src/pages/signup/index.tsx +++ b/client/src/pages/signup/index.tsx @@ -9,14 +9,39 @@ import { useState } from "react"; import { TermsDialog } from "@/components/TermsDialog"; export default function Signup() { + // Dialog related consts const [open, setOpen] = useState<boolean>(false); const handleOpen = () => { setOpen(true); }; - const handleClose = () => { setOpen(false); }; + const [error, setError] = useState<string>(""); + + const handleSubmit = (e: any) => { + e.preventDefault(); + const email = e.target.email.value; + const password = e.target.password.value; + const confirmPassword = e.target.confirmPassword.value; + const acceptTerms = e.target.acceptTerms.checked; + + if (password.length < 6) { + setError("Your password needs to be at least 6 characters"); + return; + } else if (password !== confirmPassword) { + setError("Passwords does not match"); + return; + } + if (!email || !password || !confirmPassword) { + setError("Please fill in all the fields"); + return; + } else if (!acceptTerms) { + setError("Please accept the terms and conditions to use the service"); + return; + } + setError(""); + }; return ( <> @@ -24,7 +49,7 @@ export default function Signup() { <div className={styles.outer}> <h1 style={{ fontSize: "40px", marginTop: "50px" }}>Signup</h1>; <form - onSubmit={() => console.log("Submit")} + onSubmit={handleSubmit} style={{ borderRadius: "10px", padding: "10px", @@ -35,10 +60,27 @@ export default function Signup() { <h3 style={{ textAlign: "center" }}> Enter your credentials to create an account </h3> - <StandardInput placeholderText="Enter email address" type="text" /> - <StandardInput placeholderText="Password" type="password" /> - <StandardInput placeholderText="Confirm Password" type="password" /> - <p style={{ textAlign: "center" }}> + <StandardInput + placeholderText="Enter email address" + type="email" + name="email" + /> + <StandardInput + placeholderText="Password" + type="password" + name="password" + /> + <StandardInput + placeholderText="Confirm Password" + type="password" + name="confirmPassword" + /> + <input + type="checkbox" + style={{ marginRight: "10px", marginLeft: "30px" }} + name="acceptTerms" + /> + <span> I agree to the{" "} <a style={{ color: "aqua", cursor: "pointer" }} @@ -47,9 +89,14 @@ export default function Signup() { terms and conditions </a> . - </p> + </span> <div className={styles.bottom}> - <StandardButton text="Create account" margin="10px" /> + {error && <p style={{ color: "red" }}>{error}</p>} + <StandardButton + text="Create account" + margin="10px" + // onClick={() => handleSubmit} + /> </div> </form> </div> diff --git a/client/src/pages/signup/styles.module.css b/client/src/pages/signup/styles.module.css index 19272658b401659875a6a85cb1114ab5b837cabd..01e394ede0c103dc462bd6d7d06ea04f9b565ad6 100644 --- a/client/src/pages/signup/styles.module.css +++ b/client/src/pages/signup/styles.module.css @@ -10,4 +10,5 @@ display: flex; flex-direction: column; align-items: center; + margin-top: 20px; }