Add Forgot Password functionality and related components

- Introduced new components for the Forgot Password flow: EmailInput, OTPInput, OTPVerification, PasswordSetup, and ConfirmationMessage.
- Implemented navigation updates in DashboardCard for project links.
- Added a new decal image asset for the categories.
- Updated sidebar assets to include decals.
- Enhanced UserAuth page to include a link for forgotten passwords.
- Created a dedicated ForgotPassword page to manage the entire password recovery process.
- Added styles for the new Forgot Password components and updated existing styles for consistency.

app/src/pages/ForgotPassword.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import { LogoIconLarge } from '../components/icons/Logo';
+import EmailInput from '../components/forgotPassword/EmailInput';
+import OTPVerification from '../components/forgotPassword/OTP_Verification';
+import PasswordSetup from '../components/forgotPassword/PasswordSetup';
+import ConfirmationMessage from '../components/forgotPassword/ConfirmationMessgae';
+
+const ForgotPassword: React.FC = () => {
+    const [step, setStep] = useState(1);
+    const [email, setEmail] = useState('');
+    const [code, setCode] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [timer, setTimer] = useState(30);
+
+    useEffect(() => {
+        let countdown: NodeJS.Timeout;
+        if (step === 2 && timer > 0) {
+            countdown = setTimeout(() => setTimer(prev => prev - 1), 1000);
+        }
+        return () => clearTimeout(countdown);
+    }, [step, timer]);
+
+    const handleSubmitEmail = () => {
+        setStep(2);
+        setTimer(30);
+    }
+    const resendCode = () => {
+        // TODO: call API to resend code
+        setTimer(30);
+    };
+
+    return (
+        <div className='forgot-password-page auth-container'>
+            <div className='forgot-password-wrapper'>
+                <div className='logo-icon'>
+                    <LogoIconLarge />
+                </div>
+
+
+                {step === 1 && (
+                    <>
+                        <EmailInput
+                            email={email}
+                            setEmail={setEmail}
+                            onSubmit={handleSubmitEmail}
+                        />
+                        <a href='/' className='login continue-button'>Login</a>
+                    </>
+
+                )}
+
+
+                {step === 2 && (
+                    <>
+                        <OTPVerification
+                            email={email}
+                            timer={timer}
+                            setCode={setCode}
+                            onSubmit={() => setStep(3)}
+                            resendCode={resendCode}
+                        />
+                        <a href='/' className='login'>Login</a>
+                    </>
+
+                )}
+
+
+                {step === 3 && (
+                    <>
+                        <PasswordSetup
+                            newPassword={newPassword}
+                            confirmPassword={confirmPassword}
+                            setNewPassword={setNewPassword}
+                            setConfirmPassword={setConfirmPassword}
+                            onSubmit={() => setStep(4)}
+                        />
+                        <a href='/' className='login'>Login</a>
+                    </>
+
+                )}
+
+
+                {step === 4 && <ConfirmationMessage />}
+
+
+            </div>
+        </div>
+    );
+};
+
+export default ForgotPassword;

app/src/pages/UserAuth.tsx

@@ -58,10 +58,10 @@ const UserAuth: React.FC = () => {
           const projects = await recentlyViewed(organization, res.message.userId);
           if (res.message.isShare) {
             if (Object.values(projects.RecentlyViewed).length > 0) {
-              const firstId = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
-              if (Object.values(projects?.RecentlyViewed).filter((val: any) => val._id == firstId)) {
+              const recent_opend_projectID = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
+              if (Object.values(projects?.RecentlyViewed).filter((val: any) => val._id == recent_opend_projectID)) {
                 setLoadingProgress(1)
-                navigate(`/${firstId}`)
+                navigate(`/projects/${recent_opend_projectID}`)
               } else {
                 navigate("/Dashboard")
               }
@@ -200,6 +200,9 @@ const UserAuth: React.FC = () => {
             <EyeIcon isClosed={showPassword} />
           </button>
         </div>
+
+        {isSignIn && <a href="forgot" className="forgot-password">Forgot password ?</a>}
+
         {!isSignIn && (
           <div className="policy-checkbox">
             <input type="checkbox" id="tos" required />