Implement User Registration Page

[rvalenciano]

Develop the "User Registration" page based on the provided mockup design: Mockup SafeTrust.

Problem

We need to create a registration form that collects:

• Full name
• Phone number with country code
• Location (country selection)
• Email
• Password
• Maintain consistent branding with city illustration

Solution

This is a suggested solution, doesn't need to be the one to implement, is just a guide.

Component Structure

src/
└── features/
    └── auth/
        ├── components/
        │   ├── RegistrationForm/
        │   ├── PhoneInput/
        │   ├── CountrySelect/
        │   ├── PasswordInput/
        │   └── CityBackground/
        └── pages/
            └── Registration.tsx

Main Component Implementation

// src/features/auth/pages/Registration.tsx
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../../../config/firebase';

interface RegistrationForm {
  fullName: string;
  phoneNumber: string;
  countryCode: string;
  location: string;
  email: string;
  password: string;
}

export const Registration = () => {
  const navigate = useNavigate();
  const { register, handleSubmit, formState: { errors } } = useForm<RegistrationForm>();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const onSubmit = async (data: RegistrationForm) => {
    setIsSubmitting(true);
    try {
      await createUserWithEmailAndPassword(auth, data.email, data.password);
      navigate('/verify-email', { state: { email: data.email } });
    } catch (error) {
      console.error('Registration error:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen flex">
      {/* Left side - Form */}
      <div className="w-1/2 p-8 flex flex-col">
        <img 
          src="/logo.svg" 
          alt="SafeTrust" 
          className="h-12 mb-12"
        />

        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
          {/* Full Name */}
          <div>
            <label className="block text-sm font-medium mb-2">
              Nombre
            </label>
            <input
              type="text"
              {...register('fullName', { required: true })}
              className="w-full p-3 border rounded-md focus:ring-2 focus:ring-orange-500"
            />
          </div>

          {/* Phone Number */}
          <div>
            <label className="block text-sm font-medium mb-2">
              Número telefónico
            </label>
            <div className="flex gap-2">
              <select
                {...register('countryCode')}
                className="w-24 p-3 border rounded-md"
              >
                <option value="+506">🇨🇷 +506</option>
              </select>
              <input
                type="tel"
                {...register('phoneNumber', { required: true })}
                className="flex-1 p-3 border rounded-md"
              />
            </div>
          </div>

          {/* Location */}
          <div>
            <label className="block text-sm font-medium mb-2">
              Location
            </label>
            <select
              {...register('location')}
              className="w-full p-3 border rounded-md"
            >
              <option value="Costa Rica">Costa Rica</option>
            </select>
          </div>

          {/* Email */}
          <div>
            <label className="block text-sm font-medium mb-2">
              Email
            </label>
            <input
              type="email"
              {...register('email', { 
                required: true,
                pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i 
              })}
              className="w-full p-3 border rounded-md"
            />
          </div>

          {/* Password */}
          <div>
            <label className="block text-sm font-medium mb-2">
              Password
            </label>
            <input
              type="password"
              {...register('password', { 
                required: true,
                minLength: 8 
              })}
              className="w-full p-3 border rounded-md"
            />
          </div>

          <button
            type="submit"
            disabled={isSubmitting}
            className="w-full bg-orange-500 text-white py-3 rounded-md hover:bg-orange-600 disabled:opacity-50"
          >
            {isSubmitting ? 'Registering...' : 'Login'}
          </button>
        </form>
      </div>

      {/* Right side - Illustration */}
      <div className="w-1/2 bg-orange-500 relative overflow-hidden">
        <CityBackground className="absolute bottom-0 w-full" />
      </div>
    </div>
  );
};

Phone Input Component

// src/features/auth/components/PhoneInput/index.tsx
interface Props {
  countryCode: string;
  phoneNumber: string;
  onCountryCodeChange: (code: string) => void;
  onPhoneNumberChange: (number: string) => void;
}

export const PhoneInput: React.FC<Props> = ({
  countryCode,
  phoneNumber,
  onCountryCodeChange,
  onPhoneNumberChange
}) => {
  return (
    <div className="flex gap-2">
      <div className="relative">
        <select
          value={countryCode}
          onChange={(e) => onCountryCodeChange(e.target.value)}
          className="w-24 p-3 pl-8 border rounded-md appearance-none"
        >
          <option value="+506">🇨🇷 +506</option>
        </select>
      </div>
      <input
        type="tel"
        value={phoneNumber}
        onChange={(e) => onPhoneNumberChange(e.target.value)}
        className="flex-1 p-3 border rounded-md"
        placeholder="74812445"
      />
    </div>
  );
};

Design Requirements

Colors

• Primary Button: bg-orange-500
• Button Hover: bg-orange-600
• Background: White/Orange split
• Input Focus: Ring orange

Typography

• Labels: 14px, Medium
• Input Text: 16px, Regular
• Button Text: 16px, Medium

Layout

• Split screen design
• Left side: Form (50%)
• Right side: Illustration (50%)
• Responsive layout

Success Criteria

• [ ] Matches design mockup exactly
• [ ] Form validation working
• [ ] Phone input with country code
• [ ] Location selector implemented
• [ ] Password requirements enforced
• [ ] Error states handled
• [ ] Loading states implemented
• [ ] Firebase integration working
• [ ] Responsive design
• [ ] Accessible form inputs

Additional Context

• Phone number format validation
• Password strength requirements
• Country code preselection
• Error message display
• Form state persistence
• Loading state during submission

Related Issues

• XX Firebase Auth Integration

• XX Email Verification Flow

Would you like me to:

1. Add password strength indicator?
2. Show form validation messages?
3. Add social login options?
4. Include phone number formatting?

[NueloSE]

@rvalenciano I am a frontend developer with experience in frontend frame works.

I would be able to create pages that matches designs in the mockup exactly and implement the forms I have an understanding of how the Firebase Auth works and can integrate it to this project

[NueloSE]

I’m interested in this one.

[martinvibes]

Let me try this one! i would love to work on this issue :)

[Akshola00]

Mind if I take this issue? would love to contribute to this project

[khayss]

Can I jump on this task?

Background

I have experience creating registration forms in Next.js and TypeScript, with validation and responsive design.

Plan

• Build a form for name, phone, location, email, and password.
• Include country selection for location.
• Ensure branding with city illustration.
• Validate inputs and ensure responsiveness.

[Benjtalkshow]

I'd like to handle this task. I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js/React, TypeScript, and Rust. I’ve made over 45 contributions to over 15 projects in the OnlyDust ecosystem, solving complex issues and delivering efficient, scalable solutions.

MY ETA is 48hrs. Thanks

[Yunusabdul38]

I'd love to work on this issue. and make sure it meets the requirements

[caxtonacollins]

Can I attempt this issue? am applying through Onlydust

[ShantelPeters]

Could I take over this issue?

[Ayoazeez26]

May I take this issue on? I would implement this using tailwind and make sure all requirements are met before submitting a PR. I would also make sure it is responsive before sending a PR

ETA - 2 days

[abdegenius]

May I take care of this?Would love to tackle this! I can comfortably handle this issues

[josephchimebuka]

Hello I am Joseph I am a frontend developer and blockchain developer and I am also an active contributor here on only dust here is my profile https://app.onlydust.com/u/josephchimebuka. This is my first time to contribute to this repo ill appreciate the opportunity to contribute. this is a couple of frontend and blockchain projects i have built https://metacrypt.vercel.app/ https://mattedsgn.com/ May I try this one?

[Bran18]

Hello there again xD I’m Brandon, part of the Dojo Coding community, and I would love to contribute to this project! 🚀

I've done a lot of auth-based flows, feel free to check out the one from MB (https://masterbots.ai/) as one example. It does handle the pass strength and a couple of other UX elements for the user, and I believe I can help out crafting this task you need.

Lmk if i can start working on it. 🙏 Here’s my GitHub profile: GitHub: https://github.com/Bran18 and my OnlyDust profile: https://app.onlydust.com/u/Bran18.

BTW tks for taking the time this might be my first contribution here

[Michaelkingsdev]

I'd love to give this a go.

[Stephy-Crown]

I'd like to take this issue.

[amJoe-dev]

Can I take this from here? I really love to work on this, i've worked on something similar to it before i believe i have the experience to be able to tackle it effectively

[Ekene001]

Hi, I'm Ekene, a frontend and blockchain developer, and I’m new to the OnlyDust platform. This is my first time contributing to this repository, and I’m excited about the opportunity to collaborate and bring my skills to the table. Looking forward to making a positive impact and working with the team!

To tackle this issue, I will create a responsive and visually consistent interface that collects user details like name, phone number, location, email, and password. I will build reusable components, such as PhoneInput and CountrySelect, to ensure modularity and implement validation to maintain data integrity.

The form will interact with the backend using Firebase for user account creation and include error handling for a seamless experience. The design will incorporate the city illustration to align with branding. After testing for functionality and responsiveness, I will integrate the page into the application, ensuring it is ready for deployment.

[Tzienom]

Hi, I'm Gabriel and I'll be working on issue #68. I am a specialized Frontend Dev, and I am able to complete the required tasks in on before 72 hours.

[MullerTheScientist]

i'd love to please tackle this issue

[Aditya-040]

I'd love to work on this!

[melnikga]

Can I take this? Hi, my name is Georgiy, I'm a fullstack blockchain developer. I have extensive experience in developing tools for Starknet, and I've participated in almost all ODHacks, during which I worked on many projects. My OnlyDust profile: https://app.onlydust.com/u/melnikga

[gidson5]

I'd like to jump on this!! ETA 2days

[brolag]

I’d like to work on this.

[brolag]

Hi, I'd love to work on this issue. I have more than 10 years of experience working with web technologies and I've implemented many forms during my career.

My plan:

• Get the assets from the figma file.
• Create the form fields component so they can be reusable.
• Add validations.
• Test their behavior in different browsers / devices.

Thanks!

[emmz3230]

I am a front-end developer specializing in responsive web design, device-compatible email templates, 3D web integration, and technical writing on programming topics. I also contribute to open-source documentation and help build documentation sites.

I will love to create the user registration page using the mockup code, displaying the right placholder and user input for the preferred location of the user.

will be glad to work on this

Thanks

[armandocodecr]

Hello, this is Armando from the Dojo. Could you take this issue? I have more than 2 years of experience with Next.js technology, since I started I've been involved in the frontend area, so I feel fully qualified to solve this issue.

[rvalenciano]

@brolag feel free to work on this one please :)