UPDATE: Fix to stream/userpage routing, Added UserPage and Tidy to code;

Added ability to visit a user's profile page from their stream;
Cleaned up code formatting, primarily changing from single quotes to double quotes;
Removed unused SignupForm component;

frontend/src/components/Auth/AuthModal.tsx

@@ -5,14 +5,13 @@ import LoginForm from "./LoginForm";
 import RegisterForm from "./RegisterForm";
 import "../../assets/styles/auth.css";
 
-
 interface AuthModalProps {
   onClose: () => void;
 }
 
 const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
   const [selectedTab, setSelectedTab] = useState<string>("Login");
-  const [spinDuration, setSpinDuration] = useState("7s")
+  const [spinDuration, setSpinDuration] = useState("7s");
 
   const handleSubmit = () => {
     setSpinDuration("1s");
@@ -25,21 +24,26 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
   return (
     <>
       {/*Background Blur*/}
-      <div id="blurring-layer" className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
+      <div
+        id="blurring-layer"
+        className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"
+      ></div>
       {/*Container*/}
       <div
         className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
         h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all animate-floating"
         style={{ "--spin-duration": spinDuration } as React.CSSProperties}
       >
-
-        {/*Border Container*/}  
-        <div  
+        {/*Border Container*/}
+        <div
           id="border-container"
           className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
           z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
+        >
+          <div
+            id="login-methods"
+            className=" w-full flex flex-row items-center justify-evenly"
           >
-          <div id="login-methods" className=" w-full flex flex-row items-center justify-evenly">
             <button
               onClick={onClose}
               className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
@@ -63,7 +67,11 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
               Register
             </ToggleButton>
           </div>
-          {selectedTab === "Login" ? <LoginForm onSubmit={handleSubmit} /> : <RegisterForm onSubmit={handleSubmit}/>}
+          {selectedTab === "Login" ? (
+            <LoginForm onSubmit={handleSubmit} />
+          ) : (
+            <RegisterForm onSubmit={handleSubmit} />
+          )}
         </div>
       </div>
     </>

frontend/src/components/Auth/LoginForm.tsx

@@ -16,7 +16,7 @@ interface FormErrors {
 
 //Speed up border animation
 interface SubmitProps {
-  onSubmit: () => void; 
+  onSubmit: () => void;
 }
 
 const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {

frontend/src/components/Auth/RegisterForm.tsx

@@ -19,7 +19,7 @@ interface FormErrors {
 }
 
 interface SubmitProps {
-  onSubmit: () => void; 
+  onSubmit: () => void;
 }
 
 const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
@@ -115,7 +115,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
       {errors.general && (
         <p className="text-red-500 text-sm text-center">{errors.general}</p>
       )}
-      
+
       {errors.username && (
         <p className="text-red-500 mt-3 text-sm">{errors.username}</p>
       )}
@@ -126,6 +126,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
         onChange={handleInputChange}
         extraClasses={`${errors.username ? "border-red-500" : ""}`}
       />
+
       {errors.email && (
         <p className="text-red-500 mt-3 text-sm">{errors.email}</p>
       )}
@@ -137,6 +138,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
         onChange={handleInputChange}
         extraClasses={`${errors.email ? "border-red-500" : ""}`}
       />
+
       {errors.password && (
         <p className="text-red-500 mt-3 text-sm">{errors.password}</p>
       )}
@@ -148,6 +150,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
         onChange={handleInputChange}
         extraClasses={`${errors.password ? "border-red-500" : ""}`}
       />
+
       {errors.confirmPassword && (
         <p className="text-red-500 mt-3 text-sm">{errors.confirmPassword}</p>
       )}
@@ -159,6 +162,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
         onChange={handleInputChange}
         extraClasses={`${errors.confirmPassword ? "border-red-500" : ""}`}
       />
+
       <Button type="submit">Register</Button>
     </form>
   );

frontend/src/components/Auth/SignupForm.tsx

@@ -1 +0,0 @@
-// signup.html