From 57e7c2c0c46e4b1007a93acffd22bfb068a061ed Mon Sep 17 00:00:00 2001
From: Dinara Mikhailova <d9268843743@yandex.ru>
Date: Thu, 1 Feb 2024 09:21:38 +0100
Subject: [PATCH] =?UTF-8?q?=D0=93=D0=BE=D1=82=D0=BE=D0=B2=D0=B0=20=D1=84?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BC=D0=B0=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BD=D0=BE=D0=B2=D0=BE=D0=B3=D0=BE?=
 =?UTF-8?q?=20=D1=81=D0=BE=D1=82=D1=80=D1=83=D0=B4=D0=BD=D0=B8=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewEmployee/NewEmployee.module.scss        | 13 +++++++++++--
 src/components/NewEmployee/NewEmployee.tsx     | 18 ++++++++++++++++--
 src/pages/Login/Login.tsx                      |  2 --
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/NewEmployee/NewEmployee.module.scss b/src/components/NewEmployee/NewEmployee.module.scss
index dc2459a..ba98670 100644
--- a/src/components/NewEmployee/NewEmployee.module.scss
+++ b/src/components/NewEmployee/NewEmployee.module.scss
@@ -10,6 +10,7 @@
 
 .newEmployeeWrapper {
   display: flex;
+  gap: 16px;
   justify-content: space-between;
 }
 
@@ -20,12 +21,20 @@
   @include m.BodyLarge;
 }
 
+.invalidInput {
+  border: 1px solid v.$error;
+}
+
 .newEmployeeAddButton {
   width: 246.5px;
-  // background-color: v.$accent-color;
-  // color: v.$white-color;
 }
 
 .newEmployeeButton {
   width: 246.5px;
 }
+
+.errorText {
+  color: v.$error;
+  @include m.Description;
+  margin-top: -10px;
+}
diff --git a/src/components/NewEmployee/NewEmployee.tsx b/src/components/NewEmployee/NewEmployee.tsx
index 299a5b7..8deca94 100644
--- a/src/components/NewEmployee/NewEmployee.tsx
+++ b/src/components/NewEmployee/NewEmployee.tsx
@@ -1,8 +1,10 @@
+import { useState } from 'react';
 import UniversalInput from 'ui-lib/Inputs/UniversalInput/UniversalInput';
 import EmailInput from 'ui-lib/Inputs/EmailInput/EmailInput';
 import PasswordInput from 'ui-lib/Inputs/PasswordInput/PasswordInput';
 import { UniversalButton } from 'ui-lib/Buttons';
 import styles from './NewEmployee.module.scss';
+import additionalStyles from '../../ui-lib/Inputs/UniversalInput/UniversalInput.module.scss';
 
 const NewEmployee = () => {
   const name = '';
@@ -10,6 +12,8 @@ const NewEmployee = () => {
   const email = '';
   const nickname = '';
   const password = '';
+  const errorText = '';
+  const [isValid, setIslValid] = useState(false);
   return (
     <form className={styles.newEmployee}>
       <div className={styles.newEmployeeContainer}>
@@ -29,8 +33,18 @@ const NewEmployee = () => {
             width={246.5}
           />
         </div>
-        <EmailInput id={email} />
-        <UniversalInput id={nickname} label='Telegram' placeholder='@BorKate' />
+        <UniversalInput
+          className={`${additionalStyles.input} ${!isValid ? styles.invalidInput : ''}`}
+          id={nickname}
+          label='Telegram'
+          placeholder='@BorKate'
+        />
+        {!isValid && <p className={styles.errorText}>{errorText}</p>}
+        <EmailInput
+          className={`${additionalStyles.input} ${!isValid ? styles.invalidInput : ''}`}
+          id={email}
+        />
+        {!isValid && <p className={styles.errorText}>{errorText}</p>}
         <PasswordInput id={password} />
         <div className={styles.newEmployeeWrapper}>
           <UniversalButton className={styles.newEmployeeAddButton} width={246.5}>
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 542c1d3..0bbc097 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -3,7 +3,6 @@ import Logo from 'components/Logo/Logo';
 import AuthorizationForm from 'components/Forms/AuthorizationForm/AuthorizationForm';
 import { useNavigate } from 'react-router-dom';
 import { useSelector } from 'services/hooks';
-import NewEmployee from 'components/NewEmployee/NewEmployee';
 import styles from './Login.module.scss';
 
 const Login = () => {
@@ -21,7 +20,6 @@ const Login = () => {
       </div>
       <h1 className={styles.Login__title}>Добро пожаловать в Шорт-трекер</h1>
       <AuthorizationForm />
-      <NewEmployee />
     </main>
   );
 };