From 1870f3fdf43707a15fda0f609a021f516f45eb63 Mon Sep 17 00:00:00 2001
From: Piotr Russ <mail@pruss.it>
Date: Wed, 18 Nov 2020 23:15:38 +0100
Subject: finish auth routes, create cookie token, fix folder structure, add
 context to FE

---
 client/src/login/jsx/App.jsx        | 42 ++++++++++++++++++-------------------
 client/src/login/jsx/LoginPanel.jsx | 42 +++++++++++++------------------------
 2 files changed, 34 insertions(+), 50 deletions(-)

(limited to 'client/src/login/jsx')

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"
-- 
cgit v1.2.3