Implementing Registration via App.

Loading and resizing components.

Author: raphaelcordon

public/loadingPencil.png

@@ -0,0 +1,17 @@
+const ButtonSubmitDefault = ({ buttonName, type = "button", disabled = false }) => {
+    return (
+        <div className="">
+            <button
+                type={type}
+                disabled={disabled}
+                className={`px-4 py-2 bg-blue-500 text-white rounded ${
+                    disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-800"
+                }`}
+            >
+                {buttonName}
+            </button>
+        </div>
+    );
+};
+
+export default ButtonSubmitDefault;

src/components/Buttons/ButtonSubmitDefault.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const LoaderComponent = () => {
+    return (
+        <div className="flex flex-col items-center justify-center w-full h-full">
+            <div className="relative w-20 h-20 flex items-center justify-center">
+                {/* The spinning circular border */}
+                <div className="absolute inset-0 border-4 border-gray-300 border-t-green-500 rounded-full animate-spin"></div>
+                {/* The centered image */}
+                <img src="/loadingPencil.png" alt="Loading" className="w-14 h-14" />
+            </div>
+        </div>
+    );
+};
+
+export default LoaderComponent;

src/components/Common/LoaderComponent.jsx

@@ -2,6 +2,7 @@ import {useSelector} from "react-redux";
 import useGetReview from "../../hooks/useGetReview.jsx";
 import {useEffect, useState} from "react";
 import ReviewCardComponent from "../review/reviewCardComponent.jsx";
