Redirect on signin and signup

PythonBulawayo · Mar 29, 2024 · 1270d85 · 1270d85
1 parent e5753fd
commit 1270d85
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/frontend/src/components/auth/index.jsx b/frontend/src/components/auth/index.jsx
@@ -1,13 +1,19 @@
 /* eslint-disable react/react-in-jsx-scope */
 import { Button, Card, TextInput, Avatar } from "flowbite-react";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 export default function Login() {
 	const [data, setData] = useState({
 		email: "",
 		password: "",
 	});
 
+	const navigate = useNavigate();
+	const handleNavigation = () => {
+		navigate("/signup");
+	};
+
 	const onChange = (e) => {
 		setData({ ...data, [e.target.id]: e.target.value });
 	};
@@ -41,7 +47,9 @@ export default function Login() {
 						<Button type="submit" style={{ backgroundColor: "green" }}>
 							Sign In
 						</Button>
-						<Button type="submit">Create Account</Button>
+						<Button type="button" onClick={handleNavigation}>
+							Create Account
+						</Button>
 					</form>
 				</Card>
 			</center>

diff --git a/frontend/src/components/registration/index.jsx b/frontend/src/components/registration/index.jsx
@@ -2,6 +2,7 @@
 import { Button, Card, TextInput, Avatar } from "flowbite-react";
 import { useState } from "react";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 
 export default function Registration() {
 	const [data, setData] = useState({
@@ -12,6 +13,8 @@ export default function Registration() {
 		username: "",
 	});
 
+	const navigate = useNavigate();
+
 	const onChange = (e) => {
 		setData({ ...data, [e.target.id]: e.target.value });
 	};
@@ -28,15 +31,16 @@ export default function Registration() {
 		axios
 			.post("http://localhost:8000/api/signup", data)
 			.then(() => {
-				alert("Successfully signed up");
+				alert("Success");
+				navigate("/users");
 			})
 			.catch(() => {
 				alert("Failed to submit");
 			});
 	};
 
 	return (
-		<center style={{ marginTop: "250px" }}>
+		<center style={{ marginTop: "5vh" }}>
 			<Card className="max-w-md">
 				<Avatar img="/user.png" rounded size="xl" />
 				<h3 className="text-center text-xl mb-4 mt-4">Welcome to Chit-Chat</h3>