finish auth routes, create cookie token, fix folder structure, add context to FE

5 files changed, 52 insertions, 57 deletions

diff --git a/client/src/login/api/login.js b/client/src/login/api/login.js
new file mode 100644
index 0000000..4ed36a7
--- /dev/null
+++ b/client/src/login/api/login.js
@@ -0,0 +1,11 @@
+export default (email, password) => (
+  fetch('/api/user/login', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json;charset=utf-8'
+    },
+    body: JSON.stringify({ email, password }),
+  })
+    .then(() => window.location.href = "/admin")
+    .catch(() => {})
+);
diff --git a/client/src/login/data/texts.js b/client/src/login/data/texts.js
deleted file mode 100644
index e69de29..0000000
--- a/client/src/login/data/texts.js
+++ /dev/null
diff --git a/client/src/login/jsx/App.jsx b/client/src/login/jsx/App.jsx
index a0109dd..e33e6c2 100644
--- a/client/src/login/jsx/App.jsx
+++ b/client/src/login/jsx/App.jsx
@@ -3,36 +3,34 @@ import ReactDOM from 'react-dom';
 
 import "../scss/index.scss";
 
-import texts from '../../common/data/texts.js';
-import TopBar from '../../common/jsx/TopBar.jsx';
-import Info from '../../common/jsx/Info.jsx';
+import TopBar from '../../admin/jsx/TopBar.jsx';
+import Info from '../../admin/jsx/Info.jsx';
 import LoginPanel from './LoginPanel.jsx';
+import Context from '../../admin/context';
+import { defaultLanguage } from '../../admin/data/translations';
 
 const App = () => {
-  const [lang, setLang] = useState('en');
+  const [lang, setLang] = useState(defaultLanguage);
   const [info, setInfo] = useState('login-info');
   const [hover, setHover] = useState('');
   const [user, setUser] = useState(null);
-  const t = (key) => texts[lang][key] || texts['en'][key];
 
   return (
-    <div className="main">
-      <TopBar
-        lang={lang}
-        setLang={setLang}
-        setHover={setHover}
-        t={t}
-      />
-      <LoginPanel
-        setUser={setUser}
-        t={t}
-      />
-      <Info
-        info={info}
-        hover={hover}
-        t={t}
-      />
-    </div>
+    <Context.Provider value={{ lang, setHover, setInfo }}>
+      <div className="main">
+        <TopBar
+          lang={lang}
+          setLang={setLang}
+        />
+        <LoginPanel
+          setUser={setUser}
+        />
+        <Info
+          info={info}
+          hover={hover}
+        />
+      </div>
+    </Context.Provider>
   )
 };
 
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"
diff --git a/client/src/login/scss/index.scss b/client/src/login/scss/index.scss
index 6a7eb52..d904eb1 100644
--- a/client/src/login/scss/index.scss
+++ b/client/src/login/scss/index.scss
@@ -1,8 +1,8 @@
-@import '../../common/scss/reset';
-@import '../../common/scss/colors';
-@import '../../common/scss/globals';
-@import '../../common/scss/forms';
-@import '../../common/scss/main';
-@import '../../common/scss/info';
-@import '../../common/scss/topBar';
+@import '../../admin/scss/reset';
+@import '../../admin/scss/colors';
+@import '../../admin/scss/globals';
+@import '../../admin/scss/forms';
+@import '../../admin/scss/main';
+@import '../../admin/scss/info';
+@import '../../admin/scss/topBar';
 @import 'loginPanel';