Field color change triggered by mistake

alexeevrevan · Aug 20, 2023 · ff0fbc7 · ff0fbc7
1 parent 57f8eda
commit ff0fbc7
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 28 deletions.
diff --git a/images/error.svg b/images/error.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,11 +16,14 @@ import Forgot_Password from "./components/Forgot_Password";
 import Sign_In from "./components/Sign_In";
 import Footer from "./components/Footer";
 import Footer_Text from "./components/Footer_Text";
-import {useForm, SubmitHandler} from "react-hook-form";
+import {useForm, SubmitHandler, SubmitErrorHandler} from "react-hook-form";
 import React, {useState} from "react";
 import Visibility from "./components/Visibility";
 import Styled_Submit from "./components/Styled_Submit";
 import ErrorText from "./components/Error_Text";
+import ErrorBanner from "./components/Error_Banner";
+import ErrorImage from "../images/error.svg"
+
 
 
 export const App = () => {
@@ -48,22 +51,11 @@ export const App = () => {
     } = useForm<FormValues>();
 
 
-
-    ///Проверка капчи
-    const isCaptcha = data => {
-        if(data === '50305'){
-            return true
-        }
-        else{
-            return false
-        }
-    };
-
-
-    const onSubmit = (data) => {
+    const onSubmit: SubmitHandler<FormValues> = data => {
         alert(JSON.stringify(data))
     }
 
+
     return (
         <div>
             <Wrapper>
@@ -77,34 +69,49 @@ export const App = () => {
 
                         <Title>Вход в аккаунт</Title>
 
-                        <form onSubmit={handleSubmit(onSubmit)}>
+                        <form onSubmit={handleSubmit(onSubmit )}>
+
+                            {errors?.captcha  && <ErrorBanner><img src={ErrorImage}/> <div><p>Указан неверный код с картинки Пожалуйста, повторите попытку</p></div> </ErrorBanner>}
 
                             <Input_Field>
-                                <Small_Grey_Text>Е-mail</Small_Grey_Text>
-                                <Input_text placeholder = "company.com" {...register('email', {pattern:/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/})}></Input_text>
+
+                                <Small_Grey_Text className={errors.email ? 'inValid' : 'Valid'}>Е-mail</Small_Grey_Text>
+                                <Input_text
+                                    className={errors.email ? 'inValid' : 'Valid'}
+                                    placeholder = "company.com"
+                                    {...register("email", {pattern:/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/, required: true})}>
+
+                                </Input_text>
                                 <div style={{height: '16px'}}>{errors?.email && <ErrorText>Неправильное имя пользователя</ErrorText>}</div>
                             </Input_Field>
 
                             <Input_Field>
-                                <Small_Grey_Text>Пароль</Small_Grey_Text>
-                                <Input_text placeholder = "●●●●●●●●●●●●●●●●" type={(!open ? 'password' : 'text')}
-                                            {...register('password')}></Input_text>
+                                <Small_Grey_Text className={errors.password ? 'inValid' : 'Valid'}>Пароль</Small_Grey_Text>
+                                <Input_text
+
+                                    className={errors.password ? 'inValid' : 'Valid'}
+                                    placeholder = "●●●●●●●●●●●●●●●●"
+
+                                    type={(!open ? 'password' : 'text')}
+
+                                    {...register('password')}></Input_text>
 
                                 {
                                     ///Меняем иконку (открытый/закрытый глаз)
                                     !open ? <Visibility src={Visibility_On} onClick={toggle}/> : <Visibility src={Visibility_Off} onClick={toggle}/>
                                 }
-
                             </Input_Field>
 
                             <img src={Captcha} style={{position: 'relative',left: "-3px"}} alt={''}/>
 
 
                             <Input_Field>
-                                <Small_Grey_Text>Цифры с картинки</Small_Grey_Text>
-                                <Input_text placeholder = "00000" {...register('captcha', {required: true, validate: isCaptcha})}></Input_text>
+                                <Small_Grey_Text className={errors.captcha ? 'inValid' : 'Valid'}>Цифры с картинки</Small_Grey_Text>
+                                <Input_text
+                                    className={errors.captcha ? 'inValid' : 'Valid'}
+                                    placeholder="00000" {...register('captcha', {required: true})}
+                                    aria-invalid={!!errors.captcha}></Input_text>
                                 <div style={{height: '12px', alignSelf: 'stretch'}}>{errors?.captcha && <ErrorText>Необходимо заполнить это поле</ErrorText>}</div>
-                                <div style={{height: '12px', alignSelf: 'stretch'}}></div>
                             </Input_Field>
 
 

diff --git a/src/components/Error_Banner.tsx b/src/components/Error_Banner.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const ErrorBanner = styled.div`
+  background: #E85C4A;
+  display: flex;
+  width: 339px;
+  height: 80px;
+  color: #E11900;
+  font-size: 14px;
+  font-weight: 400;
+  border-radius: 16px;
+  
+  & img{
+    position: relative;
+    height: 24px;
+    width: 24px;
+    left: 20px;
+    top: 20px
+  }
+  
+  & div{
+    top: 6px;
+    left: 28px;
+    width: 300px;
+    position: relative;
+    color: white;
+  }
+`
+
+
+
+
+
+
+
+export default ErrorBanner
diff --git a/src/components/Input_text.tsx b/src/components/Input_text.tsx
@@ -1,24 +1,32 @@
 import React from "react";
 import styled from "styled-components";
 import {App} from "../App";
+import {Simulate} from "react-dom/test-utils";
 
 const InputText = styled.input`
-  background: #F4F4F4 !important;
+  background: #F4F4F4;
   height: 36px;
   width: 100%;
   border-radius: 4px;
   border: none ;
   padding-left: 16px;
   font-weight: 500;
   
+  &.inValid{
+    background-color: #FFEFED;
+    border: none;
+    outline: 2px solid #E85C4A;
+  }
+  
 `
 
 
+
 //background: #F4F4F4;
 ///   &:focus{
 //     outline: none;
 //     border: 2px solid red;
 //   }
 
 
-export default InputText
+export default InputText;
diff --git a/src/components/Login_Frame.tsx b/src/components/Login_Frame.tsx
@@ -5,8 +5,8 @@ import styled from "styled-components";
 const Login_Frame = styled.div`
   width: 320px;
   height: 479px;
-  margin-top: 100px;
-  margin-bottom: 176px;
+  margin-top: 74px;
+  margin-bottom: 250px;
   margin-right: 79px;
   
 `

diff --git a/src/components/Small_Grey_Text.tsx b/src/components/Small_Grey_Text.tsx
@@ -7,6 +7,10 @@ const SmallGreyText = styled.p`
   font-size: 12px;
   font-feature-settings: 'clig' off, 'liga' off;
   font-weight: 400;
+  
+  &.inValid{
+    color: #E11900;
+  }
 `