e2e tests added. Core & Authentication

src/components/FilledInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { X } from 'lucide-react';
 
 interface FilledInputProps {
@@ -19,6 +19,8 @@ interface FilledInputProps {
 }
 
 const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onClear, onFocus, onBlur, type = "number", icon, autoFocus, step, inputMode, autocapitalize, autoComplete, rightElement }) => {
+    const id = useId();
+
     const handleClear = () => {
         const syntheticEvent = {
             target: { value: '' }
@@ -29,10 +31,11 @@ const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onCle
 
     return (
         <div className="relative group bg-surface-container-high rounded-t-lg border-b border-outline-variant hover:bg-white/5 focus-within:border-primary transition-colors">
-            <label className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
+            <label htmlFor={id} className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
                 {icon} {label}
             </label>
             <input
+                id={id}
                 type={type}
                 step={step}
                 inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}