مصادقة Jwt Development Tutorials, Guides & Insights

3. إعداد نموذج التسجيل (Register.js):

import React, { useState } from 'react';
import axios from 'axios';

const Register = () => {
    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        const newUser = { username, email, password };
        try {
            await axios.post('http://localhost:5000/api/register', newUser);
            alert('تم التسجيل بنجاح');
        } catch (error) {
            console.error('Error during registration', error);
        }
    };

    return (
        <div>
            <h2>تسجيل حساب جديد</h2>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    placeholder="اسم المستخدم"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                />
                <input
                    type="email"
                    placeholder="البريد الإلكتروني"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                <input
                    type="password"
                    placeholder="كلمة المرور"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
                <button type="submit">تسجيل</button>
            </form>
        </div>
    );
};

export default Register;