auth.js

import axios from "axios";

import React, { useState } from "react";

import { useDispatch } from "react-redux";

import { Route } from "react-router";

import { Link } from "react-router-dom";

import { setUser } from "../slices/user";
import "../styles/auth.scss";
import "../styles/global.scss";

function Auth() {
    const dispatch = useDispatch();
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    async function authenticate() {
        await axios.post("http://localhost/auth/login", {
            email, password
        }).then((response) => {
            if (response.data.success) {
                window.location.href = "/";
                dispatch(setUser(response.data.data));
            }

            if (response.data.error) alert(response.data.error);
        });
    }

    async function createAccount() {
        await axios.post("http://localhost/auth/register", {
            fullname: name, email, password
        }).then((response) => {
            if (response.data.success) {
                window.location.href = "/";
                dispatch(setUser(response.data.data));
            }

            if (response.data.error) alert(response.data.error);
        });
    }

    return (
        <div className="auth-page">
            <div className="blur-background"></div>
            <div className="auth-form">
                <Route path="/" exact>
                    <input
                        type="email"
                        name="email"
                        value={email}
                        placeholder="Email"
                        onChange={(e) => setEmail(e.target.value)}></input>
                    <input
                        type="password"
                        name="password"
                        value={password}
                        placeholder="Password"
                        onChange={(p) => setPassword(p.target.value)}></input>
                    <button onClick={authenticate}>Authenticate</button>
                    <p>Are you new here? <Link to="/register">Create Account</Link></p>
                </Route>

                <Route path="/register">
                    <input
                        type="text"
                        name="name"
                        value={name}
                        placeholder="Name"
                        onChange={(e) => setName(e.target.value)}></input>
                    <input
                        type="email"
                        name="email"
                        value={email}
                        placeholder="Email"
                        onChange={(e) => setEmail(e.target.value)}></input>
                    <input
                        type="password"
                        name="password"
                        value={password}
                        placeholder="Password"
                        onChange={(p) => setPassword(p.target.value)}></input>
                    <button onClick={createAccount}>Create Account</button>
                    <p>Do you already have an account? <Link to="/">Authenticate</Link></p>
                </Route>
            </div>

            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <defs>
                    <filter id="blur">
                        <feGaussianBlur stdDeviation="5" />
                    </filter>
                </defs>
            </svg>
        </div>
    );
}

export default Auth;