FIX: #693 Registration navigation logic and add Sign Out button

docs/backend/backend_python/openapi.json

@@ -1117,9 +1117,14 @@
             "in": "query",
             "required": false,
             "schema": {
-              "$ref": "#/components/schemas/InputType",
+              "allOf": [
+                {
+                  "$ref": "#/components/schemas/InputType"
+                }
+              ],
               "description": "Choose input type: 'path' or 'base64'",
-              "default": "path"
+              "default": "path",
+              "title": "Input Type"
             },
             "description": "Choose input type: 'path' or 'base64'"
           }
@@ -2199,7 +2204,6 @@
           "metadata": {
             "anyOf": [
               {
-                "additionalProperties": true,
                 "type": "object"
               },
               {

frontend/package.json

@@ -62,6 +62,7 @@
     "react-image-crop": "^11.0.7",
     "react-redux": "^9.2.0",
     "react-router": "^7.6.2",
+    "react-router-dom": "^7.10.1",
     "react-webcam": "^7.2.0",
     "react-zoom-pan-pinch": "^3.7.0",
     "tailwind-merge": "^3.3.0",

frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx

@@ -33,9 +33,16 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
   const [name, setLocalName] = useState('');
   const [selectedAvatar, setLocalAvatar] = useState('');
 
+  // FIX: Restore saved data instead of auto-skipping
   useEffect(() => {
-    if (localStorage.getItem('name') && localStorage.getItem('avatar')) {
-      dispatch(markCompleted(stepIndex));
+    const savedName = localStorage.getItem('name');
+    const savedAvatar = localStorage.getItem('avatar');
+
+    if (savedName) {
+      setLocalName(savedName);
+    }
+    if (savedAvatar) {
+      setLocalAvatar(savedAvatar);
     }
   }, []);
 
@@ -55,24 +62,22 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
     dispatch(markCompleted(stepIndex));
   };
 
-  if (localStorage.getItem('name') && localStorage.getItem('avatar')) {
-    return null;
-  }
+
 
   return (
     <>
       <Card className="flex max-h-full w-1/2 flex-col gap-3 border p-4">
         <CardHeader className="p-3">
           <div className="text-muted-foreground mb-1 flex justify-between text-xs">
             <span>
-              Step {stepIndex + 1} of {totalSteps}
+              Step {stepIndex} of {totalSteps}
             </span>
-            <span>{Math.round(((stepIndex + 1) / totalSteps) * 100)}%</span>
+            <span>{Math.round(((stepIndex) / totalSteps) * 100)}%</span>
           </div>
           <div className="bg-muted mb-2 h-1.5 w-full rounded-full">
             <div
               className="bg-primary h-full rounded-full transition-all duration-300"
-              style={{ width: `${((stepIndex + 1) / totalSteps) * 100}%` }}
+              style={{ width: `${((stepIndex) / totalSteps) * 100}%` }}
             />
           </div>
           <CardTitle className="mt-1 text-xl font-semibold">

frontend/src/components/OnboardingSteps/FolderSetupStep.tsx

@@ -30,9 +30,11 @@ export function FolderSetupStep({
   // Local state for folders
   const [folder, setFolder] = useState<string>('');
 
+  // FIX: Restore saved folder path if it exists
   useEffect(() => {
-    if (localStorage.getItem('folderChosen') === 'true') {
-      dispatch(markCompleted(stepIndex));
+    const savedFolder = localStorage.getItem('savedFolderPath');
+    if (savedFolder) {
+      setFolder(savedFolder);
     }
   }, []);
 
@@ -53,6 +55,8 @@ export function FolderSetupStep({
 
   const handleNext = () => {
     localStorage.setItem('folderChosen', 'true');
+    // FIX: Save the actual path so we can restore it later
+    localStorage.setItem('savedFolderPath', folder); 
     addFolderMutate(folder);
     dispatch(markCompleted(stepIndex));
   };
@@ -61,18 +65,16 @@ export function FolderSetupStep({
     dispatch(previousStep());
   };
 
-  if (localStorage.getItem('folderChosen') === 'true') {
-    return null;
-  }
-  const progressPercent = Math.round(((stepIndex + 1) / totalSteps) * 100);
+
+  const progressPercent = Math.round(((stepIndex ) / totalSteps) * 100);
 
   return (
     <>
       <Card className="flex max-h-full w-1/2 flex-col border p-4">
         <CardHeader className="p-3">
           <div className="text-muted-foreground mb-1 flex justify-between text-xs">
             <span>
-              Step {stepIndex + 1} of {totalSteps}
+              Step {stepIndex } of {totalSteps}
             </span>
             <span>{progressPercent}%</span>
           </div>

frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx

@@ -51,14 +51,14 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
     return null;
   }
 
-  const progressPercent = Math.round(((stepIndex + 1) / totalSteps) * 100);
+  const progressPercent = Math.round(((stepIndex) / totalSteps) * 100);
   return (
     <>
       <Card className="flex max-h-full w-1/2 flex-col border p-4">
         <CardHeader className="p-3">
           <div className="text-muted-foreground mb-1 flex justify-between text-xs">
             <span>
-              Step {stepIndex + 1} of {totalSteps}
+              Step {stepIndex} of {totalSteps}
             </span>
             <span>{progressPercent}%</span>
           </div>

frontend/src/pages/SettingsPage/Settings.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
 
 // Import modular components
 import FolderManagementCard from './components/FolderManagementCard';
@@ -10,6 +12,15 @@ import ApplicationControlsCard from './components/ApplicationControlsCard';
  * Acts as an orchestrator for the settings sections
  */
 const Settings: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleSignOut = () => {
+    // 1. Wipe all local storage (Auth, Folder, Name)
+    localStorage.clear();
+    // 2. Force a hard reload to reset state and go to Welcome screen
+    window.location.href = "/";
+  };
+
   return (
     <div className="mx-auto flex-1 px-8 py-6">
       <div className="mx-auto max-w-5xl space-y-8">
@@ -21,9 +32,22 @@ const Settings: React.FC = () => {
 
         {/* Application Controls */}
         <ApplicationControlsCard />
+
+        {/* Sign Out Button - Aligned Right */}
+        <div className="mt-8 flex justify-end border-t pt-6">
+          <Button 
+            variant="destructive" 
+            onClick={handleSignOut}
+            // Removed 'w-full' to make it a normal rectangle.
+            // 'variant="destructive"' provides the red color and hover shade.
+          >
+            Sign Out
+          </Button>
+        </div>
+
       </div>
     </div>
   );
 };
 
-export default Settings;
+export default Settings;