[SOLVED] Website account creation: How to add a pop-up saying account creation was successful? ReactJS

Currently on our fan website we have established a very simple account creation function: once a user completes their account creation, they have no way of knowing if the creation was successfull or not as we have no pop up showing up or anything.

After filling all 3 "Email, LoginID and Password" fields and pressing "create new account", the users get redirected to the front page, regardless if the creation was successful or not. To check if the account creation was successful, they have to try to "Login" and if they can log in, then the account creation was indeed successful, if they cannot, then the account creation failed. For instance, the website doesn't allow you to use Login IDs that have been already used, and so when users create an account with a used Login, their account does not get created but they get redirected to the homepage anyways without any sort of pop-up appearing saying that their account creation failed.

I'd like to implement a pop-up that shows up after account creation, one for the successful creations and another for the failed ones.

This is the code for the registration page:

import { Button } from 'react-bootstrap';
import useInput from '../../hooks/UseInput';
import axios from 'axios';
import "../../UI/navbar/auth/login.css"
import { useNavigate } from 'react-router-dom';

const isNotEmpty = (value) => value.trim() !== '';
const isEmail = (value) => value.includes('@');

function Register(props) {
    const navigate = useNavigate()

    //username input
    const {
        value: usernameValue,
        isValid: usernameIsValid,
        hasError: usernameHasError,
        valueChangeHandler: usernameChangeHandler,
        inputBlurHandler: usernameBlurHandler,
        reset: resetUsername
    } = useInput(isNotEmpty)

    //password input
    const {
        value: passwordValue,
        isValid: passwordIsValid,
        hasError: passwordHasError,
        valueChangeHandler: passwordChangeHandler,
        inputBlurHandler: passwordBlurHandler,
        reset: resetPassword
    } = useInput(isNotEmpty)

    //email input
    const {
        value: emailValue,
        isValid: emailIsValid,
        hasError: emailHasError,
        valueChangeHandler: emailChangeHandler,
        inputBlurHandler: emailBlurHandler,
        reset: resetEmail
    } = useInput(isEmail)

    let formIsValid = false
    if (usernameIsValid && emailIsValid && passwordIsValid) {
        formIsValid = true
    }

    const submitHandler = async event => {
        event.preventDefault()

        const registerInput = {
            username: usernameValue,
            email: emailValue,
            password: passwordValue
        }

        try {
            const res = await axios.post("/api/auth/register", registerInput)
            console.log(registerInput)
        } catch (error) {
            console.log(error.response?.data)
        }

        if (!formIsValid) return

        resetEmail()
        resetUsername()
        resetPassword()
        navigate("/")
    }

    const emailClasses = emailHasError ? 'form-control invalid' : 'form-control'
    const usernameClasses = usernameHasError ? 'form-control invalid' : 'form-control'
    const passwordClasses = passwordHasError ? 'form-control invalid' : 'form-control'

    return (
        <div className='centered'>
            <form onSubmit={submitHandler} className='register-box'>
                <h3 className="register-title">Create New Account</h3>
                <div className='control-group'>
                    <div className={emailClasses}>
                        <input required
                            type="email"
                            name="email"
                            value={emailValue}
                            placeholder='Email'
                            onChange={emailChangeHandler}
                            onBlur={emailBlurHandler}
                        />
                        {emailHasError && <p className="error-text">Please provide a valid Email</p>}
                    </div>
                    <div className={usernameClasses}>
                        <input required
                            type="text"
                            name="username"
                            value={usernameValue}
                            placeholder='Login ID'
                            onChange={usernameChangeHandler}
                            onBlur={usernameBlurHandler}
                        />
                        {usernameHasError && <p className="error-text">Please enter your future Login ID</p>}
                    </div>
                    <div className={passwordClasses}>
                        <input required
                            type="password"
                            name="password"
                            value={passwordValue}
                            placeholder='Password'
                            onChange={passwordChangeHandler}
                            onBlur={passwordBlurHandler}
                        />
                        {passwordHasError && <p className="error-text">Please enter your future Password</p>}
                    </div>
                </div>

                <Button disabled={!formIsValid}
                    onClick={submitHandler}
                    variant="primary"
                    type='submit'>
                    Create New Account
                </Button>
                <br></br>
                <br></br>
                <h3 className="register-title2">Account creation is currently disabled. If you wish to create a new account, send in a ticket on our discord server.</h3>
            </form>
        </div>
    )
}

export default Register

and this is the css code for it:

.form-control {
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

.form-control input,
.form-control label {
  display: block;
}

.form-control label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.form-control input,
.form-control select {
  width: 100%;
  font: inherit;
  padding: 5px 20px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.form-control input:focus {
  outline: none;
  border-color: #240370;
  background-color: #e0d4fd;
}

.control-group {
  display: flex;
  flex-direction: column;
  column-gap: 1rem;
  flex-wrap: wrap;
}

.control-group .form-control {
  min-width: 15rem;
  flex: 1;
}

button {
  font: inherit;
  background-color: #240370;
  color: white;
  border: 1px solid #240370;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
button:active {
  background-color: #33059e;
  border-color: #33059e;
}

button:disabled,
button:disabled:hover,
button:disabled:active {
  background-color: #ccc;
  color: #292929;
  border-color: #ccc;
  cursor: not-allowed;
}

.form-actions {
  text-align: right;
}

.form-actions button {
  margin-left: 1rem;
}

.invalid input {
  border: 1px solid #b40e0e;
  background-color: #fddddd;
}

.invalid input:focus {
  border-color: #ff8800;
  background-color: #fbe8d2;
}

.error-text {
  color: #b40e0e;
  text-align: center;
}

.register-box {
  /*border: 2px solid rgb(248, 249, 250);
  border-radius: 12px;*/
  /* box-shadow: 10px 10px 5px rgb(248, 249, 250); */
  display: flex;
  background-color: #141e43a1;
  flex-direction: column;
  width: 35vw;
  padding: 2vw;
  margin-bottom: 600px;
}

.register-box2 {
  /*border: 2px solid rgb(248, 249, 250);
  border-radius: 12px;*/
  /* box-shadow: 10px 10px 5px rgb(248, 249, 250); */
  display: flex;
  background-color: transparent;
  flex-direction: column;
  width: 700px;
  padding: 2vw;
}

.centered {
  display: flex;
  justify-content: center;
  margin-top: 20vh;
}

.register-title {
  color: white;
  font-family: overLock;
  font-size: 2rem;
  text-align: center;
}

.register-title2 {
  color: rgb(197, 40, 100);
  font-family: overLock;
  font-size: 2rem;
  text-shadow: 2px 2px 2px black;
  text-align: center;
}

.login_title {
  text-align: center;
  padding-top: 15px;
  margin-bottom: 0;
}

.login_button {
  margin-left: 85px;
}

The person that made the website is MIA and I am not really much of a webdev or coder, so I come to these forums in hopes of finding someone that can help us out with this.

Please do let me know if I need to provide more information!