wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BETTER UI

Browse Source
This commit is contained in:
Adam C
2024-06-28 11:45:11 +08:00
parent a40d66aa0d
commit 2186da902b
1 changed files with 105 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
client/src/components/SignUpModule.tsx
View File

@@ -6,6 +6,7 @@ import config from "../config";
import NextUIFormikInput from "./NextUIFormikInput"; import NextUIFormikInput from "./NextUIFormikInput";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { popErrorToast } from "../utilities"; import { popErrorToast } from "../utilities";
import { useState } from "react";
const validationSchema = Yup.object({ const validationSchema = Yup.object({
firstName: Yup.string() firstName: Yup.string()
@@ -47,6 +48,7 @@ const validationSchema = Yup.object({
export default function SignUpModule() { export default function SignUpModule() {
const navigate = useNavigate(); const navigate = useNavigate();
const [step, setStep] = useState(1);
const initialValues = { const initialValues = {
firstName: "", firstName: "",
@@ -64,11 +66,15 @@ export default function SignUpModule() {
values values
); );
console.log("User created successfully:", response.data); console.log("User created successfully:", response.data);
navigate("/signin");
} catch (error) { } catch (error) {
popErrorToast(error); popErrorToast(error);
} }
}; };
const nextStep = () => setStep((prev) => prev + 1);
const prevStep = () => setStep((prev) => prev - 1);
return ( return (
<div className="flex flex-col gap-16"> <div className="flex flex-col gap-16">
<Formik <Formik
@@ -78,69 +84,106 @@ export default function SignUpModule() {
> >
{({ isValid, dirty }) => ( {({ isValid, dirty }) => (
<Form className="flex flex-col gap-4"> <Form className="flex flex-col gap-4">
<NextUIFormikInput {step === 1 && (
label="First Name" <>
name="firstName" <p className="text-4xl font-bold pb-6">
type="text" First, let us know how to address you.
placeholder="John"
labelPlacement="outside"
/>
<NextUIFormikInput
label="Last Name"
name="lastName"
type="text"
placeholder="Doe"
labelPlacement="outside"
/>
<NextUIFormikInput
label="Email"
name="email"
type="email"
placeholder="johndoe@email.com"
labelPlacement="outside"
/>
<NextUIFormikInput
label="Phone number"
name="phoneNumber"
type="text"
placeholder="XXXXXXXX"
labelPlacement="outside"
startContent={
<p className="text-sm pr-2 border-r-2 border-neutral-300 dark:border-neutral-700">
+65
</p> </p>
} <NextUIFormikInput
/> label="First Name"
<NextUIFormikInput name="firstName"
label="New Password" type="text"
name="password" placeholder="John"
type="password" labelPlacement="outside"
placeholder=" " />
labelPlacement="outside" <NextUIFormikInput
/> label="Last Name"
<div> name="lastName"
<Field type="text"
name="terms" placeholder="Doe"
type="checkbox" labelPlacement="outside"
as={Checkbox} />
aria-label="Terms and services agreement checkbox" <Button onClick={nextStep} color="primary">
> Next
I have read and agreed to the{" "} </Button>
<Link href="#">Terms and Services</Link> </>
</Field> )}
<ErrorMessage {step === 2 && (
name="terms" <>
component="div" <p className="text-4xl font-bold pb-6">
className="text-red-500" Nice to meet you! Next, your contacts.
/> </p>
</div> <NextUIFormikInput
<Button label="Email"
type="submit" name="email"
color="primary" type="email"
isDisabled={!isValid || !dirty} placeholder="johndoe@email.com"
> labelPlacement="outside"
Sign up />
</Button> <NextUIFormikInput
label="Phone number"
name="phoneNumber"
type="text"
placeholder="XXXXXXXX"
labelPlacement="outside"
startContent={
<p className="text-sm pr-2 border-r-2 border-neutral-300 dark:border-neutral-700">
+65
</p>
}
/>
<div className="flex justify-between">
<Button onClick={prevStep} variant="light">
Back
</Button>
<Button onClick={nextStep} color="primary">
Next
</Button>
</div>
</>
)}
{step === 3 && (
<>
<p className="text-4xl font-bold pb-6">
Almost there! Now, a strong password please.
</p>
<NextUIFormikInput
label="New Password"
name="password"
type="password"
placeholder=" "
labelPlacement="outside"
/>
<div>
<Field
name="terms"
type="checkbox"
as={Checkbox}
aria-label="Terms and services agreement checkbox"
>
I have read and agreed to the{" "}
<Link href="#">Terms and Services</Link>
</Field>
<ErrorMessage
name="terms"
component="div"
className="text-red-500"
/>
</div>
<div className="flex justify-between">
<Button onClick={prevStep} variant="light">
Back
</Button>
<Button
type="submit"
color="primary"
isDisabled={!isValid || !dirty}
>
Sign up
</Button>
</div>
</>
)}
</Form> </Form>
)} )}
</Formik> </Formik>