React Login Form

import { useForm, Controller } from 'react-hook-form';

export default function TestOne() {

    const { control, handleSubmit, formState: { errors } } = useForm();

    const onSubmit = (data) => {

        try {

            // Send the form data to the backend

            fetch('http://localhost:6080/login', {

                method: 'POST',

                mode: 'cors',

                //credentials: 'include',

                redirect: 'follow',

                //redirect: 'manual',

                headers: {

                    'Content-Type': 'application/x-www-form-urlencoded',

                },

                body: new URLSearchParams(data).toString()

            }).then((response) => {

                console.log(response);

                console.log(response.text());

            })

            .catch((e) => {

                console.log(e);

            });

            // console.log(response);

            // if (response.ok) {

            //   // Handle successful login (e.g., redirect to another page)

            //   // Replace with your own logic

            // } else {

            //   // Handle login errors

            //   // Replace with your own error handling

            //   console.error('Login failed');

            // }

        } catch (error) {

            console.log(error);

        }

    };

    return (

        <>

            <h2>Login Page</h2>

            <form onSubmit={handleSubmit(onSubmit)}>

                <div>

                    <label>Username:</label>

                    <Controller

                        name="username"

                        control={control}

                        defaultValue=""

                        rules={{ required: 'Username is required' }}

                        render={({ field }) => <input {...field} />}

                    />

                    {errors.username && <p>{errors.username.message}</p>}

                </div>

                <div>

                    <label>Password:</label>

                    <Controller

                        name="password"

                        control={control}

                        defaultValue=""

                        rules={{ required: 'Password is required' }}

                        render={({ field }) => <input type="password" {...field} />}

                    />

                    {errors.password && <p>{errors.password.message}</p>}

                </div>

                <div>

                    <label>Redirect url:</label>

                    <Controller

                        name="redirectUrl"

                        control={control}

                        defaultValue="http://localhost:7080/callback"

                        rules={{ required: 'Redirect url' }}

                        render={({ field }) => <input type="text" {...field} />}

                    />

                    {errors.redirectUrl && <p>{errors.redirectUrl.message}</p>}

                </div>

                <div>

                    <label>callback url:</label>

                    <Controller

                        name="callbackUrl"

                        control={control}

                        defaultValue="http://localhost:6080/callback"

                        rules={{ required: 'Callback url' }}

                        render={({ field }) => <input type="text" {...field} />}

                    />

                    {errors.callbackUrl && <p>{errors.callbackUrl.message}</p>}

                </div>

                <button type="submit">Submit</button>

            </form>

        </>

    );

}

builder.Services.AddCors(options => { options.AddDefaultPolicy( policy => { policy.WithOrigins("*") //.WithOrigins("https://localhost:7242") //https://localhost:3000", "https://localhost:7242 .AllowAnyHeader() .AllowAnyMethod(); }); });