0% found this document useful (0 votes)
13 views2 pages

Admins Chema

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
13 views2 pages

Admins Chema

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, { useState } from "react";

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


import { useNavigate } from 'react-router';
const Register = () => {

const navigate = useNavigate()

const [user, setUser] = useState({


username: "",
email: "",
password: ""
});

const handleInput = (event) => {


let name = event.target.name;
let value = event.target.value;

setUser({ ...user, [name]: value });

const handleSubmit = async (event) => {


event.preventDefault();
const { username, email, password } = user;

try {
const res = await fetch('/register', {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username, email, password
})
})
console.log(res.status)
if (res.status === 200 || !res) {
window.alert("Already Used Details")
} else {
window.alert("Registered Successfully");
navigate.push('/login')
}

} catch (error) {
console.log(error);
}
}
return (
<div>
<div className="container shadow my-5">
<div className="row justify-content-end">
<div className="col-md-5 d-flex flex-column align-items-center
text-white justify-content-center form order-2">
<h1 className="display-4 fw-bolder">
Hello, Friend
</h1>
<p className="lead text-center">Enter Your Details to
Register</p>
<h5 className="mb-4">OR</h5>
<NavLink to="/login" className="btn btn-outline-light
rounded-pill pb-2 w-50">Login</NavLink>
</div>
<div className="col-md-6 p-5">

<h1 className="display-6 fw-bolder mb-5">REGISTER</h1>


<form onSubmit={handleSubmit} method="POST">
<div class="mb-3">
<label for="name"
class="form-label">Username</label>
<input type="text" class="form-control" id="name"
name="username"
value={user.username}
onChange={handleInput} />

You might also like