Валидация вводимого имени пользователя

app/components/SettingsInput/SettingsInput.tsx

@@ -24,6 +24,8 @@ export interface SettingsInputDefaultProps {
     mt?: StyleProp<MantineSpacing>;
     rightSection?: ReactNode;
     type?: HTMLInputTypeAttribute;
+    onErrorStateChange?: (error: boolean) => void;
+    regexp?: RegExp;
 }
 export interface SettingsInputGroupProps {
     mt?: StyleProp<MantineSpacing>;
@@ -260,7 +262,6 @@ function SettingsInputClickable(
 function SettingsInputDefault(props : SettingsInputDefaultProps) {
     const colors = useRosettaColors();
     const input = useRef<any>(undefined);
-
     const onClick = (e : MouseEvent) => {
         e.stopPropagation();
         if(!props.disabled){
@@ -268,6 +269,19 @@ function SettingsInputDefault(props : SettingsInputDefaultProps) {
             return;
         }
     }
+
+    const onChange = (e) => {
+        let value = e.target.value;
+        if(props.regexp && !props.regexp.test(value)) {
+            props.onErrorStateChange && props.onErrorStateChange(true);
+            props.onChange && props.onChange(e);
+        }else{
+            props.onErrorStateChange && props.onErrorStateChange(false);
+            console.info('fa');
+            props.onChange && props.onChange(e);
+        }
+    }
+
     return (<>
         <Paper mt={props.mt} style={props.style} withBorder styles={{
                 root: {
@@ -298,7 +312,7 @@ function SettingsInputDefault(props : SettingsInputDefaultProps) {
                 {!props.rightSection && (
                     <Input type={props.type} defaultValue={!props.onChange ? props.value : undefined} value={!props.onChange ? undefined : props.value} ref={input} disabled={props.disabled} onClick={(e) => {
                          onClick(e)
-                    }} onChange={props.onChange} variant={'unstyled'} spellCheck={false} color="gray" classNames={{
+                    }} onChange={onChange} variant={'unstyled'} spellCheck={false} color="gray" classNames={{
                     input: classes.input
                 }} placeholder={props.placeholder}></Input>)
                 }