🔑 improve register page ux

frontend/src/Login/Login.tsx

@@ -1,28 +1,28 @@
-import classes from './Login.module.css';
-import { AuthScreen } from '../AuthScreen/AuthScreen';
-import { TextInput, TextOptions } from '../TextInput/TextInput';
-import { UserCircleIcon } from '@heroicons/react/24/outline';
-import { LockClosedIcon } from '@heroicons/react/24/outline';
-import { useState, FormEvent, useContext } from 'react';
-import { Link } from 'react-router';
-import { errorHandler, AuthError } from '../errorHandler';
-import { UserContext, User } from '../UserContext/UserContext';
+import classes from "./Login.module.css";
+import { AuthScreen } from "../AuthScreen/AuthScreen";
+import { TextInput, TextOptions } from "../TextInput/TextInput";
+import { UserCircleIcon } from "@heroicons/react/24/outline";
+import { LockClosedIcon } from "@heroicons/react/24/outline";
+import { useState, FormEvent, useContext } from "react";
+import { Link } from "react-router";
+import { errorHandler, AuthError } from "../errorHandler";
+import { UserContext, User } from "../UserContext/UserContext";
 
 export default function LoginPage() {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
   const [error, setError] = useState<AuthError | undefined>(undefined);
   const [success, setSuccess] = useState<string | undefined>(undefined);
   const { setUser } = useContext(UserContext);
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
-    const res = await fetch('http://localhost:5180/auth/login', {
-      method: 'POST',
+    const res = await fetch("http://localhost:5180/auth/login", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
-      credentials: 'include',
+      credentials: "include",
       body: JSON.stringify({
         username,
         password,
@@ -34,7 +34,7 @@ export default function LoginPage() {
       setError(errorHandler(json.error));
     } else if (setUser) {
       setError(undefined);
-      setSuccess('Logged in successfully! Redirecting...');
+      setSuccess("Logged in successfully! Redirecting...");
       setTimeout(() => {
         setUser(json as User);
       }, 1000);

frontend/src/Register/Register.tsx

@@ -4,14 +4,17 @@ import { TextInput, TextOptions } from "../TextInput/TextInput";
 import { AtSymbolIcon, UserCircleIcon } from "@heroicons/react/24/outline";
 import { LockClosedIcon } from "@heroicons/react/24/outline";
 import { useState, FormEvent } from "react";
-import { Link } from "react-router";
+import { Link, useNavigate } from "react-router";
 import { errorHandler, AuthError } from "../errorHandler";
 
 export default function RegisterPage() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [email, setEmail] = useState("");
   const [error, setError] = useState<AuthError | undefined>(undefined);
+  const [success, setSuccess] = useState<string | undefined>(undefined);
+  const navigate = useNavigate();
+
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const res = await fetch("http://localhost:5180/auth/register", {
@@ -31,6 +34,10 @@ export default function RegisterPage() {
       setError(errorHandler(json.error));
     } else {
       setError(undefined);
+      setSuccess("Signed up successfully! Redirecting to login page...");
+      setTimeout(() => {
+        navigate("/login");
+      }, 1000);
     }
   }
 
@@ -76,6 +83,7 @@ export default function RegisterPage() {
         buttonText="Sign up"
         onSubmit={handleSubmit}
         error={error}
+        success={success}
       />
       <div className={classes.lower} />
     </main>