Polish mobile and web experience

apps/mobile/app/(auth)/reset-password.tsx

@@ -21,7 +21,11 @@ import { useAppTheme } from "@/contexts/ThemeContext";
 import { resetPassword } from "@/lib/auth-api";
 import type { ThemeColors } from "@/lib/theme-palette";
 import { useThemedStyles } from "@/lib/use-themed-styles";
-import { isRequiredString, isValidPassword } from "@/lib/form-validation";
+import {
+  isRequiredString,
+  isValidPassword,
+  useFieldVisibility,
+} from "@/lib/form-validation";
 
 export default function ResetPasswordScreen() {
   const styles = useThemedStyles(createResetPasswordStyles);
@@ -33,6 +37,7 @@ export default function ResetPasswordScreen() {
   const [success, setSuccess] = useState(false);
   const [loading, setLoading] = useState(false);
   const [serverReady, setServerReady] = useState(true);
+  const { touch, visible, markSubmitted } = useFieldVisibility();
 
   useEffect(() => {
     if (typeof tokenParam === "string" && tokenParam.length > 0) {
@@ -56,6 +61,7 @@ export default function ResetPasswordScreen() {
     confirmPassword.length > 0;
 
   async function handleSubmit() {
+    markSubmitted();
     if (!canSubmit) return;
     setError(null);
 
@@ -111,30 +117,33 @@ export default function ResetPasswordScreen() {
                     autoCapitalize="none"
                     value={token}
                     onChangeText={setToken}
+                    onBlur={() => touch("token")}
                     placeholder="Paste token from email"
                     required
-                    error={tokenError}
+                    error={visible("token") ? tokenError : undefined}
                   />
                   <Input
                     label="New password"
                     secureTextEntry
                     value={password}
                     onChangeText={setPassword}
+                    onBlur={() => touch("password")}
                     placeholder="At least 8 characters"
                     required
-                    error={passwordError}
+                    error={visible("password") ? passwordError : undefined}
                   />
                   <Input
                     label="Confirm password"
                     secureTextEntry
                     value={confirmPassword}
                     onChangeText={setConfirmPassword}
+                    onBlur={() => touch("confirmPassword")}
                     placeholder="Repeat password"
                     required
-                    error={confirmError}
+                    error={visible("confirmPassword") ? confirmError : undefined}
                   />
 
-                  {error ? <Text style={styles.error}>{error}</Text> : null}
+                  {error ? <Text selectable style={styles.error}>{error}</Text> : null}
 
                   <Button
                     title="Update password"