From ff0fbc71f66b8ea36ecc127d32d77588ce1a4716 Mon Sep 17 00:00:00 2001
From: Alexander Alexeev <san73rus@gmail.com>
Date: Sun, 20 Aug 2023 22:13:21 +0400
Subject: [PATCH] Field color change triggered by mistake

---
 images/error.svg                   | 10 ++++++
 src/App.tsx                        | 55 +++++++++++++++++-------------
 src/components/Error_Banner.tsx    | 38 +++++++++++++++++++++
 src/components/Input_text.tsx      | 12 +++++--
 src/components/Login_Frame.tsx     |  4 +--
 src/components/Small_Grey_Text.tsx |  4 +++
 6 files changed, 95 insertions(+), 28 deletions(-)
 create mode 100644 images/error.svg
 create mode 100644 src/components/Error_Banner.tsx

diff --git a/images/error.svg b/images/error.svg
new file mode 100644
index 0000000..6f3d73c
--- /dev/null
+++ b/images/error.svg
@@ -0,0 +1,10 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_129_7534)">
+<path d="M12.5977 2.0249C7.07766 2.0249 2.59766 6.5049 2.59766 12.0249C2.59766 17.5449 7.07766 22.0249 12.5977 22.0249C18.1177 22.0249 22.5977 17.5449 22.5977 12.0249C22.5977 6.5049 18.1177 2.0249 12.5977 2.0249ZM13.5977 17.0249H11.5977V15.0249H13.5977V17.0249ZM13.5977 13.0249H11.5977V7.0249H13.5977V13.0249Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_129_7534">
+<rect width="24" height="24" fill="white" transform="translate(0.597656 0.0249023)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/App.tsx b/src/App.tsx
index ed7a763..9bdc4a0 100644
--- 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
new file mode 100644
index 0000000..b327ec5
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/src/components/Input_text.tsx b/src/components/Input_text.tsx
index 923ee30..74922e5 100644
--- a/src/components/Input_text.tsx
+++ b/src/components/Input_text.tsx
@@ -1,9 +1,10 @@
 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;
@@ -11,9 +12,16 @@ const InputText = styled.input`
   padding-left: 16px;
   font-weight: 500;
   
+  &.inValid{
+    background-color: #FFEFED;
+    border: none;
+    outline: 2px solid #E85C4A;
+  }
+  
 `
 
 
+
 //background: #F4F4F4;
 ///   &:focus{
 //     outline: none;
@@ -21,4 +29,4 @@ const InputText = styled.input`
 //   }
 
 
-export default InputText
\ No newline at end of file
+export default InputText;
\ No newline at end of file
diff --git a/src/components/Login_Frame.tsx b/src/components/Login_Frame.tsx
index d0c91ea..1843aae 100644
--- 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
index 39d2f35..1a04cf5 100644
--- 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;
+  }
 `