added screenlock, fixes for PIN forms

Author: atom7xyz

src/frontend/App.tsx

@@ -13,6 +13,8 @@ import PrivacyPolicy from './components/pages/PrivacyPolicy';
 import FileReader from './components/pages/FileReader';
 import ApplicationSplash from './components/modals/ApplicationSplash';
 import { AnimatePresence } from 'framer-motion';
+import { AppLockProvider } from './lib/contexts/AppLockContext';
+import ScreenLockModal from './components/modals/ScreenLockModal';
 
 // Key for session storage to check if app has been loaded before
 const APP_LOADED_KEY = 'cloudnotes-app-loaded';
@@ -57,12 +59,15 @@ function App() {
   }, []);
 
   return (
-    <>
+    <AppLockProvider>
       {/* Splash screen with animation */}
       <AnimatePresence>
         {isLoading && <ApplicationSplash isOpen={true} />}
       </AnimatePresence>
 
+      {/* Application Lock Screen Modal */}
+      <ScreenLockModal />
+
       {/* Render the app regardless of loading state, but it will be hidden behind the splash screen */}
       <div className={isLoading ? 'invisible' : 'visible'}>
         <Router>
@@ -117,7 +122,7 @@ function App() {
           </Routes>
         </Router>
       </div>
-    </>
+    </AppLockProvider>
   );
 }
 

src/frontend/components/form-fields/FormOTP.tsx

@@ -65,7 +65,7 @@ const FormOTP = forwardRef(function FormOTPComponent(
 
       return () => clearTimeout(timeout);
     }
-  }, [autoFocus]);
+  }, [autoFocus, inputRef]);
 
   // Reset the form value when form state changes (e.g., form reset)
   useEffect(() => {
@@ -127,11 +127,14 @@ const FormOTP = forwardRef(function FormOTPComponent(
     }
   }, [ref, focusInput]);
 
+  // Get the current input value
+  const value = form.watch(name) || "";
+
   return (
     <FormField
       control={form.control}
       name={name}
-      render={({ field }) => (
+      render={({ field, fieldState }) => (
         <FormItem className={cn("space-y-2", className)}>
           {label && <FormLabel className="mb-1 select-none">{label}</FormLabel>}
           <FormControl>
@@ -156,7 +159,10 @@ const FormOTP = forwardRef(function FormOTPComponent(
                     <InputOTPSlot 
                       key={index}
                       index={index}
-                      className="h-12 w-12 text-lg border-muted-foreground/40"
+                      className={cn(
+                        "h-12 w-12 text-lg border-muted-foreground/40",
+                        fieldState.error && "border-destructive"
+                      )}
                     />
                   ))}
                 </InputOTPGroup>
@@ -172,7 +178,10 @@ const FormOTP = forwardRef(function FormOTPComponent(
                             <InputOTPSlot 
                               key={index}
                               index={index}
-                              className="h-12 w-12 text-lg border-muted-foreground/40"
+                              className={cn(
+                                "h-12 w-12 text-lg border-muted-foreground/40",
+                                fieldState.error && "border-destructive"
+                              )}
                             />
                           ) : null;
                         })}
@@ -186,7 +195,7 @@ const FormOTP = forwardRef(function FormOTPComponent(
               )}
             </InputOTP>
           </FormControl>
-          <FormMessage className="text-xs mt-16 text-center absolute w-full left-0" />
+          <FormMessage className="text-xs mt-16 text-center absolute w-full left-0 select-none" />
         </FormItem>
       )}
     />

src/frontend/components/modals/PINLockModal.tsx

@@ -17,10 +17,8 @@ export interface PINLockModalProps {
   onSave: (pin: string | null) => void;
 }
 
-// PIN validation schemas with detailed error messages
-const pinDigitSchema = z.string().regex(/^\d{4}$/, {
-  message: "PIN must be exactly 4 digits",
-});
+// PIN validation schema - with empty validation message
+const pinDigitSchema = z.string().regex(/^\d{4}$/, { message: '' });
 
 // Schema for verifying existing PIN
 const verifyPinSchema = z.object({
@@ -97,6 +95,30 @@ const PINLockModal: React.FC<PINLockModalProps> = ({
   // Create refs for the submit buttons
   const submitBtnRef = useRef<HTMLButtonElement>(null);
 
+  // Get current PIN values for each form to check if they're complete
+  const currentVerifyPin = verifyForm.watch('pin') || '';
+  const isVerifyPinComplete = currentVerifyPin.length === 4;
+  
+  const currentCreatePin = createForm.watch('pin') || '';
+  const isCreatePinComplete = currentCreatePin.length === 4;
+  
+  const currentConfirmPin = confirmForm.watch('pin') || '';
+  const isConfirmPinComplete = currentConfirmPin.length === 4;
+
+  // Helper to get whether the submit button should be disabled based on current stage
+  const isSubmitDisabled = () => {
+    switch (stage) {
+      case "verify":
+        return !isVerifyPinComplete;
+      case "create":
+        return !isCreatePinComplete;
+      case "confirm":
+        return !isConfirmPinComplete;
+      default:
+        return true;
+    }
+  };
+
   // Helper to get the active input ref based on current stage
   const getActiveInputRef = () => {
     switch (stage) {
@@ -340,15 +362,15 @@ const PINLockModal: React.FC<PINLockModalProps> = ({
       isOpen={isOpen} 
       onClose={onClose}
       title={
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 select-none">
           <LockIcon size={18} />
           <span>PIN Lock</span>
         </div>
       }
       maxWidth="max-w-md"
     >
       <div className="p-4 space-y-4 overflow-hidden" onKeyDown={handleKeyDown}>
-        <div className="text-center space-y-2">
+        <div className="text-center space-y-2 select-none">
           <h3 className="text-lg font-semibold">{title()}</h3>
           <p className="text-sm text-muted-foreground">{description()}</p>
         </div>
@@ -415,7 +437,7 @@ const PINLockModal: React.FC<PINLockModalProps> = ({
               onClick={handleBackFromConfirm}
               className="w-1/3 mr-2 rounded-full cursor-pointer"
             >
-              Back
+              <span className="select-none">Back</span>
             </Button>
           )}
 
@@ -424,8 +446,9 @@ const PINLockModal: React.FC<PINLockModalProps> = ({
             onClick={handleSubmit}
             className={`${stage === "confirm" ? "w-2/3" : "w-full"} rounded-full h-10 font-medium transition-all cursor-pointer`}
             ref={submitBtnRef}
+            disabled={isSubmitDisabled()}
           >
-            {buttonText()}
+            <span className="select-none">{buttonText()}</span>
           </Button>
         </div>
       </div>