bs-p2/app/routes/sign-in.tsx

import { useState } from 'react';
import { FormEvent } from 'react';

export default function SignIn() {
    const [userName, setUserName] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault(); // Prevent the default form submission

        const data = {
            userName,
            password,
        };
        try {
            const response = await fetch('https://api.teachertrainingkolkata.in//api/sign-in', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            });

            if (!response.ok) {
                throw new Error('Network response was not ok');
            }

            const result = await response.json();
            console.log('Success:', result);
        } catch (error) {
            console.error('Error:', error);
        }
    };

    return (
        <section className="h-screen flex items-center justify-center">
            <div className="container mx-auto px-4 max-w-xl">
                <form onSubmit={handleSubmit} className="flex flex-col space-y-4 border-[1px] border-[#CFCFCF] rounded-[10px] shadow-lg py-10 px-6 ">
                    <div className="flex flex-col space-y-2">
                        <label htmlFor="userName">User Name:</label>
                        <input className="focus:outline-none border-[1px] focus:border-[#EF7A0C] p-2 rounded-[8px]" type="text" name="userName" id="userName" value={userName} onChange={(e) => setUserName(e.target.value)} />
                    </div>
                    <div className="flex flex-col space-y-2">
                        <label htmlFor="password">Password:</label>
                        <input className="focus:outline-none border-[1px] focus:border-[#EF7A0C] p-2 rounded-[8px]" type="password" name="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)}/>
                    </div>
                    <label htmlFor="remember"><input type="checkbox" name="remember" id="remember" /> Remember Password</label>
                    <br />
                    <button className="bg-[#000] text-[#FFF] py-2.5 rounded-[8px]" type="submit" >Sign In</button>
                </form>
            </div>
        </section>
    );
}