ЛК авторизация. Запрещена автоподстановка в регристрацию и настроку кабинета. Глазики-скрывашки пароля. +7 в номере телефона при регистрации пользователя

src/components/passwordInput.tsx

@@ -0,0 +1,120 @@
+import {
+    FormControl,
+    IconButton,
+    InputLabel,
+    SxProps,
+    TextField,
+    TextFieldProps,
+    Theme,
+    useMediaQuery,
+    useTheme,
+  } from "@mui/material";
+  import * as React from 'react';
+  import InputAdornment from '@mui/material/InputAdornment';
+  import Visibility from '@mui/icons-material/Visibility';
+  import VisibilityOff from '@mui/icons-material/VisibilityOff';
+  
+  interface Props {
+    id: string;
+    label?: string;
+    bold?: boolean;
+    gap?: string;
+    color?: string;
+    FormInputSx?: SxProps<Theme>;
+    TextfieldProps: TextFieldProps;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+  }
+  
+  export default function ({
+    id,
+    label,
+    bold = false,
+    gap = "10px",
+    onChange,
+    TextfieldProps,
+    color,
+    FormInputSx,
+  }: Props) {
+    const theme = useTheme();
+    const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  
+    const labelFont = upMd
+      ? bold
+        ? theme.typography.p1
+        : { ...theme.typography.body1, fontWeight: 500 }
+      : theme.typography.body2;
+  
+    const placeholderFont = upMd ? undefined : { fontWeight: 400, fontSize: "16px", lineHeight: "19px" };
+
+    const [showPassword, setShowPassword] = React.useState(false);
+
+    const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+    const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+    };
+  
+    return (
+    
+      <FormControl
+        fullWidth
+        variant="standard"
+        sx={{
+          gap,
+          // mt: "10px",
+          ...FormInputSx,
+          position: "relative"
+        }}
+      >
+        <InputLabel
+          shrink
+          htmlFor={id}
+          sx={{
+            position: "inherit",
+            color: "black",
+            transform: "none",
+            ...labelFont,
+          }}
+        >
+          {label}
+        </InputLabel>
+        <TextField
+          {...TextfieldProps}
+          fullWidth
+          id={id}
+          sx={{
+            "& .MuiInputBase-root": {
+              height: "48px",
+              borderRadius: "8px",
+            },
+          }}
+          InputProps={{
+            endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    aria-label="toggle password visibility"
+                    onClick={handleClickShowPassword}
+                    onMouseDown={handleMouseDownPassword}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+            ),
+            sx: {
+              backgroundColor: color,
+              borderRadius: "8px",
+              height: "48px",
+              py: 0,
+              color: "black",
+              ...placeholderFont,
+            },
+          }}
+          onChange={onChange}
+          type={showPassword ? 'text' : 'password'}
+        />
+        
+      </FormControl>
+    );
+  }
+  

src/pages/AccountSettings/AccountSettings.tsx

@@ -1,6 +1,7 @@
 import { Box, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
 import CustomButton from "@components/CustomButton";
 import InputTextfield from "@components/InputTextfield";
+import PasswordInput from "@components/passwordInput";
 import SectionWrapper from "@components/SectionWrapper";
 import ComplexNavText from "@root/components/ComplexNavText";
 import { openDocumentsDialog, sendUserData, setSettingsField, useUserStore } from "@root/stores/user";
@@ -46,7 +47,6 @@ export default function AccountSettings() {
             }}
         >
             <DocumentsDialog />
-            <ComplexNavText text1="Настройки аккаунта" />
             <Typography variant="h4" mt="20px">Настройки аккаунта</Typography>
             <Box sx={{
                 mt: "40px",
@@ -145,13 +145,13 @@ export default function AccountSettings() {
                             label="Телефон"
                             {...textFieldProps}
                         />
-                        <InputTextfield
+                        <PasswordInput
                             TextfieldProps={{
                                 placeholder: "Не менее 8 символов",
                                 value: fields.password.value || "",
                                 helperText: fields.password.touched && fields.password.error,
                                 error: fields.password.touched && Boolean(fields.password.error),
-                                type: "password",
+                                autoComplete: "new-password"
                             }}
                             onChange={e => setSettingsField("password", e.target.value)}
                             id="password"

src/pages/auth/Signin.tsx

@@ -14,6 +14,7 @@ import { setUserId, useUserStore } from "@root/stores/user";
 import { getMessageFromFetchError } from "@frontend/kitui";
 import { makeRequest } from "@frontend/kitui";
 import { cardShadow } from "@root/utils/themes/shadow";
+import PasswordInput from "@root/components/passwordInput";
 
 interface Values {
   login: string;
@@ -147,7 +148,7 @@ export default function SigninDialog() {
           label="Логин"
           gap={upMd ? "10px" : "10px"}
         />
-        <InputTextfield
+        <PasswordInput
           TextfieldProps={{
             value: formik.values.password,
             placeholder: "Не менее 8 символов",

src/pages/auth/Signup.tsx

@@ -14,6 +14,7 @@ import { setUserId, useUserStore } from "@root/stores/user";
 import { getMessageFromFetchError } from "@frontend/kitui";
 import { makeRequest } from "@frontend/kitui";
 import { cardShadow } from "@root/utils/themes/shadow";
+import PasswordInput from "@root/components/passwordInput";
 
 
 interface Values {
@@ -50,7 +51,7 @@ export default function SignupDialog() {
                 body: {
                     login: values.login.trim(),
                     password: values.password.trim(),
-                    phoneNumber: "-",
+                    phoneNumber: "+7",
                 },
                 useToken: false,
                 withCredentials: true,
@@ -146,14 +147,14 @@ export default function SignupDialog() {
                     label="Логин"
                     gap={upMd ? "10px" : "10px"}
                 />
-                <InputTextfield
+                <PasswordInput
                     TextfieldProps={{
                         value: formik.values.password,
                         placeholder: "Не менее 8 символов",
                         onBlur: formik.handleBlur,
                         error: formik.touched.password && Boolean(formik.errors.password),
                         helperText: formik.touched.password && formik.errors.password,
-                        type: "password",
+                        autoComplete: "new-password"
                     }}
                     onChange={formik.handleChange}
                     color="#F2F3F7"
@@ -161,14 +162,14 @@ export default function SignupDialog() {
                     label="Пароль"
                     gap={upMd ? "10px" : "10px"}
                 />
-                <InputTextfield
+                <PasswordInput
                     TextfieldProps={{
                         value: formik.values.repeatPassword,
                         placeholder: "Не менее 8 символов",
                         onBlur: formik.handleBlur,
                         error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
                         helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
-                        type: "password",
+                        autoComplete: "new-password"
                     }}
                     onChange={formik.handleChange}
                     color="#F2F3F7"