1 files changed, 14 insertions, 28 deletions

diff --git a/client/src/login/jsx/LoginPanel.jsx b/client/src/login/jsx/LoginPanel.jsx
index 296dc0e..e90a5c4 100644
--- a/client/src/login/jsx/LoginPanel.jsx
+++ b/client/src/login/jsx/LoginPanel.jsx
@@ -1,36 +1,22 @@
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useContext} from 'react';
+import login from '../api/login';
+import { t } from '../../admin/hocs';
 
-const LoginPanel = ({setUser, t}) => {
-  const [username, setUsername] = useState('');
+const LoginPanel = ({setUser}) => {
+  const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [active, setActive] = useState(false);
 
   useEffect(() => {
-    if (username.length > 4 && password.length > 4) {
-      setActive(true);
-    } else {
-      setActive(false);
-    }
-  }, [username, password])
-
-  const usernameValidation = (e) => {
-    const value = e.target.value;
-    const regex = /^[0-9a-zA-Z]+$/;
-
-    if ((value.length < 20 && value.match(regex)) || value === "") {
-      setUsername(value);
-    }
-  };
-
-  const passwordValidation = (e) => {
-    e.target.value.length < 20 && setPassword(e.target.value);
-  };
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    emailRegex.test(email) && password.length > 5
+      ? setActive(true)
+      : setActive(false);
+  }, [email, password])
 
   const submit = (e) => {
     e.preventDefault();
-    if (username === 'admin' && password === 'admin') {
-      setUser('admin');
-    }
+    login(email, password);
   }
 
   return (
@@ -41,19 +27,19 @@ const LoginPanel = ({setUser, t}) => {
         </p>
         <div className="text-input">
           <input
-            onChange={usernameValidation}
+            onChange={e => setEmail(e.target.value)}
             placeholder={t('user')}
             id="admin-user-name"
             name="admin-user-name"
             type="text"
             className="text-input-field"
-            value={username}
+            value={email}
           />
           <label htmlFor="admin-user-name" className="text-input-label">{t('user')}</label>
         </div>
         <div className="text-input">
           <input
-            onChange={passwordValidation}
+            onChange={e => setPassword(e.target.value)}
             placeholder={t('password')}
             id="admin-password"
             name="admin-password"