naim-firebase-auth-wrapper/dist/components/Register.js

React components and hooks for Firebase Authentication and Firestore with Mantine UI

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { useAuth } from '../hooks/useAuth';
import { TextInput, PasswordInput, Button, Stack, Paper, Title, Text, Anchor, Center, Checkbox } from '@mantine/core';
import { validateEmail, validatePassword, validateName, validatePhone } from '../utils/validation';
import { createUserProfile, createOrganization } from '../services/firestore';
export const Register = ({ onSuccess, onError, onLoginClick, title = "Create Account", logo }) => {
    const { signUp } = useAuth();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [name, setName] = useState('');
    const [phone, setPhone] = useState('');
    const [nameError, setNameError] = useState('');
    const [emailError, setEmailError] = useState('');
    const [passwordError, setPasswordError] = useState('');
    const [phoneError, setPhoneError] = useState('');
    const [dateOfBirth, setDateOfBirth] = useState('');
    const [address, setAddress] = useState('');
    const [organizationName, setOrganizationName] = useState('');
    const [createOrg, setCreateOrg] = useState(false);
    const validateForm = () => {
        const nameValidation = validateName(name);
        const emailValidation = validateEmail(email);
        const passwordValidation = validatePassword(password);
        const phoneValidation = validatePhone(phone);
        setNameError(nameValidation.error);
        setEmailError(emailValidation.error);
        setPasswordError(passwordValidation.error);
        setPhoneError(phoneValidation.error);
        return nameValidation.isValid &&
            emailValidation.isValid &&
            passwordValidation.isValid &&
            phoneValidation.isValid;
    };
    const handleRegister = async (e) => {
        e.preventDefault();
        if (!validateForm())
            return;
        try {
            const result = await signUp(email, password, name);
            if (result.user) {
                const userData = {
                    uid: result.user.uid,
                    email,
                    displayName: name,
                    phoneNumber: phone,
                    dateOfBirth,
                    address,
                    organizations: [],
                    role: 'user'
                };
                await createUserProfile(result.user.uid, userData);
                if (createOrg && organizationName.trim()) {
                    await createOrganization({
                        name: organizationName.trim(),
                        ownerId: result.user.uid,
                        members: [{
                                userId: result.user.uid,
                                role: 'owner',
                                joinedAt: new Date()
                            }]
                    });
                }
            }
            onSuccess?.();
        }
        catch (error) {
            onError?.(error);
        }
    };
    return (_jsxs(Paper, { radius: "md", p: "xl", withBorder: true, children: [logo && (_jsx(Center, { mb: "md", children: logo })), _jsx(Title, { order: 2, mb: "md", ta: "center", c: "blue", children: title }), _jsx(Text, { c: "dimmed", size: "sm", mb: "lg", ta: "center", children: "Enter your details to create your account" }), _jsx("form", { onSubmit: handleRegister, children: _jsxs(Stack, { children: [_jsx(TextInput, { required: true, label: "Name", placeholder: "Your name", value: name, onChange: (e) => setName(e.target.value), error: nameError, radius: "md" }), _jsx(TextInput, { required: true, label: "Email", placeholder: "hello@example.com", value: email, onChange: (e) => setEmail(e.target.value), error: emailError, radius: "md" }), _jsx(PasswordInput, { required: true, label: "Password", placeholder: "Your password", value: password, onChange: (e) => setPassword(e.target.value), error: passwordError, radius: "md" }), _jsx(TextInput, { label: "Phone Number", placeholder: "+1 234 567 8900", value: phone, onChange: (e) => setPhone(e.target.value), error: phoneError, radius: "md" }), _jsx(TextInput, { label: "Date of Birth", type: "date", value: dateOfBirth, onChange: (e) => setDateOfBirth(e.target.value) }), _jsx(TextInput, { label: "Address", value: address, onChange: (e) => setAddress(e.target.value) }), _jsx(Checkbox, { label: "Create an organization", checked: createOrg, onChange: (e) => setCreateOrg(e.currentTarget.checked), mt: "md" }), createOrg && (_jsx(TextInput, { label: "Organization Name", placeholder: "Enter organization name", value: organizationName, onChange: (e) => setOrganizationName(e.target.value), mt: "xs" })), _jsx(Button, { type: "submit", fullWidth: true, radius: "md", color: "green", children: "Create account" })] }) }), _jsxs(Text, { c: "dimmed", size: "sm", ta: "center", mt: "md", children: ["Already have an account?", ' ', _jsx(Anchor, { component: "button", type: "button", onClick: onLoginClick, children: "Login" })] })] }));
};
//# sourceMappingURL=Register.js.map