Готова форма добавления нового сотрудника

Short-Tracker · Feb 1, 2024 · 57e7c2c · 57e7c2c
1 parent 1e7cda7
commit 57e7c2c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git 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
@@ -1,15 +1,19 @@
+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 = '';
   const lastName = '';
   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
@@ -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>
   );
 };