feat: implement Settings page security actions #250

client/cyber_lens/src/App.tsx

@@ -11,6 +11,7 @@ import Footer from "./components/Footer";
 import Home from "./pages/Home";
 import History from "./pages/History";
 import News from "./pages/News";
+
 import Login from "./pages/Login";
 import Signup from "./pages/Signup";
 import SentEmail from "./pages/SentEmailConfirmation";
@@ -19,6 +20,8 @@ import RequestPasswordReset from "./pages/RequestPasswordReset";
 import ResetPassword from "./pages/ResetPassword";
 import Analytics from "./pages/Analytics";
 import NewsDetail from "./pages/NewsDetail";
+import Settings from "./pages/Settings";
+import VerifyAction from "./pages/VerifyAction";
 
 const Layout = () => {
   return (
@@ -43,13 +46,15 @@ function App() {
           <Route path="/news" element={<News />} />
           <Route path="/news/:id" element={<NewsDetail />} />
           <Route path="/analytics" element={<Analytics />} />
+          <Route path="/settings" element={<Settings />} />
         </Route>
 
         {/* -------- Auth Pages (NO Navbar / Footer) -------- */}
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<Signup />} />
         <Route path="/check-email" element={<SentEmail />} />
         <Route path="/verify-email" element={<VerifyEmail />} />
+        <Route path="/verify-action" element={<VerifyAction />} />
         <Route path="/forgot-password" element={<RequestPasswordReset />} />
         <Route path="/reset-password" element={<ResetPassword />} />
       </Routes>

client/cyber_lens/src/components/Navbar.tsx

@@ -4,7 +4,6 @@ import { useState, useEffect, useRef } from "react";
 import { useAuth } from "../hooks/useAuth";
 import Avatar from "./Avatar";
 
-
 const Navbar = () => {
   const [open, setOpen] = useState(false);
   const [profileDropdownOpen, setProfileDropdownOpen] = useState(false);
@@ -14,20 +13,18 @@ const Navbar = () => {
   const [isSigningOut, setIsSigningOut] = useState(false);
 
   const handleLogout = () => {
-  if (isSigningOut) return;
-
-  setIsSigningOut(true);
-
-  setTimeout(() => {
-    logout();
-    setProfileDropdownOpen(false);
-    setOpen(false);
-    navigate("/");
-    setIsSigningOut(false);
-  }, 800);
-};
+    if (isSigningOut) return;
 
+    setIsSigningOut(true);
 
+    setTimeout(() => {
+      logout();
+      setProfileDropdownOpen(false);
+      setOpen(false);
+      navigate("/");
+      setIsSigningOut(false);
+    }, 800);
+  };
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -133,10 +130,14 @@ const Navbar = () => {
                         <i className="fa-solid fa-user text-slate-400" />
                         <span>Profile</span>
                       </button>
-                      <button className="w-full px-4 py-2 text-left text-sm text-slate-300 hover:bg-slate-800 transition-colors flex items-center gap-3">
+                      <NavLink
+                        to="/settings"
+                        onClick={() => setProfileDropdownOpen(false)}
+                        className="w-full px-4 py-2 text-left text-sm text-slate-300 hover:bg-slate-800 transition-colors flex items-center gap-3"
+                      >
                         <i className="fa-solid fa-gear text-slate-400" />
                         <span>Settings</span>
-                      </button>
+                      </NavLink>
                     </div>
 
                     {/* Logout */}
@@ -154,7 +155,6 @@ const Navbar = () => {
                         <i className="fa-solid fa-right-from-bracket text-orange-400" />
                         <span>{isSigningOut ? "Signing out…" : "Logout"}</span>
                       </button>
-
                     </div>
                   </div>
                 )}
@@ -181,7 +181,11 @@ const Navbar = () => {
         {/* Mobile Menu */}
         {open && (
           <div className="md:hidden border-t border-slate-800 py-3 flex flex-col">
-            <NavLink to="/" onClick={() => setOpen(false)} className={linkClass}>
+            <NavLink
+              to="/"
+              onClick={() => setOpen(false)}
+              className={linkClass}
+            >
               Home
             </NavLink>
 
@@ -202,11 +206,11 @@ const Navbar = () => {
             </NavLink>
 
             <NavLink
-              to="/analytics"
+              to="/settings"
               onClick={() => setOpen(false)}
               className={linkClass}
             >
-              Analytics
+              Settings
             </NavLink>
 
             {isAuthenticated && user ? (
@@ -223,19 +227,19 @@ const Navbar = () => {
                       </p>
                     </div>
                   </div>
-                    <button
-                      onClick={handleLogout}
-                      disabled={isSigningOut}
-                      className={`w-full px-4 py-2 text-left text-sm rounded transition-colors flex items-center gap-3
+                  <button
+                    onClick={handleLogout}
+                    disabled={isSigningOut}
+                    className={`w-full px-4 py-2 text-left text-sm rounded transition-colors flex items-center gap-3
                         ${
                           isSigningOut
                             ? "text-slate-500 cursor-not-allowed"
                             : "text-slate-300 hover:bg-slate-800"
                         }`}
-                    >
-                      <i className="fa-solid fa-right-from-bracket text-orange-400" />
-                      <span>{isSigningOut ? "Signing out…" : "Logout"}</span>
-                    </button>
+                  >
+                    <i className="fa-solid fa-right-from-bracket text-orange-400" />
+                    <span>{isSigningOut ? "Signing out…" : "Logout"}</span>
+                  </button>
                 </div>
               </>
             ) : (