Next.js Discord

Discord Forum

Help With Multi-Form-Sign-Up => Store & Retrieve & Push Data to DataBase/Server

Unanswered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
I am basically trying to understand what do I need to do when the "Continue" button is pressed and what I need to do when the "Create your Account" button is pressed.

The "Continue" button is the button that navigates to the next step, the "Create Your Account" button only appears on the last page/step and is supposed to send data to the database to create the account.
//components/sign-up-page/step-indicator.tsx
import React from 'react';

const StepIndicator = ({ currentStep, steps }: { currentStep: number, steps: string[] }) => {
    return (
        <div className="flex justify-between items-center mb-4 relative w-full gap-2 px-2 font-roboto">
            {/* Use inline style for custom height */}
            <div className="absolute left-12 right-12 top-2.5 bg-gray-300" style={{ height: '0.04rem' }}></div> 
            {steps.map((step, index) => (
                <div key={index} className="flex flex-col items-center">
                    {/* Circle */}
                    <div className="px-2 z-[1] bg-[var(--foreground)] flex justify-center items-center">
                        <div
                            className={`h-5 w-5 rounded-full flex items-center justify-center text-xs ${
                                index <= currentStep ? 'bg-[var(--brand-green)] text-[var(--text-bright)]' : 'bg-[var(--border)] text-[var(--text-dimmed)]'
                            }`}
                        >
                            {index + 1}
                        </div>
                    </div>

                    {/* Step Name */}
                    <span
                        className={`text-xs text-center mt-1 ${
                            index <= currentStep ? 'text-[var(--text-bright)]' : 'text-[var(--text-dimmed)]'
                        }`}
                    >
                        {step}
                    </span>
                </div>
            ))}
        </div>
    );
}

export default StepIndicator;

4 Replies

Sun bearOP
This is what happens currently. It looks like the data does get stored at least visually while navigating between steps, as long as the user stays on the same page. However if the language is switched or the user goes back to the log-in page the data is no longer stored.

Is this normal behaviour ?
Sun bearOP
To me this is fine, but I'm not sure what needs to happen when I press on the continue button. Where exactly do I need to store the data the user fills when the continue button is pressed and how do I make sure that data is released if the user leaves the signup process or closes the website ?
//components/sign-up-page/sign-up-form.tsx

"use client";
import React, { useState, ChangeEvent } from 'react';
import PersonalInformation from './personal-information';
import AccountDetails from './account-details';
import type { Dictionary } from '@/app/translation/dictionaryTypes';
import useMounted from '@/hooks/useMounted';
import StepIndicator from './step-indicator';

const SignUpForm = ({ dictionary }: { dictionary: Dictionary }) => {
    const mounted = useMounted();
    // State to manage form steps
    const [currentStep, setCurrentStep] = useState(0);

    const [formData, setFormData] = useState({
        firstName: '',
        lastName: '',
        country: '',
        dateOfBirth: '',
        email: '',
        confirmEmail: '',
        password: '',
        confirmPassword: ''
    });

    // Handle change in form fields
    const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    const steps = [
        <PersonalInformation data={formData} handleChange={handleChange} />,
        <AccountDetails data={formData} handleChange={handleChange} />,
    ];

    const signUp = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
    };

    const stepNames = ["Personal Details", "Account Details", "Choose Your Plan"];

    if (!mounted) return null;  // Only render component after it's mounted
 return (
        <div className="flex flex-col flex-grow w-full">
            <div className="flex flex-col flex-grow justify-center items-center">
 <div
style={{
backgroundColor: 'var(--foreground)',
border: '0.2px solid var(--border)',
borderRadius: '12px',
padding: '24px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
maxWidth: 'calc(360px + 48px)'
}}
>

{/* Step Indicator */}
<StepIndicator currentStep={currentStep} steps={stepNames} />

{steps[currentStep]}

{/* Navigation buttons */}
{currentStep > 0 && (
<button
type="button"
className="bg-blue-500 rounded-md w-full px-4 py-2 text-foreground mb-2"
onClick={() => setCurrentStep(currentStep - 1)}
>
Back
</button>
)}
{currentStep < steps.length - 1 && (
<button
type="button"
className="bg-blue-500 rounded-md w-full px-4 py-2 text-foreground mb-2"
                            onClick={() => setCurrentStep(currentStep + 1)}
                        >
                            Continue
                        </button>
                    )}

                    {/* Submit button for the last step */}
                    {currentStep === steps.length - 1 && (
                        <div style={{ width: '340px', height: '36px', marginBottom: '8px' }}>
                            <button
                                type="submit"
                                className="rounded-md w-full flex items-center justify-center"
                                style={{
                                    height: '36px',
                                    backgroundColor: 'var(--brand-green)',
                                    color: 'var(--text-button-bright)',
                                    padding: '0px 16px'
                                }}
                            >
                                {dictionary.page.signUp.signUpButton}
                            </button>
                        </div>
                    )}
Sun bearOP
Wait a moment, I don't think I need to do anything extra on my continue button since the data is already preserved in Use State. I think I only need to send it to my database once all the data it's filled in. My only questions is: Is this a secure way to do it or should I change anything ?