+import LoaderComponent from "../Common/LoaderComponent.jsx";
 
 const MainAlbumsComponent = () => {
     const review = useSelector((state) => state.reviewAlbum.reviewAlbumData);
@@ -25,7 +26,7 @@ const MainAlbumsComponent = () => {
     };
 
     return (
-        <div className="w-screen min-h-screen flex justify-center mb-10">
+        <div className="w-screen min-h-[60vh] flex justify-center mb-10">
             <div className="w-full lg:w-4/5 flex flex-wrap gap-3 lg:gap-5">
                 {error && <p>{error}</p>}
                 {review?.totalCount > 0 ? (
@@ -51,7 +52,7 @@ const MainAlbumsComponent = () => {
                         )}
                     </>
                 ) : (
-                    <p>Loading reviews...</p>
+                    <LoaderComponent />
                 )}
             </div>
         </div>

src/components/Main/MainAlbumsComponent.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import ReviewCardComponent from "../review/reviewCardComponent.jsx";
 import { useSelector } from "react-redux";
 import useGetReview from "../../hooks/useGetReview.jsx";
+import LoaderComponent from "../Common/LoaderComponent.jsx";
 
 const MainArtistsComponent = () => {
     const review = useSelector((state) => state.reviewArtist.reviewArtistData);
@@ -25,7 +26,7 @@ const MainArtistsComponent = () => {
     };
 
     return (
-        <div className="w-screen min-h-screen flex justify-center mb-10">
+        <div className="w-screen min-h-[60vh] flex justify-center mb-10">
             <div className="w-full lg:w-4/5 flex flex-wrap gap-3 lg:gap-5">
                 {error && <p>{error}</p>}
                 {review?.totalCount > 0 ? (
@@ -51,7 +52,7 @@ const MainArtistsComponent = () => {
                         )}
                     </>
                 ) : (
-                    <p>Loading reviews...</p>
+                    <LoaderComponent />
                 )}
             </div>
         </div>

src/components/Main/MainArtistsComponent.jsx

@@ -2,6 +2,7 @@ import {useSelector} from "react-redux";
 import useGetReview from "../../hooks/useGetReview.jsx";
 import {useEffect, useState} from "react";
 import ReviewCardComponent from "../review/reviewCardComponent.jsx";
+import LoaderComponent from "../Common/LoaderComponent.jsx";
 
 const MainTracksComponent = () => {
     const review = useSelector((state) => state.reviewTrack.reviewTrackData);
@@ -25,7 +26,7 @@ const MainTracksComponent = () => {
     };
 
     return (
-        <div className="w-screen min-h-screen flex justify-center mb-10">
+        <div className="w-screen min-h-[60vh] flex justify-center mb-10">
             <div className="w-full lg:w-4/5 flex flex-wrap gap-3 lg:gap-5">
                 {error && <p>{error}</p>}
                 {review?.totalCount > 0 ? (
@@ -51,7 +52,7 @@ const MainTracksComponent = () => {
                         )}
                     </>
                 ) : (
-                    <p>Loading reviews...</p>
+                    <LoaderComponent />
                 )}
             </div>
         </div>

src/components/Main/MainTracksComponent.jsx

@@ -10,4 +10,5 @@
 .navlink-style a:hover {
     color: rgb(96 165 250);
     text-shadow: 2px 1px #fdfdfd;
-}
+}
+

src/index.css

@@ -8,7 +8,7 @@ const _BaseLayout = () => {
     const [activeComponent, setActiveComponent] = useState('artists');
 
     return (
-        <div className="flex flex-col min-h-screen w-screen">
+        <div className="flex flex-col h-screen w-screen">
 
             {/*Mobile Top Navbar*/}
             <div className="w-full bg-white md:hidden order-1 h-12">
@@ -21,7 +21,7 @@ const _BaseLayout = () => {
             </div>
 
             {/* Main Content Area */}
-            <div className="flex-grow w-full min-h-80vh order-2 pb-16 md:pb-0">
+            <div className="flex-grow w-full h-60vh order-2 pb-16 md:pb-0">
                 <Outlet context={[activeComponent]}/>
             </div>
 

src/routes/_baseLayout/index.jsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
-import { Button } from "react-bootstrap";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import useAuth from "../../hooks/useAuth.jsx";
 import { toast, ToastContainer } from "react-toastify";
+import ButtonSubmitDefault from "../../components/Buttons/ButtonSubmitDefault.jsx";
 
 const Login = () => {
     const [email, setEmail] = useState('');
@@ -40,10 +40,10 @@ const Login = () => {
     };
 
     return (
-        <div className="flex flex-col justify-start pt-6 items-center min-h-80vh bg-gray-100">
+        <div className="flex flex-col justify-start pt-6 items-center min-h-[60vh]">
             <ToastContainer />
 
-            <div className="max-w-lg w-full p-6 bg-base-100 rounded-lg shadow-lg">
+            <div className="max-w-lg w-[95vw] p-6 bg-gray-300 rounded-lg shadow-lg">
                 <h4 className="text-start text-sm mt-1 mb-4">
                     <span>Don't have an account yet? </span>
                     <span className="navlink-style font-semibold">
@@ -89,11 +89,11 @@ const Login = () => {
                     </div>
                     <div className="text-center">
                         {authError && <p className="text-error text-sm mt-2">{authError}</p>}
-                        <Button
+                        <ButtonSubmitDefault
+                            buttonName={isLoading ? "Logging in..." : "Login"}
                             type="submit"
-                            disabled={isLoading || email === "" || password === ""}>
-                            {isLoading ? 'Logging in...' : 'Login'}
-                        </Button>
+                            disabled={isLoading || email === "" || password === ""}
+                        />
                     </div>
                 </form>
                 {error && <p className="text-error text-sm mt-2">{error}</p>}

src/routes/login/index.jsx

@@ -1,34 +1,52 @@
 import { useState, useEffect } from "react";
-import {Button} from "react-bootstrap";
+import ButtonSubmitDefault from "../../components/Buttons/ButtonSubmitDefault.jsx";
+import {Create} from "../../axios/userAxios.js"
+import {useNavigate} from "react-router-dom";
 
 const Register = () => {
     const [firstName, setFirstName] = useState('');
     const [lastName, setLastName] = useState('');
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [rePassword, setRePassword] = useState('');
+    
     const [error, setError] = useState('');
+    const navigate = useNavigate();
     const [isLoading, setIsLoading] = useState(false);
 
-    const getSubmitData = async (e) => {
+    const handleSignUp = async (e) => {
         e.preventDefault();
-        // setError(null);
-        // setIsLoading(true);
-        // try {
-        //     await authenticateUser(email, password);
-        // } catch (error) {
-        //     setError(error.message || "Failed to login. Please try again.");
-        // } finally {
-        //     setIsLoading(false);
-        // }
+        setError('');
+
+        // Check if passwords match
+        if (password !== rePassword) {
+            setError('Passwords do not match.');
+            return;
+        }
+
+        const userData = { firstName, lastName ,email, password };
+
+        try {
+            setError('');
+            // Registration
+            await Create(userData);
+            navigate("/login");
+        } catch (error) {
+            if (error.response && error.response.data && error.response.data.message) {
+                setError(error.response.data.message);
+            } else {
+                setError("This email is already registered");
+            }
+            console.log(error);
+        }
     };
 
     return (
-        <div className="flex flex-col justify-start pt-6 items-center min-h-80vh bg-gray-100">
-            <div className="max-w-lg w-full p-6 bg-base-100 rounded-lg shadow-lg">
+        <div className="flex flex-col justify-start pt-6 items-center min-h-[60vh]">
+            <div className="max-w-lg w-[95vw] p-6 bg-gray-300 rounded-lg shadow-lg">
 
-                <h2 className="font-semibold text-start mt-4 mb-4">Register to get access to write your own reviews</h2>
-                <form onSubmit={getSubmitData}>
+                <h2 className="font-semibold text-center mt-4 mb-4">Register and write your own reviews</h2>
+                <form onSubmit={handleSignUp}>
                     <div className="mb-4">
                         <label htmlFor="firstName" className="block mb-2 text-sm text-accent-content">
                             First Name
@@ -103,12 +121,14 @@ const Register = () => {
 
                     <div className="text-center">
                         {error?.password && <p>{error.password}</p>}
-                        <Button disabled={isLoading || email === ""
+                        <ButtonSubmitDefault
+                            buttonName={isLoading ? "Registering..." : "Register"}
+                            type="submit"
+                            disabled={isLoading || email === ""
                             || firstName === "" || lastName === ""
-                            || password === "" || rePassword === ""}>
-                            {isLoading ? 'Registering...' : 'Register'}
-                        </Button>
+                            || password === "" || rePassword === ""} />
                     </div>
+                    
                 </form>
                 <div className="text-center">
                     {error && <p className="text-error text-sm mt-2">{error}</p>}

src/routes/register/index.jsx

@@ -12,16 +12,15 @@ module.exports = {
         HoverLinksBgColor:'rgb(96 165 250)',
         HoverLinksTextColor: '#FFF',
       },
+      animation: {
+        spin: 'spin 1.5s linear infinite', // Adjust timing (e.g., 1s)
+      },
       minHeight: {
         '20vh': '20vh',
         '80vh': '80vh',
         '90vh': '90vh',
       },
     },
   },
-  // plugins: [require('daisyui')],
   plugins: [],
-  // daisyui: {
-  //   themes: ["corporate"],
-  // },
 };